Rainbow logo
RainbowKit
2.2.5

Visión General

IntroducciónGuía de Migración

Primeros Pasos

InstalaciónConnectButtonTamaños de ModalTematizaciónCadenasLocalizaciónAutenticaciónTransacciones recientes

Avanzado

Ganchos de ModalesConnectButton personalizadoTema personalizadoLista Personalizada de CarterasCarteras PersonalizadasCadenas personalizadasInformación Personalizada de la AppAvatares personalizadosAutenticación personalizadaWalletButtonModo genial

Guía de Migración

Guía de Migración

Migrando RainbowKit

Cambios radicales en 2.x.x

La dependencia de pares wagmi y viem han llegado a 2.x.x con cambios disruptivos.

Sigue los pasos abajo para migrar.

1. Actualice RainbowKit, wagmi, y viem a sus últimas versiones

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

2. Instalar la dependencia paralela @tanstack/react-query

Con Wagmi v2, TanStack Query ahora es una dependencia par necesaria.

Instálala con el siguiente comando:

npm i @tanstack/react-query

3. Actualice sus 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. Verifique los cambios radicales en wagmi

Si utiliza hooks de wagmi y acciones de viem en su dApp, necesitará seguir las guías de migración para la 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. Esto asegura que los usuarios siempre puedan encontrar sus billeteras favoritas y conectarse a dApps sin conflictos o botones de reserva.

Los desarrolladores continúan teniendo control total sobre la Lista de Billeteras Personalizadas para enfatizar las billeteras preferidas por los usuarios finales. Se recomienda que continúe incluyendo el injectedWallet y el 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 directamente el createConfig de Wagmi. La configuración de la cadena se simplifica, incluyendo proveedores públicos inferidos para transports.

La lista de carteras predeterminada se incluirá automáticamente, dejando sin efecto la necesidad de usar getDefaultWallets y connectorsForWallets.

Puedes crear una Lista Personalizada de Carteras pasando conectores importados o conectores de Carteras Personalizadas a wallets. Ya no es necesario instanciar conectores de carteras ni 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

RainbowKit wallet connectors han sufrido cambios sustanciales para soportar Wagmi v2. Consulta la documentación actualizada y un conector de ejemplo para actualizar cualquier Conector de Cartera Personalizado en tu dApp.

Los conectores de billetera ahora también soportan el estándar EIP-6963 con la propiedad rdns. Asegúrese de que esto esté poblado para evitar referencias duplicadas a billeteras que soportan EIP-6963 en su lista de billeteras.

Cambios radicales en 1.x.x

Actualizado a wagmi v1

La dependencia (peer) de wagmi ha sido actualizada a 1.x.x.

Sigue los pasos abajo para migrar.

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

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

2. Instale la dependencia peer viem

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

npm i viem

3. Asegure la compatibilidad del empaquetador y polyfill

En versiones anteriores de wagmi que confiaban en ethers, los módulos fs, net y tls requeridos por WalletConnect se rellenaban automáticamente. Este ya no es el caso con RainbowKit v1 + wagmi v1, que están construidos sobre viem.

Consulta nuestra Configuración de Webpack de Next.js y ejemplos de polyfill de Create React App para obtener orientación en la configuración de tu proyecto.

Guías adicionales del marco para Vite y Remix están disponibles aquí.

4. Busque cambios significativos en wagmi y viem

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

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

Cambios radicales en 0.12.x

La dependencia peer de 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 pronto estará disponible como una versión de parche, sin cambios disruptivos.

Las carteras se actualizarán automáticamente en futuras versiones.

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

Sigue los pasos abajo para migrar.

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

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

2. Proporcione un projectId de WalletConnect Cloud

Cada dApp que depende de WalletConnect ahora necesita obtener un projectId de WalletConnect Cloud. Esto es absolutamente gratuito y solo lleva unos minutos.

Proporcione el projectId a getDefaultWallets y a los conectores de billetera individuales de RainbowKit como el siguiente:

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

    ],

  },

]);

Cambios radicales en 0.11.x

La dependencia peer de wagmi ha sido actualizada a 0.11.x.

Sigue los pasos abajo para migrar.

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

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

2. Verifique los cambios radicales en wagmi

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

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

Cambios radicales en 0.10.x

La dependencia peer de wagmi ha sido actualizada a 0.10.x.

Sigue los pasos abajo para migrar.

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

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

2. Verifique los cambios radicales en wagmi

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

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

Cambios radicales en 0.9.x

La dependencia peer de wagmi ha sido actualizada a 0.9.x.

Sigue los pasos abajo para migrar.

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

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

2. Verifique los cambios radicales en wagmi

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

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

Cambios radicales en 0.8.x

La dependencia peer de wagmi ha sido actualizada a 0.8.x.

Sigue los pasos abajo para migrar.

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

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

2. Verifique los cambios radicales en wagmi

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

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

Cambios radicales en 0.7.x

Si estás creando una lista personalizada de monederos, ahora debes importar cada monedero individualmente para reducir el tamaño del paquete. Observa que, como los monederos ya no están agrupados en el objeto wallet, todos los monederos 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 }),
];

También observa que se ha eliminado la capa de compatibilidad con versiones anteriores de Steakwallet. En su lugar, se debería usar Omni.

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


const wallets = [

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

Cambios radicales en 0.4.x

RainbowKit ha actualizado la dependencia peer wagmi a 0.5.x.

Sigue los pasos abajo para migrar.

1. Actualizar dependencias

Actualiza RainbowKit y wagmi a su última versión

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

2. Verifique los cambios radicales en wagmi

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

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

Cambios significativos en 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 anteriormente derivaste URL de RPC a partir de chainId en createConnector, ahora puedes eliminar esa lógica ya que wagmi maneja internamente las URL de RPC 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 0.2.x

RainbowKit ha actualizado la dependencia paritaria wagmi a ^0.4.

Sigue los pasos abajo para migrar.

1. Actualizar dependencias

Actualiza RainbowKit y wagmi a su última versión

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

2. Reemplaza la importación de configureChains

Importa configureChains de wagmi en lugar de RainbowKit:

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

4. Renombra el proveedor de wagmi

RainbowKit ya no exporta una API apiProvider. Reemplázalo con tu proveedor deseado de wagmi.

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

Alchemy

Importa alchemyProvider de 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

Importa infuraProvider de 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

Importa jsonRpcProvider de 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

Importa publicProvider de wagmi/providers/public.

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


const { chains, provider } = configureChains(

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

3. Renombra el proveedor de wagmi

Renombra WagmiProvider a WagmiConfig.

import {

- WagmiProvider
+ WagmiConfig
} from 'wagmi'



const App = () => {

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

¡Y ya terminaste! 🌈

PreviousIntroducción
InstalaciónNext