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.
See also
- Arcana wallet capabilities
- Configure Arcana wallet Visibility
- Sign transactions
- Send transaction
- Check account balance
- Watch Token Assets
- Auth SDK Reference Guide