Rainbow logo
RainbowKit
2.1.3

Обзор

ВведениеРуководство по миграции

Начало работы

УстановкаConnectButtonРазмеры Модального ОкнаТематизацияСетиЛокализацияАутентификацияНедавние транзакции

Продвинутый уровень

Модальные хукиПользовательская кнопка ConnectButtonПользовательская темаПользовательский список кошельковПользовательские кошелькиПользовательские сетиПользовательская информация о приложенииПользовательские АватарыПользовательская аутентификацияКнопкаПортмонеткаКрутой режим

Руководство по миграции

Руководство по миграции

Миграция 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

Если вы используете хуки 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 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.

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

1.x.x Критические изменения

Обновлено до wagmi v1

wagmi зависимость уровня peer обновлена до 1.x.x.

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

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. **Обеспечьте совместимость пакетировщика и полифилла**

В предыдущих версиях wagmi, которые полагались на ethers, модули fs, net и tls, требуемые WalletConnect, автоматически полифилировались. Теперь это уже не так с RainbowKit v1 + wagmi v1, которые построены на viem.

Ссылка на наш Конфигурация Webpack Next.js и Полифиллы Create React App образцы для руководства по настройке вашего проекта.

Дополнительные руководства по фреймворку для Vite и Remix доступны here.

4. Проверьте наличие обратно несовместимых изменений в wagmi

Если вы используете хуки wagmi в вашем приложении, вам нужно будет следовать руководству по миграции wagmi к v1.

Вы можете посмотреть их руководство по миграции здесь.

Обратно несовместимые изменения 0.12.x

Версия wagmi для одноранговых зависимостей была обновлена до 0.12.x.

RainbowKit принял коннектор WalletConnectLegacyConnector в wagmi для продолжения поддержки WalletConnect v1. Поддержка WalletConnect v2 и WalletConnectConnector скоро будет доступна в виде патч-релиза, без нарушения обратной совместимости.

Кошельки будут автоматически переведены на последующие релизы.

Теперь каждому dApp необходимо предоставить projectId от WalletConnect Cloud для включения WalletConnect v2. Это должно быть выполнено до того, как серверы моста WalletConnect v1 будут отключены 28 июня 2023 года. RainbowKit будет молча предпочитать v1 для всех кошельков, если projectId не указан.

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

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

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

2. Предоставьте projectId от WalletConnect Cloud

Теперь каждому dApp, который зависит от WalletConnect, необходимо получить projectId от WalletConnect Cloud. Это абсолютно бесплатно и занимает всего несколько минут.

Предоставьте 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

Зависимость 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

Если вы используете хуки wagmi в своем приложении, вам потребуется проверить, затронули ли критические изменения в 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

Если вы используете хуки wagmi в своем приложении, вам потребуется проверить, затронули ли критические изменения в 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

Если вы используете хуки 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 обратно несовместимые изменения

Удален параметр chainId из createConnector в типе Wallet.

Обратите внимание, что все встроенные кошельки используют новый API. Большинство пользователей не заметят изменений. Это изменение коснулось только пользователей, создавших или использовавших кастомные кошельки.

Если вы ранее получали URL-ы RPC из chainId на createConnector, теперь вы можете удалить эту логику, поскольку wagmi теперь обрабатывает URL-ы RPC внутренне при использовании с configureChains.

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

Импорт configureChains из wagmi вместо RainbowKit:

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

3. Миграция провайдеров

RainbowKit больше не экспортирует API apiProvider. Замените его на выбранный вами провайдер из wagmi.

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

Алхимия

Импортируйте alchemyProvider из wagmi/providers/alchemy.

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

Инфура

Импортируйте infuraProvider из wagmi/providers/infura.

+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

Импортируйте jsonRpcProvider из wagmi/providers/jsonRpc.

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

Общедоступный провайдер

Импортируйте publicProvider из wagmi/providers/public.

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

И вы справились! 🌈

PreviousВведение
УстановкаNext