Instalación

Instalación

Ponte en marcha con RainbowKit

Puedes crear una nueva aplicación RainbowKit + wagmi + Next.js con uno de los siguientes comandos, utilizando el gestor de paquetes de tu elección:

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

Esto te pedirá un nombre de proyecto, generará un nuevo directorio que contiene un proyecto de plantilla y instalará todas las dependencias necesarias.

Alternativamente, puedes integrar manualmente RainbowKit en tu proyecto existente.

Instala RainbowKit y sus dependencias de igual nivel, wagmi, viem y @tanstack/react-query.

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

Nota: RainbowKit es una biblioteca de React.

Importar RainbowKit, Wagmi y TanStack Query.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

Configure sus cadenas deseadas y genere los conectores requeridos. También necesitará configurar una wagmi config. Si tu dApp utiliza renderizado del lado del servidor (SSR), asegúrate de establecer ssr en true.

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

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

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Envuelva su aplicación con RainbowKitProvider, WagmiProvider y QueryClientProvider.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Luego, en tu aplicación, importa y renderiza el componente ConnectButton.

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

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit ahora manejará la selección de la billetera de tu usuario, mostrará la información de la billetera/transacción y manejará el cambio de red/billetera.

Algunas herramientas de construcción requerirán una configuración adicional.

Al utilizar Remix, debes polyfill los módulos buffer, events y http. Haga referencia a la configuración de Remix a continuación, o nuestro proyecto de ejemplo Remix.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

De forma predeterminada, tu dApp utiliza proveedores RPC públicos para cada cadena para obtener balances, resolver nombres ENS y más. Esto puede causar problemas de fiabilidad para tus usuarios ya que los nodos públicos tienen un límite de velocidad. Deberías comprar acceso a un proveedor RPC a través de servicios como Alchemy o QuickNode y definir tus propios Transports en Wagmi. Esto se puede lograr añadiendo el parámetro transports en getDefaultConfig o directamente a través de createConfig de Wagmi.

Un Transport es la capa intermedia de red que maneja el envío de solicitudes JSON-RPC al proveedor de nodos Ethereum (como Alchemy, Infura, etc).

Ejemplo con un transporte http

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

Para más detalles, vea la documentación de wagmi..

Ahora que sus usuarios pueden conectar sus billeteras, puede comenzar a desarrollar el resto de su aplicación utilizando wagmi.

Envíe transacciones, interactúe con contratos, resuelva detalles de ENS y mucho más con la suite completa de Hooks de React de wagmi.

Para más detalles, vea la documentación de wagmi.

Para ver algunos ejemplos ejecutándose de RainbowKit, o incluso usarlos para crear automáticamente un nuevo proyecto, consulte los ejemplos oficiales.

Para probar RainbowKit directamente en su navegador, consulte los enlaces de CodeSandbox a continuación:

• con Crear React App
• con Next.js
• con Next.js App Router
• con Remix
• con Vite