遷移到RainbowKit和Wagmi v2

wagmi和viem對等依賴已達到2.x.x並有破壞性變更。

請按照以下步驟進行遷移。

1. 將RainbowKit、wagmi和viem升級到最新版本

npm i @rainbow-me/rainbowkit wagmi [email protected]

2. 安裝 @tanstack/react-query 對等依賴

使用Wagmi v2，TanStack Query現在是一個必需的對等依賴。

使用以下命令安裝它：

npm i @tanstack/react-query

3. 升級您的RainbowKit和Wagmi配置

  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>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }

4. 檢查wagmi和viem中的破壞性變更

如果您在您的dApp中使用wagmi鉤子和viem操作，您需要遵循v2的遷移指南：

RainbowKit變更

1. 改進的EIP-6963錢包行為

支持新EIP-6963連接標準的錢包（包括Rainbow、MetaMask等）現在在連接錢包體驗中將自動出現在已安裝部分。這確保用戶總是能找到他們喜歡的錢包並無衝突地連接到dApps。這確保用戶總是能找到他們喜歡的錢包並無衝突地連接到dApps。

開發者繼續擁有完全控制自定義錢包列表的權限，以強調終端用戶的首選錢包。開發者繼續擁有完全控制自定義錢包列表的權限，以強調終端用戶的首選錢包。建議您繼續包括 injectedWallet 和 walletConnectWallet 在您的列表中，以支援所有平臺。

2. 使用getDefaultConfig進行Wagmi配置

此新API簡化了配置體驗，並取代了直接使用Wagmi的createConfig的需要。鏈配置變得更加簡單，包括推斷出公共提供商對傳輸的支持。鏈配置變得更加簡單，包括推斷出公共提供商對傳輸的支持。

默認錢包列表將自動包括在內，不再需要使用getDefaultWallets和connectorsForWallets。

您可以通過向wallets傳遞導入或自定義錢包連接器來創建自定義錢包列表。實例化錢包連接器並傳遞projectId和chains不再是必需的。

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 */
})

3. RainbowKitProvider

您不再需要將chains傳遞給<RainbowKitProvider>。

- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>

4. 自定義鏈

Chain類型已根據Wagmi v2更改，並繼續支持RainbowKit的iconUrl和iconBackground元數據。

+ 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

使用getDefaultConfig的示例：

const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});

使用createConfig的示例：

+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })

5. 自定義錢包

RainbowKit錢包連接器已經進行了大量更改以支持Wagmi v2。 RainbowKit錢包連接器已經進行了大量更改以支持Wagmi v2。請參考更新的文檔和示例連接器來升級您dApp中的任何自定義錢包連接器。

錢包連接器現在也支持帶有rdns屬性的EIP-6963標準。請確保這已填寫，以防止在您的錢包列表中存在重複的EIP-6963支持錢包引用。請確保這已填寫，以防止在您的錢包列表中存在重複的EIP-6963支持錢包引用。

請通過GitHub在此處反饋RainbowKit v2的任何問題或意見。