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,
{}
});
const queryClient = new QueryClient();
const App = () => (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider {...etc}>
{}
</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';
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' },
);