Tích hợp Ví

Kết nối mượt mà ứng dụng phi tập trung của bạn với tập người dùng TRON thông qua các công cụ tích hợp ví chuyên nghiệp. Hướng dẫn này bao gồm cách tiêm nhà cung cấp (provider injection) chuẩn của TronLink, TRON Wallet Adapter hỗ trợ đa ví trong các framework hiện đại, và các phương pháp hay nhất để ký giao dịch một cách an toàn.

Tiêm từ trình duyệt (Browser Injection) của TronLink

TronLink tiêm một instance tronWeb vào mọi trang web mà nó truy cập. Đây là cách tích hợp đơn giản nhất đối với các dApp trên trình duyệt — không yêu cầu thư viện ví bên ngoài.

Phát hiện và Kết nối

// Task: Phát hiện xem TronLink đã được cài đặt chưa và lấy địa chỉ tài khoản đã kết nối.
if (typeof window.tronWeb === 'undefined') {
  window.open('https://www.tronlink.org/', '_blank');
  return;
}

const tronWeb = window.tronWeb;

if (!tronWeb.defaultAddress.base58) {
  console.log('Ví chưa được kết nối');
} else {
  console.log('Đã kết nối:', tronWeb.defaultAddress.base58);
}

Lắng nghe Những Thay đổi của Tài khoản

TronLink kích hoạt các sự kiện DOM tùy chỉnh khi người dùng chuyển đổi tài khoản hoặc mạng lưới:

// Task: Lắng nghe các sự kiện thay đổi tài khoản và mạng lưới do tiện ích mở rộng TronLink phát ra.
window.addEventListener('message', (event) => {
  if (event.data.message && event.data.message.action === 'accountsChanged') {
    const newAddress = event.data.message.data.address;
    console.log('Tài khoản đã đổi sang:', newAddress);
  }

  if (event.data.message && event.data.message.action === 'setNode') {
    const newNode = event.data.message.data.node;
    console.log('Mạng lưới đã đổi sang:', newNode.fullNode);
  }
});

Ký các Giao dịch

Instance tronWeb được tiêm sẵn sẽ ký qua TronLink một cách tự động. Khi gọi .send() trên các phương thức của Hợp đồng, TronLink sẽ mở ra một hộp thoại xác nhận:

// Task: Sử dụng phiên bản TronWeb được tiêm vào để ký và phát đi một giao dịch.
const contract = await tronWeb.contract().at('TContractAddress...');

// TronLink sẽ bật lên một hộp thoại xác nhận giao dịch
const txId = await contract.transfer('TRecipient...', 1_000_000).send({
  feeLimit: 1_000_000_000,
});

TronWallet Adapter

TronWallet Adapter (walletadapter.org) là thư viện đa ví chuẩn mực dành cho các dApp TRON. Nó trừu tượng hóa trên TronLink, TokenPocket, Ledger và các ví khác thông qua một giao diện thống nhất, đồng thời cung cấp các component React và Vue tuyệt hảo.

Đây là lựa chọn được khuyến nghị cho bất kỳ dApp nào trong môi trường sản xuất (production) cần hỗ trợ nhiều hơn một ví.

Cài đặt

# Task: Cài đặt lõi của TRON wallet adapter và các component giao diện người dùng (UI).
npm install @tronweb3/tronwallet-adapters @tronweb3/tronwallet-adapter-react-ui

Tích hợp React

// Task: Bọc ứng dụng của bạn trong ngữ cảnh WalletProvider và giao diện (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>
  );
}

Sử dụng Ví đã Kết nối

// Task: Sử dụng hook useWallet để ký giao dịch trên các ví khác nhau.
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>;
}

Các Ví Được Hỗ trợ

Adapter	Gói (Package)
TronLink	`@tronweb3/tronwallet-adapters`
TokenPocket	`@tronweb3/tronwallet-adapters`
BitKeep (Bitget)	`@tronweb3/tronwallet-adapters`
OKX Wallet	`@tronweb3/tronwallet-adapters`
Ledger (phần cứng)	`@tronweb3/tronwallet-adapters`
WalletConnect	`@tronweb3/walletconnect-tron`

WalletConnect

WalletConnect kích hoạt khả năng kết nối ví trên di động. Người dùng dùng một ví di động tương thích với WalletConnect (như TronLink Mobile, TokenPocket) để quét mã QR nhằm phê duyệt các giao dịch trên điện thoại của họ trong khi vẫn sử dụng dApp trên máy tính để bàn (desktop).

npm install @tronweb3/walletconnect-tron

// Task: Cấu hình WalletConnect adapter để hỗ trợ ví trên di động.
import { WalletConnectAdapter } from "@tronweb3/walletconnect-tron"

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

// Sử dụng song song với các adapter khác
const adapters = [
  new TronLinkAdapter(),
  walletConnectAdapter,
];

Bắt buộc phải có một ID Dự án WalletConnect (WalletConnect Project ID). Đăng ký tại cloud.walletconnect.com — bậc miễn phí là đủ đối với hầu hết các dApp.

Chọn Giải pháp Tích hợp

Trường hợp	Phương pháp
dApp đơn giản, chỉ dùng TronLink	Tiêm (injection) `window.tronWeb`
dApp trong môi trường production, hỗ trợ nhiều ví	TronWallet Adapter
Nhắm tới người dùng ví di động	TronWallet Adapter + WalletConnect
Ứng dụng Vue	Giao diện Vue của TronWallet Adapter
Ví phần cứng (Ledger)	TronWallet Adapter Ledger adapter

Để biết thêm về tương tác Hợp đồng bằng tronweb sau khi kết nối, hãy xem hướng dẫn SDK tronweb. Để thiết lập testnet và sử dụng faucet, hãy tham khảo Testnets.