TronWallet Adapter

Appearance

React Hook and Components ​

Out-of-box hook and components for React

useWallet() ​

@tronweb3/tronwallet-adapter-react-hooks provides a useWallet() hook which makes it easy to connect and interact with wallets for developers.

Install ​

sh
npm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
sh
pnpm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
sh
yarn add @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
  • @tronweb3/tronwallet-adapter-react-hooks provides useWallet() hook.
  • @tronweb3/tronwallet-abstract-adapter defines the common types used by all adapters such as WalletReadyState, WalletError.
  • @tronweb3/tronwallet-adapters contains all adapters including TronLinkAdapter, TokenPocketAdapter and so on.

Usage ​

@tronweb3/tronwallet-adapter-react-hooks provides a WalletProvider component and useWallet() hook to maintain a shared state. Developers need to wrap App content in the WalletProvider.

The following example shows a simple use case of WalletProvider and useWallet() including:

  1. Use WalletProvider to share the wallet state.
  2. Call select(walletName) method returned by useWallet() hook to select a wallet.
  3. Call connect() method returned by useWallet() hook to connect the selected wallet.
  4. Show connection state and wallet address on the UI.

Step 1 ​

Create wallet adapter list your want to support.

TIP

useMemo is necessary for storing the adapter instance.

App.tsx
tsx
import { useMemo } from 'react';
import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

export function App() {
  const adapters = useMemo(
    () => [
      new TronLinkAdapter({ checkTimeout: 3000 }), 
    ],
    []
  ); 
  return <div></div>;
}

Step 2 ​

Wrap your app content with WalletProvider and pass adapters to it.

App.tsx
tsx
import { useMemo } from 'react';
import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

export function App() {
  const adapters = useMemo(() => [new TronLinkAdapter({ checkTimeout: 3000 })], []);
  return (
    <WalletProvider adapters={adapters}>{/* your app components */}</WalletProvider>
  );
}

Step 3 ​

Call useWallet() hook to get select and connect methods in child component.

ConnectComponent.tsx
tsx
import { TronLinkAdapterName } from '@tronweb3/tronwallet-adapters';
import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';

export function ConnectComponent() {
  const { connect, disconnect, select, connected } = useWallet(); 
  function onSelect() {
    select(TronLinkAdapterName); 
  } 
  async function onConnect() {
    await connect(); 
  } 
  return (
    <div>
      <button type="button" onClick={onSelect}>
        Select TronLink
      </button>
      <button type="button" disabled={connected} onClick={onConnect}>
        Connect
      </button>
    </div>
  );
}

Step 4 ​

Call useWallet() hook to get wallet state and connection state in child component.

DisplayComponent.tsx
tsx
import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';

export function DisplayComponent() {
  const { address, connected, wallet } = useWallet();
  return (
    <div>
      <p>Connection Status: {connected ? 'Connected' : 'Disconnected'}</p>
      <p>Your Selected Wallet: {wallet?.adapter.name} </p>
      <p>Your Address: {address} </p>
    </div>
  );
}

Example ​

Below is the sample code.

tsx
import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
import { ConnectComponent } from './ConnectComponent';
import { DisplayComponent } from './DisplayComponent';

export function App() {
  const adapters = useMemo(() => [new TronLinkAdapter({ checkTimeout: 3000 })], []);
  return (
    <WalletProvider adapters={adapters}>
      <ConnectComponent />
      <DisplayComponent />
    </WalletProvider>
  );
}
tsx
import { TronLinkAdapterName } from '@tronweb3/tronwallet-adapters';
import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';

export function ConnectComponent() {
  const { connect, disconnect, select, connected } = useWallet();
  function onSelect() {
    select(TronLinkAdapterName);
  }
  async function onConnect() {
    await connect();
  }
  return (
    <div>
      <button type="button" onClick={onSelect}>
        Select TronLink
      </button>
      <button type="button" disabled={connected} onClick={onConnect}>
        Connect
      </button>
    </div>
  );
}
tsx
import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';

export function DisplayComponent() {
  const { address, connected, wallet } = useWallet();

  return (
    <div>
      <p>Connection Status: {connected ? 'Connected' : 'Disconnected'}</p>
      <p>Your Selected Wallet: {wallet?.adapter.name} </p>
      <p>Your Address: {address} </p>
    </div>
  );
}

Select and connect wallet ​

select() method returned by useWallet() hook is used to select a wallet. It takes a wallet adapter name as an argument.

ts
// Create a wallet adapter instance
const adapter = new TronLinkAdapter();
const { select } = useWallet();
// Select a wallet by wallet adapter name
select(adapter.name);

Internally WalletProvider stores the selected wallet adapter in localStorage with a default key tronAdapterName.

After a wallet adapter is selected, connect() method can be called to connect the specified wallet. It calls adapter.connect() method internally.

ts
const { connect } = useWallet();
async function onConnect() {
  await connect();
}

WARNING

You cannot call connect() just after select() in the same function. In React, updating state requests another render with the new state value. When select() is called, the state of selected wallet will be updated in the next render. So connect() must be called in the next render.

Connect wallet automatically after selecting a wallet ​

As described above, connect() cannot be called just after select(). When you want to select and connect a wallet, autoConnect prop of WalletProvider is useful.

tsx
<WalletProvider autoConnect>
  <App />
</WalletProvider>

In WalletProvider, when autoConnect is true and the currently selected wallet changes, connect() will be called automatically.

Sign message and transaction ​

useWallet() hook returns signMessage and signTransaction function. Internally it calls the signMessage and signTransaction methods of the currently selected wallet.

tsx
const { signMessage, signTransaction } = useWallet();

// Sign message
await signMessage('Hello World');

const transaction = await tronWeb.transactionBuilder.sendTrx('receiverAddress', 10);
// Send TRX transaction
const signature = await signTransaction(transaction);

React Components ​

@tronweb3/tronwallet-adapter-react-ui which is built on WalletProvider and useWallet() provides a set of out-of-the-box components to make it easy to select, change, connect and disconnect wallet.

This package includes the following components:

  • WalletSelectButton: A button to select wallet.
  • WalletConnectButton: A button to connect wallet.
  • WalletDisconnectButton: A button to disconnect wallet.
  • WalletActionButton: A multi-function button to select, connect and disconnect wallet.

When selecting wallet, a modal will display all available wallets. The package provides a WalletModalProvider component to manage modal state.

Install ​

sh
npm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
sh
pnpm install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
sh
yarn install @tronweb3/tronwallet-adapter-react-ui @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
  • @tronweb3/tronwallet-adapter-react-ui provides WalletModalProvider and multiple Button components.
  • @tronweb3/tronwallet-adapter-react-hooks provides useWallet() hook.
  • @tronweb3/tronwallet-abstract-adapter defines the common types used by all adapters such as WalletReadyState, WalletError.
  • @tronweb3/tronwallet-adapters contains all adapters including TronLinkAdapter, TokenPocketAdapter and so on.

Usage ​

Step 1 ​

Import the stylesheet file to your project.

App.tsx
js
import '@tronweb3/tronwallet-adapter-react-ui/style.css';

Step 2 ​

Wrap your app with WalletProvider as described above and add WalletModalProvider.

App.tsx
tsx
import '@tronweb3/tronwallet-adapter-react-ui/style.css';
import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { WalletModalProvider } from '@tronweb3/tronwallet-adapter-react-ui';
import { ConnectComponent } from './ConnectComponent';

export function App() {
  return (
    <WalletProvider>
      <WalletModalProvider>
        <ConnectComponent />
      </WalletModalProvider>
    </WalletProvider>
  );
}

Step 3 ​

Use button components in child component.

ConnectComponent.tsx
tsx
import { WalletActionButton } from '@tronweb3/tronwallet-adapter-react-ui';
export function ConnectComponent() {
  return <WalletActionButton />;
}

Example ​

tsx
import '@tronweb3/tronwallet-adapter-react-ui/style.css';
import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
import { WalletModalProvider } from '@tronweb3/tronwallet-adapter-react-ui';
import { ConnectComponent } from './ConnectComponent';

export function App() {
  return (
    <WalletProvider>
      <WalletModalProvider>
        <ConnectComponent />
      </WalletModalProvider>
    </WalletProvider>
  );
}
tsx
import { WalletActionButton } from '@tronweb3/tronwallet-adapter-react-ui';
export function ConnectComponent() {
  return <WalletActionButton />;
}

Preview ​

The following is the preview of these components.

Select Button
Connect Button
Disconnect Button
Multiple Actions Button