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 add a blockchain network to the Arcana wallet or switch to a different network when using Arcana wallet in the context of a Web3 application. 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

Register and configure your application using the Arcana Developer Dashboard. Next, install the @arcana/auth package. Integrate the Auth SDK with your dApp. For details, see Arcana Auth Quick Start Guide.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider, CHAIN } from '@arcana/auth' //From npm

//clientId : Arcana Unique App Identifier via Dashboard
const clientId = 'xar_test_445007f942f9Ba718953094BbeeeeeB9484cAfd2'
const auth = new AuthProvider(`${clientId}`, { //required
  network: 'testnet', //defaults to 'testnet'
  position: 'left', //defaults to right
  theme: 'light', //defaults to dark
  alwaysVisible: false, //defaults to true, wallet always visible
  chainConfig: {
    chainId: CHAIN.POLYGON_MAINNET, //defaults to CHAIN.ETHEREUM_MAINNET
    rpcUrl: 'https://polygon-rpc.com', //defaults to 'https://rpc.ankr.com/eth'
  },
})

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

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.