React Hooks for Wallet Services Plugin for PnP 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. Here's an example of how to import them:
import { useWalletServicesPlugin } from "@web3auth/wallet-services-plugin-react-hooks";
For more information on React hooks, refer to the official React documentation.
Available Hooks
useWalletServicesPlugin
: Provides access to the Wallet Services Plugin context initialized via theWalletServicesProvider
component.
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 {
/**
* Indicates whether the plugin is connected and ready to be used.
*/
isPluginConnected: boolean;
/**
* 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.
* @returns A Promise that resolves when the Wallet Connect Scanner is shown.
*/
showWalletConnectScanner(): Promise<void>;
/**
* Shows the TopUp modal to select local currency and amount to top up the wallet.
* @returns A Promise that resolves when the TopUp modal is shown.
*/
showCheckout(): Promise<void>;
/**
* Shows the Wallet Services modal UI to be used as a wallet UI.
* @returns A Promise that resolves when the Wallet Services modal UI is shown.
*/
showWalletUI(): Promise<void>;
}
Web3AuthProvider
The Web3AuthProvider
component wraps the main component and injects the Web3Auth-related context
into it. For more details on the Web3AuthProvider
, please refer to the
Web3AuthProvider documentation.
Wallet Services Plugin Methods
-
isPluginConnected
: Indicates whether the plugin is connected and ready to be used.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.const { showWalletConnectScanner } = useWalletServicesPlugin();
await showWalletConnectScanner(); -
showCheckout
: Shows the TopUp modal to select local currency and amount to top up the wallet.const { showCheckout } = useWalletServicesPlugin();
await showCheckout(); -
showWalletUI
: Shows the Wallet Services modal UI to be used as a wallet UI.const { showWalletUI } = useWalletServicesPlugin();
await showWalletUI();