Rainbow logo
RainbowKit
2.2.8

Посібник з Міграції

Посібник з Міграції

Міграція RainbowKit

Залежності 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:

1. Покращене поводження для гаманців з підтримкою EIP-6963

Гаманці, що підтримують новий стандарт підключення EIP-6963 (включаючи Rainbow, MetaMask та інші), тепер будуть автоматично з'являтися у розділі Installed під час процесу підключення гаманця. Це забезпечує користувачам можливість завжди знаходити свої улюблені гаманці та підключатися до 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 та продовжує підтримувати метадані 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.

Конектори гаманців тепер також підтримують стандарт EIP-6963 з пропозицією rdns. Переконайтеся, що це заповнено, щоб уникнути дублювання посилань на гаманці, що підтримують EIP-6963, у вашому списку гаманців.

Залежність wagmi була оновлена до версії 1.x.x.

Дотримуйтесь наступних кроків для міграції.

1. Оновіть RainbowKit та wagmi до останньої версії

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

2. Встановити залежність viem

wagmi v1 потребує залежність viem. Встановіть її за допомогою наступної команди:

npm i viem

3. Забезпечте сумісність будівника та поліфіла

У попередніх версіях wagmi, які використовували ethers, модулі fs, net та tls, які вимагалися WalletConnect, автоматично поліфілилися. Це більше не актуально для RainbowKit v1 + wagmi v1, які побудовані на основі viem.

Дивіться наші приклади Конфігурації Webpack для Next.js та Поліфіли для Create React App для керівництва з налаштування вашого проекту.

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

4. Перевірте зміни, що розривають сумісність у wagmi

Якщо ви використовуєте хуки wagmi у вашому додатку, вам потрібно буде слідувати посібнику міграції wagmi до v1.

Тут ви можете переглянути їхній посібник міграції.

Залежність wagmi була оновлена до версії 0.12.x.

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

Гаманці будуть автоматично переведені у майбутніх релізах.

Кожен dApp тепер повинен надати projectId для увімкнення WalletConnect v2 у WalletConnect Cloud. Це повинно бути завершено до закриття серверів моста WalletConnect v1 28 червня 2023 року. RainbowKit тихо надаватиме перевагу v1 для всіх гаманців, якщо projectId не вказано.

Дотримуйтесь наступних кроків для міграції.

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

Кожен 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 }),
],
},
]);

Залежність wagmi була оновлена до версії 0.11.x.

Дотримуйтесь наступних кроків для міграції.

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

Якщо ви використовуєте хуки wagmi у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у wagmi.

Тут ви можете переглянути їхній посібник з міграції.

Залежність wagmi була оновлена до версії 0.10.x.

Дотримуйтесь наступних кроків для міграції.

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

Якщо ви використовуєте хуки wagmi у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у wagmi.

Тут ви можете переглянути їхній посібник з міграції.

Залежність wagmi була оновлена до версії 0.9.x.

Дотримуйтесь наступних кроків для міграції.

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

Якщо ви використовуєте хуки wagmi у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у wagmi.

Тут ви можете переглянути їхній посібник з міграції.

Залежність wagmi була оновлена до версії 0.8.x.

Дотримуйтесь наступних кроків для міграції.

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

Якщо ви використовуєте хуки wagmi у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у wagmi.

Тут ви можете переглянути їхній посібник з міграції.

Якщо ви створюєте користувацький список гаманців, тепер вам потрібно імпортувати кожен гаманець окремо, щоб зменшити розмір пакета. Зверніть увагу, що оскільки гаманці більше не містяться в просторі імен через об'єкт 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 }), ];

RainbowKit оновив залежність wagmi до версії 0.5.x.

Дотримуйтесь наступних кроків для міграції.

Оновіть RainbowKit та wagmi до останньої версії

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

Якщо ви використовуєте хуки wagmi у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у wagmi.

Ви можете переглянути їхній посібник міграції тут.

Вилучено параметр 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 }), ], }, ]);

RainbowKit оновив залежність wagmi до версії ^0.4.

Дотримуйтесь наступних кроків для міграції.

Оновіть RainbowKit та wagmi до останньої версії

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

Імпортуйте 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 })] );

Імпортуйте 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()] );

Перейменуйте WagmiProvider на WagmiConfig.

import {
- WagmiProvider + WagmiConfig } from 'wagmi'
const App = () => {
return ( - <WagmiProvider client={wagmiClient}>...</WagmiProvider> + <WagmiConfig client={wagmiClient}>...</WagmiConfig> ); };

І все готово! 🌈