迁移指南

迁移 RainbowKit

2.x.x 破坏性更改

wagmi和viem的对等依赖已升级到2.x.x版本，带来了重大变更。

3。 3。迁移提供商

1. 将RainbowKit和wagmi升级到最新版本

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等）将自动显示在连接钱包体验的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>

4. 自定义链条

与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(),
    },
  })

5. 自定义钱包

RainbowKit已采用wagmi中的WalletConnectLegacyConnector连接器，以便继续支持WalletConnect v1。参考更新的文档和一个示例连接器来升级你 dApp 中的任何自定义钱包连接器。

钱包连接器现在也支持带有 rdns 属性的 EIP-6963 标准。确保填充此属性以防止在您的钱包列表中重复引用支持 EIP-6963 的钱包。

1.x.x 破坏性更改

更新到 wagmi v1

wagmi 的同级依赖项已更新为 1.x.x.

3。 3。迁移提供商

**1. 将RainbowKit和wagmi升级到最新版本

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

**2. 安装 viem 对等依赖项

wagmi v1 需要 viem 对等依赖项。使用以下命令安装：

npm i viem

注意：wagmi 不再内部使用 ethers 包。但如果你依赖Authentication API，siwe 仍将需要 ethers 作为对等依赖。

**3. 确保捆绑器和 polyfill 兼容性

在依赖 ethers 的早期 wagmi 版本中，WalletConnect 需要的 fs，net 和 tls 模块会自动进行 polyfill。这在基于 viem 构建的 RainbowKit v1 + wagmi v1 中已不再是这样。

参考我们的 Next.js Webpack Config 和 Create React App polyfills 示例，以获得你的项目配置指导。

Vite和Remix的附加框架指南可在此处获取 here.

**4. 检查wagmi中的破坏性变化

如果您在应用程序中使用wagmi钩子，您将需要按照wagmi的迁移指南进行升级到v1.

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

0.12.x 破坏性更改

The wagmi peer dependency has been updated to 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。

3。 3。迁移提供商

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

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

2. 提供WalletConnect Cloud projectId

现在依赖于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: [
      argentWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);

0.11.x 破坏性更改

The wagmi peer dependency has been updated to 0.11.x.

3。 3。迁移提供商

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

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

2. 检查`wagmi`中的破坏性变化

如果您在应用中使用wagmi钩子，您需要检查您的应用是否受到wagmi中破坏性更改的影响。

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

0.10.x 破坏性更改

The wagmi peer dependency has been updated to 0.10.x.

3。 3。迁移提供商

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

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

2. 检查`wagmi`中的破坏性变化

如果您在应用中使用wagmi钩子，您需要检查您的应用是否受到wagmi中破坏性更改的影响。

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

0.9.x 破坏性更改

The wagmi peer dependency has been updated to 0.9.x.

3。 3。迁移提供商

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

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

2. 检查`wagmi`中的破坏性变化

如果您在应用中使用wagmi钩子，您需要检查您的应用是否受到wagmi中破坏性更改的影响。

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

0.8.x 破坏性更改

The wagmi peer dependency has been updated to 0.8.x.

3。 3。迁移提供商

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

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.

3。 3。迁移提供商

1. 升级依赖项

将RainbowKit和wagmi升级到最新版本

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

2. 检查`wagmi`中的破坏性变化

如果您在应用中使用wagmi钩子，您需要检查您的应用是否受到wagmi中破坏性更改的影响。

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

0.3.x 破坏性更改

删除了Wallet类型中createConnector中的chainId参数。

注意所有内置钱包都使用新API。 大部分消费者不会受影响。此修改只影响创建/使用过自定义钱包的消费者。**

如果你之前在createConnector上从chainId派生出RPC URLs，现在你可以去掉这个逻辑，因为当与configureChains一起使用时，wagmi现在内部处理RPC URLs。

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。

3。 3。迁移提供商

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

公共提供者

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

Alchemy

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

Alchemy

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`中的破坏性变化