Migrasi ke RainbowKit dan Wagmi v2

Ketergantungan peer wagmi dan viem telah mencapai 2.x.x dengan perubahan mendasar.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit, wagmi, dan viem ke versi terbaru mereka

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

2. Pasang ketergantungan sejawat @tanstack/react-query

Dengan Wagmi v2, TanStack Query sekarang menjadi ketergantungan peer yang diperlukan.

Instal dengan perintah berikut:

npm i @tanstack/react-query

3. Tingkatkan 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. Periksa perubahan signifikan di wagmi dan viem

Jika Anda menggunakan hooks wagmi dan aksi viem dalam dApp Anda, Anda perlu mengikuti panduan migrasi untuk v2:

Perubahan RainbowKit

1. Peningkatan perilaku untuk dompet EIP-6963

Dompet yang mendukung standar koneksi baru EIP-6963 (termasuk Rainbow, MetaMask, dan lainnya) kini akan otomatis muncul di bagian Terpasang selama pengalaman Sambung Dompet. Ini memastikan bahwa pengguna selalu dapat menemukan dompet favorit mereka dan terhubung ke dApps tanpa konflik atau tombol cadangan.

Pengembang tetap memiliki kontrol penuh atas Daftar Dompet Kustom untuk menekankan dompet yang disukai bagi pengguna akhir. Disarankan agar Anda terus menyertakan injectedWallet dan walletConnectWallet dalam daftar Anda untuk mendukung semua platform.

2. Konfigurasi Wagmi dengan getDefaultConfig

API baru ini menyederhanakan pengalaman konfigurasi dan menggantikan kebutuhan untuk menggunakan createConfig Wagmi secara langsung. Konfigurasi rantai disederhanakan, termasuk penyedia publik yang disimpulkan untuk transports.

Daftar dompet default akan secara otomatis disertakan, menghilangkan kebutuhan untuk menggunakan getDefaultWallets dan connectorsForWallets.

Anda dapat membuat Daftar Dompet Kustom dengan melewati konektor Dompet yang diimpor atau Kustom ke wallets. Menginisialisasi konektor dompet dan melewati 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 perlu lagi menambahkan chains ke <RainbowKitProvider>.

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

4. Rantai Kustom

Tipe Chain telah berubah sesuai dengan Wagmi v2, dan terus mendukung 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 Kustom

Konektor dompet RainbowKit telah mengalami perubahan besar untuk mendukung Wagmi v2. Rujuk ke dokumentasi terbaru dan contoh konektor untuk meningkatkan Konektor Dompet Kustom apa pun di dApp Anda.

Konektor dompet sekarang juga mendukung standar EIP-6963 dengan properti rdns. Pastikan ini terisi untuk mencegah referensi ganda ke dompet pendukung EIP-6963 dalam daftar dompet Anda.

Silakan laporkan masalah atau saran untuk RainbowKit v2 di GitHub di sini.