Update sdk reference for react native mpc core kit

Author: yashovardhan

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

@@ -42,7 +42,7 @@ npm install @toruslabs/tss-dkls-lib
 
 This package gives EIP1193 compatible Ethereum signing provider. This provider is used to make calls
 to the selected blockchain, and can be used with `web3.js`, `ethers.js`, or `viem` to make
-integration with Ethereum-compatible chains more easier.
+integration with EVM compatible chains easier.
 
 ```bash npm2yarn
 npm install @web3auth/ethereum-mpc-provider

docs/sdk/mpc-core-kit/mpc-core-kit-js/signing.mdx

@@ -136,8 +136,8 @@ const receipt = await web3.eth.sendTransaction({
 
 ### Others
 
-The secp256k1 support is not limited to only Ethereum-compatible chains. You can use the SDK with
-any blockchain ecosystem that supports the secp256k1 curve.
+The secp256k1 support is not limited to only EVM compatible chains. You can use the SDK with any
+blockchain ecosystem that supports the secp256k1 curve.
 
 #### Get PublicKey
 

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

@@ -1,7 +1,7 @@
 ---
-title: "Web3Auth MPC Core Kit JS SDK - Authentication"
+title: "Web3Auth MPC Core Kit React Native SDK - Authentication"
 sidebar_label: "Authentication"
-description: "Web3Auth MPC Core Kit JS SDK - Authentication | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit React Native SDK - Authentication | Documentation - Web3Auth"
 ---
 
 import TabItem from "@theme/TabItem";
@@ -185,7 +185,7 @@ await coreKitInstance.loginWithJWT(jwtLoginParams);
 
 To verify the user in the backend, you can retrieve the user's signature from frontend, and validate
 it using the `SignatureValidator` from the
-[@toruslabs/signature-validator](https://www.npmjs.com/package/@toruslabs/signature-validator)
+[`@toruslabs/signature-validator`](https://www.npmjs.com/package/@toruslabs/signature-validator)
 package in the backend.
 
 ### Retrieve user's signature
@@ -201,8 +201,8 @@ const signatures = coreKitInstance.signatures;
 ### Verify the signatures in backend
 
 For verification you'll need to install couple of packages,
-[@toruslabs/signature-validator](https://www.npmjs.com/package/@toruslabs/signature-validator) and
-[@toruslabs/fnd-base](https://www.npmjs.com/package/@toruslabs/fnd-base), and use
+[`@toruslabs/signature-validator`](https://www.npmjs.com/package/@toruslabs/signature-validator) and
+[`@toruslabs/fnd-base`](https://www.npmjs.com/package/@toruslabs/fnd-base), and use
 `SignatureValidator` to validate the signatures.
 
 ```js

docs/sdk/mpc-core-kit/mpc-core-kit-react-native/examples.mdx

@@ -1,7 +1,7 @@
 ---
-title: Examples - MPC Core Kot SDK
+title: Examples - MPC Core Kit React Native SDK
 sidebar_label: Examples
-description: "@web3auth/mpc-core-kit Examples | Documentation - Web3Auth"
+description: "Examples for MPC Core Kit React Native SDK | Documentation - Web3Auth"
 hide_table_of_contents: true
 ---
 

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

@@ -1,7 +1,7 @@
 ---
-title: "Initializing MPC Core Kit JS SDK for React Native"
+title: "Initializing MPC Core Kit React Native SDK"
 sidebar_label: "Initialize"
-description: "Web3Auth MPC Core Kit JS SDK - Initialize for React Native | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit React Native SDK - Initialize | Documentation - Web3Auth"
 ---
 
 import ChainConfig from "@site/src/common/sdk/pnp/web/_chain-config.mdx";
@@ -48,36 +48,22 @@ export default function App() {
 }
 ```
 
-### Check for the Bridge State before Initing
-
-The new package of React Native exposes a `resolveReady` callback that notifies when the bridge is
-ready to be used. Use this to init the SDK after the bridge has been configured.
-
-```js
-useEffect(() => {
-  if (bridgeReady) {
-    const init = async () => {
-      try {
-        await coreKitInstance.init();
-      } catch (error: any) {
-        uiConsole(error.message, "mounted caught");
-      }
-      setCoreKitStatus(coreKitInstance.status);
-    };
-    init();
-  }
-}, [bridgeReady]);
-```
-
 ## Configure Instance
 
 Please note that these are the most critical steps where you need to pass on different parameters
 according to the preference of your project.
 
 ### Parameters
 
-The Web3AuthMPCCoreKit constructor takes an object with `Web3AuthOptions` as input which helps you
-configure the SDK.
+The `mpclib.Web3AuthMPCCoreKitRN` constructor takes an object with `Web3AuthOptions` as input which
+helps you configure the SDK.
+
+:::note
+
+Please, note we for the simplicity, we use the `coreKitInstance` to refer to the instance of
+`mpclib.Web3AuthMPCCoreKitRN`.
+
+:::
 
 <Tabs
   defaultValue="table"
@@ -271,13 +257,11 @@ export declare const UX_MODE: {
 
 ```javascript
 import {
-  makeEthereumSigner,
   mpclib,
   TssDklsLib,
   WEB3AUTH_NETWORK,
   Web3AuthOptions,
 } from "@web3auth/react-native-mpc-core-kit";
-import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
 import EncryptedStorage from "react-native-encrypted-storage"; // Used to store the session & device factor keys
 
 // setup async storage for react native
@@ -301,21 +285,6 @@ const coreKitInstance = new mpclib.Web3AuthMPCCoreKitRN({
   storage: asyncStorageKey, // Add the storage property
 } as Web3AuthOptions);
 // focus-end
-
-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/",
-  blockExplorer: "https://sepolia.etherscan.io/",
-  ticker: "ETH",
-  tickerName: "Ethereum",
-};
-
-// Setup provider for EVM Chain
-const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
-evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
 ```
 
 </TabItem>
@@ -372,13 +341,11 @@ const coreKitInstance = new mpclib.Web3AuthMPCCoreKitRN({
 
 ```javascript
 import {
-  makeEthereumSigner,
   mpclib,
   TssDklsLib,
   WEB3AUTH_NETWORK,
   Web3AuthOptions,
 } from "@web3auth/react-native-mpc-core-kit";
-import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
 import * as SecureStore from "expo-secure-store"; // Used to store the session & device factor keys
 
 // setup async storage for react native
@@ -402,21 +369,6 @@ const coreKitInstance = new mpclib.Web3AuthMPCCoreKitRN({
   storage: asyncStorageKey, // Add the storage property
 } as Web3AuthOptions);
 // focus-end
-
-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/",
-  blockExplorer: "https://sepolia.etherscan.io/",
-  ticker: "ETH",
-  tickerName: "Ethereum",
-};
-
-// Setup provider for EVM Chain
-const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
-evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
 ```
 
 </TabItem>
@@ -461,6 +413,35 @@ const coreKitInstance = new mpclib.Web3AuthMPCCoreKitRN({
 
 </Tabs>
 
+## Additional Configuration for EVM Chains
+
+If you are using the SDK with EVM compatible chains, you can use the `EthereumSigningProvider` to
+setup the provider for the EVM chain. This provider is EIP1193 compatible and can be used with
+`web3.js`, `ethers.js`, or `viem` to make integration with EVM compatible chains easier.
+
+You need to pass in the `chainConfig` object to the provider. The `chainConfig` object contains the
+basic details of the chain you are using.
+
+```js
+import { makeEthereumSigner } from "@web3auth/react-native-mpc-core-kit";
+import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
+
+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/",
+  blockExplorer: "https://sepolia.etherscan.io/",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
+// Setup provider for EVM Chain
+const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
+evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
+```
+
 ## Initialize Web3AuthMPCCoreKit
 
 To initialize the instance, you need to call the `init` method. The method also takes the
@@ -512,3 +493,24 @@ export interface InitParams {
 // Web3AuthMPCCoreKit instance from previous steps
 await coreKitInstance.init();
 ```
+
+### Check for the Bridge State before Initing
+
+The `Bridge` exposes a `resolveReady` callback that notifies when the SDK's bridge is ready to be
+used. Use this to init the SDK after the bridge has been configured.
+
+```js
+useEffect(() => {
+  if (bridgeReady) {
+    const init = async () => {
+      try {
+        await coreKitInstance.init();
+      } catch (error: any) {
+        uiConsole(error.message, "mounted caught");
+      }
+      setCoreKitStatus(coreKitInstance.status);
+    };
+    init();
+  }
+}, [bridgeReady]);
+```

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

@@ -1,12 +1,15 @@
 ---
-title: "Installing MPC Core Kit JS SDK"
+title: "Installing MPC Core Kit React Native SDK"
 sidebar_label: "Install"
-description: "Web3Auth MPC Core Kit JS SDK - Install | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit React Native SDK - Install | Documentation - Web3Auth"
 ---
 
-The MPC Core Kit JS SDK contains multiple packages that are needed to enable different
-functionalities of the MPC Core Kit JS SDK. You can choose the packages you want to install
-according to the functionalities you want to enable in your application. In this doc we have
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+The MPC Core Kit React Native SDK contains multiple packages that are needed to enable different
+functionalities of the MPC Core Kit React Native SDK. You can choose the packages you want to
+install according to the functionalities you want to enable in your application. In this doc we have
 highlighted all of the packages and their functionalities.
 
 ## Base MPC Core Kit React Native Package
@@ -28,17 +31,24 @@ recommend using it while working with Typescript.
 npm install @web3auth/base
 ```
 
-## EthereumSigningProvider
+## Ethereum Signing Provider
 
 This package gives EIP1193 compatible Ethereum signing provider. This provider is used to make calls
 to the selected blockchain, and can be used with `web3.js`, `ethers.js`, or `viem` to make
-integration with Ethereum-compatible chains more easier.
+integration with EVM compatible chains easier.
 
 ```bash npm2yarn
 npm install @web3auth/ethereum-mpc-provider
 ```
 
-## Additional Configuration for React Native
+## Additional Configuration
+
+### Install the following packages
+
+```bash npm2yarn
+npm install react-native-react-bridge react-native-webview
+npm install --save-dev esbuild-plugins-node-modules-polyfill ts-node empty-module @craftzdog/react-native-buffer
+```
 
 ### Add a Custom Transformer
 
@@ -65,6 +75,56 @@ module.exports.transform = function ({ src, filename, options }) {
 };
 ```
 
+<Tabs
+  defaultValue="bare"
+  values={[
+    { label: "Bare React Native", value: "bare" },
+    { label: "Expo", value: "expo" },
+  ]}
+>
+
+<TabItem value="bare">
+
+```js title="metro.config.js"
+require("ts-node/register");
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+
+const config = {
+  resolver: {
+    extraNodeModules: {
+      assert: require.resolve("empty-module"), // assert can be polyfilled here if needed
+      http: require.resolve("empty-module"), // stream-http can be polyfilled here if needed
+      https: require.resolve("empty-module"), // https-browserify can be polyfilled here if needed
+      os: require.resolve("empty-module"), // os-browserify can be polyfilled here if needed
+      url: require.resolve("empty-module"), // url can be polyfilled here if needed
+      zlib: require.resolve("empty-module"), // browserify-zlib can be polyfilled here if needed
+      path: require.resolve("empty-module"),
+      crypto: require.resolve("empty-module"),
+      buffer: require.resolve("@craftzdog/react-native-buffer"),
+    },
+
+    assetExts: ["svg", "png", "json"],
+    sourceExts: ["js", "mjs", "cjs", "jsx", "ts", "tsx"],
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: true,
+        inlineRequires: true,
+      },
+    }),
+    // This detects entry points of React app and transforms them
+    babelTransformerPath: require.resolve("./customTransformer.js"),
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+```
+
+</TabItem>
+
+<TabItem value="expo">
+
 ```js title="metro.config.js"
 const config = getDefaultConfig(__dirname);
 
@@ -89,19 +149,13 @@ config.resolver.extraNodeModules = {
 module.exports = config;
 ```
 
+</TabItem>
+</Tabs>
+
 ### Add Buffer in your globals/ entry level file
 
 No need for `react-native-quick-crypto` any longer, just polyfill buffer in your entry file.
 
 ```js title="globals.ts"
 global.Buffer = require("buffer").Buffer;
 ```
-
-## Troubleshooting
-
-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 **[React Native Troubleshooting Guide](/troubleshooting/metro-issues-mpc)**

docs/sdk/mpc-core-kit/mpc-core-kit-react-native/signing.mdx

@@ -1,7 +1,7 @@
 ---
-title: "Signing in MPC Core Kit JS SDK"
+title: "Signing in MPC Core Kit React Native SDK"
 sidebar_label: "Signing"
-description: "Web3Auth MPC Core Kit JS SDK - Signing | Documentation - Web3Auth"
+description: "Web3Auth MPC Core Kit React Native SDK - Signing | Documentation - Web3Auth"
 ---
 
 import Ed25519Installation from "@site/src/common/sdk/mpc-core-kit/_solana-installation.mdx";
@@ -210,8 +210,8 @@ const receipt = await web3.eth.sendTransaction({
 
 ### Others
 
-The secp256k1 support is not limited to only Ethereum-compatible chains. You can use the SDK with
-any blockchain ecosystem that supports the secp256k1 curve.
+The secp256k1 support is not limited to only EVM compatible chains. You can use the SDK with any
+blockchain ecosystem that supports the secp256k1 curve.
 
 #### Get PublicKey