Integración de Billeteras

Conecta tu aplicación descentralizada con la base de usuarios de TRON de forma fluida mediante integraciones de billetera profesionales. Esta guía cubre la inyección estándar del proveedor TronLink, el TRON Wallet Adapter para soporte multi-billetera en frameworks modernos y las mejores prácticas para la firma segura de transacciones.

Las DApps de TRON se integran con las billeteras a través de tres mecanismos: la extensión de navegador TronLink inyecta window.tronWeb directamente; TronWallet Adapter proporciona una capa de componentes unificada de React/Vue para soporte multi-billetera; y WalletConnect habilita la conectividad con billeteras móviles mediante código QR o enlace profundo.

Inyección del Navegador de TronLink

TronLink inyecta una instancia de tronWeb en cada página que visita. Este es el camino de integración más sencillo para DApps de navegador — no se requiere ninguna biblioteca de billetera externa.

Detección y Conexión

// Tarea: Detectar si TronLink está instalado y obtener la dirección de la cuenta conectada.
if (typeof window.tronWeb === 'undefined') {
  window.open('https://www.tronlink.org/', '_blank');
  return;
}

const tronWeb = window.tronWeb;

if (!tronWeb.defaultAddress.base58) {
  console.log('Wallet not connected');
} else {
  console.log('Connected:', tronWeb.defaultAddress.base58);
}

Escuchar Cambios de Cuenta

TronLink emite eventos DOM personalizados cuando el usuario cambia de cuenta o de red:

// Tarea: Escuchar los eventos de cambio de cuenta y red emitidos por la extensión TronLink.
window.addEventListener('message', (event) => {
  if (event.data.message && event.data.message.action === 'accountsChanged') {
    const newAddress = event.data.message.data.address;
    console.log('Account changed to:', newAddress);
  }

  if (event.data.message && event.data.message.action === 'setNode') {
    const newNode = event.data.message.data.node;
    console.log('Network changed to:', newNode.fullNode);
  }
});

Firmar Transacciones

El tronWeb inyectado firma a través de TronLink automáticamente. Llama a .send() en los métodos del contrato y TronLink abrirá un diálogo de confirmación:

// Tarea: Usar la instancia de TronWeb inyectada para firmar y transmitir una transacción.
const contract = await tronWeb.contract().at('TContractAddress...');

// TronLink muestra un diálogo de confirmación de transacción
const txId = await contract.transfer('TRecipient...', 1_000_000).send({
  feeLimit: 1_000_000_000,
});

TronWallet Adapter

TronWallet Adapter (walletadapter.org) es la biblioteca multi-billetera estándar para las DApps de TRON. Abstrae TronLink, TokenPocket, Ledger y otras billeteras a través de una interfaz unificada, y proporciona componentes de primera clase para React y Vue.

Es la opción recomendada para cualquier DApp en producción que necesite soportar más de una billetera.

Instalación

# Tarea: Instalar el adaptador principal de billetera de TRON y los componentes de UI.
npm install @tronweb3/tronwallet-adapters @tronweb3/tronwallet-adapter-react-ui

Integración con React

// Tarea: Envolver tu aplicación en el WalletProvider y el contexto de UI.
import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks"
import { WalletModalProvider, WalletActionButton } from "@tronweb3/tronwallet-adapter-react-ui"
import { TronLinkAdapter, TokenPocketAdapter, LedgerAdapter } from "@tronweb3/tronwallet-adapters"
import '@tronweb3/tronwallet-adapter-react-ui/style.css';

const adapters = [
  new TronLinkAdapter(),
  new TokenPocketAdapter(),
  new LedgerAdapter(),
];

function App() {
  return (
    <WalletProvider adapters={adapters} autoConnect>
      <WalletModalProvider>
        <WalletActionButton />
        <YourDApp />
      </WalletModalProvider>
    </WalletProvider>
  );
}

Usar la Billetera Conectada

// Tarea: Usar el hook useWallet para firmar transacciones en diferentes billeteras.
import { useWallet } from "@tronweb3/tronwallet-adapter-react-hooks"

function TransferButton() {
  const { address, connected, signTransaction } = useWallet();

  async function handleTransfer() {
    if (!connected) return;

    const unsignedTx = await tronWeb.transactionBuilder.sendTrx(
      'TRecipient...',
      10_000_000,
      address,
    );

    const signedTx = await signTransaction(unsignedTx);
    const result = await tronWeb.trx.sendRawTransaction(signedTx);
    console.log(result.txid);
  }

  return <button onClick={handleTransfer}>Send 10 TRX</button>;
}

Billeteras Compatibles

Adaptador	Paquete
TronLink	`@tronweb3/tronwallet-adapters`
TokenPocket	`@tronweb3/tronwallet-adapters`
BitKeep (Bitget)	`@tronweb3/tronwallet-adapters`
OKX Wallet	`@tronweb3/tronwallet-adapters`
Ledger (hardware)	`@tronweb3/tronwallet-adapters`
WalletConnect	`@tronweb3/walletconnect-tron`

WalletConnect

WalletConnect habilita la conectividad con billeteras móviles. Los usuarios escanean un código QR con una billetera móvil compatible con WalletConnect (TronLink Mobile, TokenPocket) para aprobar transacciones en su teléfono mientras usan la DApp en el escritorio.

npm install @tronweb3/walletconnect-tron

// Tarea: Configurar el adaptador de WalletConnect para soporte de billeteras móviles.
import { WalletConnectAdapter } from "@tronweb3/walletconnect-tron"

const walletConnectAdapter = new WalletConnectAdapter({
  network: 'Mainnet',
  options: {
    projectId: 'your_walletconnect_project_id',
    relayUrl: 'wss://relay.walletconnect.com',
  },
});

// Usar junto con otros adaptadores
const adapters = [
  new TronLinkAdapter(),
  walletConnectAdapter,
];

Se requiere un Project ID de WalletConnect. Regístrate en cloud.walletconnect.com — el nivel gratuito es suficiente para la mayoría de las DApps.

Elegir un Enfoque de Integración

Escenario	Enfoque
DApp sencilla, solo TronLink	Inyección de `window.tronWeb`
DApp en producción, soporte de múltiples billeteras	TronWallet Adapter
Usuarios con billeteras móviles	TronWallet Adapter + WalletConnect
Aplicación Vue	TronWallet Adapter Vue UI
Billetera de hardware (Ledger)	Adaptador Ledger de TronWallet Adapter

Para la interacción con contratos mediante tronweb después de la conexión, consulta la guía del SDK tronweb. Para la configuración de la red de prueba y el acceso al faucet, consulta Redes de Prueba.