Rainbow logo
RainbowKit
2.2.4

Lista Personalizada de Carteras

Lista Personalizada de Carteras

Personalizando la lista de carteras

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

Por ejemplo, puedes elegir mostrar solo Rainbow junto con carteras de respaldo genéricas.

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>
);

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

Las siguientes carteras están enfocadas en métodos de conexión genéricos más que en aplicaciones específicas. Como resultado, se recomienda que siempre se incluyan estas wallets.

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

Se recomienda que siempre incluya este monedero en la lista para asegurar que todas las wallets basadas en WalletConnect estén soportadas.

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

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

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

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

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

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

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

import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
import { berasigWallet } from '@rainbow-me/rainbowkit/wallets';
import { bestWallet } from '@rainbow-me/rainbowkit/wallets';
import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
import { bitverseWallet } from '@rainbow-me/rainbowkit/wallets';
import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';
import { braveWallet } from '@rainbow-me/rainbowkit/wallets';
import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';

Este conector de cartera soporta tanto la aplicación y la extensión de Coinbase Wallet, como también Coinbase Smart Wallet en la Web.

Un argumento de preferencia está disponible para controlar si Smart Wallet está habilitado y disponible para los usuarios. El comportamiento basado en preferencias está documentado aquí.

Smart Wallet estará habilitado por defecto con all a principios de junio, sin necesidad de una actualización adicional.

Los desarrolladores pueden probar Smart Wallet con las cadenas sepolia y baseSepolia hoy configurando smartWalletOnly e incluyendo coinbaseWallet en su lista de carteras de la siguiente manera:

import { coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';
// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = 'smartWalletOnly';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
import { compassWallet } from '@rainbow-me/rainbowkit/compassWallet';
import { coreWallet } from '@rainbow-me/rainbowkit/wallets';
import { dawnWallet } from '@rainbow-me/rainbowkit/wallets';
import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';
import { foxWallet } from '@rainbow-me/rainbowkit/wallets';
import { frameWallet } from '@rainbow-me/rainbowkit/wallets';
import { frontierWallet } from '@rainbow-me/rainbowkit/wallets';
import { gateWallet } from '@rainbow-me/rainbowkit/wallets';
import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
import { iopayWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaiaWallet } from '@rainbow-me/rainbowkit/wallets';
import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';
import { krakenWallet } from '@rainbow-me/rainbowkit/wallets';
import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';
import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets';
import { magicEdenWallet } from '@rainbow-me/rainbowkit/wallets';
import { mewWallet } from '@rainbow-me/rainbowkit/wallets';
import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
import { omniWallet } from '@rainbow-me/rainbowkit/wallets';
import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';
import { paraSwapWallet } from '@rainbow-me/rainbowkit/wallets';
import { phantomWallet } from '@rainbow-me/rainbowkit/wallets';
import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';
import { roninWallet } from '@rainbow-me/rainbowkit/wallets';
import { safeheronWallet } from '@rainbow-me/rainbowkit/wallets';
import { tahoWallet } from '@rainbow-me/rainbowkit/wallets';
import { talismanWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenaryWallet } from '@rainbow-me/rainbowkit/wallets';
import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets';
import { trustWallet } from '@rainbow-me/rainbowkit/wallets';
import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';
import { valoraWallet } from '@rainbow-me/rainbowkit/wallets';
import { xdefiWallet } from '@rainbow-me/rainbowkit/wallets';
import { zerionWallet } from '@rainbow-me/rainbowkit/wallets';
import { wigwamWallet } from '@rainbow-me/rainbowkit/wallets';

Aquí hay algunos ejemplos de cómo mostrar diferentes billeteras, en diferentes órdenes.

Mostrar MetaMask junto con billeteras de reserva genéricas.

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 Coinbase junto con billeteras de reserva genéricas.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Suggested',
wallets: [
rainbowWallet,
metaMaskWallet,
coinbaseWallet,
walletConnectWallet,
],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);

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

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

Recomienda Rainbow y MetaMask, pero también ofrece Coinbase junto con billeteras genéricas de reserva.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet, coinbaseWallet, walletConnectWallet, } from '@rainbow-me/rainbowkit/wallets';
const connectors = connectorsForWallets(
[
{
groupName: 'Recommended',
wallets: [rainbowWallet, metaMaskWallet],
},
{
groupName: 'Others',
wallets: [coinbaseWallet, walletConnectWallet],
},
],
{ appName: 'RainbowKit App', projectId: 'YOUR_PROJECT_ID' },
);