Wallet Integration

Seamlessly connect your decentralized application to the TRON user base through professional wallet integrations. This guide covers the standard TronLink provider injection, the TRON Wallet Adapter for multi-wallet support in modern frameworks, and best practices for secure transaction signing.

TronLink Browser Injection

TronLink injects a tronWeb instance into every page it visits. This is the simplest integration path for browser DApps — no external wallet library required.

Detection and Connection

detect.js

// Task: Detect if TronLink is installed and retrieve the connected account address.
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);
}

Listening for Account Changes

TronLink fires custom DOM events when the user switches accounts or networks:

events.js

// Task: Listen for account and network change events emitted by the TronLink extension.
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);
  }
});

Signing Transactions

The injected tronWeb signs via TronLink automatically. Call .send() on contract methods and TronLink opens a confirmation prompt:

sign_injected.js

// Task: Use the injected TronWeb instance to sign and broadcast a transaction.
const contract = await tronWeb.contract().at('TContractAddress...');

// TronLink pops a transaction confirmation dialog
const txId = await contract.transfer('TRecipient...', 1_000_000).send({
  feeLimit: 1_000_000_000,
});

No private key exposure

The injected window.tronWeb never exposes the user’s private key to your DApp. Signing always happens inside the TronLink extension.

---

TronWallet Adapter

TronWallet Adapter (walletadapter.org) is the standard multi-wallet library for TRON DApps. It abstracts over TronLink, TokenPocket, Ledger, and other wallets through a unified interface, and provides first-class React and Vue components.

It is the recommended choice for any production DApp that needs to support more than one wallet.

Installation

Terminal

# Task: Install the core TRON wallet adapter and UI components.
npm install @tronweb3/tronwallet-adapters @tronweb3/tronwallet-adapter-react-ui

React Integration

App.jsx

// Task: Wrap your application in the WalletProvider and UI context.
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>
  );
}

Using the Connected Wallet

TransferButton.jsx

// Task: Use the useWallet hook to sign transactions across different wallets.
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>;
}

Supported Wallets

Adapter	Package
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 enables mobile wallet connectivity. Users scan a QR code with a WalletConnect-compatible mobile wallet (TronLink Mobile, TokenPocket) to approve transactions on their phone while using the DApp on desktop.

npm install @tronweb3/walletconnect-tron

wc_setup.js

// Task: Configure the WalletConnect adapter for mobile wallet support.
import { WalletConnectAdapter } from "@tronweb3/walletconnect-tron"

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

// Use alongside other adapters
const adapters = [
  new TronLinkAdapter(),
  walletConnectAdapter,
];

A WalletConnect Project ID is required. Register at cloud.walletconnect.com — the free tier is sufficient for most DApps.

---

Choosing an Integration Approach

Scenario	Approach
Simple DApp, TronLink only	window.tronWeb injection
Production DApp, multiple wallet support	TronWallet Adapter
Mobile wallet users	TronWallet Adapter + WalletConnect
Vue application	TronWallet Adapter Vue UI
Hardware wallet (Ledger)	TronWallet Adapter Ledger adapter

---

For tronweb contract interaction after connection, see the tronweb SDK guide. For testnet setup and faucet access, see Testnets.