React Hooks for Wallet Services Plugin for SFA Web SDK
Web3Auth provides essential React hooks for the Wallet Services Plugin SDK for managing wallet services such as WalletConnect, TopUp, and Wallet UI. These hooks can be directly imported from the @web3auth/wallet-services-plugin-react-hooks package.
Installation
npm install --save @web3auth/wallet-services-plugin-react-hooks
For more information on React hooks, refer to the official React documentation.
Initialization
To initialize the Wallet Services plugin, pass the WalletServicesPlugin
instance to the list of
plugins in Web3AuthContextConfig
. For more details, refer to the
Wallet Services Plugin initialization documentation.
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
import { Web3AuthContextConfig } from "@web3auth/modal-react-hooks";
const walletServicesPlugin = new WalletServicesPlugin();
export const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions,
plugins: [walletServicesPlugin],
};
Once Web3AuthContextConfig
is created you can use Web3AuthProvider
component to wrap the main
component and inject the Web3Auth-related context. For more details, please refer to the
Web3AuthProvider documentation.
Available Hooks
To access the Wallet Services Plugin context, which is initialized via the WalletServicesProvider
component, use the useWalletServicesPlugin
function.
Hook Context Interface
- Table
- Interface
Parameter | Description |
---|---|
isPluginConnected | Indicates whether the plugin is connected and ready to be used. |
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. |
showCheckout | Shows the TopUp modal to select local currency and amount to top up the wallet. |
showWalletUI | Shows the Wallet Services modal UI to be used as a wallet UI. |
export interface IBaseWalletServicesHookContext {
isPluginConnected: boolean;
showWalletConnectScanner(
showWalletConnectParams?: BaseEmbedControllerState["showWalletConnect"],
): Promise<void>;
showCheckout(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]): Promise<void>;
showWalletUI(showWalletUiParams?: BaseEmbedControllerState["showWalletUi"]): Promise<void>;
}
isPluginConnected
Indicates whether the plugin is connected and ready to be used
Usage
import { useWalletServicesPlugin } from "@web3auth/wallet-services-plugin-react-hooks";
const { isPluginConnected } = useWalletServicesPlugin();
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.
Parameters
Name | Description |
---|---|
show | Determines whether the Wallet Connect UI is displayed. This can be used to programmatically control its visibility. |
Usage
import { useWalletServicesPlugin } from "@web3auth/wallet-services-plugin-react-hooks";
const { showWalletConnectScanner } = useWalletServicesPlugin();
await showWalletConnectScanner();
showCheckout
Displays the TopUp modal, allowing users to select their local currency and specify the token to top up their wallet
Parameters
Name | Description |
---|---|
receiveWalletAddress? | Specifies the recipient's address. By default, it is set to the currently connected address. |
tokenList? | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as [USDC, USDT, ETH] . Please checkout the coverage details for full list of supported networks and tokens. |
fiatList? | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as [USD, SGD, INR, JPY] . Please checkout the coverage details for full list of supported currencies. |
show | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. |
Usage
import { useWalletServicesPlugin } from "@web3auth/wallet-services-plugin-react-hooks";
const { showCheckout } = useWalletServicesPlugin();
await showCheckout();
showWalletUI
Shows the modal, and allows you to use the templated wallet UI services.
Parameters
Name | Description |
---|---|
show | Determines whether the wallet UI is displayed. This can be used to programmatically control its visibility. |
path? | Specifies the path for the wallet services. |
Usage
import { useWalletServicesPlugin } from "@web3auth/wallet-services-plugin-react-hooks";
const { showWalletUI } = useWalletServicesPlugin();
await showWalletUI();