Rainbow logo
RainbowKit
2.2.10

Tinjauan

PengenalanPanduan Migrasi

Memulakan

PemasanganButangSambungSaiz ModalTemaRantai-rantaiPenempatan LokasiPengesahanTransaksi Terkini

Lanjutan

Cangkuk ModalButang Sambungan TersuaiTema TersuaiSenarai Dompet TersuaiDompet TersuaiRangkaian TersuaiMaklumat Aplikasi TersuaiAvatar TersendiriPengesahan TersuaiButangDompetMod Sejuk

Panduan Migrasi

Panduan Migrasi

Migrasi RainbowKit

Perubahan besar 2.x.x

Kebergantungan peer wagmi dan viem telah mencapai 2.x.x dengan perubahan besar.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit, wagmi, dan viem ke versi terkini

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

2. Pasang kebergantungan rakan sebaya @tanstack/react-query

Dengan Wagmi v2, TanStack Query kini merupakan kebergantungan peer yang diperlukan.

Pasang ia dengan arahan berikut:

npm i @tanstack/react-query

3. Naik taraf konfigurasi RainbowKit dan Wagmi anda

  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. Semak perubahan besar dalam wagmi dan viem

Jika anda menggunakan wagmi hooks dan viem actions dalam dApp anda, anda perlu mengikuti panduan beralih untuk v2:

Perubahan RainbowKit

1. Kelakuan yang dipertingkatkan untuk dompet EIP-6963

Dompet yang menyokong standard sambungan EIP-6963 yang baru (termasuk Rainbow, MetaMask dan lain-lain) kini secara automatik akan dipaparkan dalam seksyen Dipasang semasa pengalaman Menghubungkan Wallet. Ini memastikan bahawa pengguna sentiasa dapat mencari dompet kegemaran mereka dan menghubungkan ke dApps tanpa konflik atau butang gantian.

Pembangun terus mempunyai kawalan penuh ke atas Senarai Dompet Khusus untuk menekankan dompet yang disukai untuk pengguna akhir. Adalah digalakkan agar anda terus menyertakan injectedWallet dan walletConnectWallet dalam senarai anda untuk menyokong semua platform.

2. Konfigurasi Wagmi dengan getDefaultConfig

API baru ini memudahkan pengalaman konfigurasi dan menggantikan keperluan untuk menggunakan secara langsung createConfig Wagmi. Konfigurasi rangkaian diperbaharui, termasuk penyedia awam yang disimpulkan untuk transports.

Senarai dompet lalai akan dipaparkan secara automatik, menghapuskan keperluan untuk menggunakan getDefaultWallets dan connectorsForWallets.

Anda boleh membuat Senarai Dompet Khusus dengan memajukan penyambung Dompet import atau Khusus ke wallets. Memulakan penyambung dompet dan memajukan projectId dan chains tidak lagi diperlukan.

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

Anda tidak lagi perlu menyampaikan chains kepada <RainbowKitProvider>.

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

4. Rangkaian Khusus

Jenis Chain telah berubah selaras dengan Wagmi v2, dan terus menyokong metadata iconUrl dan 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

Contoh dengan getDefaultConfig:

const config = getDefaultConfig({

+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});

Contoh dengan 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. Dompet Khusus

Penyambung dompet RainbowKit telah mengalami perubahan yang ketara untuk menyokong Wagmi v2. Rujuk dokumen yang dikemas kini dan penyambung contoh untuk menaik taraf sebarang Penyambung Dompet Khusus dalam dApp anda.

Penyambung dompet kini juga menyokong standard EIP-6963 dengan prop rdns. Pastikan bahawa ini diisi untuk mengelakkan rujukan berganda kepada dompet yang menyokong EIP-6963 dalam senarai dompet anda.

Perubahan besar 1.x.x

Dikemaskan kepada wagmi v1

Kebergantungan rakan sebaya wagmi telah dikemaskini kepada 1.x.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Pasang kebergantungan rakan sebaya viem

wagmi v1 memerlukan kebergantungan rakan sebaya viem. Pasang dengan arahan berikut:

npm i viem

3. Pastikan keserasian bundler dan polyfill

Rujuk sampel Next.js Webpack Config kami untuk bimbingan konfigurasi projek anda.

Panduan kerangka tambahan untuk Vite dan Remix tersedia di sini.

4. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu mengikuti panduan migrasi wagmi ke v1.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.12.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke 0.12.x.

RainbowKit telah mengadopsi penyambung WalletConnectLegacyConnector dalam wagmi untuk meneruskan sokongan WalletConnect v1. Sokongan untuk WalletConnect v2 dan WalletConnectConnector akan tersedia sebagai pelepasan tampalan tanpa perubahan besar.

Dompet akan ditekan secara automatik dalam pelepasan masa depan.

Setiap dApp kini mesti menyediakan projectId WalletConnect Cloud untuk membolehkan WalletConnect v2. Ini mesti disiapkan sebelum pelayan jambatan WalletConnect v1 ditutup pada 28 Jun, 2023. RainbowKit akan lebih suka v1 untuk semua dompet jika projectId tidak disebutkan.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Sediakan projectId WalletConnect Cloud

Setiap dApp yang bergantung pada WalletConnect kini perlu mendapatkan projectId dari WalletConnect Cloud. Ini adalah percuma sepenuhnya dan hanya mengambil masa beberapa minit sahaja.

Sediakan projectId kepada getDefaultWallets dan penyambung dompet RainbowKit individu seperti berikut:

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

    ],

  },

]);

Perubahan besar 0.11.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke 0.11.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam wagmi.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.10.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke 0.10.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam wagmi.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.9.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke 0.9.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam wagmi.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.8.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke 0.8.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam wagmi.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.7.x

Jika anda membuat senarai dompet khsusus, anda kini mesti mengimport setiap dompet secara individu untuk mengurangkan saiz bundel. Perhatikan bahawa kerana dompet tidak lagi dilampirkan melalui objek wallet, semua dompet sekarang mempunyai akhiran 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 }),
];

Perhatikan juga bahawa lapisan keserasian kebelakang Steakwallet telah dikeluarkan. Omni harus digunakan sebaliknya.

-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';


const wallets = [

-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];

Perubahan besar 0.4.x

RainbowKit telah mengemaskini kebergantungan rakan sebaya wagmi ke 0.5.x.

Ikut langkah di bawah untuk beralih.

1. Naik taraf kebergantungan

Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Semak perubahan besar dalam wagmi

Jika anda menggunakan cangkuk wagmi dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam wagmi.

Anda boleh melihat panduan migrasi mereka di sini.

Perubahan besar 0.3.x

Mengeluarkan parameter chainId dari createConnector pada jenis Wallet.

Perhatikan bahawa semua dompet terbina dalam menggunakan API baru. Kebanyakan pengguna tidak akan terjejas. Perubahan ini hanya mempengaruhi pengguna yang telah mencipta/menggunakan dompet khusus.

Jika anda sebelum ini memperoleh URL RPC dari chainId pada createConnector, anda kini boleh mengeluarkan logik tersebut kerana wagmi kini mengendalikan URL RPC secara dalaman semasa digunakan dengan 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 }),
    ],
  },
]);

Perubahan besar 0.2.x

RainbowKit telah mengemaskini kebergantungan rakan sebaya wagmi ke ^0.4.

Ikut langkah di bawah untuk beralih.

1. Naik taraf kebergantungan

Naik taraf RainbowKit dan wagmi ke versi terkini

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

2. Ganti import configureChains

Import configureChains dari wagmi dan bukan RainbowKit:

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

3. Migrasi penyedia

RainbowKit tidak lagi mengeksport API apiProvider. Gantikannya dengan penyedia yang diingini dari wagmi.

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

Alchemy

Import alchemyProvider dari 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 })]
);

Infura

Import infuraProvider dari 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

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

Penyedia awam

Import publicProvider dari wagmi/providers/public.

+ import { publicProvider } from 'wagmi/providers/public';


const { chains, provider } = configureChains(

  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);

4. Namakan semula penyedia wagmi

Namakan semula WagmiProvider kepada WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Dan anda selesai! 🌈

PreviousPengenalan
PemasanganNext