diff --git a/demo/redirect-flow-example/public/serviceworker/sw.js b/demo/redirect-flow-example/public/serviceworker/sw.js new file mode 100644 index 0000000..de1d088 --- /dev/null +++ b/demo/redirect-flow-example/public/serviceworker/sw.js @@ -0,0 +1,315 @@ +/* eslint-disable */ +function getScope() { + return self.registration.scope; +} + +self.addEventListener("message", function (event) { + if (event.data && event.data.type === "SKIP_WAITING") { + self.skipWaiting(); + } +}); + +self.addEventListener("fetch", function (event) { + try { + const url = new URL(event.request.url); + if (url.pathname.includes("redirect") && url.href.includes(getScope())) { + event.respondWith( + new Response( + new Blob( + [ + ` + + + + + + + Redirect + + + + +
+ +

You can close this window now

+
+ + + + + +${""} + `, + ], + { type: "text/html" } + ) + ) + ); + } + } catch (error) { + console.error(error); + } +}); diff --git a/demo/redirect-flow-example/src/App.tsx b/demo/redirect-flow-example/src/App.tsx index 7f22f97..1a3381d 100644 --- a/demo/redirect-flow-example/src/App.tsx +++ b/demo/redirect-flow-example/src/App.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK, - SubVerifierDetailsParams, COREKIT_STATUS, makeEthereumSigner, AggregateVerifierLoginParams, @@ -117,9 +116,9 @@ export const DEFAULT_CHAIN_CONFIG: CustomChainConfig = { }; function App() { - const { coreKitInstance, passkeyPlugin, setCoreKitInstance, coreKitStatus, setCoreKitStatus, provider, setProvider, setWeb3 } = useCoreKit(); + const { coreKitInstance, passkeyPlugin, setCoreKitInstance, coreKitStatus, setCoreKitStatus, provider, setProvider, setWeb3, setUserInfo, globalLoading, getShareDescriptions } = useCoreKit(); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const navigate = useNavigate(); const [selectedTssLib, setSelectedTssLib] = useState(tssLibDkls); @@ -136,16 +135,17 @@ function App() { // decide whether to rehydrate session const init = async () => { // Example config to handle redirect result manually + setIsLoading(true); if (coreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) { - await coreKitInstance.init({ rehydrate: true, handleRedirectResult: true }); + await coreKitInstance.init({ rehydrate: true, handleRedirectResult: false }); setCoreKitInstance(coreKitInstance); await passkeyPlugin.initWithMpcCoreKit(coreKitInstance); - if (window.location.hash.includes("state")) { - // await coreKitInstance.handleRedirectResult(); - } + setIsLoading(false); } if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) { await setupProvider(); + setUserInformation(); + setIsLoading(false); } if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) { @@ -154,16 +154,31 @@ function App() { "required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]" ); } - console.log("coreKitInstance.status", coreKitInstance.status); setCoreKitStatus(coreKitInstance.status); }; + useEffect(() => { + const checkForRecoveryInitiation = async () => { + if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) { + navigate("/recovery"); + uiConsole( + "required more shares, please enter your backup/ device factor key, or reset account unrecoverable once reset, please use it with caution]" + ); + } + } + checkForRecoveryInitiation(); + }, [coreKitStatus]) + + useEffect(() => { + setIsLoading(globalLoading || false); + }, [globalLoading]); + useEffect(() => { const instance = new Web3AuthMPCCoreKit({ web3AuthClientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", web3AuthNetwork: selectedNetwork, - uxMode: "redirect", + uxMode: "popup", manualSync: false, storage: window.localStorage, tssLib: selectedTssLib, @@ -190,32 +205,30 @@ function App() { if (!coreKitInstance) { throw new Error("initiated to login"); } - const verifierConfig = { - aggregateVerifierIdentifier: "web-aggregate-core-kit", - subVerifierDetailsArray: [ - { - typeOfLogin: "google", - verifier: "web3-aggreate-google", - clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com", - jwtParams: { - verifierIdField: "email", - }, - }, - ], - }; + const verifierConfig = { + subVerifierDetails: { + typeOfLogin: "google", + verifier: "w3a-google-demo", + clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", + }, + }; // const verifierConfig = { - // subVerifierDetails: { - // typeOfLogin: "google", - // verifier: "w3-google-temp", - // clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com", - // }, - // } as SubVerifierDetailsParams; + // aggregateVerifierIdentifier: "web-aggregate-core-kit", + // subVerifierDetails: [ + // { + // typeOfLogin: "google", + // verifier: "web3-aggreate-google", + // clientId: "759944447575-6rm643ia1i9ngmnme3eq5viiep5rp6s0.apps.googleusercontent.com", + // }, + // ], + // }; await coreKitInstance.loginWithOAuth(verifierConfig as any); if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) { await coreKitInstance.commitChanges(); // Needed for new accounts } setCoreKitStatus(coreKitInstance.status); + setUserInformation(); } catch (error: unknown) { console.error(error); } finally { @@ -249,10 +262,11 @@ function App() { await coreKitInstance.loginWithOAuth(verifierConfig); // IMP END - Login - setCoreKitStatus(coreKitInstance.status); if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) { await coreKitInstance.commitChanges(); // Needed for new accounts } + setCoreKitStatus(coreKitInstance.status); + setUserInformation(); } catch (error: unknown) { uiConsole(error); } finally { @@ -260,6 +274,11 @@ function App() { } }; + const setUserInformation = () => { + const userInfo = coreKitInstance.getUserInfo(); + setUserInfo(userInfo); + getShareDescriptions(); + } return (
{isLoading ? ( @@ -274,7 +293,9 @@ function App() { coreKitStatus === COREKIT_STATUS.LOGGED_IN ? ( ) : ( - + <> + + ) } diff --git a/demo/redirect-flow-example/src/components/Badge.tsx b/demo/redirect-flow-example/src/components/Badge.tsx new file mode 100644 index 0000000..60fafbd --- /dev/null +++ b/demo/redirect-flow-example/src/components/Badge.tsx @@ -0,0 +1,89 @@ +import * as React from "react"; +import { cn } from "./Card"; + +interface BadgeProps { + size?: "small" | "large"; + variant?: "default" | "primary" | "success" | "danger" | "warning" | "info"; + pill?: boolean; + border?: boolean; + clearIcon?: boolean; + id?: string; + classes?: { + container?: string; + clearIcon?: string; + }; + component?: React.ElementType; + onClear?: () => void; + children?: React.ReactNode; +} + +const Badge: React.FC = ({ + size = "small", + variant = "default", + pill = false, + border = false, + clearIcon = false, + id = "", + classes = {}, + component: Component = "span", + onClear, + children, +}) => { + const sizeClasses = size === "large" ? "py-0.5 px-3 text-xs leading-4 h-6" : "py-0.5 px-2.5 text-xs leading-4 h-5"; + const variantClasses = { + default: "bg-app-gray-100 text-app-gray-900 dark:bg-app-gray-700 dark:text-app-gray-300", + primary: "bg-app-primary-100 text-app-primary-800 dark:bg-app-primary-900 dark:text-app-primary-400", + success: "bg-app-green-100 text-app-green-800 dark:bg-app-gray-700 dark:text-app-green-400", + danger: "bg-app-red-100 text-app-red-800 dark:bg-app-gray-700 dark:text-app-red-400", + warning: "bg-app-yellow-100 text-app-yellow-800 dark:bg-app-gray-700 dark:text-app-yellow-300", + info: "bg-app-primary-100 text-app-primary-800 dark:bg-app-primary-900 dark:text-app-primary-400", + }[variant]; + const borderClasses = border ? `border ${variantClasses.split(" ")[1]}-border` : ""; + + return ( + + {children} + {clearIcon && ( + + )} + + ); +}; + +export default Badge; \ No newline at end of file diff --git a/demo/redirect-flow-example/src/components/MFACard.tsx b/demo/redirect-flow-example/src/components/MFACard.tsx index 9d9eb97..c4a9455 100644 --- a/demo/redirect-flow-example/src/components/MFACard.tsx +++ b/demo/redirect-flow-example/src/components/MFACard.tsx @@ -6,40 +6,18 @@ import { BN } from "bn.js"; import { HiOutlineMail } from "react-icons/hi"; import { COREKIT_STATUS } from "@web3auth/mpc-core-kit"; import { useNavigate } from "react-router-dom"; +import { ShareDescription } from "./types"; +import { HiOutlineKey, HiOutlineLockOpen, HiOutlineDocumentDuplicate } from "react-icons/hi"; -const FACTOR_MAP: Record = { - device: { title: "Device", icon: "mobile-icon" }, - seedPhrase: { title: "Recovery Phrase", icon: "key-solid-icon" }, - social: { title: "Social Recovery Factor", icon: "key-solid-icon" }, - password: { title: "Password", icon: "key-solid-icon" }, +const FACTOR_MAP: Record = { + Authenticator: { title: "Authenticator", icon: }, + seedPhrase: { title: "Seed Phrase", icon: }, + tssSecurityQuestions: { title: "Password", icon: }, }; - -const shareDetails = [ - // Example share details - { shareType: "device", details: "Chrome 91 (Windows)" }, - { shareType: "seedPhrase", details: "Recovery Phrase" }, -].map((share) => ({ - title: FACTOR_MAP[share.shareType]?.title || "", - details: share.details, - icon: FACTOR_MAP[share.shareType]?.icon || "", -})); - const MfaCard: React.FC = () => { - const { setAddShareType, coreKitInstance, setCoreKitStatus } = useCoreKit(); + const { setAddShareType, coreKitInstance, setCoreKitStatus, shareDescriptions, existingModules, userInfo } = useCoreKit(); const navigate = useNavigate(); - const [userInfo, setUserInfo] = React.useState({}); - - React.useEffect(() => { - const fetchUserInfo = async () => { - if (!coreKitInstance) { - return; - } - const userInfo = await coreKitInstance.getUserInfo(); - setUserInfo(userInfo); - }; - fetchUserInfo(); - }, [coreKitInstance]); const addMfa = (addShareType: AddShareType) => { console.log("Add MFA"); @@ -79,54 +57,62 @@ const MfaCard: React.FC = () => {
- - - + {!existingModules.includes("tssSecurityQuestions") && ( + + )} + {!existingModules.includes("seedPhrase") && ( + + )} + {!existingModules.includes("Authenticator") && ( + + )}
- -
-
-
- {["email_passwordless", "jwt"].includes(userInfo.typeOfLogin) ? ( - - ) : ( - {`${userInfo.typeOfLogin} - )} -
-
-

{userInfo.typeOfLogin}

-

{userInfo.verifierId}

+ { + userInfo && ( +
+
+
+ {["email_passwordless", "jwt"].includes(userInfo.typeOfLogin) ? ( + + ) : ( + {`${userInfo.typeOfLogin} + )} +
+
+

{userInfo.typeOfLogin}

+

{userInfo.verifierId}

+
+ {shareDescriptions && shareDescriptions.length > 0 && shareDescriptions.map((shareDescription: ShareDescription) => ( +
+
+ {/* */} + {FACTOR_MAP[shareDescription.module].icon} +
+
+

{FACTOR_MAP[shareDescription.module].title}

+

{new Date(shareDescription.dateAdded).toLocaleString()}

+
+
+ ))}
- { - // shareDetails.map((shareDetail) => ( - //
- //
- // {/* */} - //
- //
- //

{shareDetail.title}

- //

{shareDetail.details}

- //
- //
- // )) - } -
+ ) + } ); }; diff --git a/demo/redirect-flow-example/src/components/NavBar.tsx b/demo/redirect-flow-example/src/components/NavBar.tsx index 1f5f706..0e52c4e 100644 --- a/demo/redirect-flow-example/src/components/NavBar.tsx +++ b/demo/redirect-flow-example/src/components/NavBar.tsx @@ -5,12 +5,12 @@ import { useNavigate } from "react-router-dom"; import { COREKIT_STATUS } from "@web3auth/mpc-core-kit"; const Header: React.FC = () => { - - const { coreKitInstance, setCoreKitStatus, coreKitStatus } = useCoreKit(); + const { coreKitInstance, setCoreKitStatus, userInfo, setUserInfo, setGlobalLoading } = useCoreKit(); const [isLogin, setIsLogin] = React.useState(true); React.useEffect(() => { try { - if (coreKitStatus === COREKIT_STATUS.LOGGED_IN) { + if (userInfo) { + setCoreKitStatus(COREKIT_STATUS.LOGGED_IN); setIsLogin(true); } else { setIsLogin(false); @@ -19,13 +19,21 @@ const Header: React.FC = () => { console.error(error); setIsLogin(false); } - }, [coreKitStatus]); + }, [userInfo]); const navigate = useNavigate(); const logout = async () => { - await coreKitInstance.logout(); - setCoreKitStatus(COREKIT_STATUS.NOT_INITIALIZED) - navigate("/"); + setGlobalLoading(true); + try { + await coreKitInstance.logout(); + setCoreKitStatus(COREKIT_STATUS.NOT_INITIALIZED); + setUserInfo(undefined); + navigate("/"); + } catch (error) { + console.error(error); + } finally { + setGlobalLoading(false); + } }; return ( @@ -33,7 +41,6 @@ const Header: React.FC = () => {
web3auth demo logo web3auth demo logo - {!isLogin ? ( @@ -107,7 +107,6 @@ const PasskeysCard: React.FC = () => {
@@ -119,3 +118,125 @@ const PasskeysCard: React.FC = () => { }; export { PasskeysCard }; + +// import * as React from "react"; +// import { Button } from "./Button"; +// import { Card } from "./Card"; +// import { useCoreKit } from "../composibles/useCoreKit"; +// import { shouldSupportPasskey } from "../App"; +// import { HiOutlineMinusCircle } from "react-icons/hi"; +// import { HiOutlineKey } from "react-icons/hi"; + +// const PasskeysCard: React.FC = () => { +// const { passkeyPlugin, coreKitInstance } = useCoreKit(); +// const [hasPasskeys, setHasPasskeys] = React.useState(false); +// const [isLoading, setIsLoading] = React.useState(false); +// interface Passkey { +// verifier_id: string; +// verifier: string; +// passkey_pub_key: string; +// label: string; +// } + +// const [passkeys, setPasskeys] = React.useState([]); + +// React.useEffect(() => { +// listPasskeys(); +// }, []); + +// React.useEffect(() => { +// if (passkeys.length > 0) { +// setHasPasskeys(true); +// } +// }, [passkeys]); + +// const deletePasskey = (id: string) => { +// console.log("delete passkey", id); +// passkeyPlugin?.unRegisterPasskey({ credentialPubKey: id, verifier: "web3auth" } as any); +// }; + +// const registerPasskey = async () => { +// setIsLoading(true); +// try { +// if (!coreKitInstance) { +// throw new Error("coreKitInstance is not set"); +// } +// if (!passkeyPlugin) { +// throw new Error("passkeyPlugin is not set"); +// } +// const result = shouldSupportPasskey(); +// if (!result.isBrowserSupported) { +// console.log("Browser not supported"); +// throw new Error("Browser not supported"); +// } +// await passkeyPlugin.registerPasskey(); +// } catch (error) { +// console.error(error); +// } finally { +// setIsLoading(false); +// } +// }; + +// const listPasskeys = async () => { +// try { +// if (!coreKitInstance) { +// throw new Error("coreKitInstance is not set"); +// } +// if (!passkeyPlugin) { +// throw new Error("passkeyPlugin is not set"); +// } +// const passkeys = await passkeyPlugin.listPasskeys(); +// console.log({ passkeyPlugin, passkeys }); +// setPasskeys(passkeys); +// } catch (error) { +// console.error(error); +// } +// }; + +// return ( +// +//
+//
+//

Passkeys

+//
+//

Link a passkey to your account

+//
+ +// + +// {hasPasskeys &&
} + +// {hasPasskeys && ( +//
+// {passkeys.map((passkey) => ( +//
+//
+// +//
+//
+//

{passkey.label}

+//

{passkey.verifier_id}

+//
+//
+// +//
+//
+// ))} +//
+// )} +// +// ); +// }; + +// export { PasskeysCard }; diff --git a/demo/redirect-flow-example/src/components/UserCard.tsx b/demo/redirect-flow-example/src/components/UserCard.tsx index c082985..97c9d3e 100644 --- a/demo/redirect-flow-example/src/components/UserCard.tsx +++ b/demo/redirect-flow-example/src/components/UserCard.tsx @@ -10,12 +10,11 @@ import { HiOutlineCheckCircle } from "react-icons/hi"; import { Link } from "./Link"; const UserCard: React.FC = () => { - const { coreKitInstance, web3, coreKitStatus, drawerHeading, setDrawerHeading, drawerInfo, setDrawerInfo } = useCoreKit(); + const { coreKitInstance, web3, coreKitStatus, drawerHeading, setDrawerHeading, drawerInfo, setDrawerInfo, userInfo } = useCoreKit(); const [openConsole, setOpenConsole] = React.useState(false); const [isCopied, setIsCopied] = React.useState(false); - const [userInfo, setUserInfo] = React.useState(null); const [account, setAccount] = React.useState(""); const [imageError, setImageError] = React.useState(false); const [currentDrawerHeading, setCurrentDrawerHeading] = React.useState(""); @@ -54,12 +53,6 @@ const UserCard: React.FC = () => { coreKitInstance.tKey.getMetadata().getGeneralStoreDomain("tssSecurityQuestion:default"); }; - const getUserInfo = (): void => { - const user = coreKitInstance?.getUserInfo(); - console.log("User Info: ", user); - listFactors(); - if (user) setUserInfo(user); - }; const getAccounts = async () => { if (!web3) { @@ -74,12 +67,6 @@ const UserCard: React.FC = () => { getAccounts(); }, [web3]); - React.useEffect(() => { - if (coreKitStatus === COREKIT_STATUS.LOGGED_IN) { - getUserInfo(); - } - }, [coreKitStatus]); - const handleConsoleBtn = () => { setDrawerHeading("User Info Console"); setDrawerInfo(userInfo); @@ -131,7 +118,7 @@ const UserCard: React.FC = () => {

{userInfo.name}

{userInfo.email ? userInfo.email : userInfo.name}

diff --git a/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorScan.tsx b/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorScan.tsx index 20d0630..c2cd1ff 100644 --- a/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorScan.tsx +++ b/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorScan.tsx @@ -15,7 +15,7 @@ import { getEcCrypto } from "../../../App"; import { keccak256 } from "ethereum-cryptography/keccak"; const AuthenticatorQRCodeCard: React.FC = () => { - const { coreKitInstance, setDrawerHeading, setDrawerInfo } = useCoreKit(); + const { coreKitInstance, setDrawerHeading, setDrawerInfo, setAddShareType } = useCoreKit(); const [imageUrl, setImageUrl] = React.useState(""); const [currentStep, setCurrentStep] = React.useState("register"); const [secretKey, setSecretKey] = React.useState(""); @@ -213,18 +213,21 @@ const AuthenticatorQRCodeCard: React.FC = () => { await coreKitInstance.enableMFA({ factorKey: factorKey?.private, additionalMetadata: { shareType: TssShareType.RECOVERY.toString() }, - shareDescription: FactorKeyTypeShareDescription.Other, + shareDescription: "Authenticator" as FactorKeyTypeShareDescription, }); } else { await coreKitInstance.createFactor({ shareType: TssShareType.DEVICE, factorKey: factorKey?.private, + additionalMetadata: { shareType: "Authenticator" }, + shareDescription: "Authenticator" as FactorKeyTypeShareDescription, }); } if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) { await coreKitInstance.commitChanges(); } + setAddShareType("") // await inputBackupFactorKey(mnemonic); }; @@ -248,7 +251,9 @@ const AuthenticatorQRCodeCard: React.FC = () => {

Verify Authenticator Code

- setCode(e.target.value)} label="6 Digit Code" placeholder="Enter code" className="mb-4" /> + setCode(e.target.value)} placeholder="Enter code" className="mb-4" classes={{ + container: "flex flex-col justify-center items-center", + }}/> diff --git a/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorVerify.tsx b/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorVerify.tsx index ba275dc..a5d6487 100644 --- a/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorVerify.tsx +++ b/demo/redirect-flow-example/src/components/mfa-cards/authenticator/AuthenticatorVerify.tsx @@ -14,30 +14,29 @@ const VerifyAuthenticatorCodeCard: React.FC = () => { const { coreKitInstance, inputBackupFactorKey } = useCoreKit(); const navigate = useNavigate(); const [isLoading, setIsLoading] = React.useState(false); + const [error, setError] = React.useState(""); const verifyExistingAuthenticator = async () => { setIsLoading(true); + setError(""); try { if (!coreKitInstance || !code) { throw new Error("coreKitInstance is not set"); } - - // const pubKey = getEcCrypto().keyFromPublic(coreKitInstance.getPubKey()).getPublic(); const pubKey = coreKitInstance.tKey.getTSSPub().toSEC1(coreKitInstance.tKey.tssCurve, false); - const pubKey2 = getEcCrypto().keyFromPublic(pubKey).getPublic(); + const pubKeypoint = getEcCrypto().keyFromPublic(pubKey).getPublic(); const { data: { data: dataFactor }, } = await axios.post(`${authenticatorVerifierUrl}/api/v1/verify`, { - address: `${pubKey2.getX()?.toString("hex") ?? ""}${pubKey2.getY()?.toString("hex") ?? ""}`, - // address: `${coreKitInstance.tKey.metadata.pubKey.x?.toString("hex") ?? ""}${coreKitInstance.tKey.metadata.pubKey.y?.toString("hex") ?? ""}`, + address: `${pubKeypoint.getX()?.toString("hex") ?? ""}${pubKeypoint.getY()?.toString("hex") ?? ""}`, code, }); - console.log(dataFactor.factorKey); await inputBackupFactorKey(dataFactor.factorKey); navigate("/"); } catch (error: any) { console.error(error); + setError((error as Error).message || "An error occurred while verifying the authenticator code."); if (error.response && error.response.data && error.response.data.code) throw new Error("Generic error"); throw error; } finally { @@ -57,7 +56,10 @@ const VerifyAuthenticatorCodeCard: React.FC = () => {

Verify Authenticator Code

- setCode(e.target.value)} label="6 Digit Code" placeholder="Enter code" className="mb-4" /> + setCode(e.target.value)} placeholder="Enter code" className="mb-4" classes={{ + container: "flex flex-col justify-center items-center", + }} /> + {error &&

{error}

} diff --git a/demo/redirect-flow-example/src/components/mfa-cards/mnemonic/CreateMnemonic.tsx b/demo/redirect-flow-example/src/components/mfa-cards/mnemonic/CreateMnemonic.tsx index 7e1bbf1..294f31e 100644 --- a/demo/redirect-flow-example/src/components/mfa-cards/mnemonic/CreateMnemonic.tsx +++ b/demo/redirect-flow-example/src/components/mfa-cards/mnemonic/CreateMnemonic.tsx @@ -6,7 +6,7 @@ import { COREKIT_STATUS, FactorKeyTypeShareDescription, generateFactorKey, keyTo import BN from "bn.js"; const CreateMnemonicPhraseCard: React.FC = () => { - const { coreKitInstance, setDrawerHeading, setDrawerInfo } = useCoreKit(); + const { coreKitInstance, setDrawerHeading, setDrawerInfo, setAddShareType } = useCoreKit(); const [mnemonic, setMnemonic] = React.useState(""); const [factorKey, setFactorKey] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); @@ -28,13 +28,15 @@ const CreateMnemonicPhraseCard: React.FC = () => { if (coreKitInstance.getTssFactorPub().length === 1) { await coreKitInstance.enableMFA({ factorKey: factorKey, - additionalMetadata: { shareType: TssShareType.RECOVERY.toString() }, + additionalMetadata: { shareType: "SeedPhrase" }, shareDescription: FactorKeyTypeShareDescription.SeedPhrase, }); } else { await coreKitInstance.createFactor({ shareType: TssShareType.RECOVERY, factorKey: factorKey, + additionalMetadata: { shareType: "SeedPhrase" }, + shareDescription: FactorKeyTypeShareDescription.SeedPhrase, }); } @@ -46,6 +48,7 @@ const CreateMnemonicPhraseCard: React.FC = () => { } setDrawerHeading("Seed Phrase"); setDrawerInfo("Seed phrase has been set successfully"); + setAddShareType(""); } catch (error) { console.error(error); } finally { @@ -58,12 +61,12 @@ const CreateMnemonicPhraseCard: React.FC = () => {
-

Enter Mnemonic Phrase

+

Your Mnemonic Phrase