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
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
.
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
.
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.
Example
Using with Web3Auth Modal
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, IProvider } from "@web3auth/base";
import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
const chainConfig = {
chainId: "0x1", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorerUrl: "https://etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
logo: "https://images.toruswallet.io/eth.svg",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const web3AuthOptions = {
clientId,
chainConfig: { ...chainConfig, chainNamespace: CHAIN_NAMESPACES.EIP155 },
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
};
const web3auth = new Web3Auth(web3AuthOptions as Web3AuthOptions);
const walletServicesPlugin = new WalletServicesPlugin();
web3auth.addPlugin(walletServicesPlugin); // Add the plugin to web3auth
// Show the wallet services plugin
await walletServicesPlugin.showWalletUi();
// Show the wallet connect scanner
await walletServicesPlugin.showWalletConnectScanner();
// Show the checkout
await walletServicesPlugin.showCheckout();