diff --git a/docs/connect-blockchain/polkadot.mdx b/docs/connect-blockchain/polkadot.mdx new file mode 100644 index 000000000..b6c96fc71 --- /dev/null +++ b/docs/connect-blockchain/polkadot.mdx @@ -0,0 +1,143 @@ +--- +title: Integrate Web3Auth with the Polkadot Blockchain +sidebar_label: Polkadot +image: "content-hub/guides/banners/polkadot.png" +displayed_sidebar: docs +keywords: [polkadot, web3auth, authentication, blockchain] +description: "Integrate Web3Auth with the Polkadot Blockchain | Documentation - Web3Auth" +--- + +import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx"; + +While using the Web3Auth Web SDK for a non-EVM chain like [Polkadot](https://www.polkadot.network/) 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`, fetch `balance`, `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. + +```bash npm2yarn +npm install --save @polkadot/keyring @polkadot/util-crypto +``` + +## Initializing Provider + +```tsx +import { Web3Auth } from "@web3auth/modal"; +import { OpenloginAdapter } from "@web3auth/openlogin-adapter"; + +const web3auth = new Web3Auth({ + clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard + web3AuthNetwork: "sapphire_mainnet", + chainConfig: { + chainNamespace: "other", // for all non EVM and SOLANA chains, use "other" + }, +}); + +// "other" is supported through @web3auth/openlogin-adapter package. +const openloginAdapter = new OpenloginAdapter({ + adapterSettings: { + uxMode: "popup", + }, +}); +web3auth.configureAdapter(openloginAdapter); + +await web3auth.initModal(); + +const web3authProvider = await web3auth.connect(); // web3auth.provider +``` + +## Get User Info + + + +## 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. + +```tsx +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 + +```tsx +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"); // mainnet + +// 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 + +```tsx +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"); // mainnet + +// Create the API and wait until ready +const api = await ApiPromise.create({ provider }); + +// Transfer 12345 units to '5Gzhnn1MsDUjMi7S4cN41CfggEVzSyM58LkTYPFJY3wt7o3d' +const txHash = await api.tx.balances.transfer("5Gzhnn1MsDUjMi7S4cN41CfggEVzSyM58LkTYPFJY3wt7o3d", 12345).signAndSend(keyPair); + +console.log("txHash", txHash.toHuman()); +``` diff --git a/sidebars.js b/sidebars.js index 0f1612fd8..e5200732e 100644 --- a/sidebars.js +++ b/sidebars.js @@ -253,6 +253,7 @@ module.exports = { "connect-blockchain/aptos", "connect-blockchain/cosmos", "connect-blockchain/near", + "connect-blockchain/polkadot", ], collapsible: true, collapsed: false, diff --git a/static/content-hub/guides/banners/polkadot.png b/static/content-hub/guides/banners/polkadot.png index ddcba13bf..5f12d93c6 100644 Binary files a/static/content-hub/guides/banners/polkadot.png and b/static/content-hub/guides/banners/polkadot.png differ