useWalletServicesPlugin

Hook to access the Wallet Services plugin context, enabling wallet-related features such as WalletConnect, checkout, swap, and wallet UI.

info

Please note that this composable doesn't work for external wallet logins. It only works for social login embedded wallets.

Import

import { useWalletServicesPlugin } from '@web3auth/modal/vue'

Usage

<script setup lang="ts">
  import { useWalletServicesPlugin } from '@web3auth/modal/vue'

  const { plugin, ready, connecting } = useWalletServicesPlugin()
</script>

<template>
  <div v-if="connecting">Connecting Wallet Services...</div>
  <button @click="plugin?.showWalletConnectScanner()" :disabled="!ready">
    Show WalletConnect Scanner
  </button>
  <button @click="plugin?.showCheckout()" :disabled="!ready">Show Checkout</button>
  <button @click="plugin?.showWalletUi()" :disabled="!ready">Show Wallet UI</button>
</template>

tip

For most use cases, use the dedicated composables (useWalletUI, useCheckout, useSwap, useWalletConnectScanner), which wrap these plugin methods and expose loading and error state.

Return type

import type { IWalletServicesInnerContext } from '@web3auth/modal/vue'

plugin

ShallowRef<WalletServicesPluginType | null>

The Wallet Services plugin instance, or null before Web3Auth initializes. The plugin exposes showWalletConnectScanner, showCheckout, showWalletUi, showSwap, showFunding, and showReceive, each accepting optional parameters of the matching BaseEmbedControllerState type and returning Promise<void>.

ready

Ref<boolean>

Whether the Wallet Services plugin is connected and ready to use.

connecting

Ref<boolean>

Whether the Wallet Services plugin is connecting.