Skip to main content

useWalletServicesPlugin

Hook to access the Wallet Services Plugin context, enabling wallet-related features such as WalletConnect, Checkout, Swap, and Wallet UI.

Import​

import { useWalletServicesPlugin } from "@web3auth/modal/react";

Usage​

import { useWalletServicesPlugin } from "@web3auth/modal/react";

function WalletServicesExample() {
  const { isPluginConnected, showWalletConnectScanner, showCheckout, showWalletUI } =
    useWalletServicesPlugin();

  return (
    <>
      <button onClick={() => showWalletConnectScanner()} disabled={!isPluginConnected}>
        Show WalletConnect Scanner
      </button>
      <button onClick={() => showCheckout()} disabled={!isPluginConnected}>
        Show Checkout
      </button>
      <button onClick={() => showWalletUI()} disabled={!isPluginConnected}>
        Show Wallet UI
      </button>
    </>
  );
}

Return Type​

import { type IWalletServicesContext } from "@web3auth/modal/react";

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.