Migrando para RainbowKit e Wagmi v2
As dependências de pares wagmi e viem alcançaram 2.x.x com alterações significativas.
Siga os passos abaixo para realizar a migração.
1. Atualize RainbowKit, wagmi e viem para suas versões mais recentes
2. Instale a dependência de par @tanstack/react-query
Com o Wagmi v2, TanStack Query agora é uma dependência de par obrigatória.
Instale com o seguinte comando:
npm i @tanstack/react-query
3. Atualize suas configurações de RainbowKit e Wagmi
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. Verifique alterações de quebra em wagmi e viem
Se você usa hooks do wagmi e ações do viem no seu dApp, você precisará seguir os guias de migração para v2:
1. Comportamento aprimorado para carteiras EIP-6963
Carteiras que suportam o novo padrão de conexão EIP-6963 (incluindo Rainbow, MetaMask e outras) agora aparecerão automaticamente em uma seção Instalado durante a experiência de Conectar Carteira. Isso garante que os usuários sempre possam encontrar suas carteiras favoritas e se conectar a dApps sem conflitos ou botões de fallback.
Os desenvolvedores continuam tendo controle total sobre a Lista de Carteiras Personalizadas para enfatizar as carteiras preferidas para os usuários finais. É recomendado que você continue a incluir injectedWallet e walletConnectWallet na sua lista para suportar todas as plataformas.
2. Configuração do Wagmi com getDefaultConfig
Esta nova API simplifica a experiência de configuração e substitui a necessidade de usar o createConfig do Wagmi diretamente. A configuração da cadeia é simplificada, incluindo provedores públicos inferidos para transports.
A lista de carteiras padrão será incluída automaticamente, eliminando a necessidade de usar getDefaultWallets e connectorsForWallets.
Você pode criar uma Lista de Carteiras Personalizadas passando conectores de Carteiras importadas ou Personalizadas para wallets. A instância de conectores de carteira e a passagem de projectId e chains não são mais necessárias.
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
Você não precisa mais passar chains para <RainbowKitProvider>.
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
4. Cadeias Personalizadas
O tipo Chain foi alterado de acordo com o Wagmi v2, e continua a suportar os metadados iconUrl e iconBackground do 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
Exemplo com getDefaultConfig:
const config = getDefaultConfig({
+ chains: [
+ avalanche, /* custom chain */
+ {
+ ...mainnet,
+ iconBackground: '#000',
+ iconUrl: 'https://example.com/icons/ethereum.png',
+ }, /* metadata overrides */
+ ],
});
Exemplo com 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. Carteiras Personalizadas
Os conectores de carteira do RainbowKit passaram por mudanças substanciais para suportar o Wagmi v2. Consulte os docs atualizados e um exemplo de conector para atualizar qualquer Conector de Carteira Personalizado no seu dApp.
Os conectores de carteiras agora também suportam o padrão EIP-6963 com a propriedade rdns. Certifique-se de que isso esteja preenchido para evitar referências duplicadas a carteiras compatíveis com EIP-6963 na sua lista de carteiras.
Por favor, relate quaisquer problemas ou comentários sobre o RainbowKit v2 no GitHub aqui.
