RainbowKitとWagmi v2への移行
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>
)
}
3. wagmiとviemの破壊的変更を確認してください
dAppでwagmiフックとviemアクションを使用している場合、v2の移行ガイドに従う必要があります：
1. EIP-6963 ウォレットの動作改善
新しい EIP-6963 接続標準をサポートするウォレット（Rainbow、MetaMask などを含む）は、ウォレットを接続する体験の間に Installed セクションに自動的に表示されるようになりました。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで dApps に接続できるようになります。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで dApps に接続できるようになります。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで dApps に接続できるようになります。
開発者は引き続きカスタムウォレットリストを完全に制御でき、エンドユーザーにとって優先されるウォレットを強調表示できます。 すべてのプラットフォームをサポートするために、injectedWallet と walletConnectWallet をリストに含め続けることをお勧めします。 injectedWallet と walletConnectWallet をリストに含め続けることを推奨します。これにより、すべてのプラットフォームをサポートできます。 injectedWallet と walletConnectWallet をリストに含め続けることを推奨します。これにより、すべてのプラットフォームをサポートできます。
2. getDefaultConfig を使用した Wagmi 設定
この新しいAPIは設定体験を簡素化し、WagmiのcreateConfigを直接使用する必要を置き換えます。 チェーン設定が簡素化され、transportsのための推定された公開プロバイダーが含まれます。 チェーン設定が簡素化され、transportsのための推定された公開プロバイダーが含まれます。 チェーン設定が簡素化され、transportsのための推定された公開プロバイダーが含まれます。
デフォルトのウォレットリストが自動的に含まれるようになり、getDefaultWalletsやconnectorsForWalletsを使用する必要がなくなります。
インポートされた、またはカスタムウォレットコネクタをwalletsに渡すことでカスタムウォレットリストを作成できます。 ウォレットコネクタのインスタンス化とprojectIdおよびchainsの渡しはもはや必要ありません。 インポートされた、またはカスタムウォレットコネクタをwalletsに渡すことでカスタムウォレットリストを作成できます。 ウォレットコネクタのインスタンス化とprojectIdおよびchainsの渡しはもはや必要ありません。 ウォレットコネクタのインスタンス化と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>
3. カスタムチェーン
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 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(),
},
})
4. カスタムウォレット
RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、更新されたドキュメントおよびサンプルコネクタを参照してください。 RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、更新されたドキュメントおよびサンプルコネクタを参照してください。
ウォレットコネクタは、rdnsプロパティを使用してEIP-6963標準もサポートするようになりました。 ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。 ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。 ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。
RainbowKit v2に関する問題やフィードバックは、GitHubのこちらで報告してください。
