Add polkadot to connect blockchain pages

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
+
+<GetUserInfoSnippet />
+
+## 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());
+```

sidebars.js

@@ -253,6 +253,7 @@ module.exports = {
             "connect-blockchain/aptos",
             "connect-blockchain/cosmos",
             "connect-blockchain/near",
+            "connect-blockchain/polkadot",
           ],
           collapsible: true,
           collapsed: false,