Lista de Billeteras Personalizadas

Personalizando la lista de billeteras

Puedes importar billeteras individuales desde '@rainbow-me/rainbowkit/wallets' junto con la función connectorsForWallets para construir tu propia lista de billeteras con sus conectores necesarios. De esta manera, tienes control total sobre qué billeteras mostrar y en qué orden.

Por ejemplo, puedes optar por mostrar solo Rainbow junto con billeteras genéricas de respaldo.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

Luego puedes pasar tus conectores a createConfig de Wagmi.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { createConfig } from 'wagmi';

const connectors = connectorsForWallets(/* ... */);

const config = createConfig({
  connectors,
  {/* Wagmi config */}
});

const queryClient = new QueryClient();

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

Billeteras Integradas

Las siguientes billeteras se proporcionan a través del objeto wallet.

Billeteras Genéricas

Las siguientes billeteras están adaptadas a métodos de conexión genéricos en lugar de aplicaciones específicas. Como resultado, se recomienda que estas billeteras siempre estén incluidas.

WalletConnect

Esta es una opción de billetera de respaldo diseñada para billeteras basadas en WalletConnect que no han sido proporcionadas por otra billetera en la lista.

Se recomienda que siempre incluyas esta billetera en la lista para asegurar que todas las billeteras basadas en WalletConnect sean compatibles.

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

Billetera Inyectada

Esta es una opción de billetera de respaldo diseñada para escenarios donde window.ethereum existe pero no ha sido proporcionado por otra billetera en la lista. Esta billetera se ocultará automáticamente de la lista cuando el respaldo no sea necesario o si no hay una billetera inyectada disponible.

Se recomienda que siempre incluyas esta billetera en la lista para asegurar que todas las billeteras inyectadas sean compatibles.

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

Billetera Segura

Para dApps que soportan Safe Apps para permitir a los usuarios conectarse fácilmente con su bóveda segura o multi-firma, incluye la opción safeWallet para conexiones automáticas. La opción Segura solo aparecerá en el entorno del navegador de Safe Wallet.

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

Billeteras Específicas

Las siguientes billeteras se proporcionan a través del objeto wallet (en orden alfabético).

1inch Billetera

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

Backpack

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

Cuenta Base (anteriormente Coinbase Wallet)

Este conector de billetera soporta Cuenta Base, la evolución de Coinbase Smart Wallet. Proporciona autenticación sin problemas y funciones mejoradas como subcuentas y permisos de gasto.

Las opciones de configuración se alinean con la referencia del SDK de Cuenta Base.

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

// Configure attribution (choose one approach)
baseAccount.preference = {
  attribution: { auto: true }, // Smart Wallet generates origin-based identifier
};

// Or use custom attribution
baseAccount.preference = {
  attribution: { dataSuffix: '0x1234567890abcdef' }, // 16-byte hex identifier
};

// Configure sub-accounts
baseAccount.subAccounts = {
  creation: 'on-connect', // or 'manual'
  defaultAccount: 'sub', // or 'universal'
  funding: 'spend-permissions', // or 'manual'
};

// Configure paymaster URLs for gasless transactions
baseAccount.paymasterUrls = {
  [base.id]: 'https://api.developer.coinbase.com/rpc/v1/base/...',
};

BeraSig

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

Mejor Billetera

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

Billetera Bifrost

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

Binance Billetera Web3

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

Bitget

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

Bitski

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

Bitverse

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

Bloom Billetera

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

Brave Billetera

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

Bybit Billetera

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

Coin98 Billetera

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

Compass Billetera

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

Core

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

Billetera CTRL

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

Dawn Billetera

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

Enkrypt Billetera

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

FoxWallet

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

Frame Billetera

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

Frontier Billetera

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

Gate Billetera

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

Wallet de Gemini

Este conector de billetera inteligente permite una autenticación sin problemas a través de claves de acceso en keys.gemini.com - no se requieren descargas, extensiones ni claves API. Funciona perfectamente desde el principio.

El parámetro appName es obligatorio para identificar tu dApp, y appIcon es opcional para la personalización de la experiencia de conexión.

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

const gemini = geminiWallet({
  appName: 'My App',
  appIcon: 'https://my-app.com/logo.png', // Optional
});

imToken

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

ioPay Billetera

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

Kaia Billetera

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

Kaikas

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

Kraken Billetera

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

Kresus Billetera

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

Ledger Live

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

Magic Eden Billetera

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

MetaMask

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

MEW Wallet

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

Nova Billetera

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

OKX Billetera

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

Omni

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

OneKey

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

ParaSwap

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

Phantom

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

Porto

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

Rabby Billetera

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

Rainbow

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

Ramper Billetera

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

Listo

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

Ronin Wallet

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

Safeheron

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

Taho

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

Talisman

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

Tokenary

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

TokenPocket

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

Trust Wallet

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

Uniswap Wallet

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

Valora

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

Wigwam

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

xPortal

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

Zerion

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

ZilPay

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

Ejemplos

Orden

Aquí hay algunos ejemplos de presentación de diferentes billeteras, en diferente orden.

Mostrar MetaMask junto con billeteras genéricas de respaldo.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  metaMaskWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [metaMaskWallet, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Mostrar Rainbow, MetaMask y Base Account junto con billeteras de reserva genéricas.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  baseAccount,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Suggested',
      wallets: [
        rainbowWallet,
        metaMaskWallet,
        baseAccount,
        walletConnectWallet,
      ],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Recordatorio: el orden del array wallets define el orden en el que las billeteras se mostrarán en la interfaz de usuario.

Múltiples grupos

Puedes usar la clave groupName para nombrar diferentes grupos de billeteras. Esto es útil si deseas comunicar a tus usuarios qué billeteras recomiendas, así como otras billeteras posibles.

Recomendar Rainbow y MetaMask, pero también ofrecer Base Account junto con billeteras genéricas de reserva.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  metaMaskWallet,
  baseAccount,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, metaMaskWallet],
    },
    {
      groupName: 'Others',
      wallets: [baseAccount, walletConnectWallet],
    },
  ],
  { appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

Visión General

Primeros Pasos

Avanzado