Skip to main content

Usage - Wallet Services Plugin

Fiat on Ramp​

showCheckout()​

Shows the TopUp modal to select local currency and amount to top up the wallet.

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const walletServicesPlugin = new WalletServicesPlugin();
web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

await walletServicesPlugin.showCheckout(); // Opens the TopUp modal

Connect dApps with Wallet Connect​

showWalletConnectScanner()​

Shows the Wallet Connect Scanner to connect with dApps having Wallet Connect login option. This is useful for interoperability with dApps having Wallet Connect login option.

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const walletServicesPlugin = new WalletServicesPlugin();
web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

await walletServicesPlugin.showWalletConnectScanner();

Show Wallet Embedded UI​

showWalletUi()​

Shows the Wallet Services modal UI to be used as a wallet UI.

Example​

import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const walletServicesPlugin = new WalletServicesPlugin();
web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

await walletServicesPlugin.showWalletUi(); // Opens the TopUp modal

personal-sign with UI confirmation screen​

UI Confirmation screen

Private Key export with Wallet Services​

Go to Privacy & Security under Settings in the Wallet UI to export your private key. Available from version 8.7.0.

Private Key export screen

Toggle testnet visibility in Wallet Services​

You can toggle the testnet visibility in the Wallet Services UI by going to Settings, then General. Available from version 8.7.0.

Testnet visibility toggle

info

If you don't pass the name and chainId for a specific chain as listed in the dropdown below, the chain will appear twice in the wallet services UI dropdown: once by default and once with the name you provided.

Chain Config dropdown