Integrate Web3Auth with the Polkadot Blockchain
While using the Web3Auth Web SDK for a non-EVM chain like Polkadot you get a standard provider from which you can get
the private key of the user. Using this private key, you can use the corresponding libraries of the blockchain to make blockchain calls like getting
the user's account
, fetching balance
, and sign & send transaction
. We have highlighted a few methods here to get you started quickly on that.
Installation
For Polkadot, we will use the libraries @polkadot/keyring
and @polkadot/util-crypto
to create the Polkadot address.
- npm
- Yarn
- pnpm
npm install --save @polkadot/keyring @polkadot/util-crypto
yarn add @polkadot/keyring @polkadot/util-crypto
pnpm add @polkadot/keyring @polkadot/util-crypto
Initializing Provider
Getting the chainConfig
- Mainnet
- Testnet
const chainConfig = {
chainNamespace: "other",
chainId: "Polkadot", //
rpcTarget: "https://rpc.polkadot.io",
// Avoid using public rpcTarget in production.
displayName: "Polkadot Mainnet",
blockExplorerUrl: "https://explorer.polkascan.io/polkadot",
ticker: "DOT",
tickerName: "Polkadot",
};
const chainConfig = {
chainNamespace: "other",
chainId: "0x5", //
rpcTarget: "https://westend-rpc.polkadot.io",
// Avoid using public rpcTarget in production.
displayName: "Polkadot Testnet",
blockExplorerUrl: "https://westend.subscan.io",
ticker: "DOT",
tickerName: "Polkadot",
};
Initializing and instantiating the Web3Auth SDK
- PnP Modal SDK
- PnP NoModal SDK
- CoreKit SFA Web SDK
- CoreKit MFA tKey JS SDK
import { Web3Auth } from "@web3auth/modal";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK } 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 { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { WEB3AUTH_NETWORK } 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 openloginAdapter = new OpenloginAdapter();
web3auth.configureAdapter(openloginAdapter);
import { Web3Auth } from "@web3auth/single-factor-auth";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
const web3auth = new Web3Auth({
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: "sapphire_mainnet",
});
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig },
});
import { SfaServiceProvider } from "@tkey/service-provider-sfa";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
// Initialization of private key provider
const privateKeyProvider = new CommonPrivateKeyProvider({
config: {
chainConfig,
},
});
await (tKey.serviceProvider as SfaServiceProvider).init(privateKeyProvider);
Get User Info
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
Get Account and KeyPair
Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native provider for Polkadot, we need to directly use the private key to make the RPC calls.
Using the function, web3auth.provider.request({method: "private_key"})
from Web3Auth provider, the application can have access to the user's private
key. However, we cannot use this key with Polkadot-specific signing functions, hence, we first derive the Polkadot Keyring using the Keyring
class.
import { Keyring } from "@polkadot/api";
import { cryptoWaitReady } from "@polkadot/util-crypto";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// cryptoWaitReady is required to initialize the Keyring
await cryptoWaitReady();
const keyring = new Keyring({ ss58Format: 42, type: "sr25519" });
const keyPair = keyring.addFromUri("0x" + privateKey);
// keyPair.address is the account address.
const address = keyPair.address;
Get Balance
import { Keyring } from "@polkadot/api";
import { cryptoWaitReady } from "@polkadot/util-crypto";
import { ApiPromise, WsProvider } from "@polkadot/api";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// cryptoWaitReady is required to initialize the Keyring
await cryptoWaitReady();
const keyring = new Keyring({ ss58Format: 42, type: "sr25519" });
const keyPair = keyring.addFromUri("0x" + privateKey);
const provider = new WsProvider("wss://westend-rpc.polkadot.io"); // testnet
// const provider = new WsProvider("wss://rpc.polkadot.io"); // Polkadot Relay Chain
// Create the API and wait until ready
const api = await ApiPromise.create({ provider });
// Retrieve the chain & node information information via rpc calls
const data = await api.query.system.account(keyPair.address);
// Balance
const balance = data.toHuman();
Send Transaction
import { Keyring } from "@polkadot/api";
import { cryptoWaitReady } from "@polkadot/util-crypto";
import { ApiPromise, WsProvider } from "@polkadot/api";
/*
Use code from the above Initializing Provider here
*/
// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });
// cryptoWaitReady is required to initialize the Keyring
await cryptoWaitReady();
const keyring = new Keyring({ ss58Format: 42, type: "sr25519" });
const keyPair = keyring.addFromUri("0x" + privateKey);
const provider = new WsProvider("wss://westend-rpc.polkadot.io"); // testnet
// const provider = new WsProvider("wss://rpc.polkadot.io"); // Polkadot Relay Chain
// Create the API and wait until ready
const api = await ApiPromise.create({ provider });
// Transfer 12345 units to '5Gzhnn1MsDUjMi7S4cN41CfggEVzSyM58LkTYPFJY3wt7o3d'
const txHash = await api.tx.balances.transferKeepAlive("5Gzhnn1MsDUjMi7S4cN41CfggEVzSyM58LkTYPFJY3wt7o3d", 12345).signAndSend(keyPair);
console.log("txHash", txHash.toHuman());