Skip to main content

Wallet Services Plugin for SFA Web SDK

@web3auth/wallet-services-plugin

Wallet Services Plugin Enable allows your application to use templated wallet UI screens. Take control of and personalize the wallet interface, and optionally, activate an embedded wallet for your users.

Note

Access to Wallet Services is gated and available on the Scale plan and above. You can use this feature in the development environment for free.

Wallet Services is currently available for all EVM chains.

Installation

npm install --save @web3auth/wallet-services-plugin

Initialization

Import the WalletServicesPlugin class from @web3auth/wallet-services-plugin.

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

Assign the WalletServicesPlugin class to a variable

After creating your Web3Auth instance, you need to initialize the Wallet Services Plugin and add it to a class for further usage.

const walletServicesPlugin = new WalletServicesPlugin(options);

This constructor takes an object with wsEmbedOpts & walletInitOptions as input.

Arguments

While initializing the Wallet Services plugin, you need to pass on the following parameters to the constructor:

ParameterDescription
wsEmbedOpts?Configuration options for Wallet Services. It accepts Partial<CtorArgs> as a value.
walletInitOptions?Parameters to customize your Wallet Services UI within the application. It accepts Partial<WsEmbedParams> as a value.

wsEmbedOpts

wsEmbedOpts is an optional parameter that allows you to pass in the configuration options for Wallet Services. It takes the CtorArgs object as input which contains the following parameters:

CtorArgs

ParameterDescription
modalZIndex?Z-index of the modal and iframe. Default value is 99999
web3AuthClientIdWeb3Auth Client ID in string.
web3AuthNetworkWeb3auth network to be used. It accepts OPENLOGIN_NETWORK_TYPE as a value.

walletInitOptions

The walletInitOptions from Wallet Services is an optional parameter that allows you to customise your Wallet Services UI within the application. It takes the object WsEmbedParams as input which contains multiple parameters that allow you to customise the UI of the plugin.

WsEmbedParams

ParameterDescription
chainConfig?Chain config of the Blockchain to connect with. It accepts EthereumProviderConfig.
whiteLabel?White Label parameters to whitelisting the Wallet Services UI. It accepts WhiteLabelParams.

Add the walletServicesPlugin class to your Web3Auth instance

After initializing the walletServicesPlugin, use the addPlugin() function to your Web3Auth instance, you can use the Wallet Services Plugin for your dApp.

web3AuthInstance.addPlugin(walletServicesPlugin);

Example

In this example, we're adding the WalletServicesPlugin with a very basic configuration.

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

const walletServicesPlugin = new WalletServicesPlugin();
web3auth.addPlugin(walletServicesPlugin);

// Show the wallet services plugin
await walletServicesPlugin.showWalletUi();

// Show the wallet connect scanner
await walletServicesPlugin.showWalletConnectScanner();

// Show the checkout
await walletServicesPlugin.showCheckout();