RainbowKit ve Wagmi v2'ye Geçiş

wagmi ve viem eş bağımlıkları, kırıcı değişikliklerle 2.x.x sürümüne ulaştı.

Geçiş yapmak için aşağıdaki adımları izleyin.

RainbowKit, wagmi ve viem'ı en son sürümlerine yükseltin

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

@tanstack/react-query eş bağımlılığını yükleyin

Wagmi v2 ile TanStack Query artık gerekli bir eş bağımlılıktır.

Aşağıdaki komutla yükleyin:

npm i @tanstack/react-query

RainbowKit ve Wagmi yapılandırmalarınızı güncelleyin

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

wagmi ve viem'daki kırılma değişikliklerini kontrol edin

DApp'inizde wagmi kancalarını ve viem eylemlerini kullanıyorsanız, v2 için geçiş rehberlerini takip etmeniz gerekecek:

RainbowKit Değişiklikleri

EIP-6963 cüzdanları için geliştirilmiş davranış

Yeni EIP-6963 bağlantı standardını destekleyen cüzdanlar (Rainbow, MetaMask ve daha fazlası dahil) artık Cüzdan Bağlama deneyimi sırasında otomatik olarak bir Yüklü bölümünde görünecek. Bu, kullanıcıların her zaman favori cüzdanlarını bulmasını ve dApp'lere çatışma veya yedek düğmeler olmadan bağlanmasını sağlar.

Geliştiriciler, son kullanıcılar için tercih edilen cüzdanları vurgulamak amacıyla Özel Cüzdan Listesi üzerinde tam kontrole sahip olmaya devam ediyor. Tüm platformları desteklemek için injectedWallet ve walletConnectWalleti listenizde bulundurmanız teşvik edilir.

GetDefaultConfig ile Wagmi yapılandırması

Bu yeni API, yapılandırma deneyimini basitleştirir ve Wagmi'nin createConfigi doğrudan kullanma ihtiyacını ortadan kaldırır. Zincir yapılandırması basitleştirilmiştir ve transports için türetilmiş genel sağlayıcılar içerir.

Varsayılan cüzdan listesi otomatik olarak dahil edilecek, getDefaultWallets ve connectorsForWallets kullanımına olan ihtiyacı ortadan kaldıracaktır.

Özel Cüzdan Listesi oluşturmak için wallets'a ithal edilen veya özel Cüzdan bağlayıcılarını aktararak oluşturabilirsiniz. Cüzdan bağlayıcılarını oluşturmak ve projectId ve chainsi iletmek artık gerekli değil.

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 */
})

RainbowKit Sağlayıcı

<RainbowKitProvider>'a artık chains geçirmeniz gerekmiyor.

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

Özel Zincirler

Wagmi v2 ile uyumlu olarak Chain tipi değişmiştir ve RainbowKit'in iconUrl ve iconBackground meta verilerini desteklemeye devam etmektedir.

+ 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

getDefaultConfig ile örnek:

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

createConfig ile örnek:

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

Özel Cüzdanlar

RainbowKit cüzdan bağlayıcıları, Wagmi v2'yi desteklemek için önemli değişiklikler geçirdi. DApp'inizdeki Özel Cüzdan Bağlayıcılarını yükseltmek için güncellenmiş belgeleri ve bir örnek bağlayıcıyı referans alın.

Cüzdan bağlayıcıları artık rdns özelliğiyle EIP-6963 standardını destekler. Bu alanın dolu olduğundan emin olun, böylece cüzdan listenizde EIP-6963 destekleyen cüzdanlara yönelik tekrar eden referanslar önlenir.

RainbowKit v2 için herhangi bir sorun veya geri bildiriminizi GitHub üzerinde buraya bildirin.