マイグレーションガイド

RainbowKitのマイグレーション

2.x.x 破壊的な変更

wagmi と viem のピア依存関係が 2.x.x に達し、互換性のない変更が行われました。

以下の手順に従って移行してください。

1. RainbowKit、wagmi、およびviemを最新バージョンにアップグレードしてください

npm i @rainbow-me/rainbowkit@2 wagmi@2 [email protected]

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の移行ガイドに従う必要があります：

新しい 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 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をサポートするために大幅な変更が加えられました。 RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、更新されたドキュメントおよびサンプルコネクタを参照してください。 RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 RainbowKitのウォレットコネクタは、Wagmi v2をサポートするために大幅な変更が加えられました。 dAppのカスタムウォレットコネクタをアップグレードするために、更新されたドキュメントおよびサンプルコネクタを参照してください。

ウォレットコネクタは、rdnsプロパティを使用してEIP-6963標準もサポートするようになりました。ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。ウォレットリスト内でEIP-6963をサポートするウォレットへの重複する参照が発生しないように、これが入力されていることを確認してください。

1.x.x 破壊的な変更

wagmi v1に更新

wagmi のピア依存関係が 1.x.xに更新されました。

以下の手順に従って移行してください。

1. RainbowKitとwagmiを最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^1 wagmi@^1

2. viemのピア依存関係をインストールしてください

wagmi v1はviemピア依存関係を必要とします。以下のコマンドでインストールします: 以下のコマンドでインストールします: 以下のコマンドでインストールします:

npm i viem

3. バンドラとポリフィルの互換性を確保する

以前のwagmiバージョンでは、 ethersに依存していたため、WalletConnectが必要とするfs、net、tlsモジュールが自動的にポリフィルされました。これは、viemをベースに構築されたRainbowKit v1 + wagmi v1ではもはや当てはまりません。以前のwagmiバージョンでは、 ethersに依存していたため、WalletConnectが必要とするfs、net、tlsモジュールが自動的にポリフィルされました。これは、viemをベースに構築されたRainbowKit v1 + wagmi v1ではもはや当てはまりません。これは、viemをベースに構築されたRainbowKit v1 + wagmi v1ではもはや当てはまりません。

プロジェクトの設定指南としてNext.js Webpack ConfigとCreate React App polyfillsのサンプルを参照してください。

ViteとRemixの追加フレームワークガイドは、 hereで利用できます。

3. wagmiの破壊的な変更を確認する

あなたのアプリケーションでwagmiのフックを使用している場合、wagmiのv1への移行ガイドに従う必要があります。

ここで移行ガイドを見ることができます。

0.12.x破壊的な変更

wagmiのピア依存関係が0.12.xに更新されました。

RainbowKitは、継続的なWalletConnect v1のサポートのために、wagmi内のWalletConnectLegacyConnectorコネクタを採用しました。 WalletConnect v2とWalletConnectConnectorのサポートは間もなくパッチリリースとして利用可能になります。既存のコードを変更することなく導入できます。 WalletConnect v2とWalletConnectConnectorのサポートは間もなくパッチリリースとして利用可能になります。既存のコードを変更することなく導入できます。 WalletConnect v2とWalletConnectConnectorのサポートは間もなくパッチリリースとして利用可能になります。既存のコードを変更することなく導入できます。

将来のリリースでは、ウォレットは自動的に移行されます。

すべてのdAppは現在、WalletConnect v2を有効にするためにWalletConnect CloudのprojectIdを提供する必要があります。これは、WalletConnect v1のブリッジサーバーが2023年6月28日にシャットダウンされる前に完了させる必要があります。すべてのdAppは現在、WalletConnect v2を有効にするためにWalletConnect CloudのprojectIdを提供する必要があります。これは、WalletConnect v1のブリッジサーバーが2023年6月28日にシャットダウンされる前に完了させる必要があります。 RainbowKitは、projectIdが指定されていない場合、すべてのウォレットに対して静かにv1を優先します。これは、WalletConnect v1のブリッジサーバーが2023年6月28日にシャットダウンされる前に完了させる必要があります。すべてのdAppは現在、WalletConnect v2を有効にするためにWalletConnect CloudのprojectIdを提供する必要があります。これは、WalletConnect v1のブリッジサーバーが2023年6月28日にシャットダウンされる前に完了させる必要があります。 RainbowKitは、projectIdが指定されていない場合、すべてのウォレットに対して静かにv1を優先します。

以下の手順に従って移行してください。

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0

2. WalletConnect CloudのprojectIdを提供します

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 }),
    ],
  },
]);

0.11.xの破壊的な変更

wagmiのピア依存関係が0.11.xに更新されました。

以下の手順に従って移行してください。

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0

2. `wagmi`の破壊的な変更を確認する

あなたのアプリケーションでwagmiのフックを使用している場合、あなたのアプリケーションがwagmiの破壊的な変更の影響を受けているかどうかを確認する必要があります。

ここで移行ガイドを見ることができます。

0.10.x破壊的な変更

wagmiのピア依存関係が0.10.xに更新されました。

以下の手順に従って移行してください。

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0

2. `wagmi`の破壊的な変更を確認する

ここで移行ガイドを見ることができます。

0.9.x破壊的な変更

wagmiのピア依存関係が0.9.xに更新されました。

以下の手順に従って移行してください。

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0

2. `wagmi`の破壊的な変更を確認する

ここで移行ガイドを見ることができます。

0.8.x破壊的な変更

wagmiのピア依存関係が0.8.xに更新されました。

以下の手順に従って移行してください。

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0

2. `wagmi`の破壊的な変更を確認する

こちらで移行ガイドを見ることができます。

0.7.x破壊的な変更

カスタムウォレットリストを作成している場合、バンドルサイズを削減するために、各ウォレットを個別にインポートする必要があります。ウォレットがもはや wallet オブジェクトを通じて名前空間化されないため、すべてのウォレットには Wallet という接尾辞が付きます。ウォレットがもはや wallet オブジェクトを通じて名前空間化されないため、すべてのウォレットには Wallet という接尾辞が付きます。ウォレットがもはや 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を使用すべきです。代わりにOmniを使用すべきです。

-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];

0.4.x破壊的な変更

RainbowKitはwagmiのピア依存関係を0.5.xに更新しました。

以下の手順に従って移行してください。

1. 依存関係のアップグレード

RainbowKitとwagmiを最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0

2. `wagmi`の破壊的な変更を確認する

ここで彼らの移行ガイドを見ることができます。

0.3.xの破壊的な変更

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 }),
    ],
  },
]);

0.2.x ブレーキングチェンジ

RainbowKitはwagmiのピア依存性を^0.4に更新しました。

以下の手順に従って移行してください。

1. 依存関係のアップグレード

RainbowKitとwagmiを最新バージョンにアップグレードします

npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2

2. configureChainsのインポートを置き換える

RainbowKitの代わりにwagmiからconfigureChainsをインポートします：

- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';

3. プロバイダーを移行する

RainbowKitはもはやapiProvider APIをエクスポートしない。これをwagmiから任意のプロバイダーに置き換えてください。これをwagmiから任意のプロバイダーに置き換えてください。これを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 })]
);

Infura

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 })]
);

JSON RPC

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()]
);

4. wagmiのプロバイダの名前を変更する

WagmiProviderをWagmiConfigにリネームします。

import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};

そして終わりです！ 🌈

概要

入門

高度な設定

マイグレーションガイド

RainbowKitのマイグレーション

2.x.x 破壊的な変更

RainbowKit の変更点

1.x.x 破壊的な変更

wagmi v1に更新

0.12.x破壊的な変更

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. WalletConnect CloudのprojectIdを提供します

0.11.xの破壊的な変更

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

0.10.x破壊的な変更

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

0.9.x破壊的な変更

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

0.8.x破壊的な変更

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

0.7.x破壊的な変更

0.4.x破壊的な変更

1. 依存関係のアップグレード

2. `wagmi`の破壊的な変更を確認する

0.3.xの破壊的な変更

0.2.x ブレーキングチェンジ

1. 依存関係のアップグレード

2. configureChainsのインポートを置き換える

3. プロバイダーを移行する

アルケミー

Infura

JSON RPC

公開プロバイダ

4. wagmiのプロバイダの名前を変更する

概要

入門

高度な設定

マイグレーションガイド

RainbowKitのマイグレーション

2.x.x 破壊的な変更

RainbowKit の変更点

1.x.x 破壊的な変更

wagmi v1に更新

0.12.x破壊的な変更

1. RainbowKitとwagmiを最新バージョンにアップグレードします

2. WalletConnect CloudのprojectIdを提供します

0.11.xの破壊的な変更

1. RainbowKitとwagmiを最新バージョンにアップグレードします

2. wagmiの破壊的な変更を確認する

0.10.x破壊的な変更

1. RainbowKitとwagmiを最新バージョンにアップグレードします

2. wagmiの破壊的な変更を確認する

0.9.x破壊的な変更

1. RainbowKitとwagmiを最新バージョンにアップグレードします

2. wagmiの破壊的な変更を確認する

0.8.x破壊的な変更

1. RainbowKitとwagmiを最新バージョンにアップグレードします

2. wagmiの破壊的な変更を確認する

0.7.x破壊的な変更

0.4.x破壊的な変更

1. 依存関係のアップグレード

2. wagmiの破壊的な変更を確認する

0.3.xの破壊的な変更

0.2.x ブレーキングチェンジ

1. 依存関係のアップグレード

2. configureChainsのインポートを置き換える

3. プロバイダーを移行する

アルケミー

Infura

JSON RPC

公開プロバイダ

4. wagmiのプロバイダの名前を変更する

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

1. RainbowKitと`wagmi`を最新バージョンにアップグレードします

2. `wagmi`の破壊的な変更を確認する

2. `wagmi`の破壊的な変更を確認する