Integrate Embedded Wallets with the ImmutableX Blockchain
While using the Embedded Wallets Web SDK (formerly Web3Auth), you get an EIP-1193 provider, similar to the MetaMask provider. This provider can be used with libraries like web3.js, ethers.js etc. to make ImmutableX blockchain calls. However, since this chain is not fully EVM-compatible, there are a few extra setup requirements. We've highlighted a few methods here to get you started.
This reference is for the Web, however, you can use ImmutableX on other Mobile and Gaming Platforms as well. Please follow our reference for EVM Blockchains, and similarly use ImmutableX libraries that support the platforms to use the private key and make blockchain calls accordingly.
Installation
- npm
- Yarn
- pnpm
- Bun
npm install --save @web3auth/modal @imtbl/core-sdk
yarn add @web3auth/modal @imtbl/core-sdk
pnpm add @web3auth/modal @imtbl/core-sdk
bun add @web3auth/modal @imtbl/core-sdk
Initialize Embedded Wallets
After v10, you don't need chain-specific setup in code for non-EVM chains. Configure standard EVM chains on the Embedded Wallets dashboard.
import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal'
const web3auth = new Web3Auth({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
})
await web3auth.init()
await web3auth.connect()
const web3authProvider = web3auth.connection?.ethereumProvider ?? null
Non-EVM chains derive keys from web3authProvider using the private_key JSON-RPC method, as shown
in the examples below.
Initializing provider
Getting the chainConfig
- Mainnet
- Testnet
- Chain Namespace: EIP155
- Chain ID: 0x1
- Public RPC URL:
https://rpc.ethereum.org(Avoid using public rpcTarget in production) - Display Name: ImmutableX Mainnet
- Block Explorer Link:
https://explorer.immutable.com - Ticker: IMX
- Ticker Name: ImmutableX
- Chain Namespace: EIP155
- Chain ID: 0xaa36a7
- Public RPC URL:
https://ethereum-sepolia.publicnode.com(Avoid using public rpcTarget in production) - Display Name: ImmutableX Testnet
- Block Explorer Link:
https://explorer.testnet.immutable.com - Ticker: IMX
- Ticker Name: ImmutableX
Creating Layer 1 and Layer 2 signers
Once a user logs in, the Embedded Wallets SDK returns a provider. ImmutableX is a layer 2 solution for Ethereum, so we'll create an ETH signer using the provider (via ethers). Then we use the helper function createStarkSigner from @imtbl/core-sdk to create a Stark signer from the private key.
import { IProvider } from '@web3auth/modal'
import { ImmutableX, Config, createStarkSigner } from '@imtbl/core-sdk'
import { ethers } from 'ethers'
/*
Use code from the above Initializing Provider here
*/
const web3authProvider = web3auth.connection?.ethereumProvider ?? null
const ethersProvider = new ethers.BrowserProvider(web3authProvider)
const ethSigner = await ethersProvider.getSigner()
// Get user's Ethereum public address
const address = await ethSigner.getAddress()
// Get user's Starkex public address
const starkKey = await web3authProvider.request({ method: 'private_key' })
const starkSigner = createStarkSigner(starkKey)
After creating the signers, we need to register these signers with the ImmutableX SDK. We can do this by calling the registerOffchain method.
const config = Config.SANDBOX // Or Config.PRODUCTION or Config.ROPSTEN
const client = new ImmutableX(config)
// We use the signers we created in the above step
const walletConnection = { ethSigner, starkSigner }
const response = await client.registerOffchain(walletConnection)
Get balance
We can get the Layer 1 ( Ethereum ) balance using the below code snippet.
const ethersProvider = new ethers.BrowserProvider(web3authProvider)
const signer = await ethersProvider.getSigner()
// Get user's Ethereum public address
const address = await signer.getAddress()
// Get user's balance in ether
const balance = ethers.formatEther(await ethersProvider.getBalance(address))
Send funds from Layer 1 to Layer 2
const ethersProvider = new ethers.BrowserProvider(web3authProvider)
const ethSigner = await ethersProvider.getSigner()
const depositResponse = await client.deposit(ethSigner, {
type: 'ETH',
amount: '10000000000000', // Amount in wei
})