Merge branch 'master' into guides-update

Web3Auth · Oct 23, 2023 · 458395a · 458395a
2 parents 62d70a8 + 9a9a41f
commit 458395a
Show file tree

Hide file tree

Showing 14 changed files with 2,564 additions and 50 deletions.
diff --git a/docs/connect-blockchain/skale.mdx b/docs/connect-blockchain/skale.mdx
diff --git a/docs/connect-blockchain/zkatana.mdx b/docs/connect-blockchain/zkatana.mdx
@@ -0,0 +1,316 @@
+---
+title: Integrate Web3Auth with the zKatana Blockchain
+sidebar_label: zKatana
+image: "content-hub/guides/banners/zkatana.png"
+displayed_sidebar: docs
+keywords: [zkatana, blockchain, web3auth]
+description: "Integrate Web3Auth with the zKatana Blockchain | Documentation - Web3Auth"
+---
+
+import InstallationSnippet from "@site/src/common/docs/_evm-installation.mdx";
+import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
+import GetAccountAndBalanceSnippet from "@site/src/common/docs/_evm-get-account-n-balance.mdx";
+import SendTransactionSnippet from "@site/src/common/docs/_evm-send-transaction.mdx";
+import SignTransactionSnippet from "@site/src/common/docs/_evm-sign-transaction.mdx";
+import SignPersonalMessageSnippet from "@site/src/common/docs/_evm-sign-message-personal-sign.mdx";
+import SignTypedDataV1Snippet from "@site/src/common/docs/_evm-sign-message-v1.mdx";
+import SignTypedDataV3Snippet from "@site/src/common/docs/_evm-sign-message-v3.mdx";
+import SignTypedDataV4Snippet from "@site/src/common/docs/_evm-sign-message-v4.mdx";
+import SmartContractSoliditySnippet from "@site/src/common/docs/_smart-contract-solidity.mdx";
+import DeployContractSolidityDeploySnippet from "@site/src/common/docs/_smart-contract-solidity-deploy.mdx";
+import DeployContractSolidityReadSnippet from "@site/src/common/docs/_smart-contract-solidity-read.mdx";
+import DeployContractSolidityWriteSnippet from "@site/src/common/docs/_smart-contract-solidity-write.mdx";
+import FetchUserPrivateKeySnippet from "@site/src/common/docs/_evm-fetch-user-private-key.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+While using the Web3Auth Web SDK, you get a [`EIP1193`](https://eips.ethereum.org/EIPS/eip-1193) provider, similar to the
+[Metamask Provider](https://docs.metamask.io/guide/ethereum-provider.html). This provider can be used with libraries like
+[`web3.js`](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html), [`ethers.js`](https://docs.ethers.io/v5/getting-started/) etc. to make
+[zKatana](https://astar.network/) blockchain calls like getting the user's `account`, fetching `balance`, `sign transaction`, `send transaction`,
+`read` from and `write` to the smart contract, etc. We have highlighted a few here to get you started quickly on that.
+
+:::info
+
+This reference is for the `Web`, however, you can use zKatana on `Android`, `iOS`, `React Native`, `Flutter`, & `Unity` as well. Please follow our
+reference for [Ethereum](/connect-blockchain/ethereum/), and change the RPC Provider URL & configurations corresponding to zKatana.
+
+:::
+
+## Installation
+
+To interact with the zKatana blockchain, you can use either [web3.js](https://web3js.readthedocs.io/en/v1.2.8/getting-started.html) or
+[ethers.js](https://docs.ethers.io/v5/getting-started/) libraries with Web3Auth.
+
+<InstallationSnippet />
+
+## Initializing Provider (zKatana)
+
+### Testnet
+
+Testnet Block Explorer URL: https://zkatana.blockscout.com
+
+<Tabs
+  defaultValue="web3"
+  values={[
+    { label: "web3.js", value: "web3" },
+    { label: "ethers.js", value: "ethers" },
+  ]}
+>
+<TabItem value="web3">
+
+<Tabs
+  defaultValue="es"
+  values={[
+    { label: "ES Modules", value: "es" },
+    { label: "TypeScript", value: "ts" },
+    { label: "CommonJS", value: "js" },
+  ]}
+>
+<TabItem value="es">
+
+```tsx
+import { Web3Auth } from "@web3auth/modal";
+import Web3 from "web3";
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const web3 = new Web3(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+<TabItem value="ts">
+
+```tsx
+import { Web3Auth } from "@web3auth/modal";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+import Web3 from "web3";
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const web3 = new Web3(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+<TabItem value="js">
+
+```tsx
+const { Web3Auth } = require("@web3auth/modal");
+const Web3 = require("web3");
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const web3 = new Web3(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+<TabItem value="ethers">
+
+<Tabs
+  defaultValue="es"
+  values={[
+    { label: "ES Modules", value: "es" },
+    { label: "TypeScript", value: "ts" },
+    { label: "CommonJS", value: "js" },
+  ]}
+>
+<TabItem value="es">
+
+```tsx
+import { Web3Auth } from "@web3auth/modal";
+import { ethers } from "ethers";
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const provider = new ethers.providers.Web3Provider(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+<TabItem value="ts">
+
+```tsx
+import { Web3Auth } from "@web3auth/modal";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+import { ethers } from "ethers";
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const provider = new ethers.providers.Web3Provider(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+<TabItem value="js">
+
+```tsx
+const { Web3Auth } = require("@web3auth/modal");
+const ethers = require("ethers");
+
+const web3auth = new Web3Auth({
+  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // get it from Web3Auth Dashboard
+  web3AuthNetwork: "sapphire_mainnet",
+  chainConfig: {
+    chainNamespace: "eip155",
+    chainId: "0x133120", // hex of 1261120
+    rpcTarget: "https://rpc.zkatana.gelato.digital",
+    // Avoid using public rpcTarget in production.
+    // Use services like Infura, Quicknode etc
+    displayName: "zKatana Testnet",
+    blockExplorer: "https://zkatana.blockscout.com",
+    ticker: "ETH",
+    tickerName: "ETH",
+  },
+});
+await web3auth.initModal();
+
+const web3authProvider = await web3auth.connect();
+
+const provider = new ethers.providers.Web3Provider(web3authProvider); // web3auth.provider
+```
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+</Tabs>
+
+## Get User Info
+
+<GetUserInfoSnippet />
+
+## Get Account and Balance
+
+<GetAccountAndBalanceSnippet />
+
+## Send Transaction
+
+<SendTransactionSnippet />
+
+## Sign Transaction
+
+<SignTransactionSnippet />
+
+## Sign Message
+
+### Personal Sign
+
+<SignPersonalMessageSnippet />
+
+### Sign Typed Data v1
+
+<SignTypedDataV1Snippet />
+
+### Sign Typed Data v3
+
+<SignTypedDataV3Snippet />
+
+### Sign Typed Data v4
+
+<SignTypedDataV4Snippet />
+
+## Smart Contract
+
+<SmartContractSoliditySnippet />
+
+### Deploy Contract
+
+<DeployContractSolidityDeploySnippet />
+
+### Read From Contract
+
+<DeployContractSolidityReadSnippet />
+
+### Write to Contract
+
+<DeployContractSolidityWriteSnippet />
+
+## Fetch User's Private Key
+
+<FetchUserPrivateKeySnippet />
diff --git a/docs/pnp/migration-guides/rn-v3-to-v4.mdx b/docs/pnp/migration-guides/rn-v3-to-v4.mdx
@@ -1,17 +1,17 @@
 ---
-title: PnP React Native SDK - v3 to v4
+title: PnP React Native - v3 to v4
 displayed_sidebar: docs
 description: "PnP React Native SDK - v3 to v4 | Documentation - Web3Auth"
 ---
 
 ## Third parameter to web3auth constructor
 
-In order to introduce session management without storing the private key in the device, a new parameter is introduced to the web3auth constructor.
-Thhis is the `Storage` parameter.
+To introduce session management without storing the private key in the device, a new parameter is introduced to the web3auth constructor. This is the
+`Storage` parameter.
 
-### In Expo managed workflow
+### In Expo-managed workflow
 
-When using our SDK with a Expo-based React Native app (aka managed workflow), you have to install the `expo-web-browser` package as a `WebBrowser`
+When using our SDK with an Expo-based React Native app (aka managed workflow), you have to install the `expo-web-browser` package as a `WebBrowser`
 implementation. You also need to install `expo-secure-store` to store the user's session.
 
 ```bash
@@ -31,7 +31,7 @@ const web3auth = new Web3Auth(WebBrowser, SecureStore, {
 });
 ```
 
-### In Bare react native workflow
+### In Bare React native workflow
 
 Install Web3Auth's React Native SDK in your React Native project. When using our SDK with a bare workflow React Native app, you have to install a
 `WebBrowser` implementation made by us and a `Storage` implementation provided by react-native.
@@ -57,7 +57,7 @@ const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
 
 ### For Bare React Native workflow
 
-Add `globals.js` file to your project and import it in your `index.js` file.
+Add `globals.js` file to your project and import it into your `index.js` file.
 
 ```tsx title="globals.js"
 global.Buffer = require("buffer").Buffer;
@@ -140,7 +140,7 @@ module.exports = (async () => {
 
 ### For Expo managed workflow
 
-Before running `npm run ios` or `npm run android` in your Expo managed workflow project, run the following command.
+Before running `npm run ios` or `npm run android` in your Expo-managed workflow project, run the following command.
 
 ```bash
 npx expo prebuild
@@ -149,7 +149,7 @@ npx expo prebuild
 This generates the native folder structure for your project, just like you would have in a bare workflow project. This is required for the polyfills
 to work.
 
-Create a `globals.js` file in your project and import it in your `index.js` file.
+Create a `globals.js` file in your project and import it into your `index.js` file.
 
 ```tsx title="globals.js"
 global.Buffer = require("buffer").Buffer;
@@ -174,7 +174,7 @@ Then add this line to your `index.js` file.
 import "./globals";
 ```
 
-Once you have done the above, ceate a new metro.config.js file in your project and add the following to it.
+Once you have done the above, create a new metro.config.js file in your project and add the following to it.
 
 :::info
 
@@ -259,4 +259,4 @@ declare class Web3Auth implements IWeb3Auth {
 export default Web3Auth;
 ```
 
-Checkout our react-native PnP examples in PnP examples repo to know how to use the new SDK methods.
+Check out our react-native PnP examples in the PnP examples repo to know how to use the new SDK methods.