Skip to main content

Add/Switch Networks

Arcana wallet is an embedded Web3 wallet available to all the dApps that integrate with the Arcana Auth SDK.

In this guide, you will learn how to programmatically initiate network addition or switching when using Arcana wallet in the context of a dApp. The dApp developers can add any EVM-compatible networks that are not already part of the default networks listed in the Arcana wallet. When a network switch is initiated programmatically, a request for user approval should pop up, asking for permission from the user to allow the dApp to switch the network.

Prerequisites

  • Install the @arcana/auth package. Integrate the Auth SDK with your dApp. For details, see Arcana Auth Quick Start Guide.

    const appAddress = '445007f942f9Ba718953094BbeeeeeB9484cAfd2' // App Address Example

    const auth = new AuthProvider(`${appAddress}`, {
    position: 'left', // defaults to right
    theme: 'light', // defaults to dark
    alwaysVisible: false, // defaults to true which is Full UI mode
    chainConfig: {
    chainId: CHAIN.POLYGON_MAINNET,
    rpcUrl: '',
    },
    })
    try {
    await auth.init()
    } catch (e) {
    // Handle exception case
    }

    provider = auth.getProvider()
    // or
    provider = window.ethereum
  • Make sure you have already initialized the wallet before invoking network add/switch methods of the Arcana wallet.

    // Assuming Auth SDK is integrated and initialized
    try {
    provider = auth.provider
    const connected = await auth.isLoggedIn()
    console.log({ connected })
    setHooks()
    } catch (e) {
    // Handle exception case
    }

    // setHooks: Manage chain or account switch in Arcana wallet
    function setHooks() {
    provider.on('connect', async (params) => {
    console.log({ type: 'connect', params: params })
    const isLoggedIn = await auth.isLoggedIn()
    console.log({ isLoggedIn })
    })
    provider.on('accountsChanged', (params) => {
    //Handle
    console.log({ type: 'accountsChanged', params: params })
    })
    provider.on('chainChanged', async (params) => {
    console.log({ type: 'chainChanged', params: params })
    })
    }

Add Network

The wallet_addEthereumChain method is specified by EIP-3085.

try {
await provider.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0xABCDEF',
chainName: 'My Custom Chain',
rpcUrls: ['...']
}]
})
} catch(error) {
...
}

// Parameters
// wallet_addEthereumChain accepts a single object parameter,
// specified by the AddEthereumChainParameter TypeScript interface

interface AddEthereumChainParameter {
chainId: string; // A 0x-prefixed hexadecimal string
chainName: string;
nativeCurrency: {
name: string;
symbol: string; // 2-6 characters long
decimals: 18;
};
rpcUrls: string[];
blockExplorerUrls?: string[];
}

Switch Network

This method is specified by EIP-3326

try {
await provider.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: '0xf00' }],
});
} catch(error) {
...
}

interface SwitchEthereumChainParameter {
chainId: string; // A 0x-prefixed hexadecimal string
}
Network Switch Error

If the error code (error.code) is 4902, then the requested chain has not been added, and you have to request to add it via wallet_addEthereumChain.

That is all! 🎉 You are all set to programmatically add/switch networks from your dApp using Arcana wallet.

What's Next?

You can use Arcana wallet to sign blockchain transactions, send and receive native, ERC20, or custom tokens, and more. You can also use the Arcana wallet to sign storage operations and enable data privacy in your dApp. For that, you need to also integrate with the Arcana Storage SDK.

See also