Important Notice: Repository Migration

Notice: This repository has been migrated to a new repository!

This repository is no longer actively maintained at this location soon. Please visit and follow the new repository for the latest updates and contributions: 👉 web3-geek/tronwallet-adapter.

Thank you for your understanding and support!

tronwallet-adapter

This repository contains wallet adapters and components for Tron DApps. With out-of-box components and unified methods, developers can easily interact with multiple wallets, select/connect/disconnect wallets and sign a message or transaction.

Wallet Integrations

Supported

TronLink App: All versions
TronLink Extension: All versions
BitKeep App: All versions
BitKeep Extension: All versions
OkxWallet App: Android all versions
OkxWallet Extension: All versions
TokenPocket App: All versions
Ledger: All versions
WalletConnect: v2.0

Coming Soon

imToken

Introduction

Adapters

Wallet adapters help you to access to TRON wallets with consistent API.

There are many wallets supporting TRON network such as TronLink, Ledger and so on . Different wallets and different versions of one wallet may have different interface to use. The aim of Adapters relavant packages is to shield these differences and offer consistent interface for DApp developers. DApps don't need to change their code frequently if they have accessed to the tron wallet adapters code.

For example if you want to connect to different wallets, you have to use different methods:

// TronLink
window.tronLink.request({ method: 'tron_requestAccounts' });

// Ledger
const transport = await TransportWebHID.create();
const app = new Trx(transport);

// WalletConnect
const wallet = new WalletConnectWallet({
    network: this._config.network,
    options: this._config.options,
});

With adapter, you can use consistent APIs for different wallets:

// TronLink
const tronlinkAdapter = new TronLinkAdapter();
await tronlinkAdapter.connect();
await tronlinkAdapter.signMessage(message);

// Ledger
const ledgerAdapter = new LedgerAdapter();
await ledgerAdapter.connect();
await ledgerAdapter.signMessage(message);

// WalletConnect
const walletconnectAdapter = new WalletConnectAdapter();
await walletconnectAdapter.connect();
await walletconnectAdapter.signMessage(message);

Hooks and UI components for React

There are two libraries for React developers: @tronweb3/tronwallet-adapter-react-hooks and @tronweb3/tronwallet-adapter-react-ui.

React hook is a hook to manage the global state of wallet, such as current selected wallet and the connect state, address, and so on. It also provides some methods to interact with wallet.

When your dapp supports multiple wallets, with the help of useWallet() hook you can easily:

select which wallet to use
connect to the selected wallet
disconnect to the selected wallet
call signMessage or signTransaction of the selected wallet

Examples:

function Comp() {
    const { wallet, address, connected, select, connect, disconnect, signMessage, signTransaction } = useWallet();
    return (
        <div>
            <button onClick={() => select('TronLink')}>Select Wallet</button>
            <button onClick={connect}>Connect</button>
            <button onClick={disconnect}>Disconnect</button>
            <button onClick={() => signMessage('Hello World')}>Sign Message</button>
        </div>
    );
}

useWallet() only contains logic to manage wallet state. Besides, we provide a set of out-of-box components to help you interact with wallets:

WalletSelectButton: Shows a wallet dialog to select a wallet
WalletConnectButton: Connects to the selected wallet
WalletDisconnectButton: Disconnects from the selected wallet
WalletActionButton: A button with multiple actions include select/connect/disconnect

Here is the demo image:

example

Hooks and UI components for Vue

There are two libraries for Vue developers: @tronweb3/tronwallet-adapter-vue-hooks and @tronweb3/tronwallet-adapter-vue-ui. Vue hook is a hook to manage the global state of wallet, such as current selected wallet and the connect state, address, and so on. It also provides some methods to interact with wallet.

When your dapp supports multiple wallets, with the help of useWallet() hook you can easily:

select which wallet to use
connect to the selected wallet
disconnect to the selected wallet
call signMessage or signTransaction of the selected wallet

Examples:

<template>
<div>
    <button onClick={() => select('TronLink')}>Select Wallet</button>
    <button onClick={connect}>Connect</button>
    <button onClick={disconnect}>Disconnect</button>
    <button onClick={() => signMessage('Hello World')}>Sign Message</button>
</div>
</template>
<script setup>
    const { wallet, address, connected, select, connect, disconnect, signMessage, signTransaction } = useWallet();
</script>

useWallet() only contains logic to manage wallet state. Besides, we provide a set of out-of-box components to help you interact with wallets:

WalletSelectButton: Shows a wallet dialog to select a wallet
WalletConnectButton: Connects to the selected wallet
WalletDisconnectButton: Disconnects from the selected wallet
WalletActionButton: A button with multiple actions include select/connect/disconnect

Documentation

For Tron Apps

For more details, please refer to the API Documentation.

TronWallet Adapter Packages

This library is organized into several packages with few dependencies.

To add it to your app, you'll need abstract adapter package, some adapters for wallets, and UI components.

tronwallet-adapter
├─docs # documents
├─packages
|   ├─adapters
|   |   ├─abstract-adapter # abstract class for the specified adapter
|   |   ├─adapters # export all adapters
|   |   ├─tronlink # adapter for tronlink
|   |   ├─ledger # adapter for ledger
|   |   ├─walletconnect # adapter for walletconnect
|   |   ├─tokenpocket # adapter for TokenPocket
|   |   ├─bitkeep # adapter for Bitget Wallet
|   |   ├─okxwallet # adapter for Okx Wallet
|   ├─react
|   |   ├─react-hooks # react hooks to manage wallet state
|   |   ├─react-ui # react ui components to select/connect wallets
|   ├─vue
|   |   ├─vue-hooks # vue hooks to manage wallet state
|   |   ├─vue-ui # vue ui components to select/connect wallets
├─demos
|   ├─react-ui
|   |   ├─create-react-app # demo created by create-react-app
|   |   ├─vite-app # demo for vitejs
|   |   ├─next-app # demo for nextjs
|   ├─vue-ui
|   |   ├─vite-app # demo for vitejs
|   ├─dev-demo # demo for development
|   ├─cdn-demo # demo for cdn usage of adapters

TronWallet Adapters

These packages provide adapters for each wallet. You can use the @tronweb3/tronwallet-adapters package, or add the individual wallet packages you want.

package	description	npm
adapters	Includes all the wallets (with tree shaking)	`@tronweb3/tronwallet-adapters`
tronlink	Adapter for TronLink extention and TronLink app(IOS and Android)	`@tronweb3/tronwallet-adapter-tronlink`
ledger	Adapter for Ledger	`@tronweb3/tronwallet-adapter-ledger`
walletconnect	Adapter for Walletconnect	`@tronweb3/tronwallet-adapter-walletconnect`
tokenpocket	Adapter for TokenPocket App(IOS and Android)	`@tronweb3/tronwallet-adapter-tokenpocket`
bitkeep	Adapter for BitKeep extension and BitKeep App(IOS and Android)	`@tronweb3/tronwallet-adapter-bitkeep`
okxwallet	Adapter for Okx Wallet extension and App(Android)	`@tronweb3/tronwallet-adapter-okxwallet`

React Components

These packages provide components for react hooks context and custom react UI.

package	description	npm
react-hooks	provides a `useWallet()` react hook	`@tronweb3/tronwallet-adapter-react-hooks`
react-ui	UI frameworks for react app	`@tronweb3/tronwallet-adapter-react-ui`

Packages Examples

@tronweb3/tronwallet-adapters

This package contains all wallet adapters for Tron including:

Code example：

import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

function App() {
    const adapter = useMemo(() => new TronLinkAdapter(), []);
    const onConnect = useCallback(() => {}, []);
    const onDisconnect = useCallback(() => {}, []);
    const onStateChanged = useCallback(() => {}, []);
    useEffect(() => {
        adapter.on('connect', onConnect);
        adapter.on('disconnect', onDisconnect);
        adapter.on('stateChanged', onStateChanged);
        return () => {
            adapter.removeAllListeners();
        };
    });

    const connect = useCallback(() => adapter.connect(), []);
    const disconnect = useCallback(() => adapter.connect(), []);

    return <div></div>;
}

@tronweb3/tronwallet-adapter-react-hooks

This package contains react hooks to easily select/connect/disconnect wallets and manage the wallet state.

Code example：

import { WalletProvider, useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';

function App() {
    const onError = useCallback((e) => {
        // handle error here
    }, []);
    return (
        <WalletProvider onError={onError}>
            <Content></Content>
        </WalletProvider>
    );
}
function Content() {
    const { address, wallet, connected, select, connect, disconnect } = useWallet();
    return (
        <div>
            <p>Current Address: {address}</p>
            <p>Connection Status: {wallet.state}</p>
            <button onClick={() => select('WalletAdapterName to be selected')}>Select Wallet</button>
            <button onClick={connect}>Connect</button>
            <button onClick={disconnect}>Disconnect</button>
        </div>
    );
}

@tronweb3/tronwallet-adapter-react-ui

This package contains a set of out-of-the-box components to make it easy to select/connect/disconnect wallets.

Code example：

import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { WalletModalProvider, WalletActionButton } from '@tronweb3/tronwallet-adapter-react-ui';
function App() {
    const onError = useCallback((e) => {
        // handle error here
    }, []);
    return (
        <WalletProvider onError={onError}>
            <WalletModalProvider>
                <WalletActionButton></WalletActionButton>
            </WalletModalProvider>
        </WalletProvider>
    );
}

@tronweb3/tronwallet-adapter-vue-hooks

This package contains vue hooks to easily select/connect/disconnect wallets and manage the wallet state.

Code example：

<script setup>
    import { defineComponent, h } from 'vue';
    import { WalletProvider, useWallet } from '@tronweb3/tronwallet-adapter-vue-hooks';
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
    const tronLink = new TronLinkAdapter();

    const adapters = [tronLink];

    function onConnect(address) {
        console.log('[wallet hooks] onConnect: ', address);
    }
    function onDisconnect() {
        console.log('[wallet hooks] onDisconnect');
    }

    const VueComponent = defineComponent({
        setup() {
            // Here you can use `useWallet` API
            const { wallet, connect, signMessage, signTransaction } = useWallet();
            return () =>
                h('div', [
                    h('div', { style: 'color: #222;' }, `Current Adapter: ${(wallet && wallet.adapter.name) || ''}`),
                ]);
        },
    });
</script>

<template>
    <WalletProvider :adapters="adapters" @connect="onConnect" @disconnect="onDisconnect">
        <VueComponent />
    </WalletProvider>
</template>

@tronweb3/tronwallet-adapter-vue-ui

This package contains a set of out-of-the-box components to make it easy to select/connect/disconnect wallets.

Code example：

<template>
    <WalletProvider @error="onError">
        <WalletModalProvider>
            <WalletActionButton></WalletActionButton>
            <Profile></Profile>
        </WalletModalProvider>
    </WalletProvider>
</template>
<script setup>
    import { h, defineComponent } from 'vue';
    import { useWallet, WalletProvider } from '@tronweb3/tronwallet-adapter-vue-hooks';
    import { WalletModalProvider, WalletActionButton } from '@tronweb3/tronwallet-adapter-vue-ui';
    // This is necessary to keep style normal.
    import '@tronweb3/tronwallet-adapter-vue-ui/style.css';
    import { WalletDisconnectedError, WalletError, WalletNotFoundError } from '@tronweb3/tronwallet-abstract-adapter';

    function onError(e: WalletError) {
        if (e instanceof WalletNotFoundError) {
            console.error(e.message);
        } else if (e instanceof WalletDisconnectedError) {
            console.error(e.message);
        } else console.error(e.message);
    }

    const ConnectComponent = defineComponent({
        setup() {
            return () => h(WalletActionButton);
        },
    });

    const Profile = defineComponent({
        setup() {
            const { wallet } = useWallet();
            return () => h('div', `Current adapter: ${wallet?.adapter.name}`);
        },
    });
</script>

Quick Start

Clone this repo and run the following commands:

pnpm install
pnpm build
pnpm example

As the repo uses pnpm to manage workspace, please install Nodejs and pnpm first. The following is required:

Nodejs >= 16

pnpm >= 7

Which package should developers use ?

It's recommended to use @tronweb3/tronwallet-adapter-react-hooks or @tronweb3/tronwallet-adapter-react-ui for developing easily. There are also out-of-box libraries for Vue: @tronweb3/tronwallet-adapter-vue-hooks and @tronweb3/tronwallet-adapter-vue-ui.

If you don't want to customize your UI components and just want to accomplish functions rapidly, you can use components of @tronweb3/tronwallet-adapter-react-ui such as WalletActionButton. Its out-of-the-box components will help you select/connect the wallet and manage the wallet state.

If you want to have different appearance by developing components, you can use @tronweb3/tronwallet-adapter-react-hooks and call the useWallet() hook to select/connect the wallet.

@tronweb3/tronwallet-adapters and @tronweb3/tronwallet-adapter-xxx packages include adapters for specified wallets. If you need only one adapter and want to custom your logic and style, you can choose this package.

Contributing

Welcome to contribute your idea!

Fork the repo and clone to your device.

git clone https://github.com/tronprotocol/tronwallet-adapter.git

Install Nodejs@16.x and pnpm@7.x
Install dependencies
```
pnpm install
```
You can run pnpm watch to rebuild the code when changes.
Commit the changes you've made and open a PR to this repository.

Release

first update package version:

pnpm update-version

release the packages

pnpm release

License

MIT

tronprotocol / tronwallet-adapter

readme

Important Notice: Repository Migration

tronwallet-adapter

Wallet Integrations

Supported

Coming Soon

Introduction

Adapters

Hooks and UI components for React

Hooks and UI components for Vue

Documentation

TronWallet Adapter Packages

TronWallet Adapters

React Components

Packages Examples

@tronweb3/tronwallet-adapters

@tronweb3/tronwallet-adapter-react-hooks

@tronweb3/tronwallet-adapter-react-ui

@tronweb3/tronwallet-adapter-vue-hooks

@tronweb3/tronwallet-adapter-vue-ui

Quick Start

Which package should developers use ?

Contributing

Release

License