Beralih kepada RainbowKit dan Wagmi v2.

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 wagmi [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 diutamakan untuk pengguna akhir. Anda digalakkan untuk terus memasukkan 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 overrides */
+ ],
});

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 besar untuk menyokong Wagmi v2. Rujuk dokumen terkini dan contoh penyambung untuk menaik taraf mana-mana 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.

Sila laporkan sebarang isu atau maklum balas untuk RainbowKit v2 di GitHub di sini.