Переход на RainbowKit и Wagmi v2

Пиринговые зависимости wagmi и viem достигли версии 2.x.x с критическими изменениями.

Следуйте шагам ниже для миграции.

1. Обновите RainbowKit, wagmi и viem до последних версий

npm i @rainbow-me/rainbowkit wagmi viem@2.x

**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

Если вы используете хуки wagmi и действия viem в вашем dApp, вам потребуется следовать руководствам по миграции для v2:

Изменения в RainbowKit

1. Улучшенное поведение для кошельков EIP-6963

Кошельки, поддерживающие новый стандарт подключения EIP-6963 (включая Rainbow, MetaMask и другие), теперь будут автоматически отображаться в разделе Установленные в процессе подключения кошелька. Это гарантирует, что пользователи всегда смогут найти свои любимые кошельки и подключиться к dApps без конфликтов или использования кнопок возврата.

Разработчики по-прежнему имеют полный контроль над Списком пользовательских кошельков, чтобы акцентировать внимание на предпочтительных кошельках для конечных пользователей. Рекомендуется продолжать включать injectedWallet и walletConnectWallet в ваш список для поддержки всех платформ.

2. Конфигурация Wagmi с getDefaultConfig

Этот новый API упрощает процесс настройки и заменяет необходимость прямого использования createConfig от Wagmi. Конфигурация сети стала проще, включая автоматическое определение публичных провайдеров для 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 и продолжает поддерживать метаданные iconUrl и iconBackground от RainbowKit.

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

5. Пользовательские кошельки

Коннекторы кошельков RainbowKit претерпели значительные изменения для поддержки Wagmi v2. Ссылка на обновленную документацию и пример коннектора для обновления любых Пользовательских Коннекторов Кошельков в вашем dApp.

Коннекторы кошельков теперь также поддерживают стандарт EIP-6963 с помощью свойства rdns. Убедитесь, что это свойство заполнено, чтобы избежать дублирования ссылок на кошельки, поддерживающие EIP-6963, в списке ваших кошельков.

Пожалуйста, сообщайте о любых проблемах или оставляйте отзывы по RainbowKit v2 на GitHub здесь.