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.

Sections

• Supported wallet providers
• Create the provider
• Verify the provider type
• Connect the provider
  • Request for wallet connection permissions
• Check the connection

---

Supported wallet providers

The list of supported wallets can be programmatically fetched using the getWalletAllowList() function.

Get the wallet allow listView on GitHub

// 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 the providerView on GitHub

// 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 is a Web3ProviderView on GitHub

// 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.

Connect the providerView on GitHub

// 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.

Request for wallet connection permissionsView on GitHub

// 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.

caution

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 wallet is connectedView on GitHub

// Check if the provider if a Web3Provider
const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
  provider: providerRes.provider
});

For further details on the returned values view CheckConnectionResult.