Skip to main content

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.

// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Instantiate the Checkout SDKs with the default configurations
const checkoutSDK = new checkout.Checkout();

// Get the list of default supported providers
const type = checkout.WalletFilterTypes.ALL;
checkoutSDK.getWalletAllowList({ type }).then((resp) => console.log(resp));

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 NameDescription
METAMASKCreates a provider for the Metamask wallet. Metamask extension must be installed in the user's browser.
PASSPORTCreates a provider for the Passport wallet. For more info refer to Passport wallet.
// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Instantiate the Checkout SDKs with the default configurations
const checkoutSDK = new checkout.Checkout();

// Create a provider given one of the default wallet provider names
const walletProviderName = checkout.WalletProviderName.METAMASK;
checkoutSDK.createProvider({ walletProviderName }).then((resp) => console.log(resp));

The CreateProviderResult result provides the new provider.

Verify the provider type

Use the isWeb3Provider() function to verify that the provider is a Web3Provider.

// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Import utility type for casting the sample provider
import { Web3Provider } from '@ethersproject/providers';

// The previous provider; here set as an empty object for sample purposes.
const provider = {} as Web3Provider;

// Check if the provider if a Web3Provider
checkout.Checkout.isWeb3Provider(provider);

Connect the provider

Once a provider is available, use the connect() function to connect the provider to the current network.

// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Import utility type for casting the sample provider
import { Web3Provider } from '@ethersproject/providers';

// Instantiate the Checkout SDKs with the default configurations
const checkoutSDK = new checkout.Checkout();

// The previous provider; here set as an empty object for sample purposes.
const provider = {} as Web3Provider;

// Get the current network information
checkoutSDK.connect({ provider }).then((resp) => console.log(resp));

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.

// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Import utility type for casting the sample provider
import { Web3Provider } from '@ethersproject/providers';

// Instantiate the Checkout SDKs with the default configurations
const checkoutSDK = new checkout.Checkout();

// The previous provider; here set as an empty object for sample purposes.
const provider = {} as Web3Provider;

// Get the current network information
// Pass through requestWalletPermissions to request the user's wallet permissions
checkoutSDK.connect({
provider,
requestWalletPermissions: true
}).then((resp) => console.log(resp));

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.

// Import the checkout module from the Immutable SDK package
import { checkout } from '@imtbl/sdk';

// Import utility type for casting the sample provider
import { Web3Provider } from '@ethersproject/providers';

// Instantiate the Checkout SDKs with the default configurations
const checkoutSDK = new checkout.Checkout();

// The previous provider; here set as an empty object for sample purposes.
const provider = {} as Web3Provider;

// Check if the provider is connected to the current dApp
checkoutSDK.checkIsWalletConnected({ provider }).then((resp) => console.log(resp));

For further details on the returned values view CheckConnectionResult.

IMX Whitepaper IMX Tokenomics Block Explorer Careers Contact Us