Instalación

Instalación

Comienza rápidamente con RainbowKit

Puedes crear una nueva aplicación de RainbowKit + wagmi + Next.js usando tu gestor de paquetes favorito con los siguientes comandos:

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 con un proyecto base e instalará todas las dependencias requeridas.

Alternativamente, puedes integrar RainbowKit de forma manual en tu proyecto existente.

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

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

Nota: RainbowKit es una biblioteca de React.

Importa 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";

Configura las cadenas deseadas y genera los conectores necesarios. También necesitarás establecer una configuración wagmi. 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 de WalletConnect Cloud. Esto es completamente gratis y solo toma 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)
});

Envuelve tu 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 />;
};

Ahora RainbowKit manejará la selección de billetera de tus usuarios, mostrará la información de la billetera/transacción y gestionará el cambio de red/billetera.

Algunas herramientas de compilación requerirán configuración adicional.

Cuando uses Remix, deberás incluir polifills para los módulos buffer, events y http. Consulta 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 },
  },
};

Por defecto, tu dApp usa proveedores de RPC públicos para cada cadena para obtener saldos, resolver nombres ENS y más. Esto puede causar problemas de fiabilidad para tus usuarios debido a las limitaciones. Deberías adquirir acceso a un proveedor RPC a través de servicios como Alchemy o QuickNode y definir tus propios Transportes en Wagmi. Esto se puede lograr añadiendo el parámetro transports en getDefaultConfig o directamente a través de createConfig de Wagmi.

Un Transporte es la capa intermedia de red que maneja el envío de solicitudes JSON-RPC al Proveedor de Nodo 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, consulta la documentación de transporte de wagmi.

Ahora que tus usuarios pueden conectar sus billeteras, puedes comenzar a construir el resto de tu aplicación usando wagmi.

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

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

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

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

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