Rainbow logo
RainbowKit
2.2.10

Ikhtisar

PendahuluanPanduan Migrasi

Memulai

InstalasiTombolKoneksiUkuran ModalTemaRantaiLokalisasiOtentikasiTransaksi Terbaru

Lanjutan

Modal HooksTombol Hubungkan KustomTema KustomDaftar Dompet KustomDompet KustomRantai KustomInfo Aplikasi KustomAvatar KustomOtentikasi KustomTombolWalletMode Keren

Panduan Migrasi

Panduan Migrasi

Migrasi RainbowKit

2.x.x Perubahan signifikan

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@2 wagmi@2 [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 preferensi dompet untuk pengguna akhir. Dihimbau 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 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 Kustom

Konektor dompet RainbowKit telah mengalami perubahan besar untuk mendukung Wagmi v2. Referensi dokumentasi terbaru dan contoh konektor dapat dilihat di sini untuk meningkatkan Konector Dompet Kustom dalam 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.

1.x.x Perubahan signifikan

Diperbarui ke wagmi v1

Ketergantungan sejawat wagmi telah diperbarui ke 1.x.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Pasang ketergantungan sejawat viem

wagmi v1 memerlukan ketergantungan sejawat viem. Pasang dengan perintah berikut:

npm i viem

3. Pastikan kompatibilitas bundler dan polyfill

Referensi sampel konfigurasi Next.js Webpack Config kami untuk mendapatkan panduan konfigurasi proyek Anda.

Panduan kerangka kerja tambahan untuk Vite dan Remix tersedia di sini.

4. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus mengikuti panduan migrasi wagmi ke v1.

Anda dapat melihat panduan migrasi mereka di sini.

0.12.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke 0.12.x.

RainbowKit telah mengadopsi konektor WalletConnectLegacyConnector di wagmi untuk mendukung WalletConnect v1 secara berkelanjutan. Dukungan untuk WalletConnect v2 dan WalletConnectConnector akan segera tersedia sebagai rilis patch, tanpa perubahan signifikan.

Dompet akan ditransisikan secara otomatis pada rilis di masa depan.

Setiap dApp sekarang harus menyediakan projectId WalletConnect Cloud untuk mengaktifkan WalletConnect v2. Ini harus diselesaikan sebelum server jembatan WalletConnect v1 ditutup pada 28 Juni 2023. RainbowKit secara diam-diam lebih memilih v1 untuk semua dompet jika projectId tidak ditentukan.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Berikan ID proyek Cloud WalletConnect

Setiap dApp yang bergantung pada WalletConnect sekarang perlu memperoleh projectId dari WalletConnect Cloud. Ini sepenuhnya gratis dan hanya membutuhkan beberapa menit.

Berikan projectId ke getDefaultWallets dan konektor 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 }),

    ],

  },

]);

0.11.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke 0.11.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

0.10.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke 0.10.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

0.9.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke 0.9.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

0.8.x Perubahan signifikan

Ketergantungan sejawat wagmi telah diperbarui ke 0.8.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

0.7.x Perubahan signifikan

Jika Anda membuat daftar dompet kustom, Anda harus mengimpor setiap dompet secara terpisah untuk mengurangi ukuran bundel. Harap diperhatikan bahwa dompet tidak lagi menggunakan nama ruang wallet, semua dompet sekarang memiliki 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 }),
];

Harap juga dicatat bahwa lapisan kompatibilitas mundur Steakwallet telah dihapus. Omni harus digunakan sebagai gantinya.

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


const wallets = [

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

0.4.x Perubahan signifikan

RainbowKit telah memperbarui ketergantungan sejawat wagmi ke 0.5.x.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan ketergantungan

Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan signifikan di wagmi

Jika Anda menggunakan hook wagmi dalam aplikasi Anda, Anda harus memeriksa apakah aplikasi Anda terpengaruh oleh perubahan signifikan di wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

0.3.x Perubahan signifikan

Parameter chainId telah dihapus dari createConnector pada tipe Wallet.

Perhatikan bahwa semua dompet bawaan menggunakan API baru. Kebanyakan konsumen tidak akan terpengaruh. Perubahan ini hanya berdampak pada konsumen yang telah membuat/menggunakan dompet kustom.

Jika Anda sebelumnya mendapatkan URL RPC dari chainId di createConnector, Anda sekarang dapat menghapus logika tersebut karena wagmi sekarang menangani URL RPC secara internal ketika 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 }),
    ],
  },
]);

0.2.x Perubahan signifikan

RainbowKit telah memperbarui ketergantungan sejawat wagmi ke ^0.4.

Ikuti langkah-langkah di bawah ini untuk melakukan migrasi.

1. Tingkatkan ketergantungan

Tingkatkan RainbowKit dan wagmi ke versi terbaru mereka

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

2. Gantikan impor configureChains

Impor configureChains dari wagmi bukan dari RainbowKit:

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

3. Migrasikan penyedia

RainbowKit tidak lagi mengekspor API apiProvider. Gantilah dengan penyedia yang diinginkan dari wagmi.

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

Alchemy

Impor 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

Impor 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

Impor 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 publik

Impor publicProvider dari wagmi/providers/public.

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


const { chains, provider } = configureChains(

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

4. Ganti nama penyedia wagmi

Ganti nama WagmiProvider menjadi WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Dan Anda sudah selesai! 🌈

PreviousPendahuluan
InstalasiNext