Skip to main content

useWalletServicesPlugin

Hook to access the Wallet Services Ppugin 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 { isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI } =
    useWalletServicesPlugin()
</script>

<template>
  <button @click="showWalletConnectScanner()" :disabled="!isPluginConnected">
    Show WalletConnect Scanner
  </button>
  <button @click="showCheckout()" :disabled="!isPluginConnected">Show Checkout</button>
  <button @click="showWalletUI()" :disabled="!isPluginConnected">Show Wallet UI</button>
</template>

Return type​

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

isPluginConnected​

boolean

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

showWalletConnectScanner​

(showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise<void>

Shows the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner behavior.

showCheckout​

(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise<void>

Shows the topup modal for fiat-to-crypto checkout. Accepts optional parameters for customizing the checkout experience.

showWalletUI​

(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]) => Promise<void>

Shows the Wallet Services modal UI. Accepts optional parameters for customizing the wallet UI experience.

On this page