### Install Dependencies for RainbowKit v2 Source: https://rainbowkit.com/zh-CN/docs/migration-guide Installs the necessary packages for RainbowKit v2, including wagmi, viem, and the new peer dependency @tanstack/react-query. ```bash npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x npm i @tanstack/react-query ``` -------------------------------- ### Simplifying RainbowKitProvider Usage (JavaScript) Source: https://rainbowkit.com/zh-CN/docs/migration-guide Shows the updated usage of the `` component in version 2.x.x. The `chains` prop is no longer required, simplifying the provider setup. ```javascript // - + ``` -------------------------------- ### Install RainbowKit with npm, pnpm, or yarn Source: https://rainbowkit.com/zh-CN/docs/installation Quickly set up a new RainbowKit project using a preferred package manager. This command scaffolds a new directory with boilerplate code and installs necessary dependencies. ```shell npm init @rainbow-me/rainbowkit@latest # or pnpm create @rainbow-me/rainbowkit@latest # or yarn create @rainbow-me/rainbowkit ``` -------------------------------- ### Customizing Wallet Configuration with getDefaultConfig (JavaScript) Source: https://rainbowkit.com/zh-CN/docs/migration-guide Demonstrates how to configure RainbowKit using `getDefaultConfig`, including specifying custom wallets and other Wagmi options. This approach simplifies the setup compared to older methods. ```javascript const config = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', chains: [mainnet], wallets: [rainbowWallet], /* optional custom wallet list */ /* Wagmi createConfig options including `transports` are also accepted */ }) ``` -------------------------------- ### 更新 RainbowKit 钱包导入 (0.7.x) Source: https://rainbowkit.com/zh-CN/docs/migration-guide 在 0.7.x 版本中，RainbowKit 更改了钱包的导入方式以减少包大小。现在需要单独导入每个钱包，并且钱包名称会附加 'Wallet' 后缀。 ```javascript -import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit'; +import { connectorsForWallets } from '@rainbow-me/rainbowkit'; +import { + injectedWallet, + rainbowWallet, + metaMaskWallet, + coinbaseWallet, + walletConnectWallet, +} from '@rainbow-me/rainbowkit/wallets'; const wallets = [ - wallet.injected({ chains }), - wallet.rainbow({ chains }), - wallet.metaMask({ chains }), - wallet.coinbase({ chains, appName: 'My App' }), - wallet.walletConnect({ chains }), + injectedWallet({ chains }), + rainbowWallet({ chains }), + metaMaskWallet({ chains }), + coinbaseWallet({ chains, appName: 'My App' }), + walletConnectWallet({ chains }), ]; ``` -------------------------------- ### Upgrade Dependencies for RainbowKit 0.2.x Migration Source: https://rainbowkit.com/zh-CN/docs/migration-guide This command installs the necessary versions of RainbowKit and wagmi to begin the migration process for version 0.2.x. It ensures that the project is set up with compatible versions for the subsequent steps. ```bash npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2 ``` -------------------------------- ### 升级到 wagmi 0.10.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 0.10.0 版本。此版本中 wagmi 的对等依赖项已更新。用户需要检查 wagmi 的破坏性更改。 ```bash npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0 ``` -------------------------------- ### 升级到 wagmi 0.9.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 0.9.0 版本。此版本中 wagmi 的对等依赖项已更新。用户需要检查 wagmi 的破坏性更改。 ```bash npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0 ``` -------------------------------- ### Migrate Alchemy Provider in wagmi Source: https://rainbowkit.com/zh-CN/docs/migration-guide This example illustrates the migration of the Alchemy provider configuration. The `apiProvider.alchemy` syntax is replaced with the `alchemyProvider` import from `wagmi/providers/alchemy`, along with the updated options structure. ```typescript + import { alchemyProvider } from 'wagmi/providers/alchemy'; const { chains, provider } = configureChains( [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], - [apiProvider.alchemy(process.env.ALCHEMY_ID)] + [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })] ); ``` -------------------------------- ### Install RainbowKit and peer dependencies (npm) Source: https://rainbowkit.com/zh-CN/docs/installation Manually install RainbowKit along with its peer dependencies: wagmi, viem, and @tanstack/react-query. Ensure you are using viem version 2.x. ```shell npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query ``` -------------------------------- ### 升级到 wagmi 0.8.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 0.8.0 版本。此版本中 wagmi 的对等依赖项已更新。用户需要检查 wagmi 的破坏性更改。 ```bash npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0 ``` -------------------------------- ### 升级到 wagmi 0.11.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 0.11.0 版本。此版本中 wagmi 的对等依赖项已更新。用户需要检查 wagmi 的破坏性更改。 ```bash npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0 ``` -------------------------------- ### 升级到 wagmi 0.4.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 升级到 0.4.0 版本，并将 wagmi 对等依赖项更新到 0.5.0 版本。用户需要检查 wagmi 的破坏性更改。 ```bash npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0 ``` -------------------------------- ### 替换 Steakwallet 为 OmniWallet (0.7.x) Source: https://rainbowkit.com/zh-CN/docs/migration-guide 在 0.7.x 版本中，Steakwallet 的向后兼容层已被移除，应使用 OmniWallet 代替。此代码片段展示了如何进行此替换。 ```javascript -import { wallet } from '@rainbow-me/rainbowkit'; +import { omniWallet } from '@rainbow-me/rainbowkit/wallets'; const wallets = [ - wallet.steak({ chains }), + omniWallet({ chains }), ]; ``` -------------------------------- ### Defining Custom Chains for RainbowKit (TypeScript) Source: https://rainbowkit.com/zh-CN/docs/migration-guide Illustrates how to define custom blockchain chains with metadata like `iconUrl` and `iconBackground` for use with RainbowKit and wagmi v2. This example uses TypeScript for type safety. ```typescript import { Chain } from '@rainbow-me/rainbowkit' const avalanche = { id: 43_114, name: 'Avalanche', iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', iconBackground: '#fff', nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 }, rpcUrls: { default: { http: ['https://api.avax.network/ext/bc/C/rpc'] } }, blockExplorers: { default: { name: 'SnowTrace', url: 'https://snowtrace.io' } }, contracts: { multicall3: { address: '0xca11bde05977b3631167028862be2a173976ca11', blockCreated: 11_907_934 } } } as const satisfies Chain // Example using getDefaultConfig: const configDefault = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', chains: [ avalanche, /* custom chain */ { ...mainnet, iconBackground: '#000', iconUrl: 'https://example.com/icons/ethereum.png' /* metadata overides */ } ] }); // Example using createConfig: import { Chain } from '@rainbow-me/rainbowkit' const chains: readonly [Chain, ...Chain[]] = [ { ...mainnet, iconBackground: '#000', iconUrl: 'https://example.com/icons/ethereum.png' } ]; const configCreate = createConfig({ chains, transports: { [mainnet.id]: http() } }) ``` -------------------------------- ### 升级到 wagmi v1 Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 v1 版本。还需要安装 viem 对等依赖项。建议参考特定框架的指南以确保捆绑器和 polyfill 兼容性。 ```bash npm i @rainbow-me/rainbowkit@^1 wagmi@^1 ``` ```bash npm i viem ``` -------------------------------- ### 升级到 wagmi 0.12.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide 将 RainbowKit 和 wagmi 升级到 0.12.0 版本。此版本引入了对 WalletConnect v1 的支持，并要求提供 WalletConnect Cloud projectId 以便使用 WalletConnect v2。 ```bash npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0 ``` -------------------------------- ### Migrate JSON RPC Provider in wagmi Source: https://rainbowkit.com/zh-CN/docs/migration-guide This example demonstrates the change in configuring JSON RPC providers. The `apiProvider.jsonRpc` function is replaced by `jsonRpcProvider` from `wagmi/providers/jsonRpc`, with a modified structure for the RPC URL definition. ```typescript + import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; const { chains, provider } = configureChains( [chain.mainnet, chain.polygon], [ - apiProvider.jsonRpc(chain => ({ rpcUrl: `https://${chain.id}.example.com` })), + jsonRpcProvider({ + rpc: chain => ({ http: `https://${chain.id}.example.com` }), + }), ] ); ``` -------------------------------- ### 配置 WalletConnect projectId Source: https://rainbowkit.com/zh-CN/docs/migration-guide 在使用 WalletConnect v2 时，需要提供 WalletConnect Cloud projectId。此代码示例演示了如何在 `getDefaultWallets` 和钱包连接器中提供 projectId。 ```javascript const projectId = 'YOUR_PROJECT_ID'; const { wallets } = getDefaultWallets({ appName: 'My RainbowKit App', projectId, chains, }); const connectors = connectorsForWallets([ ...wallets, { groupName: 'Other', wallets: [ argentWallet({ projectId, chains }), trustWallet({ projectId, chains }), ledgerWallet({ projectId, chains }), ], }, ]); ``` -------------------------------- ### Configure Coinbase Wallet Preferences and Features Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This example demonstrates how to configure the `coinbaseWallet` connector provided by RainbowKit. It shows how to set preferences like `smartWalletOnly` or `eoaOnly`, configure paymaster URLs for gas sponsorship, and enable sub-accounts with specified spend limits. ```javascript import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets'; // Limit your dApp to only Smart Wallet coinbaseWallet.preference = 'smartWalletOnly'; // Limit your dApp to the Coinbase Wallet app coinbaseWallet.preference = 'eoaOnly'; // Configure the Paymaster for gas sponsorship coinbaseWallet.paymasterUrls: { [base.id]: '...' } // Enable Sub Accounts coinbaseWallet.subAccounts: { enableAutoSubAccounts: true, defaultSpendLimits: { ... } } ``` -------------------------------- ### Migrate Public Provider in wagmi Source: https://rainbowkit.com/zh-CN/docs/migration-guide This snippet shows the update for using the public provider. `apiProvider.fallback()` is replaced with `publicProvider()` imported from `wagmi/providers/public`. ```typescript + import { publicProvider } from 'wagmi/providers/public'; const { chains, provider } = configureChains( [chain.mainnet, chain.polygon], - [apiProvider.fallback()] + [publicProvider()] ); ``` -------------------------------- ### Create Custom ConnectButton with RainbowKit Source: https://rainbowkit.com/zh-CN/docs/custom-connect-button This JavaScript snippet shows a minimal implementation of a custom connect button using RainbowKit's `ConnectButton.Custom` component. It handles wallet connection, network switching, and displays account information. The code logic determines the connection state and renders appropriate buttons or displays for different scenarios, such as connecting a wallet, switching to the correct network, or showing the connected account details. It relies on the `@rainbow-me/rainbowkit` library. ```javascript import { ConnectButton } from '@rainbow-me/rainbowkit'; export const YourApp = () => { return ( {({ account, chain, openAccountModal, openChainModal, openConnectModal, authenticationStatus, mounted, }) => { // Note: If your app doesn't use authentication, you // can remove all 'authenticationStatus' checks const ready = mounted && authenticationStatus !== 'loading'; const connected = ready && account && chain && (!authenticationStatus || authenticationStatus === 'authenticated'); return (
{(() => { if (!connected) { return ( ); } if (chain.unsupported) { return ( ); } return (
); })()}
); }} ); }; ``` -------------------------------- ### Integrate Custom Connectors with Wagmi and RainbowKit Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This example shows how to integrate the custom wallet connectors created with `connectorsForWallets` into your application's configuration using wagmi. It outlines the necessary steps to create the `config` object with your connectors and then wrap your application with `WagmiProvider`, `QueryClientProvider`, and `RainbowKitProvider`. ```javascript 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 = () => ( {/* Your App */} ); ``` -------------------------------- ### Upgrade RainbowKit and Wagmi Configuration (JavaScript) Source: https://rainbowkit.com/zh-CN/docs/migration-guide Updates the application's configuration to align with RainbowKit v2 and wagmi v2. This involves importing new components and functions, and adjusting the configuration structure. ```javascript import '@rainbow-me/rainbowkit/styles.css' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { createPublicClient, http } from 'viem' import { WagmiConfig } from 'wagmi' import { WagmiProvider, http } from 'wagmi' import { configureChains, createConfig } from 'wagmi' import { mainnet } from 'wagmi/chains' import { RainbowKitProvider } from '@rainbow-me/rainbowkit' import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit' import { getDefaultConfig } from '@rainbow-me/rainbowkit' /* getDefaultWallets is now optional */ // const { wallets } = getDefaultWallets({ // appName: 'RainbowKit demo', // projectId: 'YOUR_PROJECT_ID', // chains, // }) /* connectorsForWallets is now optional */ // const connectors = connectorsForWallets([...wallets]) /* const { chains, publicClient } = configureChains( // [mainnet, sepolia], // [publicProvider(), publicProvider()] // ) // const config = createConfig({ // autoConnect: true, // publicClient, // }) */ /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */ const config = getDefaultConfig({ appName: 'RainbowKit demo', projectId: 'YOUR_PROJECT_ID', chains: [mainnet], transports: { [mainnet.id]: http() } }) const queryClient = new QueryClient() const App = () => { return ( // // {/* Your App */} // ) } ``` -------------------------------- ### Apply Pink Accent Color Preset to Dark Theme Source: https://rainbowkit.com/zh-CN/docs/theming This example demonstrates applying a predefined 'pink' accent color preset to the `darkTheme`. It utilizes the spread syntax to merge the accent color properties into the theme options. ```javascript import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Migrate Infura Provider in wagmi Source: https://rainbowkit.com/zh-CN/docs/migration-guide This snippet shows the transition from using `apiProvider.infura` to the `infuraProvider` imported from `wagmi/providers/infura`. It also updates the parameter for the Infura ID. ```typescript +import { infuraProvider } from 'wagmi/providers/infura'; const { chains, provider } = configureChains( [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum], - [apiProvider.infura(process.env.INFURA_ID)] + [infuraProvider({ infuraId: process.env.INFURA_ID })] ); ``` -------------------------------- ### Update configureChains Import from wagmi Source: https://rainbowkit.com/zh-CN/docs/migration-guide This code snippet shows how to change the import statement for `configureChains`. Previously imported from `@rainbow-me/rainbowkit`, it should now be imported directly from `wagmi` as part of the 0.2.x migration. ```typescript - import { configureChains } from '@rainbow-me/rainbowkit'; + import { configureChains } from 'wagmi'; ``` -------------------------------- ### Customize Dark Theme with Specific Properties Source: https://rainbowkit.com/zh-CN/docs/theming This example demonstrates customizing the `darkTheme` with specific properties like accent color, foreground accent color, border radius, font stack, and overlay blur. It passes an options object to the `darkTheme()` function. ```javascript import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; export const App = () => ( {/* Your App */} ); ``` -------------------------------- ### Configure custom RPC transports with wagmi Source: https://rainbowkit.com/zh-CN/docs/installation For improved reliability, define custom transports using your own RPC provider URLs (e.g., from Alchemy or QuickNode) within the RainbowKit configuration. This example shows how to set transports for mainnet and sepolia. ```javascript import { getDefaultConfig } from '@rainbow-me/rainbowkit'; import { http } from 'wagmi'; import { mainnet, sepolia } from 'wagmi/chains'; const config = getDefaultConfig({ appName: 'My RainbowKit App', projectId: 'YOUR_PROJECT_ID', chains: [mainnet, sepolia], transports: { [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'), [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'), }, }); ``` -------------------------------- ### Create RainbowKit Authentication Adapter Source: https://rainbowkit.com/zh-CN/docs/custom-authentication This code defines a custom authentication adapter for RainbowKit. It includes functions to get a nonce, create a SIWE (Sign-In with Ethereum) message, verify the signature, and sign out. It depends on '@rainbow-me/rainbowkit' and 'viem/siwe'. The adapter communicates with a custom backend via '/api/nonce', '/api/verify', and '/api/logout' endpoints. ```typescript import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit'; import { createSiweMessage } from 'viem/siwe'; const authenticationAdapter = createAuthenticationAdapter({ getNonce: async () => { const response = await fetch('/api/nonce'); return await response.text(); }, createMessage: ({ nonce, address, chainId }) => { return createSiweMessage({ domain: window.location.host, address, statement: 'Sign in with Ethereum to the app.', uri: window.location.origin, version: '1', chainId, nonce, }); }, verify: async ({ message, signature }) => { const verifyRes = await fetch('/api/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message, signature }), }); return Boolean(verifyRes.ok); }, signOut: async () => { await fetch('/api/logout'); }, }); ``` -------------------------------- ### Wrap application with RainbowKit and wagmi providers Source: https://rainbowkit.com/zh-CN/docs/installation Provide the necessary context to your application by wrapping it with QueryClientProvider, WagmiProvider, and RainbowKitProvider. This makes wallet connection functionalities available throughout your app. ```javascript const queryClient = new QueryClient(); const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Import RainbowKit and wagmi components Source: https://rainbowkit.com/zh-CN/docs/installation Import necessary styles and components from RainbowKit and wagmi. This includes default configurations, providers, chains, and query client components. ```javascript import '@rainbow-me/rainbowkit/styles.css'; import { getDefaultConfig, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; import { WagmiProvider } from 'wagmi'; import { mainnet, polygon, optimism, arbitrum, base, } from 'wagmi/chains'; import { QueryClientProvider, QueryClient, } from "@tanstack/react-query"; ``` -------------------------------- ### Configure wagmi with RainbowKit Source: https://rainbowkit.com/zh-CN/docs/installation Set up the wagmi configuration, including your application name, WalletConnect project ID, supported chains, and SSR option. Remember to replace 'YOUR_PROJECT_ID' with your actual project ID obtained from WalletConnect Cloud. ```javascript import { getDefaultConfig } from '@rainbow-me/rainbowkit'; const config = getDefaultConfig({ appName: 'My RainbowKit App', projectId: 'YOUR_PROJECT_ID', chains: [mainnet, polygon, optimism, arbitrum, base], ssr: true, // If your dApp uses server side rendering (SSR) }); ``` -------------------------------- ### Rename WagmiProvider to WagmiConfig Source: https://rainbowkit.com/zh-CN/docs/migration-guide This code illustrates a renaming change in wagmi. The `WagmiProvider` component has been renamed to `WagmiConfig`, requiring an update in import statements and JSX usage. ```typescript import { - WagmiProvider + WagmiConfig } from 'wagmi' const App = () => { return ( - ... + ... ); }; ``` -------------------------------- ### Integrate WalletButton Component Source: https://rainbowkit.com/zh-CN/docs/wallet-button Demonstrates how to import and use the WalletButton component from the '@rainbow-me/rainbowkit' library to connect specific wallets. It shows basic usage with predefined wallet identifiers. ```javascript import { WalletButton } from '@rainbow-me/rainbowkit'; ``` -------------------------------- ### Hide ConnectButton Balance Source: https://rainbowkit.com/zh-CN/docs/connect-button Example of hiding the wallet balance display on the ConnectButton using the 'showBalance' prop. Setting it to 'false' will prevent the balance from being shown. ```jsx ``` -------------------------------- ### 自定义 midnightTheme 配置 Source: https://rainbowkit.com/zh-CN/docs/theming 使用 `midnightTheme` 主题，将突出色设置为内置的 `pink` 预设，`borderRadius` 设置为 `small`，`fontStack` 设置为 `system`。此配置适用于需要深色主题并使用预设粉色调的场景。 ```javascript import { RainbowKitProvider, midnightTheme, } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Configure App Name and Learn More URL with RainbowKitProvider Source: https://rainbowkit.com/zh-CN/docs/custom-app-info This snippet shows how to set your application's name and a URL for a 'learn more' button within the connection modal. It uses the `appInfo` prop of the `RainbowKitProvider` component. No external dependencies are needed beyond RainbowKit itself. ```javascript import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* ... */} ); }; ``` -------------------------------- ### Set Medium Border Radius in Dark Theme Source: https://rainbowkit.com/zh-CN/docs/theming This example shows how to set the `borderRadius` property to 'medium' within the `darkTheme` configuration. This affects the roundness of UI elements. ```javascript import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Set System Font Stack in Dark Theme Source: https://rainbowkit.com/zh-CN/docs/theming This example shows how to configure the `fontStack` to 'system' within the `darkTheme`. This uses the operating system's default font stack for consistency. ```javascript import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Remix build tool configuration for polyfills Source: https://rainbowkit.com/zh-CN/docs/installation When using Remix, specific Node.js built-in modules (buffer, events, http) need to be polyfilled. Configure your Remix build to include these modules. ```javascript /** @type {import('@remix-run/dev').AppConfig} */ export default { ignoredRouteFiles: ["**/.*"], browserNodeBuiltinsPolyfill: { modules: { buffer: true, events: true, http: true }, }, }; ``` -------------------------------- ### Customize ConnectButton Label Source: https://rainbowkit.com/zh-CN/docs/connect-button Example of customizing the text displayed on the ConnectButton using the 'label' prop. This allows you to set a specific call to action, such as 'Sign in' instead of the default 'Connect Wallet'. ```jsx ``` -------------------------------- ### Set Custom Accent Color in Dark Theme Source: https://rainbowkit.com/zh-CN/docs/theming This example shows how to set a custom purple accent color and white foreground accent color for the dark theme. This allows for precise brand color matching. ```javascript import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Add the ConnectButton component Source: https://rainbowkit.com/zh-CN/docs/installation Render the ConnectButton component within your application to allow users to connect their wallets. RainbowKit will handle the entire wallet selection, connection status display, and network/wallet switching. ```javascript import { ConnectButton } from '@rainbow-me/rainbowkit'; export const YourApp = () => { return ; }; ``` -------------------------------- ### Create Custom Wallet List with ConnectorsForWallets Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This snippet demonstrates how to use the `connectorsForWallets` function from RainbowKit to create a custom list of wallet connectors. It allows you to group recommended wallets and configure application-specific details like the app name and project ID. The resulting connectors can then be passed to wagmi's `createConfig`. ```javascript 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', } ); ``` -------------------------------- ### 配置 RainbowKit 模态框尺寸为 Compact Source: https://rainbowkit.com/zh-CN/docs/modal-sizes 此代码示例展示了如何在 RainbowKitProvider 中设置 `modalSize` 属性为 'compact'，以使用紧凑型模态框。这只需要在组件的 props 中添加一个简单的属性。它不涉及外部依赖，输入是组件的 props，输出是渲染后的 UI。此方法适用于所有支持 RainbowKitProvider 的 React 应用。 ```javascript import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; export const App = () => ( {/* Your App */} ); ``` -------------------------------- ### 支持暗黑模式的主题配置 Source: https://rainbowkit.com/zh-CN/docs/theming 配置 RainbowKit 以支持暗黑模式。通过提供一个包含 `lightMode` 和 `darkMode` 值的动态主题对象，RainbowKit 可以根据用户的系统偏好自动切换主题。这需要 `lightTheme` 和 `darkTheme` 函数。 ```javascript import { RainbowKitProvider, lightTheme, darkTheme, } from '@rainbow-me/rainbowkit'; const App = () => ( {/* Your App */} ); ``` -------------------------------- ### 自定义 lightTheme 配置 Source: https://rainbowkit.com/zh-CN/docs/theming 使用 `lightTheme` 主题，自定义 `accentColor` 为紫色，`borderRadius` 为 `medium`，`fontStack` 为 `system`。此配置适用于需要浅色主题并自定义品牌颜色的场景。 ```javascript import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit'; const App = () => { return ( {/* Your App */} ); }; ``` -------------------------------- ### Add Custom Disclaimer to Connection Modal with RainbowKitProvider Source: https://rainbowkit.com/zh-CN/docs/custom-app-info This example demonstrates how to add a custom disclaimer to the bottom of the connection modal. It utilizes the `disclaimer` property within the `appInfo` prop of `RainbowKitProvider`, accepting a `DisclaimerComponent` which allows the use of `Text` and `Link` components for formatting. ```typescript import { RainbowKitProvider, DisclaimerComponent, } from '@rainbow-me/rainbowkit'; const Disclaimer: DisclaimerComponent = ({ Text, Link }) => ( By connecting your wallet, you agree to the{' '} Terms of Service and acknowledge you have read and understand the protocol{' '} Disclaimer ); const App = () => { return ( {/* ... */} ); }; ``` -------------------------------- ### Update createConnector and configureChains in RainbowKit 0.3.x Source: https://rainbowkit.com/zh-CN/docs/migration-guide This snippet demonstrates the modification required for the `createConnector` function within RainbowKit when migrating to version 0.3.x. It shows the removal of the `chainId` parameter and how `configureChains` from wagmi now internally manages RPC URLs. This change affects consumers who previously derived RPC URLs from `chainId`. ```typescript import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit'; import { chain, configureChains } from 'wagmi'; import { alchemyProvider } from 'wagmi/providers/alchemy'; import { publicProvider } from 'wagmi/providers/public'; import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'; export interface MyWalletOptions { chains: Chain[]; } // const chains = [chain.mainnet] const { chains } = configureChains( [chain.mainnet], [ alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), publicProvider(), ] ); export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({ ... - createConnector: ({ chainId }) => { + createConnector: () => { - const rpc = chains.reduce( - (rpcUrlMap, chain) => ({ ...rpcUrlMap, [chainId]: chain.rpcUrls.default }), - {} - ); const connector = new WalletConnectConnector({ chains, options: { qrcode: false, - rpc, }, }); } ... }); const connectors = connectorsForWallets([ { groupName: 'Recommended', wallets: [ rainbow({ chains }), ], }, ]); ``` -------------------------------- ### Create Custom Wallet with WalletConnect (TypeScript) Source: https://rainbowkit.com/zh-CN/docs/custom-wallets This snippet shows how to define a custom wallet using the `Wallet` function and integrate it with WalletConnect. It includes configurations for wallet details, download URLs, and platform-specific connection instructions for mobile, QR code, and browser extensions. The `createConnector` property utilizes `getWalletConnectConnector`. ```typescript import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit'; export interface MyWalletOptions { projectId: string; } export const rainbow = ({ projectId }: MyWalletOptions): Wallet => ({ id: 'my-wallet', name: 'My Wallet', iconUrl: 'https://my-image.xyz', iconBackground: '#0c2f78', downloadUrls: { android: 'https://play.google.com/store/apps/details?id=my.wallet', ios: 'https://apps.apple.com/us/app/my-wallet', chrome: 'https://chrome.google.com/webstore/detail/my-wallet', qrCode: 'https://my-wallet/qr', }, mobile: { getUri: (uri: string) => uri, }, qrCode: { getUri: (uri: string) => uri, instructions: { learnMoreUrl: 'https://my-wallet/learn-more', steps: [ { description: 'We recommend putting My Wallet on your home screen for faster access to your wallet.', step: 'install', title: 'Open the My Wallet app', }, { description: 'After you scan, a connection prompt will appear for you to connect your wallet.', step: 'scan', title: 'Tap the scan button', }, ], }, }, extension: { instructions: { learnMoreUrl: 'https://my-wallet/learn-more', steps: [ { description: 'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.', step: 'install', title: 'Install the My Wallet extension', }, { description: 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.', step: 'create', title: 'Create or Import a Wallet', }, { description: 'Once you set up your wallet, click below to refresh the browser and load up the extension.', step: 'refresh', title: 'Refresh your browser', }, ], }, }, createConnector: getWalletConnectConnector({ projectId }), }); ``` -------------------------------- ### Get RainbowKit Modal Status (React) Source: https://rainbowkit.com/zh-CN/docs/modal-hooks This code shows how to retrieve the open/closed state of RainbowKit's modals using the `useConnectModal`, `useAccountModal`, and `useChainModal` hooks. The boolean values `connectModalOpen`, `accountModalOpen`, and `chainModalOpen` indicate the current visibility of each respective modal. These states can be used for conditional rendering or logic within your application. ```javascript const { connectModalOpen } = useConnectModal(); const { accountModalOpen } = useAccountModal(); const { chainModalOpen } = useChainModal(); ``` -------------------------------- ### Import Bybit Wallet Connector Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This code imports the `bybitWallet` connector, enabling the Bybit Wallet to be offered as a connection option to users interacting with your dApp via RainbowKit. ```javascript import { bybitWallet } from '@rainbow-me/rainbowkit/wallets'; ``` -------------------------------- ### Apply Midnight Theme to RainbowKitProvider Source: https://rainbowkit.com/zh-CN/docs/theming This snippet shows how to apply the `midnightTheme` to the RainbowKit UI. It's an alternative to `darkTheme` for different aesthetic preferences. ```javascript import { RainbowKitProvider, midnightTheme, } from '@rainbow-me/rainbowkit'; export const App = () => ( {/* Your App */} ); ``` -------------------------------- ### 安装 SIWE NextAuth 包 Source: https://rainbowkit.com/zh-CN/docs/authentication 安装 `@rainbow-me/rainbowkit-siwe-next-auth` 包以集成 RainbowKit 和 NextAuth 的认证功能。此包提供了必要的工具来处理以太坊登录（SIWE）消息。 ```bash npm install @rainbow-me/rainbowkit-siwe-next-auth ``` -------------------------------- ### 使用 useAddRecentTransaction 注册最近交易 Source: https://rainbowkit.com/zh-CN/docs/recent-transactions 使用 `useAddRecentTransaction` hook 将交易注册到 RainbowKit 以便显示。需要提供交易的 `hash` 和 `description`。此 hook 必须在 React 组件内部调用。 ```javascript import { useAddRecentTransaction } from '@rainbow-me/rainbowkit'; export default () => { const addRecentTransaction = useAddRecentTransaction(); return ( ); }; ``` -------------------------------- ### 自定义最近交易的确认数 Source: https://rainbowkit.com/zh-CN/docs/recent-transactions 通过在 `useAddRecentTransaction` hook 中提供 `confirmations` 选项，可以自定义交易被视为完成所需的确认数。默认情况下，交易在挖矿后一个区块被挖出时视为完成。 ```javascript import { useAddRecentTransaction } from '@rainbow-me/rainbowkit'; export default () => { const addRecentTransaction = useAddRecentTransaction(); return ( ); }; ``` -------------------------------- ### Import Binance Web3 Wallet Connector Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This snippet shows the import for `binanceWallet`, enabling the Binance Web3 Wallet to be offered as a connection choice within your RainbowKit-powered dApp. ```javascript import { binanceWallet } from '@rainbow-me/rainbowkit/wallets'; ``` -------------------------------- ### Import Bifrost Wallet Connector Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This snippet demonstrates importing the `bifrostWallet` connector, which adds the Bifrost Wallet as an available option for users connecting to your dApp via RainbowKit. ```javascript import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets'; ``` -------------------------------- ### 配置多个钱包组 - JavaScript Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list 此代码片段展示了如何使用`connectorsForWallets`在RainbowKit中创建多个钱包组，例如“Recommended”和“Others”。这有助于组织和区分不同类别的钱包，提升用户体验。 ```javascript 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' }, ); ``` -------------------------------- ### 自定义 SIWE 消息选项 Source: https://rainbowkit.com/zh-CN/docs/authentication 通过向 `RainbowKitSiweNextAuthProvider` 传递 `getSiweMessageOptions` 函数，您可以自定义 SIWE（Sign-In with Ethereum）消息的选项。此函数允许您在每次创建新消息时配置 `statement` 等参数，这些参数将与默认值合并。 ```typescript import { RainbowKitSiweNextAuthProvider, GetSiweMessageOptions, } from '@rainbow-me/rainbowkit-siwe-next-auth'; const getSiweMessageOptions: GetSiweMessageOptions = () => ({ statement: 'Sign in to my RainbowKit app', }); ... ; ``` -------------------------------- ### Import Enkrypt Wallet Connector Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This snippet imports the `enkryptWallet` connector, making the Enkrypt Wallet available for users to connect to your dApp through RainbowKit. ```javascript import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets'; ``` -------------------------------- ### Responsive ConnectButton Customization Source: https://rainbowkit.com/zh-CN/docs/connect-button Illustrates how to apply responsive settings to ConnectButton props like 'accountStatus' and 'showBalance'. This allows different UI configurations for small and large screens, enhancing usability across devices. ```jsx ``` ```jsx ``` -------------------------------- ### Import Injected Wallet Connector Source: https://rainbowkit.com/zh-CN/docs/custom-wallet-list This snippet demonstrates importing the `injectedWallet` connector. It's a fallback option for cases where `window.ethereum` is present but no other specific injected wallets are found in the list, ensuring support for common browser-based wallets. ```javascript import { injectedWallet } from '@rainbow-me/rainbowkit/wallets'; ```