Merge pull request #1021 from Web3Auth/mpc-ck-rn

Add mpc ck react native migration guide

docs/migration-guides/mpc-core-kit-react-native-migration.mdx

@@ -0,0 +1,218 @@
+---
+title: MPC Core Kit React Native SDK Migration
+description: MPC Core Kit React Native SDK Migration | Documentation - Web3Auth"
+sidebar_label: React Native SDK Migration
+---
+
+## Overview
+
+This migration guide provides steps for upgrading from the Web3Auth MPC CoreKit Web SDK to the new
+MPC CoreKit React Native SDK. This new SDK is specifically designed and optimized for React Native
+applications, providing better performance and a more native experience.
+
+#### Key Benefits of the React Native SDK:
+
+- Native Performance: Optimized for React Native's architecture, for faster speeds across the board
+- Platform-specific Features: Takes advantage of React Native capabilities for session and share
+  storage
+- Improved Developer Experience: APIs designed specifically for React Native development, reducing
+  the need to multiple extra polyfills
+
+## Breaking Changes
+
+### Package Changes
+
+Removes the need of using the `@toruslabs/react-native-tss-lib-bridge` & `@web3auth/mpc-core-kit`
+packages and introduces the `@web3auth/react-native-mpc-core-kit` package which includes the TSS
+library bridge and MPC Core Kit functionality in a single package.
+
+:::note
+
+You might still keep the `@web3auth/mpc-core-kit` package for some common helper functions and
+types.
+
+:::
+
+```tsx
+// remove-next-line
+import { Bridge, tssLib } from "@toruslabs/react-native-tss-lib-bridge";
+import { CHAIN_NAMESPACES } from "@web3auth/base";
+import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
+import {
+  COREKIT_STATUS,
+  generateFactorKey,
+  JWTLoginParams,
+  keyToMnemonic,
+  makeEthereumSigner,
+  mnemonicToKey,
+  parseToken,
+  TssShareType,
+  WEB3AUTH_NETWORK,
+  // remove-next-line
+  Web3AuthMPCCoreKit,
+} from "@web3auth/mpc-core-kit";
+
+// add-next-line
+import { Bridge, mpclib, TssDklsLib } from "@web3auth/react-native-mpc-core-kit";
+```
+
+### Constructor Changes
+
+Use the `Web3AuthMPCCoreKitRN` class from the `mpclib` object imported from
+`@web3auth/react-native-mpc-core-kit` for creating an instance. Additionally, pass the `TssDklsLib`
+that is directly exposed from the SDK as the `tssLib` parameter.
+
+:::info
+
+- Use `TssDklsLib` for generating `secp256k1` curve signatures (ECDSA)
+- Use `TssFrostLib` for generating `ed25519` curve signatures (EdDSA)
+
+:::
+
+```tsx
+// remove-next-line
+const coreKitInstance = new Web3AuthMPCCoreKit({...}):
+// add-next-line
+const coreKitInstance = new mpclib.Web3AuthMPCCoreKitRN({
+  web3AuthClientId,
+  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
+  // setupProviderOnInit: false, // needed to skip the provider setup
+  uxMode: "react-native",
+  // remove-next-line
+  tssLib: tsslibInstance, // tss lib bridge for react native
+  // add-next-line
+  tssLib: TssDklsLib, // tss lib bridge for react native
+  manualSync: true, // This is the recommended approach
+  storage: asyncStorageKey, // Add the storage property
+});
+```
+
+### Add the Bridge in your codebase
+
+Add the Bridge component at the bottom of your App's codebase where the MPC Instance needs to be
+used. The Bridge component creates a WebView instance that executes the MPC Core Kit library. The
+Bridge component also exposes a `resolveReady` callback that notifies when the bridge is ready to be
+used.
+
+```ts
+
+// remove-next-line
+import { Bridge, tssLib } from "@toruslabs/react-native-tss-lib-bridge";
+// add-next-line
+import { Bridge, mpclib, TssDklsLib } from "@web3auth/react-native-mpc-core-kit";
+
+function Home() {
+return (
+    <View style={styles.container}>
+      // remove-next-line
+      <Bridge logLevel={"debug"} />
+      // add-start
+      <Bridge
+        logLevel={"DEBUG"}
+        resolveReady={(ready) => {
+          setBridgeReady(ready);
+        }}
+      />
+      // add-end
+    </View>
+  );
+}
+```
+
+### 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]);
+```
+
+### Add a Custom Transformer
+
+Add a custom transformer to your project by creating a new file called `customTransformer.js` and
+updating your metro config to use it. This transformer is specifically designed to handle the
+polyfills and transformations needed by the MPC Core Kit SDK.
+
+```js title="customTransformer.js"
+const { nodeModulesPolyfillPlugin } = require("esbuild-plugins-node-modules-polyfill");
+const reactNativeReactBridgeTransformer = require("react-native-react-bridge/lib/plugin");
+const esbuildOptions = {
+  plugins: [
+    nodeModulesPolyfillPlugin({
+      globals: {
+        Buffer: true,
+        crypto: true,
+      },
+      // modules: {
+      //     Buffer : true,
+      // }
+    }),
+  ],
+};
+module.exports.transform = function ({ src, filename, options }) {
+  const transform = reactNativeReactBridgeTransformer.createTransformer(esbuildOptions);
+  return transform({ src, filename, options });
+};
+```
+
+```js title="metro.config.js"
+const config = getDefaultConfig(__dirname);
+
+// focus-start
+// remove-next-line
+config.transformer.babelTransformerPath = require.resolve("react-native-react-bridge/lib/plugin");
+// add-next-line
+config.transformer.babelTransformerPath = require.resolve("./customTransformer.js");
+// focus-end
+
+config.resolver.extraNodeModules = {
+  ...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"),
+};
+// config.resolveRequest = (context, moduleName, platform) => {
+//   if (moduleName === "crypto") {
+//     // when importing crypto, resolve to react-native-quick-crypto
+//     return context.resolveRequest(context, "react-native-quick-crypto", platform);
+//   }
+//   // otherwise chain to the standard Metro resolver.
+//   return context.resolveRequest(context, moduleName, platform);
+// }
+module.exports = config;
+```
+
+### 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"
+//remove-start
+import { install } from "react-native-quick-crypto";
+
+install();
+// remove-end
+
+// add-next-line
+global.Buffer = require("buffer").Buffer;
+```

docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-jwt.mdx

@@ -151,6 +151,15 @@ By default, the ed25519 key is formatted in base58 and is 64 bytes long. This co
 32 bytes as the seed (also known as the private key) and the last 32 bytes as the public key. Ensure
 that the first 32 bytes are provided in hexadecimal format when using the ed25519 seed.
 
+:::info ED25519 Seed
+
+The ed25519 seed is a 64-byte value, where the first 32 bytes represent the private key and the last
+32 bytes represent the public key. When using the ed25519 seed, ensure that the first 32 bytes
+(private key) are provided in hexadecimal format. For example, a sample ed25519 seed in hexadecimal
+format could be `0x1a2b3c4d5e6f7890a1b2c3d4e5f67890a1b2c3d4e5f67890a1b2c3d4e5f6789`.
+
+:::
+
 ```tsx
 import { JWTLoginParams } from "@web3auth/mpc-core-kit";
 

docs/sdk/mpc-core-kit/mpc-core-kit-js/authentication/login-oauth.mdx

@@ -202,6 +202,15 @@ By default, the ed25519 key is formatted in base58 and is 64 bytes long. This co
 32 bytes as the seed (also known as the private key) and the last 32 bytes as the public key. Ensure
 that the first 32 bytes are provided in hexadecimal format when using the ed25519 seed.
 
+:::info ED25519 Seed
+
+The ed25519 seed is a 64-byte value, where the first 32 bytes represent the private key and the last
+32 bytes represent the public key. When using the ed25519 seed, ensure that the first 32 bytes
+(private key) are provided in hexadecimal format. For example, a sample ed25519 seed in hexadecimal
+format could be `0x1a2b3c4d5e6f7890a1b2c3d4e5f67890a1b2c3d4e5f67890a1b2c3d4e5f6789`.
+
+:::
+
 ```tsx
 import { SubVerifierDetailsParams } from "@web3auth/mpc-core-kit";
 

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

@@ -8,4 +8,4 @@ hide_table_of_contents: true
 import Examples from "@site/src/components/Examples";
 import { coreKitMPCWebExamples, coreKitMPCReactNativeExamples } from "@site/src/common/maps";
 
-<Examples exampleMap={[...coreKitMPCWebExamples, ...coreKitMPCReactNativeExamples]} />
+<Examples exampleMap={[...coreKitMPCWebExamples]} />

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

@@ -19,6 +19,13 @@ After installation, the next step to use Web3Auth MPC Core Kit is to configure &
 Please note that these are the most critical steps where you need to pass on different parameters
 according to the preference of your project.
 
+:::info
+
+Ensure that you configure your authentication method and verifier prior to initializing the SDK in
+your codebase. This will streamline the implementation process.
+
+:::
+
 ### Parameters
 
 The Web3AuthMPCCoreKit constructor takes an object with `Web3AuthOptions` as input which helps you

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

@@ -18,6 +18,14 @@ flexibility to customize the UI and UX of the authentication process.
 npm install @web3auth/mpc-core-kit
 ```
 
+:::note
+
+If you were using the MPC Core Kit JS SDK in your react native application, you need to follow this
+[migration guide](/migration-guides/mpc-core-kit-react-native-migration) to migrate to the new MPC
+Core Kit React Native SDK.
+
+:::
+
 ## Common Types and Interfaces
 
 This package gives access to common types and interfaces for Web3Auth. This comes in handy by
@@ -42,7 +50,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
@@ -67,4 +75,3 @@ building the app. We have created guides for different bundlers to help you with
 
 - 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)**