Skip to content

Commit 2618d23

Browse files
author
Guru
committed
feat: factor info integration
1 parent 443d06b commit 2618d23

File tree

5 files changed

+150
-105
lines changed

5 files changed

+150
-105
lines changed

‎demo/redirect-flow-example/src/components/MFACard.tsx‎

Lines changed: 55 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,18 @@ import { BN } from "bn.js";
66
import { HiOutlineMail } from "react-icons/hi";
77
import { COREKIT_STATUS } from "@web3auth/mpc-core-kit";
88
import { useNavigate } from "react-router-dom";
9+
import { ShareDescription } from "./types";
10+
import { HiOutlineKey, HiOutlineLockOpen, HiOutlineDocumentDuplicate } from "react-icons/hi";
911

10-
const FACTOR_MAP: Record<string, { title: string; icon?: string }> = {
11-
device: { title: "Device", icon: "mobile-icon" },
12-
seedPhrase: { title: "Recovery Phrase", icon: "key-solid-icon" },
13-
social: { title: "Social Recovery Factor", icon: "key-solid-icon" },
14-
password: { title: "Password", icon: "key-solid-icon" },
12+
const FACTOR_MAP: Record<string, { title: string; icon?: React.ReactNode }> = {
13+
Authenticator: { title: "Authenticator", icon: <HiOutlineLockOpen className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
14+
seedPhrase: { title: "Seed Phrase", icon: <HiOutlineDocumentDuplicate className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
15+
tssSecurityQuestions: { title: "Password", icon: <HiOutlineKey className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
1516
};
1617

17-
18-
const shareDetails = [
19-
// Example share details
20-
{ shareType: "device", details: "Chrome 91 (Windows)" },
21-
{ shareType: "seedPhrase", details: "Recovery Phrase" },
22-
].map((share) => ({
23-
title: FACTOR_MAP[share.shareType]?.title || "",
24-
details: share.details,
25-
icon: FACTOR_MAP[share.shareType]?.icon || "",
26-
}));
27-
2818
const MfaCard: React.FC = () => {
29-
const { setAddShareType, coreKitInstance, setCoreKitStatus } = useCoreKit();
19+
const { setAddShareType, coreKitInstance, setCoreKitStatus, shareDescriptions, existingModules, userInfo } = useCoreKit();
3020
const navigate = useNavigate();
31-
const [userInfo, setUserInfo] = React.useState<any>({});
32-
33-
React.useEffect(() => {
34-
const fetchUserInfo = async () => {
35-
if (!coreKitInstance) {
36-
return;
37-
}
38-
const userInfo = await coreKitInstance.getUserInfo();
39-
setUserInfo(userInfo);
40-
};
41-
fetchUserInfo();
42-
}, [coreKitInstance]);
4321

4422
const addMfa = (addShareType: AddShareType) => {
4523
console.log("Add MFA");
@@ -79,54 +57,62 @@ const MfaCard: React.FC = () => {
7957
</div>
8058

8159
<div className="flex flex-col gap-y-2">
82-
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("password")}>
83-
Add Password
84-
</Button>
85-
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("phrase")}>
86-
Add Recovery Phrase
87-
</Button>
88-
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("authenticator")}>
89-
Add Authenticator Share
90-
</Button>
60+
{!existingModules.includes("tssSecurityQuestions") && (
61+
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("password")}>
62+
Add Password
63+
</Button>
64+
)}
65+
{!existingModules.includes("seedPhrase") && (
66+
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("phrase")}>
67+
Add Recovery Phrase
68+
</Button>
69+
)}
70+
{!existingModules.includes("Authenticator") && (
71+
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => addMfa("authenticator")}>
72+
Add Authenticator Share
73+
</Button>
74+
)}
9175
<Button size="sm" className="gap-2 w-full !border-app-gray-300 !text-app-gray-800 dark:!text-app-white" variant="secondary" onClick={() => criticalReset()}>
9276
Criticial Reset
9377
</Button>
9478
</div>
9579

9680
<div className="mt-4 mb-0 border-t border-app-gray-200 dark:border-app-gray-500"></div>
97-
98-
<div className="divide-y divide-app-gray-200 dark:divide-app-gray-500">
99-
<div className="flex items-center py-4">
100-
<div className="mr-2">
101-
{["email_passwordless", "jwt"].includes(userInfo.typeOfLogin) ? (
102-
<HiOutlineMail className="text-app-gray-900 dark:text-app-white w-5 h-5" name="mail-icon" height={20} width={20} />
103-
) : (
104-
<img
105-
className="w-5 h-5"
106-
src={`https://images.web3auth.io/login-${userInfo.typeOfLogin}-active.svg`}
107-
alt={`${userInfo.typeOfLogin} icon`}
108-
/>
109-
)}
110-
</div>
111-
<div>
112-
<h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white first-letter:capitalize">{userInfo.typeOfLogin}</h4>
113-
<p className="text-xs text-app-gray-400">{userInfo.verifierId}</p>
81+
{
82+
userInfo && (
83+
<div className="divide-y divide-app-gray-200 dark:divide-app-gray-500">
84+
<div className="flex items-center py-4">
85+
<div className="mr-2">
86+
{["email_passwordless", "jwt"].includes(userInfo.typeOfLogin) ? (
87+
<HiOutlineMail className="text-app-gray-900 dark:text-app-white w-5 h-5" name="mail-icon" height={20} width={20} />
88+
) : (
89+
<img
90+
className="w-5 h-5"
91+
src={`https://images.web3auth.io/login-${userInfo.typeOfLogin}-active.svg`}
92+
alt={`${userInfo.typeOfLogin} icon`}
93+
/>
94+
)}
95+
</div>
96+
<div>
97+
<h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white first-letter:capitalize">{userInfo.typeOfLogin}</h4>
98+
<p className="text-xs text-app-gray-400">{userInfo.verifierId}</p>
99+
</div>
114100
</div>
101+
{shareDescriptions && shareDescriptions.length > 0 && shareDescriptions.map((shareDescription: ShareDescription) => (
102+
<div key={shareDescription.module} className="flex items-center py-4">
103+
<div className="mr-2">
104+
{/* <Icon name={shareDetail.icon || "key-icon"} className="text-app-gray-900 dark:text-app-white w-5 h-5" /> */}
105+
{FACTOR_MAP[shareDescription.module].icon}
106+
</div>
107+
<div>
108+
<h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">{FACTOR_MAP[shareDescription.module].title}</h4>
109+
<p className="text-xs text-app-gray-400">{new Date(shareDescription.dateAdded).toLocaleString()}</p>
110+
</div>
111+
</div>
112+
))}
115113
</div>
116-
{
117-
// shareDetails.map((shareDetail) => (
118-
// <div key={shareDetail.title} className="flex items-center py-4">
119-
// <div className="mr-2">
120-
// {/* <Icon name={shareDetail.icon || "key-icon"} className="text-app-gray-900 dark:text-app-white w-5 h-5" /> */}
121-
// </div>
122-
// <div>
123-
// <h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">{shareDetail.title}</h4>
124-
// <p className="text-xs text-app-gray-400">{shareDetail.details}</p>
125-
// </div>
126-
// </div>
127-
// ))
128-
}
129-
</div>
114+
)
115+
}
130116
</Card>
131117
);
132118
};

‎demo/redirect-flow-example/src/components/NavBar.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import { useNavigate } from "react-router-dom";
55
import { COREKIT_STATUS } from "@web3auth/mpc-core-kit";
66

77
const Header: React.FC = () => {
8-
9-
const { coreKitInstance, setCoreKitStatus, coreKitStatus } = useCoreKit();
8+
const { coreKitInstance, setCoreKitStatus, userInfo, setUserInfo, setGlobalLoading } = useCoreKit();
109
const [isLogin, setIsLogin] = React.useState(true);
1110
React.useEffect(() => {
1211
try {
13-
if (coreKitStatus === COREKIT_STATUS.LOGGED_IN) {
12+
if (userInfo) {
13+
setCoreKitStatus(COREKIT_STATUS.LOGGED_IN);
1414
setIsLogin(true);
1515
} else {
1616
setIsLogin(false);
@@ -19,21 +19,28 @@ const Header: React.FC = () => {
1919
console.error(error);
2020
setIsLogin(false);
2121
}
22-
}, [coreKitStatus]);
22+
}, [userInfo]);
2323

2424
const navigate = useNavigate();
2525
const logout = async () => {
26-
await coreKitInstance.logout();
27-
setCoreKitStatus(COREKIT_STATUS.NOT_INITIALIZED)
28-
navigate("/");
26+
setGlobalLoading(true);
27+
try {
28+
await coreKitInstance.logout();
29+
setCoreKitStatus(COREKIT_STATUS.NOT_INITIALIZED);
30+
setUserInfo(undefined);
31+
navigate("/");
32+
} catch (error) {
33+
console.error(error);
34+
} finally {
35+
setGlobalLoading(false);
36+
}
2937
};
3038

3139
return (
3240
<header className="w-full relative">
3341
<div className="py-4 px-4 sm:py-6 sm:px-8 flex items-center justify-between bg-app-white dark:bg-app-gray-800 w-full">
3442
<img src="https://demo.web3auth.io/assets/logo-Dbyf1Tt2.svg" alt="web3auth demo logo" className="cursor-pointer h-8 sm:!h-12 w-auto dark:hidden" />
3543
<img src="/images/logo-light.svg" alt="web3auth demo logo" className="cursor-pointer h-8 sm:!h-12 w-auto hidden dark:block" />
36-
3744
{!isLogin ? (
3845
<Button
3946
id="w3a-documentation"

‎demo/redirect-flow-example/src/components/UserCard.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@ import { HiOutlineCheckCircle } from "react-icons/hi";
1010
import { Link } from "./Link";
1111

1212
const UserCard: React.FC = () => {
13-
const { coreKitInstance, web3, coreKitStatus, drawerHeading, setDrawerHeading, drawerInfo, setDrawerInfo } = useCoreKit();
13+
const { coreKitInstance, web3, coreKitStatus, drawerHeading, setDrawerHeading, drawerInfo, setDrawerInfo, userInfo } = useCoreKit();
1414

1515
const [openConsole, setOpenConsole] = React.useState(false);
1616

1717
const [isCopied, setIsCopied] = React.useState(false);
18-
const [userInfo, setUserInfo] = React.useState<any>(null);
1918
const [account, setAccount] = React.useState<string>("");
2019
const [imageError, setImageError] = React.useState(false);
2120
const [currentDrawerHeading, setCurrentDrawerHeading] = React.useState("");
@@ -54,12 +53,6 @@ const UserCard: React.FC = () => {
5453
coreKitInstance.tKey.getMetadata().getGeneralStoreDomain("tssSecurityQuestion:default");
5554
};
5655

57-
const getUserInfo = (): void => {
58-
const user = coreKitInstance?.getUserInfo();
59-
console.log("User Info: ", user);
60-
listFactors();
61-
if (user) setUserInfo(user);
62-
};
6356

6457
const getAccounts = async () => {
6558
if (!web3) {
@@ -74,12 +67,6 @@ const UserCard: React.FC = () => {
7467
getAccounts();
7568
}, [web3]);
7669

77-
React.useEffect(() => {
78-
if (coreKitStatus === COREKIT_STATUS.LOGGED_IN) {
79-
getUserInfo();
80-
}
81-
}, [coreKitStatus]);
82-
8370
const handleConsoleBtn = () => {
8471
setDrawerHeading("User Info Console");
8572
setDrawerInfo(userInfo);
@@ -131,7 +118,7 @@ const UserCard: React.FC = () => {
131118
<h3 className="font-bold text-app-gray-800 dark:text-app-white mb-2">{userInfo.name}</h3>
132119
<p className="text-xs text-app-gray-400 mb-1">{userInfo.email ? userInfo.email : userInfo.name}</p>
133120
<button className="leading-none" onClick={handleConsoleBtn}>
134-
<Link className="text-xs dark:text-app-primary-500">View User Info</Link>
121+
<Link className="text-xs text-app-primary-600">View User Info</Link>
135122
</button>
136123
</div>
137124
<div className="my-4 border-t border-app-gray-200 dark:border-app-gray-600"></div>

‎demo/redirect-flow-example/src/components/mfa-cards/recovery/RecoveryOptionCard.tsx‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { COREKIT_STATUS } from "@web3auth/mpc-core-kit";
88

99
const RecoveryOptionsCard: React.FC = () => {
1010
const navigate = useNavigate();
11-
const { coreKitInstance, setCoreKitStatus } = useCoreKit();
11+
const { coreKitInstance, setCoreKitStatus, existingModules } = useCoreKit();
1212

1313
const handleRecoveryOption = (option: string) => {
1414
navigate(`/verify-${option}`);
@@ -36,15 +36,28 @@ const RecoveryOptionsCard: React.FC = () => {
3636
<Card className="px-8 !h-[300px] flex justify-center items-start py-6 !rounded-2xl !shadow-modal !border-0 dark:!border-app-gray-800 dark:!shadow-dark">
3737
<div className="text-center">
3838
<h3 className="font-semibold text-app-gray-900 dark:text-app-white mb-4">Choose Recovery Option</h3>
39-
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("phrase")}>
40-
Recovery Phrase
41-
</Button>
42-
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("authenticator")}>
43-
Authenticator
44-
</Button>
45-
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("password")}>
46-
Password
47-
</Button>
39+
{
40+
existingModules.includes("seedPhrase") && (
41+
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("phrase")}>
42+
Recovery Phrase
43+
</Button>
44+
)
45+
}
46+
{
47+
existingModules.includes("Authenticator") && (
48+
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("authenticator")}>
49+
Authenticator
50+
</Button>
51+
)
52+
}
53+
{
54+
existingModules.includes("tssSecurityQuestions") && (
55+
<Button className="w-full mb-4" variant="primary" onClick={() => handleRecoveryOption("password")}>
56+
Password
57+
</Button>
58+
)
59+
}
60+
4861
<Button className="w-full mb-4" variant="primary" onClick={() => criticalReset()}>
4962
Critical Reset
5063
</Button>

0 commit comments

Comments
 (0)