Rainbow logo
RainbowKit
2.2.10

自定義錢包列表

自定義錢包列表

自定義錢包列表

您可以從 '@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 的 dApp,以便讓用戶輕鬆連接其 Safe vault 或多簽帳戶,請包含 safeWallet 選項以自動連接。Safe 選項僅在 Safe Wallet 瀏覽器環境中顯示。

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

以下錢包按照字母順序由 wallet 物件提供。

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

此錢包連接器支持 Base 帳戶,即 Coinbase 智能錢包的演變。它提供流暢的身份驗證和增強功能,如子賬戶和支出許可。

配置選項與 Base Account 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/...',
};
import { berasigWallet } from '@rainbow-me/rainbowkit/wallets';
import { bestWallet } from '@rainbow-me/rainbowkit/wallets';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitgetWallet } 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';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';
import { coreWallet } from '@rainbow-me/rainbowkit/wallets';
import { ctrlWallet } 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';

這款智能錢包連接器通過 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
});
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 { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
import { novaWallet } 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 { paraSwapWallet } from '@rainbow-me/rainbowkit/wallets';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { portoWallet } 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 { readyWallet } 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 { valoraWallet } from '@rainbow-me/rainbowkit/wallets';
import { wigwamWallet } from '@rainbow-me/rainbowkit/wallets';
import { xPortalWallet } from '@rainbow-me/rainbowkit/wallets';
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';
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' },
);