Integrate Web3Auth with the ImmutableX Blockchain
While using the Web3Auth Web SDK, you get a EIP1193
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 have highlighted a few methods here to
get you started quickly on that.
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
npm install --save @imtbl/core-sdk
yarn add @imtbl/core-sdk
pnpm add @imtbl/core-sdk
Initializing Provider
Getting the chainConfig
- Mainnet
- Testnet
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1", //
rpcTarget: "https://rpc.ankr.com/eth",
// Avoid using public rpcTarget in production.
displayName: "ImmutableX Mainnet",
blockExplorerUrl: "https://explorer.immutable.com",
ticker: "IMX",
tickerName: "ImmutableX",
};
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0xaa36a7", //
rpcTarget: "https://rpc.ankr.com/eth_sepolia",
// Avoid using public rpcTarget in production.
displayName: "ImmutableX Testnet",
blockExplorerUrl: "https://explorer.testnet.immutable.com",
ticker: "IMX",
tickerName: "ImmutableX",
};
Initializing and instantiating the Web3Auth SDK
- PnP Modal SDK
- PnP NoModal SDK
- CoreKit SFA Web SDK
import { Web3Auth } from "@web3auth/modal";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig: chainConfig },
});
const web3auth = new Web3Auth({
// Get it from Web3Auth Dashboard
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
});
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3AuthNoModal({
clientId, // Get it from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const authAdapter = new AuthAdapter();
web3auth.configureAdapter(authAdapter);
import { Web3Auth } from "@web3auth/single-factor-auth";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/base";
const web3auth = new Web3Auth({
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
});
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
Getting the Web3Auth provider
After initializing Web3Auth, the next step is to initialize the provider and use it for your operations.
- PnP Modal SDK
- PnP NoModal SDK
- CoreKit SFA Web SDK
// Initialize for PnP Modal SDK
await web3auth.initModal();
// Trigger the login
await web3auth.connect();
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
// Initialize for PnP NoModal SDK
await web3auth.init();
// Trigger the login
await web3auth.connectTo("auth");
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
// Initialize for CoreKit SFA Web SDK
await web3auth.init();
// Trigger the login
await web3auth.connect();
// Get the provider
const provider = web3auth.provider;
// Continue using the `provider`
After logging in, the Web3Auth instance will provide you with information regarding the user that is logged in. This information is obtained directly from the JWT token and is not stored by Web3Auth. Therefore, this information can only be accessed through social logins after the user has logged into your application.
const user = await web3auth.getUserInfo(); // web3auth instance
Creating Layer 1 and Layer 2 Signers
Once a user logs in, the Web3Auth SDK returns a provider. ImmutableX is a layer 2 solution for
Ethereum, thus we need to create a eth signer using the provider. We will use the ethers library to
create the signer. Then we use the helper function createStarkSigner
from the @imtbl/core-sdk
to
create a stark signer from the private key.
import { IProvider } from "@web3auth/base";
import { ImmutableX, Config, createStarkSigner } from "@imtbl/core-sdk";
import { ethers } from "ethers";
/*
Use code from the above Initializing Provider here
*/
const ethersProvider = new ethers.providers.Web3Provider(web3authProvider);
const ethSigner = 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.providers.Web3Provider(web3authProvider);
const signer = ethersProvider.getSigner();
// Get user's Ethereum public address
const address = await signer.getAddress();
// Get user's balance in ether
const balance = ethers.utils.formatEther(
await ethersProvider.getBalance(address), // Balance is in wei
);
Send funds from Layer 1 to Layer 2
const ethersProvider = new ethers.providers.Web3Provider(web3authProvider);
const ethSigner = ethersProvider.getSigner();
const depositResponse = await client.deposit(ethSigner, {
type: "ETH",
amount: "10000000000000", // Amount in wei
});