遷移指南
遷移指南
遷移 RainbowKit
wagmi 和 viem 的對等依賴已經達到 2.x.x 版本，並且有重大更改。
請遵循以下步驟進行遷移。
1. 升級 RainbowKit、wagmi 和 viem 到最新版本
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 的遷移指南：
1. 改進 EIP-6963 錢包的行為
支援最新 EIP-6963 連接標準的錢包（包括 Rainbow、MetaMask 和更多）將自動出現在錢包連接體驗的已安裝部分中。這確保用戶能隨時找到其喜愛的錢包並無衝突地連接到 dApp。
開發者仍然可以完全控制展示優選錢包的自定義錢包列表。建議您繼續將 injectedWallet 和 walletConnectWallet 包含在您的列表中，以支援所有平台。
2. 用 getDefaultConfig 進行 Wagmi 配置
此新 API 簡化了配置體驗，並取代直接使用 Wagmi 的 createConfig。鏈配置得到簡化，包括為 transports 推斷的公共提供者。
默認錢包列表將自動包含，無需再使用 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. 自定義鏈
根據 Wagmi v2 的變更，Chain 類型已經更改，但仍然支援 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 prop 支援 EIP-6963 標準。確保已填充此信息，以防止在您的錢包列表中重複引用支援 EIP-6963 的錢包。
wagmi 的等級依賴項已更新至 1.x.x。
請遵循以下步驟進行遷移。
1. 升級 RainbowKit 和 wagmi 到最新版本
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
2. 安裝 viem 等級的依賴項
wagmi v1 需要 viem 的等級依賴項。使用以下命令安裝：
3. 確保樣式綁定和填充的相容性
參考我們的Next.js Webpack 配置示例來獲得項目的配置指導。
可在此處獲得 Vite 和 Remix 的附加框架指南：其他建構工具設置
4. 檢查 wagmi 中的重大變更
如果應用程序中使用了 wagmi hook，您將需要遵循 wagmi 的 v1 遷移指南。
您可以在此查看其遷移指南。
wagmi 的等級依賴項已更新至 0.12.x。
RainbowKit 已採納 WalletConnectLegacyConnector 連接器以持續支援 WalletConnect v1。對 WalletConnect v2 和 WalletConnectConnector 的支援很快將作為修補釋出而無重大變更。
將在未來的版本中自動過渡錢包。
現在，每個 dApp 必須提供 WalletConnect Cloud 的 projectId 以開啟 WalletConnect v2 功能。需在 2023 年 6 月 28 日 WalletConnect v1 桥服務器關閉之前完成。現若未指定 projectId，RainbowKit 將靜默偏好所有錢包的 v1。
請遵循以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
每個依賴 WalletConnect 的 dApp 現在需要從 WalletConnect Cloud 獲得 projectId。這是完全免費的，只需幾分鐘就可以完成。
將 projectId 提供給 getDefaultWallets 和類似的 individuell RainbowKit 錢包連接器：
const projectId = 'YOUR_PROJECT_ID';
const { wallets } = getDefaultWallets({
appName: 'My RainbowKit App',
projectId,
chains,
});
const connectors = connectorsForWallets([
...wallets,
{
groupName: 'Other',
wallets: [
readyWallet({ projectId, chains }),
trustWallet({ projectId, chains }),
ledgerWallet({ projectId, chains }),
],
},
]);
wagmi 的等級依賴項已更新至 0.11.x。
請遵循以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
如果應用程式中使用了 wagmi hook，您將需要檢查您的應用程式是否受到 wagmi 的重大變更影響。
您可以在此查看其遷移指南。
wagmi 的等級依賴項已更新至 0.10.x。
請遵循以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
如果應用程式中使用了 wagmi hook，您將需要檢查您的應用程式是否受到 wagmi 的重大變更影響。
您可以在此查看其遷移指南。
wagmi 的等級依賴項已更新至 0.9.x。
請遵循以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
如果應用程式中使用了 wagmi hook，您將需要檢查您的應用程式是否受到 wagmi 的重大變更影響。
您可以在此查看其遷移指南。
wagmi 的等級依賴項已更新至 0.8.x。
請遵循以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
如果應用程式中使用了 wagmi hook，您將需要檢查您的應用程式是否受到 wagmi 的重大變更影響。
您可以在此查看其遷移指南。
如果您正在創建一個自定義的錢包列表，現在必須單獨匯入每個錢包，以減少束大小。請注意，由於錢包不再通過 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 }),
];
RainbowKit 已更新 wagmi 的等級依賴項至 0.5.x。
請遵循以下步驟進行遷移。
升級 RainbowKit 和 wagmi 到最新版本
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
如果應用程式中使用了 wagmi hook，您將需要檢查您的應用程式是否受到 wagmi 的重大變更影響。
您可以在此查看其遷移指南。
已從 Wallet 類型的 createConnector 中移除 chainId 參數。
請注意，所有內建錢包都在使用新 API。大多數消費者不會受到影響。此更改僅影響已創建或消費自定義錢包的消費者。
如果您先前在 createConnector 中從 chainId 派生 RPC URLs，現在可以刪除該邏輯，因為 wagmi 在使用 configureChains 時內部處理 RPC URLs。
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 }),
],
},
]);
RainbowKit 已更新 wagmi 的等級依賴項至 ^0.4。
請遵循以下步驟進行遷移。
升級 RainbowKit 和 wagmi 到最新版本
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
從 wagmi 而非 RainbowKit 匯入 configureChains：
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
RainbowKit 不再匯出 apiProvider API。用您想要的 wagmi 提供者替換它。
- import { apiProvider } from '@rainbow-me/rainbowkit';
從 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 })]
);
從 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 })]
);
從 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()]
);
將 WagmiProvider 重命名為 WagmiConfig。
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'
const App = () => {
return (
- <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+ <WagmiConfig client={wagmiClient}>...</WagmiConfig>
);
};
完成啦！🌈
