迁移指南

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

4. 检查wagmi和viem中的重大更改

如果您在 dApp 中使用 wagmi 钩子和 viem 操作，则需要遵循 v2 的迁移指南：

RainbowKit 变更

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. RainbowKitProvider

您不再需要将 chains 传递给 <RainbowKitProvider>。

- <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中的自定义钱包连接器。

现在钱包连接器也支持带rdns道具的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. 确保打包工具和补充包兼容性

参考我们的Next.js Webpack配置示例，以获得您的项目配置指南。

有关Vite和Remix的额外框架指南，请参见此处。

4. 检查wagmi中的重大更改

如果您在应用程序中使用wagmi挂钩，您将需要遵循wagmi的迁移指南到v1。

您可以在此处查看他们的迁移指南。

0.12.x 重大更改

wagmi对等依赖项已更新为0.12.x。

RainbowKit在wagmi中采用了WalletConnectLegacyConnector连接器，以继续支持WalletConnect v1。对WalletConnect v2和WalletConnectConnector的支持将很快通过补丁发布而不会引入重大更改。

钱包将在未来版本中自动过渡。

每个dApp现在都必须提供一个WalletConnect Cloud projectId来启用WalletConnect v2。这必须在2023年6月28日WalletConnect v1桥服务器关闭之前完成。如果未指定projectId，RainbowKit将默认选择v1支持所有钱包。

请按照以下步骤进行迁移。

1. 升级RainbowKit和`wagmi`至最新版本

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

2. 提供WalletConnect Cloud项目ID

每个依赖于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 }),
    ],
  },
]);

0.11.x 重大更改

wagmi对等依赖项已更新为0.11.x。

请按照以下步骤进行迁移。

1. 升级RainbowKit和`wagmi`至最新版本

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

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

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

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

2. 检查`wagmi`中的重大更改

如果您在应用程序中使用wagmi挂钩，您将需要确认您的应用程序是否受到wagmi中重大更改的影响。

您可以在此处查看他们的迁移指南。

0.7.x 重大更改

如果您正在创建自定义钱包列表，现在必须单独导入每个钱包以减少包大小。注意，由于钱包不再通过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 }),
];

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`中的重大更改

如果您在应用程序中使用wagmi挂钩，您将需要确认您的应用程序是否受到wagmi中重大更改的影响。

您可以在此处查看他们的迁移指南。

0.3.x 重大更改

已从钱包类型的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导入

从wagmi导入configureChains而不是从RainbowKit导入：

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

3. 迁移提供者

RainbowKit不再导出apiProvider API。用您想要的供应商从wagmi替换。

- import { apiProvider } from '@rainbow-me/rainbowkit';

Alchemy

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

Public provider

从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项目ID

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. 迁移提供者

Alchemy

Infura

JSON RPC

Public provider

4. 重命名wagmi的提供者

概览

入门

高级

迁移指南

RainbowKit迁移

2.x.x 重大更改

RainbowKit 变更

1.x.x 重大更改

更新至wagmi v1

0.12.x 重大更改

1. 升级RainbowKit和wagmi至最新版本

2. 提供WalletConnect Cloud项目ID

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. 迁移提供者

Alchemy

Infura

JSON RPC

Public provider

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`中的重大更改