Merge branch 'master' into add-guide-multiple-chains

Author: rtomas

docs/auth-provider-setup/social-providers/twitter.mdx

@@ -11,24 +11,27 @@ import TabItem from "@theme/TabItem";
 
 :::note
 
-Twitter login can be performed in various ways, depending on the use case. We have demonstrated this with Auth0 & Firebase, but this can be done with
-any other Federated/JWT providers.
+Twitter login can be performed in various ways, depending on the use case. We have demonstrated this
+with Auth0 & Firebase, but this can be done with any other Federated/JWT providers.
 
 :::
 
 ## Set up [Twitter via Auth0](https://auth0.com/blog/how-to-add-a-twitter-social-connection-in-auth0/#Setup-Twitter-connection)
 
-1. Create an Auth0 verifier for your application by selecting `Auth0` as the Login provider from this modal.
+1. Create an Auth0 verifier for your application by selecting `Auth0` as the Login provider from
+   this modal.
    ![Twitter - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0.png)
 2. Select `Twitter` as the **Authentication Type** based on the dropdown.
    ![Twitter - Auth0 Authentication Type list on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png)
-3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a new Auth0 application
-   [here](https://auth0.com/docs/quickstart/webapp/).
+3. Enter the `Auth0 Client ID` and `Auth0 Domain` from your Auth0 application. See how to create a
+   new Auth0 application [here](https://auth0.com/docs/quickstart/webapp/).
 
    ![Twitter - Domain and Client ID from Auth0 Dashboard](/images/dashboard/create-verifier-auth0-filled-common.png)
    ![Twitter - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard](/images/dashboard/create-verifier-auth0-unfilled.png)
 
-4. Add the [Twitter Social Connection](https://marketplace.auth0.com/integrations/twitter-social-connection) to your Auth0 application.
+4. Add the
+   [Twitter Social Connection](https://marketplace.auth0.com/integrations/twitter-social-connection)
+   to your Auth0 application.
 5. Click on the `Create` button to create `Twitter` Custom Authentication via Auth0 verifier.
 
 ### Example
@@ -38,7 +41,8 @@ import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 
-const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
+const clientId =
+  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
 // get it from https://dashboard.web3auth.io by creating a project.
 
 const chainConfig = {
@@ -214,7 +218,8 @@ import { ADAPTER_EVENTS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
 
-const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
+const clientId =
+  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
 
 const verifier = "w3a-firebase-demo";
 
@@ -223,7 +228,7 @@ const chainConfig = {
   chainId: "0x1", // Please use 0x1 for Mainnet
   rpcTarget: "https://rpc.ankr.com/eth",
   displayName: "Ethereum Mainnet",
-  blockExplorer: "https://etherscan.io/",
+  blockExplorerUrl: "https://etherscan.io/",
   ticker: "ETH",
   tickerName: "Ethereum",
 };
@@ -283,7 +288,8 @@ import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { IProvider } from "@web3auth/base";
 import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
 
-const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
+const clientId =
+  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
 
 const verifier = "w3a-firebase-demo";
 

docs/connect-blockchain/xrpl.mdx

@@ -11,10 +11,12 @@ import GetUserInfoSnippet from "@site/src/common/docs/_get-userinfo.mdx";
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
 
-The Web3Auth Web SDK offers a standard provider for accessing the user's private key on non-EVM chains like [XRPL](https://xrpl.org/). You can use our
-native `@web3auth/xrpl-provider` for making direct connections with XRPL Blockchain. This will provide an xrplProvider that can be injected back into
-the Web3Auth instance, allowing you to perform actions such as retrieving account information, obtaining balances, signing and sending transactions,
-and reading from and writing to smart contracts. Here are some methods to help you quickly get started.
+The Web3Auth Web SDK offers a standard provider for accessing the user's private key on non-EVM
+chains like [XRPL](https://xrpl.org/). You can use our native `@web3auth/xrpl-provider` for making
+direct connections with XRPL Blockchain. This will provide an xrplProvider that can be injected back
+into the Web3Auth instance, allowing you to perform actions such as retrieving account information,
+obtaining balances, signing and sending transactions, and reading from and writing to smart
+contracts. Here are some methods to help you quickly get started.
 
 ## Installation
 
@@ -49,7 +51,7 @@ const chainConfig = {
   ticker: "XRP",
   tickerName: "XRPL",
   displayName: "xrpl mainnet",
-  blockExplorer: "https://livenet.xrpl.org",
+  blockExplorerUrl: "https://livenet.xrpl.org",
 };
 ```
 
@@ -70,7 +72,7 @@ const chainConfig = {
   ticker: "XRP",
   tickerName: "XRPL",
   displayName: "xrpl testnet",
-  blockExplorer: "https://testnet.xrpl.org",
+  blockExplorerUrl: "https://testnet.xrpl.org",
 };
 ```
 
@@ -91,7 +93,7 @@ const chainConfig = {
   ticker: "XRP",
   tickerName: "XRPL",
   displayName: "xrpl devnet",
-  blockExplorer: "https://devnet.xrpl.org",
+  blockExplorerUrl: "https://devnet.xrpl.org",
 };
 ```
 

docs/sdk/core-kit/mpc-core-kit/authentication.mdx

@@ -1,8 +1,8 @@
 ---
-title: "Authentication in MPC Core Kit Web SDK"
+title: "Authentication in MPC Core Kit JS SDK"
 sidebar_label: "Authentication"
 displayed_sidebar: sdk
-description: "Web3Auth MPC Core Kit Web SDK - Authentication | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit JS SDK - Authentication | Documentation - Web3Auth"
 ---
 
 import ServiceWorkerCode from "@site/src/common/sdk/core-kit/tkey/_sw-js.mdx";
@@ -53,6 +53,15 @@ MPC functionalities.
 | ------------- | -------- | ---------------- | --------- |
 | `loginParams` | `object` | Login Parameters | Yes       |
 
+:::tip React Native
+
+While using the application in React Native, you can use the `ux_mode` as `react-native`, this helps
+you to use the SDK in a React Native environment. However, the implicit login flow doesn't work in
+React Native, you need to manually call the login with JWT function for it after getting the JWT
+token from the auth provider.
+
+:::
+
 ### `OauthLoginParams`
 
 <Tabs

docs/sdk/core-kit/mpc-core-kit/initialize.mdx

@@ -1,8 +1,8 @@
 ---
-title: "Initializing MPC Core Kit Web SDK"
+title: "Initializing MPC Core Kit JS SDK"
 sidebar_label: "Initialize"
 displayed_sidebar: sdk
-description: "Web3Auth MPC Core Kit Web SDK - Initialize | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit JS SDK - Initialize | Documentation - Web3Auth"
 ---
 
 import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
@@ -15,6 +15,7 @@ After Installation, the next step to use Web3Auth MPC Core Kit is to Initialize
 However, the Initialization is a two step process, ie.
 
 - [Instantiation of `Web3AuthMPCCoreKit`](#instantiating-web3auth)
+- [Instantiation of the Signing Provider package](#instantiating-provider)
 - [Initialization of `Web3AuthMPCCoreKit`](#initializing-web3auth)
 
 ## Instantiating Web3Auth
@@ -25,6 +26,38 @@ However, the Initialization is a two step process, ie.
 import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
 ```
 
+:::info Additional imports needed for React Native
+
+In order to make this SDK compatible with the React Native development environment, you need to
+additionally import the following packages:
+
+```tsx
+import EncryptedStorage from "react-native-encrypted-storage"; // Used to store the session & device factor keys
+import * as TssLibRN from "@toruslabs/react-native-tss-lib-bridge"; // The TSS library for React Native
+import { Bridge } from "@toruslabs/react-native-tss-lib-bridge"; // A bridge to be imported to the React Native environment
+```
+
+While initializing the SDK, you need to pass the `EncryptedStorage` and `TssLibRN` as arguments to
+the `Web3AuthOptions` object. The `Bridge` is used to bridge the TSS library to the React Native
+environment, it has to be imported in the React Native environment, at the end of the page.
+
+```tsx title="App.tsx"
+import { Bridge } from "@toruslabs/react-native-tss-lib-bridge";
+
+export default function App() {
+  // Misc App related functions
+  return (
+    <View>
+      {/* <YOUR APP GOES HERE> */}
+      // highlight-next-line
+      <Bridge /> // <- Add this line
+    </View>
+  );
+}
+```
+
+:::
+
 #### Assign the `Web3AuthMPCCoreKit` class to a variable
 
 ```javascript
@@ -202,18 +235,6 @@ export declare const UX_MODE: {
 
 </Tabs>
 
-#### Adding a Custom Chain Configuration
-
-:::warning
-
-Currently Web3Auth MPC Core Kit supports **only EVM Compatible Chains**. We're constantly working on adding support for more chains.
-
-:::
-
-#### `chainConfig`
-
-<ChainConfig />
-
 ##### Usage
 
 ```javascript
@@ -232,14 +253,98 @@ chainConfig: {
 
 ### Example
 
+#### Web
+
 ```javascript
+import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
+
 const coreKitInstance = new Web3AuthMPCCoreKit({
-  web3AuthClientId: "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
+  web3AuthClientId:
+    "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
   web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
   uxMode: "popup",
+  manualSync: true, // This is the recommended approach
+});
+```
+
+#### React Native
+
+```ts
+import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
+import EncryptedStorage from "react-native-encrypted-storage"; // Used to store the session & device factor keys
+import * as TssLibRN from "@toruslabs/react-native-tss-lib-bridge"; // The TSS library for React Native
+
+const coreKitInstance = new Web3AuthMPCCoreKit({
+  web3AuthClientId:
+    "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
+  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
+  chainConfig,
+  setupProviderOnInit: false,
+  uxMode: "react-native",
+  asyncStorageKey: {
+    getItem: async (key: string) => {
+      return EncryptedStorage.getItem(key);
+    },
+    setItem: async (key: string, value: string) => {
+      return EncryptedStorage.setItem(key, value);
+    },
+  },
+  tssLib: TssLibRN,
+  manualSync: true, // This is the recommended approach
 });
 ```
 
+## Instantiating Provider
+
+As a next step, you need to set up the particular signing provider from Web3Auth and pass the
+`coreKitInstance` into it. This provider is used to make calls to the selected blockchain.
+Currently, Web3Auth exposes the following signing provider packages to be integrated within the SDK:
+
+- [EthereumSigningProvider](/sdk/providers/evm-mpc)
+
+#### Adding a Custom Chain Configuration
+
+:::warning
+
+Currently Web3Auth MPC Core Kit supports **only EVM Compatible Chains**. We're constantly working on
+adding support for more chains.
+
+:::
+
+#### `chainConfig`
+
+<ChainConfig />
+
+<Tabs
+  defaultValue="eth"
+  values={[
+    { label: "ETH", value: "eth" },
+  ]}
+>
+
+<TabItem value="eth">
+
+```javascript title="Usage"
+import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7", // Please use 0x1 for Mainnet
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io/",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
+evmProvider.setupProvider(coreKitInstance);
+```
+
+</TabItem>
+</Tabs>
+
 ## Initializing Web3Auth
 
 #### `init(params?: InitParams)`
@@ -282,7 +387,8 @@ export interface InitParams {
 
 </Tabs>
 
-The final step in the initialization process is to initialize the `Web3AuthMPCCoreKit` instance, ie. `coreKitInstance` in our case.
+The final step in the initialization process is to initialize the `Web3AuthMPCCoreKit` instance, ie.
+`coreKitInstance` in our case.
 
 This is done by calling the `init()` function of `coreKitInstance`.
 

docs/sdk/core-kit/mpc-core-kit/install.mdx

@@ -1,33 +1,53 @@
 ---
-title: "Installing MPC Core Kit Web SDK"
+title: "Installing MPC Core Kit JS SDK"
 sidebar_label: "Install"
 displayed_sidebar: sdk
-description: "Web3Auth MPC Core Kit Web SDK - Install | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit JS SDK - Install | Documentation - Web3Auth"
 ---
 
-
 ## [`@web3auth/mpc-core-kit`](https://npmjs.com/package/@web3auth/mpc-core-kit)
 
 ```bash npm2yarn
 npm install --save @web3auth/mpc-core-kit
 ```
 
-## Consider adding `@web3auth/base` to your project
+This package gives access to common types and interfaces for Web3Auth. This comes in handy by
+providing you a standard way of importing the values you need to work with the SDKs. We highly
+recommend using it while working with `Typescript`.
 
-```bash npm2yarn
-npm install --save @web3auth/base
-```
+## Helper SDKs
+
+### Provider packages
+
+For making RPC calls within your dApp, Web3Auth exposes respective providers for different chains.
+This provider can be used to interact with the connected chain using exposed functions within the
+provider.
+
+:::tip
+
+Checkout the [Providers SDK Reference](/sdk/providers) to learn more.
+
+- [For EVM based Chains `@web3auth/ethereum-mpc-provider`](/sdk/providers/evm-mpc)
+
+:::
+
+### Common Types and Interfaces
+
+#### [`@web3auth/base`](https://npmjs.com/package/@web3auth/base)
 
-This package gives access to common types and interfaces for Web3Auth. This comes in handy by providing you a standard way of importing the values you
-need to work with the SDKs. We highly recommend using it while working with `Typescript`.
+This package gives access to common types and interfaces for Web3Auth. This comes in handy by
+providing you a standard way of importing the values you need to work with the SDKs. We highly
+recommend using it while working with Typescript.
 
 ## Troubleshooting
 
 ### Bundler Issues: Missing Dependencies
 
-You might face issues mentioning that certain dependencies are missing within the browser environment. These are node dependencies that need to be
-polyfilled in your application, to enable Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while building the
-app. We have created guides for different bundlers to help you with this issue:
+You might face issues mentioning that certain dependencies are missing within the browser
+environment. These are node dependencies that need to be polyfilled in your application, to enable
+Web3Auth functionalities. Furthermore, your bundler needs to be reconfigured to use them while
+building the app. We have created guides for different bundlers to help you with this issue:
 
 - Please check out our **[Webpack 5 Troubleshooting Guide](/troubleshooting/webpack-issues)**
 - Please check out our **[Vite Troubleshooting Guide](/troubleshooting/vite-issues)**
+- Please check out our **[React Native Troubleshooting Guide](/troubleshooting/metro-issues-mpc)**