demo updates

Author: himanshuchawla009

demo/redirect-flow-example/package-lock.json

@@ -12,21 +12,23 @@ import {
   parseToken,
   factorKeyCurve,
   makeEthereumSigner,
-  SigType,
+  SIG_TYPE,
 } from "@web3auth/mpc-core-kit";
-import Web3 from "web3";
+import Web3, { core } from "web3";
 import { CHAIN_NAMESPACES, CustomChainConfig, IProvider } from "@web3auth/base";
 import { EthereumSigningProvider } from "@web3auth/ethereum-mpc-provider";
 import { BN } from "bn.js";
 import { KeyType, Point } from "@tkey/common-types";
-// import { tssLib } from "@toruslabs/tss-dkls-lib";
-// import{ tssLib } from "@toruslabs/tss-frost-lib";
-import{ tssLib } from "@toruslabs/tss-frost-lib-bip340";
+import { tssLib as tssLibDkls } from "@toruslabs/tss-dkls-lib";
+import{ tssLib as tssLibFrost } from "@toruslabs/tss-frost-lib";
+import{ tssLib as tssLibFrostBip340 } from "@toruslabs/tss-frost-lib-bip340";
 
 import "./App.css";
 import jwt, { Algorithm } from "jsonwebtoken";
 import { flow } from "./flow";
 
+type TssLib = typeof tssLibDkls | typeof tssLibFrost | typeof tssLibFrostBip340;
+
 const uiConsole = (...args: any[]): void => {
   const el = document.querySelector("#console>p");
   if (el) {
@@ -48,16 +50,6 @@ const DEFAULT_CHAIN_CONFIG: CustomChainConfig = {
   decimals: 18,
 };
 
-const coreKitInstance = new Web3AuthMPCCoreKit({
-  web3AuthClientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
-  web3AuthNetwork: selectedNetwork,
-  uxMode: "redirect",
-  manualSync: true,
-  storage: window.localStorage,
-  // sessionTime: 3600, // <== can provide variable session time based on user subscribed plan
-  tssLib,
-  useDKG: false,
-});
 
 const privateKey = "MEECAQAwEwYHKoZIzj0CAQYIKoZIzj0DAQcEJzAlAgEBBCCD7oLrcKae+jVZPGx52Cb/lKhdKxpXjl9eGNa1MlY57A==";
 const jwtPrivateKey = `-----BEGIN PRIVATE KEY-----\n${privateKey}\n-----END PRIVATE KEY-----`;
@@ -99,7 +91,18 @@ function App() {
   const [question, setQuestion] = useState<string | undefined>(undefined);
   const [newQuestion, setNewQuestion] = useState<string | undefined>(undefined);
   const securityQuestion = useMemo(() => new TssSecurityQuestion(), []);
-
+  const [selectedTssLib, setSelectedTssLib] = useState<TssLib>(tssLibDkls);
+  const [coreKitInstance, setCoreKitInstance] = useState<Web3AuthMPCCoreKit>(
+    new Web3AuthMPCCoreKit({
+        web3AuthClientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
+        web3AuthNetwork: selectedNetwork,
+        uxMode: "redirect",
+        manualSync: true,
+        storage: window.localStorage,
+        tssLib: selectedTssLib,
+        useDKG: false,
+      })
+  );
   async function setupProvider(chainConfig?: CustomChainConfig) {
     if (coreKitInstance.keyType !== KeyType.secp256k1) {
       console.warn(`Ethereum requires keytype ${KeyType.secp256k1}, skipping provider setup`);
@@ -112,44 +115,58 @@ function App() {
 
   // decide whether to rehydrate session
   const rehydrate = true;
-  const initialized = useRef(false);
-  useEffect(() => {
-    const init = async () => {
-      // Example config to handle redirect result manually
-      if (coreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
-        await coreKitInstance.init({ handleRedirectResult: false, rehydrate });
-        if (window.location.hash.includes("#state")) {
-          await coreKitInstance.handleRedirectResult();
-        }
-      }
-      if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
-        await setupProvider();
-      }
 
-      if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
-        uiConsole(
-          "required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]"
-        );
+
+  const init = async (newCoreKitInstance: Web3AuthMPCCoreKit) => {
+    // Example config to handle redirect result manually
+    if (newCoreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
+      await newCoreKitInstance.init({ handleRedirectResult: false, rehydrate });
+      if (window.location.hash.includes("#state")) {
+        await newCoreKitInstance.handleRedirectResult();
       }
+    }
+    if (newCoreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
+      await setupProvider();
+    }
 
-      console.log("coreKitInstance.status", coreKitInstance.status);
-      setCoreKitStatus(coreKitInstance.status);
+    if (newCoreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
+      uiConsole(
+        "required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]"
+      );
+    }
 
-      try {
-        let result = securityQuestion.getQuestion(coreKitInstance!);
-        setQuestion(result);
-        uiConsole("security question set");
-      } catch (e) {
-        uiConsole("security question not set");
-      }
-    };
-    if (!initialized.current)
+    console.log("newCoreKitInstance.status", newCoreKitInstance.status);
+    setCoreKitStatus(newCoreKitInstance.status);
+
+    try {
+      let result = securityQuestion.getQuestion(newCoreKitInstance!);
+      setQuestion(result);
+      uiConsole("security question set");
+    } catch (e) {
+      uiConsole("security question not set");
+    }
+  };
+
+
+  useEffect(() => {
+    const instance =  new Web3AuthMPCCoreKit({
+      web3AuthClientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
+      web3AuthNetwork: selectedNetwork,
+      uxMode: "redirect",
+      manualSync: true,
+      storage: window.localStorage,
+      tssLib: selectedTssLib,
+      useDKG: false,
+    })
+    setCoreKitInstance(
+      instance
+    )
+    if (instance.status === COREKIT_STATUS.NOT_INITIALIZED)
     {
-      init();
-      initialized.current = true;
+      init(instance);
     }
 
-  }, []);
+  }, [selectedTssLib]);
 
   useEffect(() => {
     if (provider) {
@@ -367,19 +384,18 @@ function App() {
   };
 
   const signMessage = async (): Promise<any> => {
-    if (coreKitInstance.sigType === SigType.ecdsa_secp256k1) {
+    if (coreKitInstance.sigType === SIG_TYPE.ECDSA_SECP256K1) {
       if (!web3) {
         uiConsole("web3 not initialized yet");
         return;
       }
       const fromAddress = (await web3.eth.getAccounts())[0];
-     
       const message = "hello";
       const signedMessage = await web3.eth.personal.sign(message, fromAddress, "");
 
 
       uiConsole(signedMessage);
-    } else if (coreKitInstance.sigType === SigType.ed25519 || coreKitInstance.sigType === SigType.bip340) {
+    } else if (coreKitInstance.sigType === SIG_TYPE.ED25519 || coreKitInstance.sigType === SIG_TYPE.BIP340) {
       const msg = Buffer.from("hello signer!");
       const sig = await coreKitInstance.sign(msg);
       uiConsole(sig.toString("hex"));
@@ -575,6 +591,32 @@ function App() {
     await coreKitInstance.commitChanges();
   };
 
+  const tssLibSelector = (
+    <div className="flex-container">
+      <label>TSS Library:</label>
+      <select 
+        value={selectedTssLib === tssLibDkls ? "dkls" : selectedTssLib === tssLibFrost ? "frost" : "frostBip340"} 
+        onChange={(e) => {
+          switch(e.target.value) {
+            case "dkls":
+              setSelectedTssLib(tssLibDkls);
+              break;
+            case "frost":
+              setSelectedTssLib(tssLibFrost);
+              break;
+            case "frostBip340":
+              setSelectedTssLib(tssLibFrostBip340);
+              break;
+          }
+        }}
+      >
+        <option value="dkls">DKLS</option>
+        <option value="frost">FROST</option>
+        <option value="frostBip340">FROST BIP340</option>
+      </select>
+    </div>
+  );
+
   const loggedInView = (
     <>
       <h2 className="subtitle">Account Details</h2>
@@ -733,6 +775,7 @@ function App() {
 
   const unloggedInView = (
     <>
+      {tssLibSelector}
       <input value={mockEmail} onChange={(e) => setMockEmail(e.target.value)}></input>
       <button onClick={() => loginWithMock()} className="card">
         MockLogin

demo/redirect-flow-example/src/App.tsx

@@ -41,6 +41,9 @@
     },
     "@toruslabs/tss-frost-lib": {
       "optional": true
+    },
+    "@toruslabs/tss-frost-lib-bip340": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -49,15 +52,15 @@
     "@tkey/share-serialization": "^15.1.0",
     "@tkey/storage-layer-torus": "^15.1.0",
     "@tkey/tss": "^15.1.0",
-    "@toruslabs/constants": "^14.0.0",
+    "@toruslabs/constants": "^14.2.0",
     "@toruslabs/customauth": "^20.3.0",
     "@toruslabs/elliptic-wrapper": "^0.1.1",
-    "@toruslabs/fetch-node-details": "^14.0.1",
+    "@toruslabs/fetch-node-details": "^14.2.0",
     "@toruslabs/fnd-base": "^14.2.0",
     "@toruslabs/metadata-helpers": "^6.0.0",
     "@toruslabs/openlogin-utils": "^8.2.1",
     "@toruslabs/session-manager": "^3.1.0",
-    "@toruslabs/torus.js": "^15.1.0",
+    "@toruslabs/torus.js": "^15.1.1",
     "@toruslabs/tss-client": "^3.3.0-alpha.0",
     "@toruslabs/tss-frost-client": "^1.0.0-alpha.0",
     "@toruslabs/tss-frost-common": "^1.0.1",

package-lock.json

@@ -1,4 +1,4 @@
-import { TORUS_SAPPHIRE_NETWORK } from "@toruslabs/constants";
+import { SIG_TYPE, TORUS_SAPPHIRE_NETWORK } from "@toruslabs/constants";
 
 export const WEB3AUTH_NETWORK = {
   MAINNET: TORUS_SAPPHIRE_NETWORK.SAPPHIRE_MAINNET,
@@ -51,3 +51,5 @@ export const FIELD_ELEMENT_HEX_LEN = 32 * 2; // Length of secp256k1 field elemen
 
 export const MAX_FACTORS = 10; // Maximum number of factors that can be added to an account.
 export const SOCIAL_TKEY_INDEX = 1;
+
+export { SIG_TYPE };