TronWallet Adapter

Appearance

Vue Hook and Components ​

Out-of-box hook and components for Vue

useWallet() ​

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

Install ​

bash
npm install @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
bash
pnpm install @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
bash
yarn add @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
  • @tronweb3/tronwallet-adapter-vue-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-vue-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.

App.vue
html
<script setup lang="ts">
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
  const tronLink = new TronLinkAdapter();
  const adapters = [tronLink];
</script>

Step 2 ​

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

App.vue
html
<script setup lang="ts">
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
  const tronLink = new TronLinkAdapter();
  const adapters = [tronLink];
</script>
<template>
  <WalletProvider :adapters="adapters">
    <ChildComponent />
  </WalletProvider>
</template>

Step 3 ​

Use useWallet() hook to get select and connect methods and wallet connection state.

ChildComponent.vue
html
<script setup lang="ts">
  import { useWallet } from '@tronweb3/tronwallet-adapter-vue-hooks';
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
  const { wallet, address, select, connect, signMessage } = useWallet();

  function onSelect() {
    select(new TronLinkAdapter().name);
  }
  async function onSignMessage() {
    const signature = await signMessage('Hello World!');
  }
</script>
<template>
  <div>
    <p>Current Adapter: {{(wallet && wallet.adapter.name) || '-'}}</p>
    <p>Current Connected Address: {{ address || '-' }}</p>
    <button @click="onSelect">Select Wallet</button>
    <button @click="connect()">Connect Wallet</button>
    <button @click="onSignMessage">Sign Message</button>
  </div>
</template>

Example ​

Below is the sample code.

html
<script setup lang="ts">
  import { WalletProvider } from '@tronweb3/tronwallet-adapter-vue-hooks';
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
  import ChildComponent from './ChildComponent.vue';

  const tronLink = new TronLinkAdapter();
  const adapters = [tronLink];
</script>
<template>
  <WalletProvider :adapters="adapters">
    <ChildComponent />
  </WalletProvider>
</template>
html
<script setup lang="ts">
  import { useWallet } from '@tronweb3/tronwallet-adapter-vue-hooks';
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
  const { wallet, address, select, connect, signMessage } = useWallet();

  function onSelect() {
    select(new TronLinkAdapter().name);
  }
  async function onSignMessage() {
    const signature = await signMessage('Hello World!');
  }
</script>
<template>
  <div>
    <p>Current Adapter: {{(wallet?.adapter.name) || '-'}}</p>
    <p>Current Connected Address: {{ address || '-' }}</p>

    <button @click="onSelect">Select Wallet</button>
    <button @click="connect()">Connect Wallet</button>
    <button @click="onSignMessage">Sign Message</button>
  </div>
</template>

Select and connect wallet ​

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

tsx
// 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.

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

Connect wallet automatically after selecting a wallet ​

When you want to select and connect a wallet, autoConnect prop of WalletProvider is useful.

html
<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 adapter.

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

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

Vue Components ​

@tronweb3/tronwallet-adapter-vue-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 ​

bash
npm install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
bash
pnpm install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
bash
yarn install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters
  • @tronweb3/tronwallet-adapter-vue-ui provides WalletModalProvider and multiple Button components.
  • @tronweb3/tronwallet-adapter-vue-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.

html
<script setup lang="ts">
  import '@tronweb3/tronwallet-adapter-vue-ui/style.css';
</script>

Step 2 ​

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

App.vue
html
<script setup lang="ts">
    import '@tronweb3/tronwallet-adapter-vue-ui/style.css';
    import { WalletProvider } from '@tronweb3/tronwallet-adapter-vue-hooks';
    import { WalletModalProvider } from '@tronweb3/tronwallet-adapter-vue-ui';
    import ChildComponent from './ChildComponent.vue';
    import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

    const tronLink = new TronLinkAdapter();
    const adapters = [tronLink];
</script>
<template>
    <WalletProvider :adapters="adapters"> 
        <WalletModalProvider> 
            <ChildComponent /> 
        </WalletModalProvider> 
    </WalletProvider> 
</template>

Step 3 ​

Use button components in child component.

ChildComponent.vue
html
<script setup lang="ts">
  import {
    WalletSelectButton,
    WalletConnectButton,
    WalletActionButton,
    WalletDisconnectButton,
  } from '@tronweb3/tronwallet-adapter-vue-ui';
</script>

<template>
  <div>
    <WalletSelectButton />
    <WalletConnectButton />
    <WalletActionButton />
  </div>
</template>

Example code ​

html
<script setup lang="ts">
  import '@tronweb3/tronwallet-adapter-vue-ui/style.css';
  import { WalletProvider } from '@tronweb3/tronwallet-adapter-vue-hooks';
  import { WalletModalProvider } from '@tronweb3/tronwallet-adapter-vue-ui';
  import ChildComponent from './ChildComponent.vue';
  import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';

  const tronLink = new TronLinkAdapter();
  const adapters = [tronLink];
</script>
<template>
  <WalletProvider :adapters="adapters">
    <WalletModalProvider>
      <ChildComponent />
    </WalletModalProvider>
  </WalletProvider>
</template>
html
<script setup lang="ts">
  import {
    WalletSelectButton,
    WalletConnectButton,
    WalletActionButton,
    WalletDisconnectButton,
  } from '@tronweb3/tronwallet-adapter-vue-ui';
</script>

<template>
  <div>
    <WalletSelectButton />
    <WalletConnectButton />
    <WalletActionButton />
  </div>
</template>

Preview ​

The following is the preview of these components.

Select Button
Connect Button
Disconnect Button
Multiple Actions Button