カスタムウォレットリスト

ウォレットリストのカスタマイズ

必要なコネクタを持つウォレットのリストを構築するために、'@rainbow-me/rainbowkit/wallets' から個別のウォレットと connectorsForWallets 関数をインポートできます。この方法で、どのウォレットをどの順番で表示するかを完全に制御できます。

例えば、Rainbow と一般的なフォールバックウォレットのみを表示することができます。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

その後、Wagmi の createConfig にコネクタを渡すことができます。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig } from 'wagmi';

const connectors = connectorsForWallets(/* ... */);

const config = createConfig({
  connectors,
  {/* Wagmi config */}
});

const queryClient = new QueryClient();

const App = () => (
  <WagmiProvider config={config}>
    <QueryClientProvider client={queryClient}>
      <RainbowKitProvider {...etc}>
        {/* Your App */}
      </RainbowKitProvider>
    </QueryClientProvider>
  </WagmiProvider>
);

内蔵ウォレット

以下のウォレットは wallet オブジェクトを介して提供されます。

一般ウォレット

以下のウォレットは特定のアプリではなく、一般的な接続方法に対応しています。そのため、これらのウォレットは常に含めることをお勧めします。

ウォレットコネクト

これは、他のウォレットリストに提供されていないウォレットコネクトベースのウォレットのために設計されたフォールバックウォレットオプションです。

ウォレットコネクトベースのすべてのウォレットがサポートされるように、常にこのウォレットをリストに含めることをお勧めします。

import { walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';

インジェクテッドウォレット

これは、window.ethereum が存在するが他のウォレットリストに提供されていないシナリオのために設計されたフォールバックウォレットオプションです。このウォレットは、フォールバックが必要でないか、インジェクテッドウォレットが利用できない場合にはリストから自動的に非表示になります。

すべてのインジェクテッドウォレットがサポートされるように、常にこのウォレットをリストに含めることをお勧めします。

import { injectedWallet } from '@rainbow-me/rainbowkit/wallets';

セーフウォレット

SafeアプリをサポートするdAppsには、ユーザーがSafeボールトやマルチシグに簡単に接続できるようにsafeWalletオプションを含めてください。SafeオプションはSafeウォレットブラウザ環境にのみ表示されます。

import { safeWallet } from '@rainbow-me/rainbowkit/wallets';

特定のウォレット

以下のウォレットは（アルファベット順に）wallet オブジェクトを介して提供されます。

1inchウォレット

import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';

Backpack

import { backpackWallet } from '@rainbow-me/rainbowkit/wallets';

ベースアカウント（旧称: Coinbase Wallet）

このウォレットコネクタは、Coinbase Smart Walletの進化形であるベースアカウントをサポートします。シームレスな認証と、サブアカウントや支出許可といった強化された機能を提供します。

設定オプションはベースアカウントSDKリファレンスと一致します。

import { baseAccount } from '@rainbow-me/rainbowkit/wallets';

// Configure attribution (choose one approach)
baseAccount.preference = {
  attribution: { auto: true }, // Smart Wallet generates origin-based identifier
};

// Or use custom attribution
baseAccount.preference = {
  attribution: { dataSuffix: '0x1234567890abcdef' }, // 16-byte hex identifier
};

// Configure sub-accounts
baseAccount.subAccounts = {
  creation: 'on-connect', // or 'manual'
  defaultAccount: 'sub', // or 'universal'
  funding: 'spend-permissions', // or 'manual'
};

// Configure paymaster URLs for gasless transactions
baseAccount.paymasterUrls = {
  [base.id]: 'https://api.developer.coinbase.com/rpc/v1/base/...',
};

BeraSig

import { berasigWallet } from '@rainbow-me/rainbowkit/wallets';

ベストウォレット

import { bestWallet } from '@rainbow-me/rainbowkit/wallets';

Bifrost Wallet

import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';

バイナンスWeb3ウォレット

import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';

Bitget

import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';

Bitski

import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';

Bitverse

import { bitverseWallet } from '@rainbow-me/rainbowkit/wallets';

Bloomウォレット

import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';

Braveウォレット

import { braveWallet } from '@rainbow-me/rainbowkit/wallets';

Bybitウォレット

import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';

Coin98ウォレット

import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';

コンパスウォレット

import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';

コア

import { coreWallet } from '@rainbow-me/rainbowkit/wallets';

CTRLウォレット

import { ctrlWallet } from '@rainbow-me/rainbowkit/wallets';

Dawnウォレット

import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';

Enkryptウォレット

import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';

FoxWallet

import { foxWallet } from '@rainbow-me/rainbowkit/wallets';

Frameウォレット

import { frameWallet } from '@rainbow-me/rainbowkit/wallets';

Frontierウォレット

import { frontierWallet } from '@rainbow-me/rainbowkit/wallets';

Gateウォレット

import { gateWallet } from '@rainbow-me/rainbowkit/wallets';

ジェミニウォレット

このスマートウォレットコネクターは、keys.gemini.comでパスキーを通じたシームレスな認証を可能にします。ダウンロード、拡張機能、APIキーは不要です。そのまま機能します。

appName パラメーターはdAppを識別するために必須であり、appIcon は接続体験をブランディングするために任意です。

import { geminiWallet } from '@rainbow-me/rainbowkit/wallets';

const gemini = geminiWallet({
  appName: 'My App',
  appIcon: 'https://my-app.com/logo.png', // Optional
});

imToken

import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';

ioPayウォレット

import { iopayWallet } from '@rainbow-me/rainbowkit/wallets';

Kaiaウォレット

import { kaiaWallet } from '@rainbow-me/rainbowkit/wallets';

Kaikas

import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';

Krakenウォレット

import { krakenWallet } from '@rainbow-me/rainbowkit/wallets';

Kresusウォレット

import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';

Ledger Live

import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';

Magic Edenウォレット

import { magicEdenWallet } from '@rainbow-me/rainbowkit/wallets';

MetaMask

import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';

MEWウォレット

import { mewWallet } from '@rainbow-me/rainbowkit/wallets';

Novaウォレット

import { novaWallet } from '@rainbow-me/rainbowkit/wallets';

OKXウォレット

import { okxWallet } from '@rainbow-me/rainbowkit/wallets';

オムニ

import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

OneKey

import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';

ParaSwap

import { paraSwapWallet } from '@rainbow-me/rainbowkit/wallets';

Phantom

import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';

ポルト

import { portoWallet } from '@rainbow-me/rainbowkit/wallets';

Rabbyウォレット

import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';

レインボー

import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';

Ramperウォレット

import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';

準備完了

import { readyWallet } from '@rainbow-me/rainbowkit/wallets';

Roninウォレット

import { roninWallet } from '@rainbow-me/rainbowkit/wallets';

Safeheron

import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';

Taho

import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';

Talisman

import { talismanWallet } from '@rainbow-me/rainbowkit/wallets';

Tokenary

import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets';

TokenPocket

import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets';

Trust Wallet

import { trustWallet } from '@rainbow-me/rainbowkit/wallets';

Uniswapウォレット

import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';

Valora

import { valoraWallet } from '@rainbow-me/rainbowkit/wallets';

Wigwam

import { wigwamWallet } from '@rainbow-me/rainbowkit/wallets';

xPortal

import { xPortalWallet } from '@rainbow-me/rainbowkit/wallets';

Zerion

import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';

ZilPay

import { zilPayWallet } from '@rainbow-me/rainbowkit/wallets';

例

順序

異なるウォレットを異なる順序で表示する例をいくつか示します。

MetaMask と一般的なフォールバックウォレットを表示します。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  metaMaskWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [metaMaskWallet, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Rainbow、MetaMask、Baseアカウントおよび一般的なフォールバックウォレットを表示します。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  baseAccount,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Suggested',
      wallets: [
        rainbowWallet,
        metaMaskWallet,
        baseAccount,
        walletConnectWallet,
      ],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

注：wallets 配列の順序は、UI に表示されるウォレットの順序を決定します。

複数のグループ

groupName キーを使用して、異なるウォレットグループに名前を付けることができます。これにより、ユーザーに推奨するウォレットや他の可能なウォレットを伝えることができます。

RainbowとMetaMaskを推奨しますが、Baseアカウントと一般的なフォールバックウォレットも提供します。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  baseAccount,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, metaMaskWallet],
    },
    {
      groupName: 'Others',
      wallets: [baseAccount, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

概要

入門

高度な設定