Rainbow logo
RainbowKit
2.2.5

Genel Bakış

GirişGeçiş Rehberi

Başlarken

KurulumConnectButtonModal BoyutlarıTema OluşturmaZincirlerYerelleştirmeKimlik DoğrulamaSon İşlemler

Gelişmiş

Modal KancalarıÖzel ConnectButtonÖzel TemaÖzel Cüzdan ListesiÖzel CüzdanlarÖzel ZincirlerÖzel Uygulama BilgisiÖzel AvatarlarÖzel Kimlik DoğrulamaWalletButtonHavalı Mod

Geçiş Rehberi

Geçiş Rehberi

RainbowKit'i Taşıma

2.x.x Kırıcı değişiklikler

wagmi ve viem eş bağımlılıkları 2.x.x ile kırıcı değişikliklere ulaştı.

Taşımak için aşağıdaki adımları takip edin.

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

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

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

Wagmi v2 ile birlikte, TanStack Query artık zorunlu bir eş bağımlılık haline gelmiştir.

Aşağıdaki komutla yükleyin:

npm i @tanstack/react-query

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

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

Eğer dApp'inizde wagmi kancalarını ve viem işlemlerini kullanıyorsanız, v2 için göç rehberlerini takip etmeniz gerekecek:

RainbowKit Değişiklikleri

1. 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ı bulup dApp'lere çatışma veya yedek düğmeler olmadan bağlanabilmelerini sağlar.

Geliştiriciler, son kullanıcılar için tercih edilen cüzdanları vurgulamak üzere Özel Cüzdan Listesi üzerinde tam kontrol sahibi olmaya devam eder. Tüm platformları desteklemek için listenize injectedWallet ve walletConnectWallet'ı dahil etmeye devam etmeniz önerilir.

2. GetDefaultConfig ile Wagmi yapılandırması

Bu yeni API, konfigürasyon deneyimini basitleştirir ve Wagmi'nin createConfig'unu doğrudan kullanma ihtiyacını ortadan kaldırır. Zincir konfigürasyonu basitleştirilmiştir, transports için varsayılan kamu sağlayıcıları çıkarılmıştır.

Varsayılan cüzdan listesi otomatik olarak dahil edilecek, getDefaultWallets ve connectorsForWallets kullanma ihtiyacını ortadan kaldıracaktır.

Özel Cüzdan Listesi oluşturmak için, ithal edilmiş veya Özel Cüzdan konektörlerini wallets'a geçirerek yapabilirsiniz. Cüzdan konektörlerini örneklemek ve projectId ile chains geçmek 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 */

})

3. RainbowKit Sağlayıcı

Artık <RainbowKitProvider> için chains geçmenize gerek yok.

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

4. Ö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 overides */
+ ],
});

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

5. Özel Cüzdanlar

RainbowKit cüzdan bağlayıcıları, Wagmi v2'yi desteklemek için önemli değişikliklerden geçti. DApp'inizdeki Özel Cüzdan Bağlayıcılarını güncellemek için güncellenmiş belgelere ve bir örnek bağlayıcıya başvurun.

Cüzdan bağlayıcıları artık rdns özelliği ile EIP-6963 standardını da desteklemektedir. Cüzdan listesinde EIP-6963 destekli cüzdanlara yönelik yinelenen referansları önlemek için bunun doldurulduğundan emin olun.

1.x.x Kırıcı değişiklikler

Wagmi v1'e güncellendi

wagmi eş bağımlılık '1.x.x.' ye güncellendi.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. viem eş bağımlılığını yükleyin

wagmi v1, viem eş bağımlılığını gerektirir. Aşağıdaki komutla yükleyin:

npm i viem

3. Demetleyici ve polyfill uyumluluğunu sağlayın

Wagmi'nin önceki sürümlerinde WalletConnect tarafından gerektirilen fs, net ve tls modülleri otomatik olarak polyfilled idi ethers ile. RainbowKit v1 + wagmi v1 ile bu artık durum böyle değil, bunlar viem üzerine kurulmuştur.

Projeleriniz için yapılandırma rehberi olarak bizim Next.js Webpack Config ve Create React App polyfills örneklerine bakın.

Vite ve Remix için ek RainbowKit framework rehberleri mevcuttur here.

4. wagmide kırılma değişikliklerini kontrol edin

Uygulamanızda wagmi kancalarını kullanıyorsanız, wagmi'nin v1'e taşınma rehberini takip etmeniz gerekecektir.

Geçiş rehberini buradan görebilirsiniz.

0.12.x Kırıcı değişiklikler

Wagmi peer bağımlılığı 0.12.x'e güncellendi.

RainbowKit, devam eden WalletConnect v1 desteği için wagmide WalletConnectLegacyConnector bağlantısını benimsemiştir. WalletConnect v2 ve WalletConnectConnector desteği yakında bir yama sürümü olarak, herhangi bir kırılma değişikliği olmadan kullanılabilir olacak.

Cüzdanlar gelecek sürümlerde otomatik olarak geçiş yapacak.

Her dApp'in şimdi WalletConnect v2'yi etkinleştirmek için bir WalletConnect Cloud projectId sağlaması gerekiyor. Bu, WalletConnect v1 köprü sunucularının 28 Haziran 2023'te kapatılmasından önce tamamlanmalıdır. projectId belirtilmediği sürece, RainbowKit sessizce tüm cüzdanlar için v1'i tercih eder.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. Bir WalletConnect Cloud projectId sağlayın

WalletConnect'e dayanan her dApp'in şimdi bir projectId alması gerekiyor WalletConnect Cloud. Bu tamamen ücretsizdir ve sadece birkaç dakika sürer.

getDefaultWallets ve bireysel RainbowKit cüzdan bağlantılarına projectId sağlayın aşağıdaki gibi:

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

    ],

  },

]);

0.11.x Kırıcı değişiklikler

Wagmi eş bağımlılığı 0.11.x olarak güncellendi.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. wagmide kırılma değişikliklerini kontrol edin

Eğer uygulamanızda wagmi kancaları kullanıyorsanız, uygulamanızın wagmideki bozucu değişikliklerden etkilenip etkilenmediğini kontrol etmeniz gerekecektir.

Geçiş rehberini buradan görebilirsiniz.

0.10.x Kırıcı değişiklikler

Wagmi eş bağımlılığı 0.10.x olarak güncellendi.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. wagmide kırılma değişikliklerini kontrol edin

Eğer uygulamanızda wagmi kancaları kullanıyorsanız, uygulamanızın wagmideki bozucu değişikliklerden etkilenip etkilenmediğini kontrol etmeniz gerekecektir.

Geçiş rehberini buradan görebilirsiniz.

0.9.x Kırıcı değişiklikler

Wagmi eş bağımlılığı 0.9.x olarak güncellendi.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. wagmide kırılma değişikliklerini kontrol edin

Eğer uygulamanızda wagmi kancaları kullanıyorsanız, uygulamanızın wagmideki bozucu değişikliklerden etkilenip etkilenmediğini kontrol etmeniz gerekecektir.

Geçiş rehberini buradan görebilirsiniz.

0.8.x Kırıcı değişiklikler

Wagmi eş bağımlılığı 0.8.x olarak güncellendi.

Taşımak için aşağıdaki adımları takip edin.

1. RainbowKit ve 'wagmi' yi en son sürümüne yükseltin

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

2. wagmide kırılma değişikliklerini kontrol edin

Eğer uygulamanızda wagmi kancaları kullanıyorsanız, uygulamanızın wagmideki bozucu değişikliklerden etkilenip etkilenmediğini kontrol etmeniz gerekecektir.

Geçiş rehberini buradan görebilirsiniz.

0.7.x Kırıcı değişiklikler

Eğer özel bir cüzdan listesi oluşturuyorsanız, artık her cüzdanı tek tek içe aktarmanız gerekiyor, bu da paket boyutunu azaltır. Cüzdanların artık wallet nesnesi aracılığıyla alan adı olmadığını unutmayın, tüm cüzdanların şimdi Wallet soneki vardır.

-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 }),
];

Ayrıca Steakwallet geriye dönük uyumluluk katmanının kaldırıldığını unutmayın. Bunun yerine Omni kullanılmalıdır.

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


const wallets = [

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

0.4.x Kırıcı değişiklikler

RainbowKit, wagmi eşdeğer bağımlılığını 0.5.x'e güncelledi.

Taşımak için aşağıdaki adımları takip edin.

1. Bağımlılıkları Güncelle

RainbowKit ve wagmi'yi en son sürüme yükseltin

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

2. wagmide kırılma değişikliklerini kontrol edin

Eğer uygulamanızda wagmi kancaları kullanıyorsanız, uygulamanızın wagmideki bozucu değişikliklerden etkilenip etkilenmediğini kontrol etmeniz gerekecektir.

Göç rehberlerini burada görebilirsiniz.

0.3.x Kırılma Değişiklikleri

Wallet tipinde createConnectordan chainId parametresi kaldırıldı.

Tüm dahili cüzdanların yeni API'yi kullandığını unutmayın. Çoğu tüketici etkilenmeyecektir. Bu değişiklik, yalnızca oluşturulan/tüketilen özel cüzdanlar olan tüketicileri etkiler.

Eğer önceden createConnector üzerindeki chainIdden RPC URL'lerini türettiyseniz, artık configureChains ile birlikte kullanıldığında wagminin içeriden RPC URL'lerini idare ettiği için bu mantığı kaldırabilirsiniz.

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 Kırılma Değişiklikleri

RainbowKit, wagmi eşbağımlılığını ^0.4a güncelledi.

Taşımak için aşağıdaki adımları takip edin.

1. Bağımlılıkları Güncelle

RainbowKit ve wagmi'yi en son sürüme yükseltin

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

2. Replace configureChains import

configureChainsı RainbowKit yerine wagmi'den içe aktar:

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

3. Sağlayıcıları taşı

RainbowKit artık bir apiProvider API'si ihraç etmiyor. Bunu wagmi'den istediğiniz sağlayıcıyla değiştirin.

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

Alchemy

wagmi/providers/alchemy'dan alchemyProvider'ı içe aktarın.

+ 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

wagmi/providers/infura'dan infuraProvider'ı içe aktarın.

+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

wagmi/providers/jsonRpc'dan jsonRpcProvider'ı içe aktarın.

+ 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`,
+     }),
+   }),
  ]
);

Public provider

wagmi/providers/public'dan publicProvider'ı içe aktarın.

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


const { chains, provider } = configureChains(

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

4. Wagmi'nin provider'ını yeniden adlandırın

WagmiProvider adını WagmiConfig olarak değiştirin.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

Ve bitti! 🌈

PreviousGiriş
KurulumNext