Skip to content

Commit fe6c6f9

Browse files
author
Guru
committed
fix: separation of create mfa and list factors
1 parent 5805dc8 commit fe6c6f9

File tree

3 files changed

+63
-47
lines changed

3 files changed

+63
-47
lines changed

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import * as React from "react";
2+
import { Card } from "./Card";
3+
import { useCoreKit } from "../composibles/useCoreKit";
4+
import { HiOutlineMail } from "react-icons/hi";
5+
import { ShareDescription } from "./types";
6+
import { HiOutlineKey, HiOutlineLockOpen, HiOutlineDocumentDuplicate } from "react-icons/hi";
7+
8+
const FACTOR_MAP: Record<string, { title: string; icon?: React.ReactNode }> = {
9+
Authenticator: { title: "Authenticator", icon: <HiOutlineLockOpen className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
10+
seedPhrase: { title: "Seed Phrase", icon: <HiOutlineDocumentDuplicate className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
11+
tssSecurityQuestions: { title: "Password", icon: <HiOutlineKey className="text-app-gray-900 dark:text-app-white w-5 h-5"/> },
12+
};
13+
14+
const FactorCard: React.FC = () => {
15+
const { shareDescriptions, userInfo } = useCoreKit();
16+
17+
return (
18+
<Card className="px-8 py-6 w-full !rounded-2xl !shadow-modal !border-0 dark:!border-app-gray-800 dark:!shadow-dark">
19+
{
20+
userInfo && (
21+
<div className="divide-y divide-app-gray-200 dark:divide-app-gray-500">
22+
<div className="flex items-center py-4">
23+
<div className="mr-2">
24+
{["email_passwordless", "jwt"].includes(userInfo.typeOfLogin) ? (
25+
<HiOutlineMail className="text-app-gray-900 dark:text-app-white w-5 h-5" name="mail-icon" height={20} width={20} />
26+
) : (
27+
<img
28+
className="w-5 h-5"
29+
src={`https://images.web3auth.io/login-${userInfo.typeOfLogin}-active.svg`}
30+
alt={`${userInfo.typeOfLogin} icon`}
31+
/>
32+
)}
33+
</div>
34+
<div>
35+
<h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white first-letter:capitalize">{userInfo.typeOfLogin}</h4>
36+
<p className="text-xs text-app-gray-400">{userInfo.verifierId}</p>
37+
</div>
38+
</div>
39+
{shareDescriptions && shareDescriptions.length > 0 && shareDescriptions.map((shareDescription: ShareDescription) => (
40+
<div key={shareDescription.module} className="flex items-center py-4">
41+
<div className="mr-2">
42+
{/* <Icon name={shareDetail.icon || "key-icon"} className="text-app-gray-900 dark:text-app-white w-5 h-5" /> */}
43+
{FACTOR_MAP[shareDescription.module].icon}
44+
</div>
45+
<div>
46+
<h4 className="text-sm font-semibold text-app-gray-900 dark:text-app-white">{FACTOR_MAP[shareDescription.module].title}</h4>
47+
<p className="text-xs text-app-gray-400">{new Date(shareDescription.dateAdded).toLocaleString()}</p>
48+
</div>
49+
</div>
50+
))}
51+
</div>
52+
)
53+
}
54+
</Card>
55+
);
56+
};
57+
58+
export { FactorCard };

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

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,11 @@ import { Button } from "./Button";
33
import { Card } from "./Card";
44
import { AddShareType, useCoreKit } from "../composibles/useCoreKit";
55
import { BN } from "bn.js";
6-
import { HiOutlineMail } from "react-icons/hi";
76
import { COREKIT_STATUS } from "@web3auth/mpc-core-kit";
87
import { useNavigate } from "react-router-dom";
9-
import { ShareDescription } from "./types";
10-
import { HiOutlineKey, HiOutlineLockOpen, HiOutlineDocumentDuplicate } from "react-icons/hi";
11-
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"/> },
16-
};
178

189
const MfaCard: React.FC = () => {
19-
const { setAddShareType, coreKitInstance, setCoreKitStatus, shareDescriptions, existingModules, userInfo } = useCoreKit();
10+
const { setAddShareType, coreKitInstance, setCoreKitStatus, existingModules } = useCoreKit();
2011
const navigate = useNavigate();
2112

2213
const addMfa = (addShareType: AddShareType) => {
@@ -78,41 +69,6 @@ const MfaCard: React.FC = () => {
7869
</div>
7970

8071
<div className="mt-4 mb-0 border-t border-app-gray-200 dark:border-app-gray-500"></div>
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>
100-
</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-
))}
113-
</div>
114-
)
115-
}
11672
</Card>
11773
);
11874
};

‎demo/redirect-flow-example/src/page/Home.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Card } from "../components/Card";
22
import { DocDetails } from "../components/DocDetails";
3+
import { FactorCard } from "../components/FactorsCard";
34
import { Link } from "../components/Link";
45
import Loader from "../components/Loader";
56
import { AuthenticatorQRCodeCard } from "../components/mfa-cards/authenticator/AuthenticatorScan";
@@ -25,10 +26,11 @@ const HomePage = () => {
2526
<div className="break-inside-avoid space-y-4 mb-4">
2627
<UserCard />
2728
<PasskeysCard />
28-
<MfaCard />
29-
</div>
29+
<FactorCard />
30+
</div>
3031
{/* mfa */}
3132
<div className="break-inside-avoid lg:break-after-avoid xl:break-after-column mb-4 space-y-4">
33+
<MfaCard />
3234
{addShareType === "phrase" && <CreateMnemonicPhraseCard />}
3335
{addShareType === "authenticator" && <AuthenticatorQRCodeCard />}
3436
{addShareType === "password" && <GetPasswordCard />}

0 commit comments

Comments
 (0)