Add/Switch Networks

In this guide, you will learn how to programmatically add a blockchain network or switch to a different network when using the Arcana wallet in the context of a Web3 app. Developers can add any supported blockchain networks that are not already part of the default networks displayed in the Arcana wallet UI.

When a network addition or a switch is initiated programmatically, a request for user approval pops up in the wallet UI, requesting the user for a network switch.

Prerequisites

Use the Arcana Developer Dashboard to register the app and obtain a unique Client ID required for integrating the app with the Arcana Auth SDK.
Follow the instructions to configure authentication providers before integrating the app with the Arcana Auth SDK.
Use the appropriate integration method as per the app type and integrate the app with the Arcana Auth SDK.
Add code in the integrated app to onboard users. The Web3 wallet operations can be invoked programmatically in an app only in the context of an authenticated user.

Steps

Make sure you have addressed the prerequisites before adding code to invoke any Web3 wallet operations supported by the Arcana wallet. After that, plug in the necessary code to set up requisite hooks for JSON/RPC standard Ethereum calls.

// 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 })
  })
}

The following code snippets show how developers can programmatically add code in the app and allow authenticated users to add/switch blockchain network. Note that the developer can call these functions programmatically but the authenticated users must approve the blockchain transaction via the wallet UI request screen before the blockchain network update actually takes effect.

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!

The app is all set to programmatically add/switch networks using the Arcana wallet .

What's Next?

After registering the app, configuring authentication providers, integrating the Arcana Auth SDK with the app and onboarding users, developers can further add code in the app to sign blockchain transactions, send and receive native, ERC20, or custom tokens, and other Web3 wallet operations.

For a complete list of other JSON RPC calls supported by the Arcana wallet, see JSON-RPC Specifications.