Rainbow logo
RainbowKit
2.2.10

Visión General

IntroducciónGuía de Migración

Primeros Pasos

InstalaciónConectarBotónTamaños de ModalTematizaciónCadenasLocalizaciónAutenticaciónTransacciones recientes

Avanzado

Hooks de ModalBotón de Conexión PersonalizadoTema PersonalizadoLista de Billeteras PersonalizadasCarteras PersonalizadasCadenas personalizadasInformación de la aplicación personalizadaAvatares PersonalizadosAutenticación PersonalizadaBotónBilleteraModo Cool

Guía de Migración

Guía de Migración

Migrando RainbowKit

Cambios significativos en la versión 2.x.x

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

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

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:

Cambios en RainbowKit

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 de Billeteras Personalizadas para enfatizar billeteras preferidas por los usuarios finales. Se recomienda continuar incluyendo injectedWallet y walletConnectWallet en su 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 overides */
+ ],
});

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 RainbowKit han sufrido cambios sustanciales para soportar Wagmi v2. Consulta los documentos actualizados 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.

Cambios significativos en la versión 1.x.x

Actualizado a wagmi v1

La dependencia wagmi ha sido actualizada a 1.x.x.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Instalar la dependencia viem

wagmi v1 requiere la dependencia viem. Instálalo con el siguiente comando:

npm i viem

3. Asegura la compatibilidad con el empaquetador y polifill

Consulta nuestra muestra de configuración de Next.js Webpack para orientación en la configuración de tu proyecto.

Guías adicionales de framework para Vite y Remix están disponibles aquí.

4. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, deberás seguir la guía de migración a v1 de wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.12.x

La dependencia wagmi ha sido actualizada a 0.12.x.

RainbowKit ha adoptado el conector WalletConnectLegacyConnector en wagmi para continuar con el soporte de WalletConnect v1. El soporte para WalletConnect v2 y WalletConnectConnector estará disponible pronto como una versión de corrección, sin cambios significativos.

Las billeteras serán actualizadas automáticamente en futuros lanzamientos.

Cada dApp debe ahora proporcionar un projectId de WalletConnect Cloud para habilitar WalletConnect v2. Esto debe completarse antes de que los servidores puente de WalletConnect v1 se cierren el 28 de junio de 2023. RainbowKit preferirá discretamente la v1 para todas las billeteras si projectId no está especificado.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Proporciona un projectId de WalletConnect Cloud

Cada dApp que dependa de WalletConnect ahora necesita obtener un projectId de WalletConnect Cloud. Esto es completamente gratis y solo lleva unos minutos.

Proporcione el projectId a getDefaultWallets y conectores de billetera individual RainbowKit de la siguiente manera:

const projectId = 'YOUR_PROJECT_ID';



const { wallets } = getDefaultWallets({

  appName: 'My RainbowKit App',

  projectId,

  chains,

});



const connectors = connectorsForWallets([

  ...wallets,

  {

    groupName: 'Other',

    wallets: [

      readyWallet({ projectId, chains }),

      trustWallet({ projectId, chains }),

      ledgerWallet({ projectId, chains }),

    ],

  },

]);

Cambios significativos en la versión 0.11.x

La dependencia wagmi ha sido actualizada a 0.11.x.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.10.x

La dependencia wagmi ha sido actualizada a 0.10.x.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.9.x

La dependencia wagmi ha sido actualizada a 0.9.x.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.8.x

La dependencia wagmi ha sido actualizada a 0.8.x.

Sigue los pasos a continuación para migrar.

1. Actualiza RainbowKit y wagmi a su última versión

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

2. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.7.x

Si estás creando una lista de billeteras personalizadas, ahora debes importar cada billetera individualmente para reducir el tamaño del paquete. Tenga en cuenta que, dado que las billeteras ya no están bajo el objeto wallet, todas las billeteras ahora tienen un sufijo 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 }),
];

Tenga en cuenta también que la capa de compatibilidad con versiones anteriores para Steakwallet ha sido eliminada. Omni debería ser utilizada en su lugar.

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


const wallets = [

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

Cambios significativos en la versión 0.4.x

RainbowKit ha actualizado la dependencia wagmi a 0.5.x.

Sigue los pasos a continuación para migrar.

1. Actualiza las dependencias

Actualiza RainbowKit y wagmi a su última versión

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

2. Verifica los cambios significativos en wagmi

Si usas hooks de wagmi en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en wagmi.

Puedes ver su guía de migración aquí.

Cambios significativos en la versión 0.3.x

Se eliminó el parámetro chainId de createConnector en el tipo Wallet.

Tenga en cuenta que todas las billeteras incorporadas están utilizando la nueva API. La mayoría de los consumidores no se verán afectados. Este cambio solo afecta a los consumidores que han creado/consumido billeteras personalizadas.

Si previamente derivó URLs de RPC desde chainId en createConnector, ahora puede eliminar esa lógica ya que wagmi ahora maneja URLs de RPC internamente cuando se usa con 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 }),
    ],
  },
]);

Cambios significativos en la versión 0.2.x

RainbowKit ha actualizado la dependencia wagmi a ^0.4.

Sigue los pasos a continuación para migrar.

1. Actualiza las dependencias

Actualiza RainbowKit y wagmi a su última versión

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

2. Reemplace la importación de configureChains

Importar configureChains desde wagmi en lugar de RainbowKit:

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

3. Migre proveedores

RainbowKit ya no exporta un API apiProvider. Reemplázalo con tu proveedor deseado desde wagmi.

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

Alchemy

Importar alchemyProvider desde 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

Importar infuraProvider desde 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

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

Proveedor público

Importar publicProvider desde wagmi/providers/public.

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


const { chains, provider } = configureChains(

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

4. Renombrar el proveedor de wagmi

Renombrar WagmiProvider a WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

¡Y eso es todo! 🌈

PreviousIntroducción
InstalaciónNext