Skip to main content

Switch networks

In this brief step-by-step guide we will use the Checkout SDK to ask a user to add the zkEVM network to the wallet and switch to this new network.


Supported network

The list of supported networks can be programmatically fetched using the getNetworkAllowList() 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 networks
const type = checkout.NetworkFilterTypes.ALL;
checkoutSDK.getNetworkAllowList({ type }).then((resp) => console.log(resp));

The GetNetworkAllowListResult result provides list of allowed networks with additional information (e.g. nativeCurrency) that can be used while building your application.

Switch to the network

To connect to the zkEVM network, your application needs to ask the user to switch to zkEVM network. This can be easily done using the switchNetwork() function.

info

If the user wallet hasn't been configured for zkEVM network yet, switchNetwork() will prompt the user to add the network details before switching to it.

Supported NetworksTest NetworkLayer
IMTBL_ZKEVM_MAINNETNoLayer 2
IMTBL_ZKEVM_TESTNETYesLayer 2
IMTBL_ZKEVM_DEVNETYesLayer 2
ETHEREUMNoLayer 1
SEPOLIAYesLayer 1
// 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;

// Switch to the zkEVM network and get the updated provider
const chainId = checkout.ChainId.IMTBL_ZKEVM_TESTNET;
checkoutSDK.switchNetwork({ provider, chainId }).then((resp) => console.log(resp));

The SwitchNetworkResult result provides the new provider.

caution

The provider returned by switchNetwork() should be used as the new, most updated provider. The previous provider can be discarded.

Get the network details

As final step, we are getting some of the current network details using the getNetworkInfo() function.

// 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 provider's network details
checkoutSDK.getNetworkInfo({ provider }).then((resp) => console.log(resp));

For further details on the returned values view NetworkInfo.

IMX Whitepaper IMX Tokenomics Block Explorer Careers Contact Us