|
| 1 | +--- |
| 2 | +title: Add Custom Chains to the Dashboard |
| 3 | +sidebar_label: Add Custom Chains to the Dashboard |
| 4 | +image: "images/docs-meta-cards/documentation-card.png" |
| 5 | +description: "Add Custom Chains | Documentation - Web3Auth" |
| 6 | +--- |
| 7 | + |
| 8 | +Web3Auth PnP V10 onwards does not need any additional setup on the code side for blockchain |
| 9 | +connections. All of it is handled on our updated Dashboard. We can use any chain from the extensive |
| 10 | +list of predefined chains and add more if we need by toggling them on. |
| 11 | + |
| 12 | + |
| 13 | + |
| 14 | +## Adding Custom Chains |
| 15 | + |
| 16 | +To add a custom chain, we need to follow these steps: |
| 17 | + |
| 18 | +1. Go to the [Dashboard](https://dashboard.web3auth.io). |
| 19 | +2. Click on the `Projects` section and select the project you want to add the custom chain to. |
| 20 | +3. Click on the `Chains & Networks` tab. |
| 21 | +4. Fill in the details of the chain you want to add.(Like LogoURL, Network Name etc.) |
| 22 | +5. Then press Save Network blue button at the bottom. |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +## Adding Chains on Code-side for PnP Web SDK |
| 27 | + |
| 28 | +While chains can be configured through the dashboard, you can also override these settings in your |
| 29 | +code by specifying custom chains during SDK initialization. |
| 30 | + |
| 31 | +### Example |
| 32 | + |
| 33 | +```typescript title="App.tsx" |
| 34 | +import { Web3Auth, WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/modal"; |
| 35 | + |
| 36 | +// Define custom chain configurations |
| 37 | +const evmChainConfig = { |
| 38 | + chainNamespace: CHAIN_NAMESPACES.EIP155, |
| 39 | + chainId: "0xaa36a7", // Sepolia chainId in hex |
| 40 | + rpcTarget: "https://1rpc.io/sepolia", |
| 41 | + displayName: "Ethereum Sepolia Testnet", |
| 42 | + blockExplorerUrl: "https://sepolia.etherscan.io", |
| 43 | + ticker: "ETH", |
| 44 | + tickerName: "Ethereum", |
| 45 | + decimals: 18, |
| 46 | + logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", |
| 47 | +}; |
| 48 | + |
| 49 | +const arbitrumChainConfig = { |
| 50 | + chainNamespace: CHAIN_NAMESPACES.EIP155, |
| 51 | + chainId: "0x66eee", // Arbitrum Sepolia (421614 in hex) |
| 52 | + rpcTarget: "https://sepolia-rollup.arbitrum.io/rpc", |
| 53 | + displayName: "Arbitrum Sepolia Testnet", |
| 54 | + blockExplorerUrl: "https://sepolia.arbiscan.io/", |
| 55 | + ticker: "AETH", |
| 56 | + tickerName: "AETH", |
| 57 | + decimals: 18, |
| 58 | + logo: "https://arbitrum.foundation/images/logo.png", |
| 59 | +}; |
| 60 | + |
| 61 | +// Initialize Web3Auth with custom chains |
| 62 | +const web3auth = new Web3Auth({ |
| 63 | + clientId: "YOUR_CLIENT_ID", |
| 64 | + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, |
| 65 | + chains: [evmChainConfig, arbitrumChainConfig], // Pass array of custom chains |
| 66 | + defaultChainId: "0x66eee", // Set default chain by chainId |
| 67 | +}); |
| 68 | +``` |
| 69 | + |
| 70 | +By using the `chains` parameter, you can specify multiple chain configurations for your application, |
| 71 | +only provided chains will be used. The `defaultChainId` parameter allows you to set which chain |
| 72 | +should be used by default. |
| 73 | + |
| 74 | +This approach gives you flexibility to dynamically configure chains in your code while maintaining |
| 75 | +the ease of dashboard configuration for your project. |
0 commit comments