Di chuyển sang RainbowKit và Wagmi v2
Các phần phụ thuộc ngang hàng wagmi và viem đã đạt 2.x.x với các thay đổi quan trọng.
Thực hiện theo các bước dưới đây để di chuyển.
1. Nâng cấp RainbowKit, wagmi, và viem lên phiên bản mới nhất
2. Cài đặt phụ thuộc ngang hàng @tanstack/react-query
Với Wagmi v2, TanStack Query hiện là phần phụ thuộc ngang hàng cần thiết.
Cài đặt nó với lệnh sau:
npm i @tanstack/react-query
3. Nâng cấp cấu hình RainbowKit và Wagmi của bạn
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. Kiểm tra thay đổi làm hỏng trong wagmi và viem
Nếu bạn sử dụng các hook wagmi và các hành động viem trong dApp của bạn, bạn sẽ cần làm theo các hướng dẫn di chuyển cho v2:
1. Cải thiện hành vi cho ví EIP-6963
Các ví hỗ trợ tiêu chuẩn kết nối mới EIP-6963 (bao gồm Rainbow, MetaMask, và hơn thế nữa) giờ đây sẽ tự động xuất hiện trong phần Installed trong quá trình trải nghiệm Connect Wallet. Điều này đảm bảo rằng người dùng luôn có thể tìm thấy ví yêu thích của họ và kết nối với dApps mà không gặp các xung đột hoặc nút dự phòng.
Các nhà phát triển tiếp tục có toàn quyền kiểm soát danh sách Ví Tùy Chỉnh để nhấn mạnh các ví ưa thích cho người dùng cuối. Khuyến khích bạn tiếp tục bao gồm injectedWallet và walletConnectWallet trong danh sách của mình để hỗ trợ tất cả các nền tảng.
2. Cấu hình Wagmi với getDefaultConfig
API mới này đơn giản hóa trải nghiệm cấu hình và thay thế nhu cầu sử dụng trực tiếp createConfig của Wagmi. Cấu hình chuỗi được đơn giản hóa, bao gồm các nhà cung cấp công cộng suy luận cho transports.
Danh sách ví mặc định sẽ được bao gồm tự động, loại bỏ nhu cầu sử dụng getDefaultWallets và connectorsForWallets.
Bạn có thể tạo một danh sách Ví Tùy chỉnh bằng cách truyền các kết nối Ví Tùy chỉnh hoặc đã nhập khẩu vào wallets. Không cần khởi tạo các kết nối ví và truyền projectId và chains nữa.
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
Bạn không cần phải truyền chains vào <RainbowKitProvider>.
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
4. Chuỗi Tùy chỉnh
Loại Chain đã thay đổi theo Wagmi v2 và tiếp tục hỗ trợ metadata iconUrl và iconBackground của RainbowKit.
+ 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
Ví dụ với getDefaultConfig:
const config = getDefaultConfig({
+ chains: [
+ avalanche, /* custom chain */
+ {
+ ...mainnet,
+ iconBackground: '#000',
+ iconUrl: 'https://example.com/icons/ethereum.png',
+ }, /* metadata overrides */
+ ],
});
Ví dụ với 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. Ví Tùy chỉnh
Các đầu nối ví RainbowKit đã trải qua nhiều thay đổi để hỗ trợ Wagmi v2. Tham khảo tài liệu cập nhật và một đầu nối ví mẫu để nâng cấp bất kỳ Đầu Nối Ví Tùy Chỉnh nào trong dApp của bạn.
Các kết nối ví giờ đây cũng hỗ trợ tiêu chuẩn EIP-6963 với thuộc tính rdns. Đảm bảo rằng điều này được điền vào để tránh các tham chiếu trùng lặp đến các ví hỗ trợ EIP-6963 trong danh sách ví của bạn.
Vui lòng báo cáo bất kỳ vấn đề hoặc phản hồi nào cho RainbowKit v2 trên GitHub tại đây.
