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

Wallet Name	platform	version
TronLink	Android	>= 1.0.0
	IOS	>= 1.0.0
	Browser Extension	>= 1.0.0
BitGet	Android	>= 4.0.0
	IOS	>= 4.0.0
	Browser Extension	>= 1.0.0
OkxWallet	Android	>= 6.0.0
	IOS	>= 6.0.0
	Browser Extension	>= 3.0.0
TokenPocket	Android	>= 1.1.2
	IOS	>= 3.1.3
	Browser Extension	Not Support
imToken	Android	>= 2.5.0
	IOS	>= 2.5.0
	Browser Extension	Not Support
gate.io	Android	>= 6.30.10
	IOS	>= 6.20.1
	Browser Extension	Not Support
FoxWallet	Android	>= 5.3.1
	IOS	>= 5.3.1
	Browser Extension	Not Support
Bybit	Android	>= 4.51.1
	IOS	>= 4.51.1
	Browser Extension	>= 3.16.3
Ledger	-	All versions
WalletConnect	-	>= v2.0

Note: In case wallet developers intend to release breaking changes, you can open an issue here to inform us, thus enabling us to update the new protocols accordingly.

Add support for new wallet

Follow these steps to support new wallets:

List your wallet to Tron Wallet .
Open an issue in this repository or fork the repository and implement the according adapter.

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:

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
|   |   ├─imtoken # adapter for imToken Wallet
|   |   ├─gatewallet # adapter for gate.io Wallet
|   |   ├─foxwallet # adapter for FoxWallet
|   |   ├─bybit # adapter for Bybit 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`
imtoken	Adapter for imToken Wallet App(IOS and Android)	`@tronweb3/tronwallet-adapter-imtoken`
gatewallet	Adapter for gate.io Wallet App(IOS and Android)	`@tronweb3/tronwallet-adapter-gatewallet`
foxwallet	Adapter for Fox Wallet App(IOS and Android)	`@tronweb3/tronwallet-adapter-foxwallet`
bybit	Adapter for Bybit Wallet App(IOS and Android) and Extension	`@tronweb3/tronwallet-adapter-bybit`

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 >= 18

pnpm >= 9

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/web3-geek/tronwallet-adapter.git

Install [email protected] and [email protected]
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

Name		Name	Last commit message	Last commit date
Latest commit History 227 Commits
.changeset		.changeset
.husky		.husky
demos		demos
packages		packages
scripts		scripts
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
App.md		App.md
LICENSE		LICENSE
README.md		README.md
demo.png		demo.png
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.all.json		tsconfig.all.json
tsconfig.base.json		tsconfig.base.json
tsconfig.cjs.json		tsconfig.cjs.json
tsconfig.esm.json		tsconfig.esm.json
tsconfig.json		tsconfig.json
tsconfig.root.json		tsconfig.root.json
tsconfig.tests.json		tsconfig.tests.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

tronwallet-adapter

Wallet Integrations

Supported

Add support for new wallet

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

About

Releases 5

Packages

Contributors 4

Languages

License

web3-geek/tronwallet-adapter

Folders and files

Latest commit

History

Repository files navigation

tronwallet-adapter

Wallet Integrations

Supported

Add support for new wallet

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

About

Resources

License

Stars

Watchers

Forks

Releases 5

Packages 0

Contributors 4

Languages

Packages