Rainbow logo
RainbowKit
2.2.10

自定义钱包列表

自定义钱包列表

定制钱包列表

您可以从'@rainbow-me/rainbowkit/wallets'中导入各个钱包,同时使用connectorsForWallets函数来构建自己的钱包列表和所需连接器。 这样,您可以自由控制显示哪些钱包以及显示的顺序。

例如,您可以选择仅显示Rainbow和通用的Fallback钱包。

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',
}
);

然后,您可以将您的连接器传递给wagmicreateConfig

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,以便用户可以轻松地连接到他们的Safe保险库或多重签名,包括 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';

此钱包连接器支持基本账户,Coinbase Smart Wallet 的演变。它提供无缝的身份验证和增强功能,如子账户和支出权限。

配置选项与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';

这个智能钱包连接器通过密钥提供无缝验证,无需下载、扩展或 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' },
);