Connect wallets
In this brief step-by-step guide we will use the Checkout SDK to create a Web3 provider for any of the supported wallets and ensure it is connected to the zkEVM network.
Supported wallet providers
The list of supported wallets can be programmatically fetched using the getWalletAllowList()
function.
// Get the list of default supported providers
const type = checkout.WalletFilterTypes.ALL;
const allowListRes = await checkoutSDK.getWalletAllowList({ type });
The GetWalletAllowListResult
result provides list of supported wallet provider names with additional information (e.g. icon
) that can be used while building your application.
Create the provider
Now that we have the name of a provider, let's create the Web3Provider
for a Metamask wallet. We will be using the WalletProviderName
property to correctly set the walletProvider
.
Wallet Provider Name | Description |
---|---|
METAMASK | Creates a provider for the Metamask wallet. Metamask extension must be installed in the user's browser. |
PASSPORT | Creates a provider for the Passport wallet. For more info refer to Passport wallet. |
// Create a provider given one of the default wallet provider names
const walletProviderName = checkout.WalletProviderName.METAMASK;
const providerRes = await checkoutSDK.createProvider({ walletProviderName });
The CreateProviderResult
result provides the new provider.
Verify the provider type
Use the isWeb3Provider()
function to verify that the provider is a Web3Provider
.
// Check if the provider if a Web3Provider
const isProviderRes = await checkout.Checkout.isWeb3Provider(providerRes.provider);
Connect the provider
Once a provider is available, use the connect()
function to connect the provider to the current network.
// Get the current network information
const connectRes = await checkoutSDK.connect({
provider: providerRes.provider
});
Request for wallet connection permissions
Pass in the requestWalletPermissions
boolean parameter to request for wallet connection permissions every time the connect()
function is called.
Requesting wallet permissions is currently not supported for Immutable Passport wallet.
// Get the current network information
// Pass through requestWalletPermissions to request the user's wallet permissions
const connectRes = await checkoutSDK.connect({
provider: providerRes.provider,
requestWalletPermissions: true,
});
For further details on the returned values view ConnectResult
.
The provider returned by connect
should be used as the new, most updated provider. The previous provider can be discarded.
Check the connection
Use the checkIsWalletConnected()
function to check if it is connected to the Web3 application.
// Check if the provider if a Web3Provider
const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
provider: providerRes.provider
});
For further details on the returned values view CheckConnectionResult
.