wallet-adapter-vue-ui.md

@tronweb3/tronwallet-adapter-vue-ui

@tronweb3/tronwallet-adapter-vue-ui provides a set of out-of-the-box components to make it easy to select, change, connect and disconnect wallet.

@tronweb3/tronwallet-adapter-vue-ui depends @tronweb3/tronwallet-adapter-vue-hooks to work. So developers must wrap App content within the WalletProvider.

Installation

npm install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters

# or pnpm install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters

# or yarn install @tronweb3/tronwallet-adapter-vue-ui @tronweb3/tronwallet-adapter-vue-hooks @tronweb3/tronwallet-abstract-adapter @tronweb3/tronwallet-adapters

Usage

@tronweb3/tronwallet-adapter-vue-ui provide a Select Wallet Modal by provide() in Vue. So developers must wrap App content within the WalletProvider and WalletModalProvider.

Note: A stylesheet must be imported to make components work fine.

Here is a Demo project;

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

WalletModalProvider and useWalletModal

WalletModalProvider provide a Select Wallet Modal by provide() in Vue. The modal can be controlled by useWalletModal.

<template>
  <div>
    <button @click="toggle">{{visible ? 'Close Modal' : 'Open Modal'}}</button>
  </div>
</template>
<script setup>
  const { visible, setVisible } = useWalletModal();
  function toggle() {
    setVisible(visible => !visible);
  }
</script>

WalletConnectButton

Button to connect to the selected wallet. The button is disabled when:

• no wallet is selected
• is connecting to wallet
• is connected
• disabled by props

Props

type ButtonProps = PropsWithChildren<{
  className?: string,
  disabled?: boolean,
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void,
  style?: CSSProperties,
  tabIndex?: number,
  icon?: string
}>;

WalletDisconnectButton

Button to connect to the selected wallet. The button is disabled when:

• no wallet is selected
• is connecting to wallet
• disabled by props

Props

Same as WalletConnectButton.

WalletSelectButton

Button to open Select Wallet Modal.

Props

Same as WalletConnectButton.

WalletActionButton

Button with multiple functions including:

• Select wallet
• Connect to wallet
• Disconnect from wallet
• Show current selected wallet and address
• Copy address

It's recommended to use this component to connect wallet easily.

Props

Same as WalletConnectButton.