遷移指南

遷移 RainbowKit

2.x.x 重大變更

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

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

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

npm i @rainbow-me/rainbowkit@2 wagmi@2 [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。

開發者繼續擁有完全控制自定義錢包列表的權限，以強調終端用戶的首選錢包。我們鼓勵您繼續在列表中包括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 overides */
+ ],
});

使用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。參考更新的文件和示例連接器以升級 dApp 中的任何自定義錢包連接器。

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

1.x.x 重大變更

已更新為 wagmi v1

wagmi 相關依賴已更新為 1.x.x。

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

**1. 升級 RainbowKit 和 wagmi 至其最新版本

npm i @rainbow-me/rainbowkit@^1 wagmi@^1

**2. 安裝 viem 相關依賴

wagmi v1 需要 viem 相關依賴。使用以下命令安裝它：

npm i viem

**3. 確保打包工具和 polyfill 的相容性

在以前版本的 wagmi 中，依賴於 ethers，WalletConnect 所需的 fs、net 和 tls 模組會自動填充。在基於 viem 構建的 RainbowKit v1 + wagmi v1 中，不再如此。

參考我們的Next.js 聯合編譯配置和Create React App polyfill 以獲取項目配置指導。

這裡有 Vite 和 Remix 的額外框架指南，點擊這裡。

**4. 檢查 wagmi 中的重大變更

如果你在應用程序中使用 wagmi 鉤子，你需要遵循 wagmi 的 v1 遷移指南。

你可以在這裡看到他們的遷移指南。

0.12.x 重大變更

已將 wagmi 的相關依賴更新為 0.12.x。

RainbowKit 已經採用了 wagmi 中的 WalletConnectLegacyConnector 連接器以繼續支持 WalletConnect v1。 WalletConnect v2 和 WalletConnectConnector 的支持將會作為補丁釋放，且不會有重大變更。

錢包將在未來的版本中自動過渡。

每個 dApp 現在都必須提供一個 WalletConnect Cloud projectId 以啟用 WalletConnect v2。必須在 2023 年 6 月 28 日 WalletConnect v1 橋服務器關閉之前完成此操作。如果未指定 projectId，RainbowKit 將默認選擇 v1。

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

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0

2. 提供一個 WalletConnect Cloud projectId

每個依賴於WalletConnect的dApp現在都需要從WalletConnect Cloud獲取一個projectId。這是完全免費的，只需幾分鐘。

將 projectId 提供給 getDefaultWallets 和單獨的 RainbowKit 錢包連接器，如下：

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

0.11.x 重大變更

已將 wagmi 的相關依賴更新為 0.11.x。

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

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0

npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0

npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0

npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0

2. 檢查 `wagmi` 中的重大變更

如果你在應用程序中使用 wagmi 鉤子，你需要檢查應用程序是否受到了 wagmi 重大變更的影響。

你可以在這裡看到他們的遷移指南。

0.7.x 重大變更

如果你正在創建自定義錢包列表，你必須現在單獨導入每個錢包以減少打包大小。注意，由於錢包不再通過 wallet 對像命名空間，所有錢包現在都有一個 Wallet 後綴。

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

還請注意，Steakwallet 向後兼容層已經被移除。應該用 Omni 代替。

-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];

0.4.x 重大變更

RainbowKit 已將 wagmi 相關依賴更新為 0.5.x。

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

1. 升級依賴

將 RainbowKit 和 wagmi 升級到最新版本

npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0

2. 檢查 `wagmi` 中的重大變更

如果你在應用程序中使用 wagmi 鉤子，你需要檢查應用程序是否受到了 wagmi 重大變更的影響。

你可以在此處查看他們的遷移指南。

0.3.x 重大變更

從 Wallet 類型的 createConnector 中移除了 chainId 參數。

請注意，所有內建錢包都在使用新 API。 大多數消費者不會受到影響。 此更改僅影響已創建/消耗自定義錢包的消費者。

如果您之前從 createConnector 中的 chainId 派生出 RPC URL，現在可以刪除該邏輯，因為在使用 configureChains 時，wagmi 會內部處理 RPC URL。

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

0.2.x 重大變更

RainbowKit 已將 wagmi 的同伴依賴更新為 ^0.4。

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

1. 升級依賴

將 RainbowKit 和 wagmi 升級到最新版本

npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2

2. 替換 configureChains 的導入

從 wagmi 而不是 RainbowKit 導入 configureChains：

- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';

3. 遷移提供者

RainbowKit 不再導出 apiProvider API。用你希望的提供者從 wagmi 替換它。

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

Alchemy

從 wagmi/providers/alchemy 導入 alchemyProvider。

+ 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 })]
);

Infura

從 wagmi/providers/infura 導入 infuraProvider。

+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 })]
);

JSON RPC

從 wagmi/providers/jsonRpc 導入 jsonRpcProvider。

+ 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`,
+     }),
+   }),
  ]
);

公共提供者

從 wagmi/providers/public 導入 publicProvider。

+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);

4. 重命名 wagmi 的提供者

將 WagmiProvider 重命名為 WagmiConfig。

import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};

完成了！ 🌈

概述

入門指南

進階

遷移指南

遷移 RainbowKit

2.x.x 重大變更

RainbowKit變更

1.x.x 重大變更

已更新為 wagmi v1

0.12.x 重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 提供一個 WalletConnect Cloud projectId

0.11.x 重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

0.10.x 重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

0.9.x 重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

0.8.x 重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

0.7.x 重大變更

0.4.x 重大變更

1. 升級依賴

2. 檢查 `wagmi` 中的重大變更

0.3.x 重大變更

0.2.x 重大變更

1. 升級依賴

2. 替換 configureChains 的導入

3. 遷移提供者

Alchemy

Infura

JSON RPC

公共提供者

4. 重命名 wagmi 的提供者

概述

入門指南

進階

遷移指南

遷移 RainbowKit

2.x.x 重大變更

RainbowKit變更

1.x.x 重大變更

已更新為 wagmi v1

0.12.x 重大變更

1. 升級 RainbowKit 和 wagmi 至其最新版本

2. 提供一個 WalletConnect Cloud projectId

0.11.x 重大變更

1. 升級 RainbowKit 和 wagmi 至其最新版本

2. 檢查 wagmi 中的重大變更

0.10.x 重大變更

1. 升級 RainbowKit 和 wagmi 至其最新版本

2. 檢查 wagmi 中的重大變更

0.9.x 重大變更

1. 升級 RainbowKit 和 wagmi 至其最新版本

2. 檢查 wagmi 中的重大變更

0.8.x 重大變更

1. 升級 RainbowKit 和 wagmi 至其最新版本

2. 檢查 wagmi 中的重大變更

0.7.x 重大變更

0.4.x 重大變更

1. 升級依賴

2. 檢查 wagmi 中的重大變更

0.3.x 重大變更

0.2.x 重大變更

1. 升級依賴

2. 替換 configureChains 的導入

3. 遷移提供者

Alchemy

Infura

JSON RPC

公共提供者

4. 重命名 wagmi 的提供者

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

1. 升級 RainbowKit 和 `wagmi` 至其最新版本

2. 檢查 `wagmi` 中的重大變更

2. 檢查 `wagmi` 中的重大變更