@tronweb3/tronwallet-adapters

@tronweb3/tronwallet-adapters provides a comprehensive suite of wallet adapters, enabling developers to connect to both Tron and EVM wallets (such as TronLink and MetaMask) through a unified and consistent API.

📦 Installation

This package is a "barrel package" that includes all individual adapters. You can install the entire suite or choose specific adapters to keep your bundle size small.

# Install the complete suite
npm install @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters

# Or install individual adapters as needed
npm install @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapter-tronlink
npm install @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapter-walletconnect

🔌 Supported Wallets

Each adapter offers a consistent interface. You can use this collective package or import individual ones.

| Wallet | NPM Package | Description | Source | | :--- | :--- | :--- | :--- | | All-in-One | @tronweb3/tronwallet-adapters | Includes all adapters below | View | | TronLink | @tronweb3/tronwallet-adapter-tronlink | Adapter for TronLink | View | | WalletConnect| @tronweb3/tronwallet-adapter-walletconnect | Adapter for WalletConnect | View | | MetaMask | @tronweb3/tronwallet-adapter-metamask-tron | Tron support via MetaMask | View | | Ledger | @tronweb3/tronwallet-adapter-ledger | Hardware wallet support | View | | OKX Wallet | @tronweb3/tronwallet-adapter-okxwallet | Adapter for OKX Wallet | View | | TokenPocket | @tronweb3/tronwallet-adapter-tokenpocket | Adapter for TokenPocket | View | | BitGet | @tronweb3/tronwallet-adapter-bitkeep | Adapter for BitGet (BitKeep) | View | | Binance EVM | @tronweb3/tronwallet-adapter-binance-evm | Adapter for Binance Wallet (EVM) | View | | MetaMask EVM | @tronweb3/tronwallet-adapter-metamask-evm | Native EVM support | View | | TronLink EVM | @tronweb3/tronwallet-adapter-tronlink-evm | Adapter for TronLink (EVM) | View | | Trust Wallet EVM | @tronweb3/tronwallet-adapter-trust-evm | Adapter for Trust Wallet (EVM) | View |

ℹ️ For the full list of 15+ supported wallets, visit our documentation.

🚀 Usage

Note: If you are using TypeScript, ensure skipLibCheck: true is set in your tsconfig.json.

React

For React applications, while you can use the adapters directly, we highly recommend using our official React Hooks Package for the best developer experience.

Manual Usage (Low-level):

import { useMemo, useEffect, useState } from 'react';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

function WalletInterface() {
    const adapter = useMemo(() => new TronLinkAdapter(), []);
    const [address, setAddress] = useState(adapter.address);

    useEffect(() => {
        const onConnect = (addr: string) => setAddress(addr);
        adapter.on('connect', onConnect);
        
        return () => {
            adapter.off('connect', onConnect);
            adapter.removeAllListeners();
        };
    }, [adapter]);

    return (
        <button onClick={() => adapter.connect()}>
            {address ? `Connected: ${address}` : 'Connect TronLink'}
        </button>
    );
}

Vue

In Vue 3, the Composition API is the recommended way to initialize and manage the adapter.

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

const address = ref('');
const adapter = new TronLinkAdapter();

onMounted(() => {
    adapter.on('connect', (addr) => {
        address.value = addr;
    });
});

onBeforeUnmount(() => {
    adapter.removeAllListeners();
});

const connect = () => adapter.connect();
</script>

<template>
    <button @click="connect">
        {{ address || 'Connect Wallet' }}
    </button>
</template>

🌐 Vanilla JS / CDN

For environments without build tools, use our UMD bundle.

1. Include the script:

<!-- peer dependency needed for LedgerAdapter -->
<script type="module">
    import bufferPolyfill from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
    window.Buffer = bufferPolyfill
</script>
<!-- peer dependency needed for WalletConnect -->
<script src="https://cdn.jsdelivr.net/npm/@walletconnect/sign-client/dist/index.umd.js"></script>
<!-- adapters bundle -->
<script src="https://cdn.jsdelivr.net/npm/@tronweb3/tronwallet-adapters/lib/umd/index.js"></script>

2. Initialize:

const { TronLinkAdapter } = window['@tronweb3/tronwallet-adapters'];
const adapter = new TronLinkAdapter();

adapter.connect().then(() => {
    console.log('Connected to:', adapter.address);
});

🛠️ Configuration

WalletConnect Support

WalletConnectAdapter requires a peer dependency. If you plan to use it, please install:

npm install @walletconnect/sign-client

📘 Documentation

• API Reference: Detailed class and method documentation is available at walletadapter.org.
• Guide: Step-by-step integration guides for React, Vue.
• EVM Integration: Learn how to use MetaMask and other EVM wallets on Tron here.