RainbowKit

https://rainbowkit.com/zh-CN/docs
Admin
RainbowKit is a React library that makes it easy to add wallet connection functionality to your dapp...
Tokens:28,250
Snippets:217
Trust Score:9.4
Update:10 months ago
Show doc for...
Tokens:
Raw
### 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 `<RainbowKitProvider>` component in version 2.x.x. The `chains` prop is no longer required, simplifying the provider setup.

```javascript
// - <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

--------------------------------

### 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 (

    <ConnectButton.Custom>

      {({

        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 (

          <div
            {...(!ready && {

              'aria-hidden': true,

              'style': {

                opacity: 0,

                pointerEvents: 'none',

                userSelect: 'none',

              },

            })}>

            {(() => {

              if (!connected) {

                return (

                  <button onClick={openConnectModal} type="button">

                    Connect Wallet

                  </button>

                );

              }



              if (chain.unsupported) {

                return (

                  <button onClick={openChainModal} type="button">

                    Wrong network

                  </button>

                );

              }



              return (

                <div style={{ display: 'flex', gap: 12 }}>

                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button">

                    {chain.hasIcon && (

                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}>

                        {chain.iconUrl && (

                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />

                        )}

                      </div>

                    )}

                    {chain.name}

                  </button>



                  <button onClick={openAccountModal} type="button">

                    {account.displayName}

                    {account.displayBalance

                      ? ` (${account.displayBalance})`

                      : ''}

                  </button>

                </div>

              );

            })()}

          </div>

        );

      }}

    </ConnectButton.Custom>

  );

};

```

--------------------------------

### 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 = () => (

  <WagmiProvider config={config}>

    <QueryClientProvider client={queryClient}>

      <RainbowKitProvider {...etc}>

        {/* Your App */}

      </RainbowKitProvider>

    </QueryClientProvider>

  </WagmiProvider>

);

```

--------------------------------

### 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 (
    // <WagmiConfig config={config}>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        // <RainbowKitProvider chains={chains}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
    // </WagmiConfig>
  )
}
```

--------------------------------

### 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 (

    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};
```

--------------------------------

### 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 = () => (

  <RainbowKitProvider
    theme={darkTheme({
      accentColor: '#7b3fe4',
      accentColorForeground: 'white',
      borderRadius: 'small',
      fontStack: 'system',
      overlayBlur: 'small',
    })}
    {...etc}
  >

    {/* Your App */}

  </RainbowKitProvider>

);
```

--------------------------------

### 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 (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );

};
```

--------------------------------

### 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 (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

--------------------------------

### 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';

<WalletButton wallet="rainbow" />

<WalletButton wallet="metamask" />

<WalletButton wallet="coinbase" />
```

--------------------------------

### 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
<ConnectButton showBalance={false} />
```

--------------------------------

### 自定义 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 (

    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};

```

--------------------------------

### 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 (

    <RainbowKitProvider
      appInfo={{
        appName: 'Rainbowkit Demo',
        learnMoreUrl: 'https://learnaboutcryptowallets.example',
      }}
      {...etc}
    >

      {/* ... */}

    </RainbowKitProvider>

  );

};

```

--------------------------------

### 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 (

    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};
```

--------------------------------

### 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 (

    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};
```

--------------------------------

### 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
<ConnectButton label="Sign in" />
```

--------------------------------

### 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 (

    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};
```

--------------------------------

### 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 <ConnectButton />;

};
```

--------------------------------

### 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 = () => (

  <RainbowKitProvider modalSize="compact" {...etc}>

    {/* Your App */}

  </RainbowKitProvider>

);

```

--------------------------------

### 支持暗黑模式的主题配置

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 = () => (

  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >

    {/* Your App */}

  </RainbowKitProvider>

);

```

--------------------------------

### 自定义 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 (

    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >

      {/* Your App */}

    </RainbowKitProvider>

  );

};

```

--------------------------------

### 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 }) => (

  <Text>

    By connecting your wallet, you agree to the{' '}

    <Link href="https://termsofservice.xyz">Terms of Service</Link> and

    acknowledge you have read and understand the protocol{' '}

    <Link href="https://disclaimer.xyz">Disclaimer</Link>

  </Text>

);





const App = () => {

  return (

    <RainbowKitProvider
      appInfo={{
        appName: 'RainbowKit Demo',
        disclaimer: Disclaimer,
      }}
      {...etc}
    >

      {/* ... */}

    </RainbowKitProvider>

  );

};

```

--------------------------------

### 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 = () => (

  <RainbowKitProvider theme={midnightTheme()} {...etc}>

    {/* Your App */}

  </RainbowKitProvider>

);
```

--------------------------------

### 安装 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 (

    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
        });
      }}
    >

      Add recent transaction

    </button>

  );

};

```

--------------------------------

### 自定义最近交易的确认数

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 (

    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
          confirmations: 100,
        });
      }}
    >

      Add recent transaction

    </button>

  );

};

```

--------------------------------

### 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',

});



<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>

  ...

</RainbowKitSiweNextAuthProvider>;
```

--------------------------------

### 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
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

```jsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```

--------------------------------

### 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';

```
Tokens:
Raw