Rainbow logo
RainbowKit
2.2.10

Обзор

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

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

УстановкаКнопка подключенияРазмеры модальных оконОформление тематического оформленияЦепочкиЛокализацияАутентификацияНедавние транзакции

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

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

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

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

Миграция RainbowKit

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

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

Следуйте инструкциям ниже для выполнения миграции.

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

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

Установите зависимость @tanstack/react-query

С Wagmi v2, TanStack Query теперь является обязательной зависимостью.

Установите её с помощью следующей команды:

npm i @tanstack/react-query

Обновите конфигурации 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>
    )
  }

Проверьте наличие критических изменений в wagmi и viem

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

Изменения в RainbowKit

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

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

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

Конфигурация 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 */

})

RainbowKitProvider

Больше не нужно передавать chains в <RainbowKitProvider>.

- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>

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

Тип 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(),
    },
  })

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

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

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

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

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

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

Следуйте инструкциям ниже для выполнения миграции.

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

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

Установите зависимость viem второго уровня

Для работы wagmi v1 требуется зависимость viem. Установите его с помощью следующей команды:

npm i viem

Обеспечьте совместимость пакетировщика и полифиллов

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

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

Проверьте наличие обратно несовместимых изменений в 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 не указан.

Следуйте инструкциям ниже для выполнения миграции.

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

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

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

      readyWallet({ projectId, chains }),

      trustWallet({ projectId, chains }),

      ledgerWallet({ projectId, chains }),

    ],

  },

]);

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

Зависимость wagmi была обновлена до 0.11.x.

Следуйте инструкциям ниже для выполнения миграции.

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

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

Проверьте наличие критических изменений в wagmi

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

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

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

Зависимость wagmi была обновлена до 0.10.x.

Следуйте инструкциям ниже для выполнения миграции.

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

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

Проверьте наличие критических изменений в wagmi

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

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

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

Зависимость wagmi была обновлена до 0.9.x.

Следуйте инструкциям ниже для выполнения миграции.

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

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

Проверьте наличие критических изменений в wagmi

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

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

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

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

Следуйте инструкциям ниже для выполнения миграции.

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

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

Проверьте наличие критических изменений в 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.

Следуйте инструкциям ниже для выполнения миграции.

Обновить зависимости

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

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

Проверьте наличие критических изменений в 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.

Следуйте инструкциям ниже для выполнения миграции.

Обновить зависимости

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

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

Замените импорт configureChains

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

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

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

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

Переименуйте провайдер wagmi

Переименуйте WagmiProvider в WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

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

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