@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

We support a wide range of TRON and EVM wallets, including TronLink, MetaMask, WalletConnect, Ledger, and more. Each adapter offers a consistent interface — use the collective @tronweb3/tronwallet-adapters package and import individual adapters.

👉 For the complete list of supported wallets and their adapters, 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.