Rainbow logo
RainbowKit
2.2.4

Ikhtisar

PendahuluanPanduan Migrasi

Memulai

InstalasiConnectButtonUkuran ModalPewarnaan TemaRantaiLokalisasiOtentikasiTransaksi Terbaru

Lanjutan

Hook ModalTombol Koneksi KhususTema KhususDaftar Dompet KustomDompet KustomRantai KustomInfo Aplikasi KustomAvatar KustomOtentikasi KustomTombolDompetMode Keren

Panduan Migrasi

Panduan Migrasi

Migrasi RainbowKit

Perubahan besar pada versi 2.x.x

Peer dependencies wagmi dan viem telah mencapai 2.x.x dengan perubahan besar.

Ikuti langkah-langkah berikut untuk migrasi.

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

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

2. Instal dependensi rekan @tanstack/react-query

Dengan Wagmi v2, TanStack Query kini menjadi dependensi rekan yang diperlukan.

Pasang itu dengan perintah berikut:

npm i @tanstack/react-query

3. Perbarui 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 besar di wagmi dan viem

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

Perubahan pada RainbowKit

1. Perilaku yang ditingkatkan untuk dompet EIP-6963

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

Pengembang terus memiliki kontrol penuh atas Daftar Dompet Kustom untuk menekankan dompet yang diutamakan 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 secara langsung Wagmi createConfig. 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 mengoper konektor Dompet yang diimpor atau Kustom ke wallets. Membuat konektor dompet dan meneruskan 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 meneruskan 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 dari 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 substansial untuk mendukung Wagmi v2. Merujuk pada dokumen yang diperbarui dan contoh konektor untuk memperbarui konektor Dompet Kustom dalam dApp Anda.

Konektor dompet juga kini mendukung standar EIP-6963 dengan prop rdns. Pastikan ini diisi untuk mencegah referensi ganda ke dompet yang mendukung EIP-6963 dalam daftar dompet Anda.

Perubahan besar pada versi 1.x.x

Diperbarui ke wagmi v1

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

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Instal dependensi sejawat viem

wagmi v1 membutuhkan dependensi sejawat viem. Pasang itu dengan perintah berikut:

npm i viem

3. Pastikan kompatibilitas pembundel dan polyfill

Di versi sebelumnya dari wagmi yang bergantung pada ethers, modul fs, net, dan tls yang dibutuhkan oleh WalletConnect dipolyfill secara otomatis. Ini tidak lagi terjadi pada RainbowKit v1 + wagmi v1, yang dibangun di atas viem.

Merujuk pada Konfigurasi Webpack Next.js dan sampel polyfill Create React App kami untuk petunjuk konfigurasi untuk proyek Anda.

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

4. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu mengikuti panduan migrasi wagmi ke v1.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan besar pada versi 0.12.x

Ketergantungan sejawat wagmi telah diperbarui menjadi 0.12.x.

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

Dompet akan dialihkan secara otomatis dalam rilis di masa depan.

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

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Berikan projectId WalletConnect Cloud

Setiap dApp yang bergantung pada WalletConnect sekarang harus memperoleh projectId dari WalletConnect Cloud. Ini benar-benar 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: [

      argentWallet({ projectId, chains }),

      trustWallet({ projectId, chains }),

      ledgerWallet({ projectId, chains }),

    ],

  },

]);

Perubahan besar pada versi 0.11.x

Ketergantungan sejawat wagmi telah diperbarui menjadi 0.11.x.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu memeriksa apakah aplikasi Anda telah dipengaruhi oleh perubahan besar pada wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan besar pada versi 0.10.x

Ketergantungan sejawat wagmi telah diperbarui menjadi 0.10.x.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu memeriksa apakah aplikasi Anda telah dipengaruhi oleh perubahan besar pada wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan besar pada versi 0.9.x

Ketergantungan sejawat wagmi telah diperbarui menjadi 0.9.x.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu memeriksa apakah aplikasi Anda telah dipengaruhi oleh perubahan besar pada wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan besar pada versi 0.8.x

Ketergantungan sejawat wagmi telah diperbarui menjadi 0.8.x.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu memeriksa apakah aplikasi Anda telah dipengaruhi oleh perubahan besar pada wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan besar 0.7.x

Jika Anda membuat daftar dompet kustom, sekarang Anda harus mengimpor setiap dompet secara individual untuk mengurangi ukuran bundle. Perhatikan bahwa karena dompet tidak lagi dipisahkan melalui objek 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 }),
];

Juga perhatikan bahwa lapisan kompatibilitas ke belakang untuk 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 }),
];

Perubahan besar 0.4.x

RainbowKit telah memperbarui dependensi sejawat wagmi ke 0.5.x.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui dependensi

Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Periksa perubahan besar pada wagmi

Jika Anda menggunakan hook wagmi di aplikasi Anda, Anda perlu memeriksa apakah aplikasi Anda telah dipengaruhi oleh perubahan besar pada wagmi.

Anda dapat melihat panduan migrasi mereka di sini.

Perubahan penting 0.3.x

Menghapus parameter chainId dari createConnector pada tipe Wallet.

Perhatikan bahwa semua dompet bawaan menggunakan API baru. Kebanyakan pengguna tidak akan terpengaruh. Perubahan ini hanya mempengaruhi pengguna yang telah membuat/mengkonsumsi dompet kustom.

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

Perubahan penting 0.2.x

RainbowKit telah memperbarui dependensi sejawat wagmi menjadi ^0.4.

Ikuti langkah-langkah berikut untuk migrasi.

1. Perbarui dependensi

Perbarui RainbowKit dan wagmi ke versi terbaru mereka

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

2. Ganti impor configureChains

Impor configureChains dari wagmi bukan dari RainbowKit:

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

3. Migrasi penyedia

RainbowKit tidak lagi mengekspor API apiProvider. Gantikan dengan penyedia yang Anda inginkan 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`,
+     }),
+   }),
  ]
);

Provider 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. Ubah nama penyedia wagmi

Ubah nama WagmiProvider menjadi WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Dan Anda selesai! 🌈

PreviousPendahuluan
InstalasiNext