遷移指南
遷移指南
遷移 RainbowKit
wagmi 和 viem 的peer dependencies已升級至 2.x.x，並有重大更改。
請按照以下步驟進行遷移。
1. 升級RainbowKit、wagmi和viem至最新版本
2. 安裝@tanstack/react-query對等依賴
使用Wagmi v2時，TanStack Query現在是必須的peer dependency。
使用以下指令安裝：
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 及其他）將現在會在連接錢包過程中自動出現在「已安裝」部分。這確保用戶能夠始終找到他們喜愛的錢包，並在沒有沖突或備用按鈕的情況下連接到dApps。
開發者可以完全控制自訂錢包列表，以強調終端用戶首選的錢包。建議繼續在您的列表中包括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. RainbowKit提供者
您無需再向<RainbowKitProvider>傳遞chains。
- <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中的任何自訂錢包連接器。
錢包連接器現在還支持EIP-6963標準，具有rdns屬性。確保填寫此字段以防止在您的錢包列表中對支持EIP-6963的錢包重複引用。
wagmi對等依賴已更新至1.x.x。
請按照以下步驟進行遷移。
1. 升級RainbowKit和wagmi至最新版本
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
2. 安裝viem對等依賴
wagmi v1需要viem對等依賴。使用以下命令安裝：
3. 確保打包器和polyfill的兼容性
參考我們的Next.js Webpack 配置範例以獲取您的項目配置指導。
可用的Vite和Remix的額外框架指南此處。
4. 檢查wagmi中的重大變更
如果您在應用中使用wagmi鉤子，您需要遵循wagmi至v1的遷移指南。
您可以在這裡查看他們的遷移指南。
wagmi對等依賴已更新至0.12.x。
RainbowKit已採用walletConnectLegacyConnector連接器在wagmi中以持續支持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和單個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鉤子，您需要檢查應用是否受到wagmi中的重大變更影響。
您可以在這裡查看他們的遷移指南。
wagmi對等依賴已更新至0.10.x。
請按照以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
如果您在應用中使用wagmi鉤子，您需要檢查應用是否受到wagmi中的重大變更影響。
您可以在這裡查看他們的遷移指南。
wagmi對等依賴已更新至0.9.x。
請按照以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
如果您在應用中使用wagmi鉤子，您需要檢查應用是否受到wagmi中的重大變更影響。
您可以在這裡查看他們的遷移指南。
wagmi對等依賴已更新至0.8.x。
請按照以下步驟進行遷移。
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
如果您在應用中使用wagmi鉤子，您需要檢查應用是否受到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鉤子，您需要檢查應用是否受到wagmi中的重大變更影響。
您可以在這裡查看他們的遷移指南。
從Wallet類型的createConnector中移除chainId參數。
請注意，所有內置錢包均使用新API。大多數消費者不會受到影響。此變化僅影響創建/消費自訂錢包的消費者。
如果您之前通過createConnector推導RPC URL，您現在可以移除此邏輯，因為wagmi在用於configureChains時現在會內部處理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 }),
],
},
]);
RainbowKit已更新wagmi對等依賴至^0.4。
請按照以下步驟進行遷移。
升級RainbowKit和wagmi至其最新版本
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
從wagmi導入configureChains而不是RainbowKit：
- 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>
);
};
完成了！🌈
