Rainbow logo
RainbowKit
2.2.0

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

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

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

'@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オブジェクトを介して提供されます。

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

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

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

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

これはwindow.ethereumが存在するが、リスト内の他のウォレットによって提供されていないシナリオのために設計されたフォールバックウォレットオプションです。 このウォレットは、フォールバックが不要である場合や注入されたウォレットが利用できない場合に自動的にリストから隠れるようになっています。

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

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

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

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

次のウォレットは (wallet オブジェクトを通じて提供されます(アルファベット順)。

import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitverseWallet } from '@rainbow-me/rainbowkit/wallets';
import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';
import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';

このウォレットコネクタは、Coinbase Walletアプリと拡張機能、およびウェブ上でのCoinbase Smart Walletの両方をサポートします。

Smart Walletがユーザーに対して有効で利用可能かどうかを制御するために、preference引数が使用可能です。 ここにプリファレンスに基づく振る舞いが記述されています。

Smart Walletは、追加のアップグレードなしに、6月初旬からデフォルトでallと共に有効になります。

開発者は今日、sepoliaおよびbaseSepoliaチェーンでsmartWalletOnlyを設定し、次のようにcoinbaseWalletをウォレットリストに含めることでSmart Walletをテストできます:

import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = 'smartWalletOnly';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';
import { coreWallet } from '@rainbow-me/rainbowkit/wallets';
import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';
import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';
import { foxWallet } from '@rainbow-me/rainbowkit/wallets';
import { frameWallet } from '@rainbow-me/rainbowkit/wallets';
import { frontierWallet } from '@rainbow-me/rainbowkit/wallets';
import { gateWallet } from '@rainbow-me/rainbowkit/wallets';
import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
import { iopayWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaiaWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';
import { krakenWallet } from '@rainbow-me/rainbowkit/wallets';
import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';
import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';
import { magicEdenWallet } from '@rainbow-me/rainbowkit/wallets';
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';
import { roninWallet } from '@rainbow-me/rainbowkit/wallets';
import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';
import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';
import { talismanWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets';
import { trustWallet } from '@rainbow-me/rainbowkit/wallets';
import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';
import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets';
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';

さまざまなウォレットをさまざまな順序で表示するいくつかの例をここに示します。

Metamaskと一般的なfallbackウォレットを並べて表示します。

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、Coinbaseおよび一般的なフォールバックウォレットを表示します。

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Suggested',
wallets: [
rainbowWallet,
metaMaskWallet,
coinbaseWallet,
walletConnectWallet,
],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

リマインダー:wallets 配列の順序は、UIでウォレットが表示される順序を定義します。

groupNameキーを使用して、異なるウォレットグループに名前をつけることができます。 これは、推奨するウォレットやその他の可能性のあるウォレットをユーザーに伝えたい場合に便利です。

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

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: [rainbowWallet, metaMaskWallet],
},
{
groupName: 'Others',
wallets: [coinbaseWallet, walletConnectWallet],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);