マイグレーションガイド
マイグレーションガイド
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>
)
}
3. wagmiとviemの破壊的変更を確認してください
dAppでwagmiフックとviemアクションを使用している場合、v2の移行ガイドに従う必要があります：
1. EIP-6963 ウォレットの動作改善
新しい EIP-6963 接続標準をサポートするウォレット（Rainbow、MetaMask などを含む）は、ウォレットを接続する体験の間に Installed セクションに自動的に表示されるようになりました。 これにより、ユーザーはお気に入りのウォレットを常に見つけて、競合やフォールバックボタンなしで 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. 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 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(),
},
})
4. カスタムウォレット
RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、更新されたドキュメントおよびサンプルコネクタを参照してください。
ウォレットコネクタは、rdnsプロパティを使用してEIP-6963標準もサポートするようになりました。 ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。
wagmi のピア依存関係が 1.x.xに更新されました。
以下の手順に従って移行してください。
1. RainbowKitとwagmiを最新バージョンにアップグレードします
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
2. viemのピア依存関係をインストールしてください
wagmi v1はviemピア依存関係を必要とします。 以下のコマンドでインストールします:
注：wagmiはもはやethersパッケージを内部的に使用していません。 しかし、 Authentication APIに依存している場合、siweはまだethersをピア依存関係として要求します。
3. バンドラとポリフィルの互換性を確保する
以前のwagmiバージョンでは、 ethersに依存していたため、WalletConnectが必要とするfs、net、tlsモジュールが自動的にポリフィルされました。 これは、viemをベースに構築されたRainbowKit v1 + wagmi v1ではもはや当てはまりません。
プロジェクトの設定指南としてNext.js Webpack ConfigとCreate React App polyfillsのサンプルを参照してください。
ViteとRemixの追加フレームワークガイドは、 hereで利用できます。
3. wagmiの破壊的な変更を確認する
あなたのアプリケーションでwagmiのフックを使用している場合、wagmiのv1への移行ガイドに従う必要があります。
ここで移行ガイドを見ることができます。
wagmiのピア依存関係が0.12.xに更新されました。
RainbowKitは、継続的なWalletConnect v1のサポートのために、wagmi内のWalletConnectLegacyConnectorコネクタを採用しました。 WalletConnect v2とWalletConnectConnectorのサポートは間もなくパッチリリースとして利用可能になります。既存のコードを変更することなく導入できます。
将来のリリースでは、ウォレットは自動的に移行されます。
すべてのdAppは現在、WalletConnect v2を有効にするためにWalletConnect CloudのprojectIdを提供する必要があります。 これは、WalletConnect v1のブリッジサーバーが2023年6月28日にシャットダウンされる前に完了させる必要があります。 RainbowKitは、projectIdが指定されていない場合、すべてのウォレットに対して静かにv1を優先します。
以下の手順に従って移行してください。
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
WalletConnectに依存するすべてのdAppは現在、WalletConnect CloudからprojectIdを取得する必要があります。 これは完全に無料で、数分で完了します。
getDefaultWalletsと個々のRainbowKitウォレットコネクタにprojectIdを提供します。次のように:
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 }),
],
},
]);
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のchainIdから以前に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
RainbowKitの代わりにwagmiから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>
);
};
そして終わりです！ 🌈
