Migrando a RainbowKit y Wagmi v2
Las dependencias wagmi y viem ahora han alcanzado la versión 2.x.x con cambios disruptivos.
Sigue los pasos a continuación para migrar.
1. Actualiza RainbowKit, wagmi, y viem a sus últimas versiones
2. Instalar la dependencia @tanstack/react-query
Con Wagmi v2, TanStack Query es ahora una dependencia necesaria.
Instálalo con el siguiente comando:
npm i @tanstack/react-query
3. Actualiza tus configuraciones de RainbowKit y 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. Verifica los cambios significativos en wagmi y viem
Si utilizas hooks de wagmi y acciones de viem en tu dApp, necesitarás seguir las guías de migración para v2:
1. Comportamiento mejorado para billeteras EIP-6963
Las billeteras que soportan el nuevo estándar de conexión EIP-6963 (incluyendo Rainbow, MetaMask y más) ahora aparecerán automáticamente en una sección Instalado durante la experiencia de Conectar Billetera, asegurando que los usuarios siempre puedan encontrar sus billeteras favoritas y conectarse a las dApps sin conflictos o botones de respaldo.
Los desarrolladores continúan teniendo control total sobre la Lista Personalizada de Billeteras para enfatizar las billeteras preferidas por los usuarios finales. Se recomienda continuar incluyendo injectedWallet y walletConnectWallet en tu lista para soportar todas las plataformas.
2. Configuración de Wagmi con getDefaultConfig
Esta nueva API simplifica la experiencia de configuración y reemplaza la necesidad de usar createConfig de Wagmi directamente. La configuración de cadenas se simplifica, incluyendo proveedores públicos inferidos para transports.
La lista de billeteras predeterminada se incluirá automáticamente, relegando la necesidad de usar getDefaultWallets y connectorsForWallets.
Puedes crear una Lista de Billeteras Personalizadas pasando conectores de billetera importados o personalizados a wallets. Ya no es necesario instanciar conectores de billetera y pasar projectId y chains.
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
Ya no necesitas pasar chains a <RainbowKitProvider>.
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
4. Cadenas Personalizadas
El tipo Chain ha cambiado de acuerdo con Wagmi v2 y continúa soportando los metadatos iconUrl e iconBackground de 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
Ejemplo con getDefaultConfig:
const config = getDefaultConfig({
+ chains: [
+ avalanche, /* custom chain */
+ {
+ ...mainnet,
+ iconBackground: '#000',
+ iconUrl: 'https://example.com/icons/ethereum.png',
+ }, /* metadata overrides */
+ ],
});
Ejemplo con 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. Billeteras Personalizadas
Los conectores de billetera de RainbowKit han experimentado cambios sustanciales para soportar Wagmi v2. Consulta la documentación actualizada y un conector de ejemplo para actualizar cualquier Conector de Billetera Personalizado en tu dApp.
Los conectores de billetera ahora también soportan el estándar EIP-6963 con la propiedad rdns. Asegúrate de que esto esté poblado para prevenir referencias duplicadas a billeteras que soportan EIP-6963 en tu lista de billeteras.
Por favor, reporta cualquier problema o comentario sobre RainbowKit v2 en GitHub aquí.
