@verified-network/verified-custody 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +437 -0
  2. package/dist/index.d.mts +13 -3
  3. package/dist/index.d.ts +13 -3
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +2 -2
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +7 -2
  9. package/babel.config.json +0 -12
  10. package/src/components/overlays.tsx +0 -61
  11. package/src/components/search.tsx +0 -381
  12. package/src/components/slider.tsx +0 -29
  13. package/src/components/success.tsx +0 -142
  14. package/src/customTypes.d.ts +0 -37
  15. package/src/index.ts +0 -17
  16. package/src/pages/addCosigners.tsx +0 -1014
  17. package/src/pages/contact.tsx +0 -280
  18. package/src/pages/createPin.tsx +0 -693
  19. package/src/pages/enterPin.tsx +0 -821
  20. package/src/pages/ftu.tsx +0 -244
  21. package/src/pages/index.tsx +0 -170
  22. package/src/pages/otp.tsx +0 -410
  23. package/src/services/contracts.ts +0 -817
  24. package/src/services/store.tsx +0 -65
  25. package/src/style.css +0 -2030
  26. package/src/utils/config.ts +0 -103
  27. package/src/utils/constants.ts +0 -1966
  28. package/src/utils/helpers.tsx +0 -334
  29. package/src/utils/types.ts +0 -85
  30. package/tsconfig.json +0 -16
  31. package/tsup.config.ts +0 -36
package/src/pages/addCosigners.tsx DELETED
@@ -1,1014 +0,0 @@
1
- import React, { useState } from "react";
2
- import { imageAssets, numberPositionsFmt } from "../utils/constants";
3
- import { useVaultStore } from "../services/store";
4
- import { completeVaultCreation } from "../services/contracts";
5
- import PageSlider from "../components/slider";
6
- import SearchBox from "../components/search";
7
- import { VerifiedCustodyHelpers } from "../utils/types";
8
-
9
- const AddCosignersPage = (props: {
10
- setStep: (step: string) => void;
11
- setIsLoading: (isLoading: boolean) => void;
12
- userNumberFmt: string;
13
- userEmail: string;
14
- selectedCountry: { name: string; area: string; flag: string };
15
- allCountries: any;
16
- defaultCountry?: {
17
- area: string;
18
- flag: string;
19
- name: string;
20
- };
21
- helperFunctions?: VerifiedCustodyHelpers;
22
- }) => {
23
- const [showLearnMore, setShowLearnMore] = useState<boolean>(false);
24
- const [learnMoreStep, setLearnMoreStep] = useState<string>("1");
25
- const [cosignerStep, setCosignerStep] = useState<string>("1");
26
- const [showAddMore, setShowAddMore] = useState<boolean>(false);
27
- const [addChannel, setAddChannel] = useState<string>("sms");
28
- const [coSignerNumber, setCoSignerNumber] = useState<string>("");
29
- const [coSignerNumberFmt, setCoSignerNumberFmt] = useState<string>("");
30
- const [coSignerEmail, setCoSignerEmail] = useState<string>("");
31
- const [coSignerName, setCoSignerName] = useState<string>("");
32
- const [userInput, setUserInput] = useState<string>("");
33
- const [searchActive, setSearchActive] = useState<boolean>(false);
34
- const [selectedCountry, setSelectedCountry] = useState(
35
- props.defaultCountry || {
36
- area: "1",
37
- flag: imageAssets.usaFlag,
38
- name: "United States",
39
- }
40
- );
41
- const [coSigners, setCosigners] = useState([]);
42
- const [showSetRule, setShowSetRule] = useState<boolean>(false);
43
- const [requiredSigners, setRequiredSigners] = useState<number>(2);
44
- const [errorText, setErrorText] = useState<string>("");
45
-
46
- const { pk, vaultData, vaultContract } = useVaultStore();
47
-
48
- const handleButtonDisplay = () => {
49
- const button = document.getElementById("add-cosigner-button");
50
- if (button && coSigners?.length > 0) {
51
- button.className = "startup-button-active";
52
- } else {
53
- button!.className = "startup-button";
54
- }
55
- };
56
-
57
- const handleAddCoSigner = () => {
58
- if (addChannel === "sms" && coSignerNumber?.length === 0) {
59
- setErrorText("Invalid input, please check the phone number");
60
- return;
61
- } else if (addChannel === "sms" && coSignerNumber?.length !== 10) {
62
- setErrorText("Invalid input, please check the phone number");
63
- return;
64
- } else if (addChannel === "email" && coSignerEmail?.length === 0) {
65
- setErrorText("Invalid input, please check the email");
66
- return;
67
- } else if (
68
- addChannel === "email" &&
69
- !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(coSignerEmail)
70
- ) {
71
- setErrorText("Invalid input, please check the email");
72
- return;
73
- } else if (
74
- coSigners?.find((sig) =>
75
- sig?.otpChannel === "sms"
76
- ? sig?.phoneArea?.toLowerCase() + sig?.number?.toLowerCase() ===
77
- selectedCountry.area?.toLowerCase() +
78
- coSignerNumberFmt?.toLowerCase()
79
- : sig?.email?.toLowerCase() === coSignerEmail?.toLowerCase()
80
- )
81
- ) {
82
- setErrorText(
83
- addChannel === "sms"
84
- ? "Invalid input, phone number is already a co-signer"
85
- : "Invalid input, email is already a co-signer"
86
- );
87
- return;
88
- } else if (
89
- addChannel === "sms" &&
90
- selectedCountry?.area?.toLowerCase() +
91
- coSignerNumberFmt?.toLowerCase() ===
92
- props.selectedCountry.area?.toLowerCase() +
93
- props.userNumberFmt?.toLowerCase()
94
- ) {
95
- setErrorText("Invalid input, phone number is creator's phone number");
96
- return;
97
- } else if (
98
- addChannel === "email" &&
99
- coSignerEmail?.toLowerCase() === props.userEmail?.toLowerCase()
100
- ) {
101
- setErrorText("Invalid input, email is creator's email");
102
- return;
103
- }
104
- setErrorText("");
105
- let coSignerLength = coSigners?.length;
106
- setCosigners((cngs) => [
107
- {
108
- name: coSignerName,
109
- email: coSignerEmail,
110
- number: coSignerNumberFmt,
111
- phoneNumber: `+${selectedCountry?.area}${coSignerNumber}`,
112
- otpChannel: addChannel,
113
- phoneArea: selectedCountry?.area,
114
- position: cngs?.length + 1,
115
- vaultId:
116
- addChannel === "sms"
117
- ? `+${selectedCountry?.area}${coSignerNumber}`
118
- : coSignerEmail,
119
- },
120
- ...cngs,
121
- ]);
122
- setCoSignerEmail("");
123
- setCoSignerName("");
124
- setCoSignerNumber("");
125
- setCoSignerNumberFmt("");
126
- setUserInput("");
127
- if (coSignerLength + 1 === 4) {
128
- setShowAddMore(false);
129
- }
130
- };
131
-
132
- const handleCompleteVault = async () => {
133
- const keyHolders = [
134
- {
135
- otpChannel: props?.userEmail?.length > 0 ? "email" : "sms",
136
- email: props?.userEmail,
137
- phoneNumber: `+${
138
- props?.selectedCountry?.area
139
- }${props?.userNumberFmt?.replace(" ", "")}`,
140
- vaultId: vaultData?.vaultId,
141
- },
142
- ...coSigners,
143
- ];
144
-
145
- if (
146
- keyHolders?.length > 0 &&
147
- coSigners?.length > 0 &&
148
- requiredSigners &&
149
- vaultData?.vaultId &&
150
- vaultData?.hashedVaultId &&
151
- vaultData?.vaultPin &&
152
- vaultData?.hashedVaultPin &&
153
- vaultContract &&
154
- pk &&
155
- props.helperFunctions?.sendCoSignerInvitation &&
156
- props.helperFunctions?.sendCreatorConfirmation
157
- ) {
158
- props.setIsLoading(true);
159
- await completeVaultCreation(
160
- props.helperFunctions.sendCoSignerInvitation,
161
- props.helperFunctions.sendCreatorConfirmation,
162
- keyHolders,
163
- coSigners,
164
- props?.userEmail?.length > 0 ? "email" : "sms",
165
- requiredSigners,
166
- vaultData.vaultId,
167
- vaultData.hashedVaultId,
168
- vaultData.vaultPin,
169
- vaultData.hashedVaultPin,
170
- vaultContract,
171
- pk
172
- ).then((res) => {
173
- props.setIsLoading(false);
174
- if (res) {
175
- props.setStep("7");
176
- }
177
- });
178
- }
179
- };
180
-
181
- return (
182
- <div
183
- style={{ padding: "0" }}
184
- className="verified-custd-mdl-startup-language"
185
- >
186
- {!showLearnMore && (
187
- <React.Fragment>
188
- {cosignerStep === "1" && (
189
- <React.Fragment>
190
- {" "}
191
- <div className="verified-custd-mdl-startup-contact">
192
- <PageSlider sliderCount={[1, 2, 3]} currentSlider="2" />
193
- <div className="verified-custd-mdl-startup-contact-content">
194
- <p className="verified-custd-mdl-startup-contact-text">
195
- We require you to add at least another Co-Signer.
196
- </p>
197
- </div>
198
- </div>
199
- <img
200
- className="verified-custd-mdl-add-cosigner-body-icon"
201
- src={imageAssets.addCoSignerIcon1}
202
- alt=""
203
- />
204
- <div className="verified-custd-mdl-add-cosigner-body">
205
- <div className="verified-custd-mdl-add-cosigner-body-text-cont">
206
- <div className="verified-custd-mdl-add-cosigner-body-text-icon">
207
- <img src={imageAssets.pkicon} alt="icon" />
208
- </div>
209
- <p className="verified-custd-mdl-add-cosigner-body-text-label">
210
- This is a blockchain based platform where{" "}
211
- <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
212
- we do not store password keys.
213
- </span>
214
- </p>
215
- </div>
216
-
217
- <div className="verified-custd-mdl-add-cosigner-body-text-cont">
218
- <div className="verified-custd-mdl-add-cosigner-body-text-icon">
219
- <img src={imageAssets.encryptedIcon} alt="icon" />
220
- </div>
221
- <p className="verified-custd-mdl-add-cosigner-body-text-label">
222
- Don’t worry, the{" "}
223
- <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
224
- Co-Signer does not get access
225
- </span>{" "}
226
- to your account in any way.
227
- </p>
228
- </div>
229
-
230
- <div className="verified-custd-mdl-add-cosigner-body-text-cont">
231
- <div className="verified-custd-mdl-add-cosigner-body-text-icon">
232
- <img src={imageAssets.supervise} alt="icon" />
233
- </div>
234
- <p className="verified-custd-mdl-add-cosigner-body-text-label">
235
- You can{" "}
236
- <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
237
- be your own Co-Signer
238
- </span>{" "}
239
- by adding a different contact number or Email ID. to your
240
- account in any way.
241
- </p>
242
- </div>
243
- </div>
244
- <div className="verified-custd-mdl-add-cosigner-buttons-cont">
245
- <button
246
- onClick={() => {
247
- setLearnMoreStep("1");
248
- setShowLearnMore(true);
249
- }}
250
- className="verified-custd-mdl-add-cosigner-button-neut"
251
- >
252
- Learn More
253
- </button>
254
-
255
- <button
256
- onClick={() => {
257
- setCosignerStep("2");
258
- setShowAddMore(false);
259
- setShowLearnMore(false);
260
- }}
261
- className="verified-custd-mdl-add-cosigner-button-action"
262
- >
263
- Add Co-Signer
264
- </button>
265
- </div>
266
- </React.Fragment>
267
- )}
268
-
269
- {cosignerStep === "2" && (
270
- <React.Fragment>
271
- {" "}
272
- <div className="verified-custd-mdl-startup-contact">
273
- <PageSlider sliderCount={[1, 2, 3]} currentSlider="2" />
274
- <div
275
- style={{ gap: "16px" }}
276
- className="verified-custd-mdl-startup-contact-content"
277
- >
278
- <p className="verified-custd-mdl-startup-contact-text">
279
- Add your Co-Signers
280
- </p>
281
- <div className="verified-custd-mdl-startup-otp-text">
282
- <p className="verified-custd-mdl-add-cosigner-header-text">
283
- Add a phone number/an Email ID of Co-Signer to send them a
284
- request.
285
- </p>
286
- <div className="verified-custd-mdl-add-cosigner-header-info-cont">
287
- <p className="verified-custd-mdl-add-cosigner-header-info-text">
288
- <span className="verified-custd-mdl-add-cosigner-header-info-text-bold">
289
- NOTE:
290
- </span>{" "}
291
- You can add yourself as a Co-Signer and further add more
292
- Co-Signers to your account.
293
- </p>
294
- </div>
295
- </div>
296
- </div>
297
- </div>
298
- <div className="verified-custd-mdl-add-cosigner-step2-body">
299
- <div className="verified-custd-mdl-add-cosigner-step2-body-header">
300
- <p className="verified-custd-mdl-add-cosigner-step2-body-header-first-text">
301
- Add Co-Signers
302
- </p>
303
-
304
- <p className="verified-custd-mdl-add-cosigner-step2-body-header-second-text">
305
- ({coSigners?.length + 1 < 5 ? coSigners?.length + 1 : 5}/5)
306
- </p>
307
- </div>
308
-
309
- <div className="verified-custd-mdl-add-cosigner-step2-body-content">
310
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header">
311
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-cont">
312
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-body">
313
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-label">
314
- <p className="verified-custd-mdl-add-cosigner-step2-body-content-header-label-text">
315
- Creator
316
- </p>
317
- </div>
318
- <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-cont">
319
- <div className="verified-custd-mdl-a-c-2-b-content-header-body-header">
320
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-title">
321
- You
322
- </p>
323
- {props.userEmail?.length > 0 && (
324
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
325
- {props.userEmail}
326
- </p>
327
- )}
328
- {props.userEmail?.length === 0 && (
329
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
330
- (+{props.selectedCountry.area}){" "}
331
- {props.userNumberFmt}
332
- </p>
333
- )}
334
- </div>
335
- </div>
336
-
337
- {/* <button className="verified-custd-mdl-a-c-2-b-content-header-body-button">
338
- Add Self
339
- </button> */}
340
- </div>
341
- </div>
342
- {!showSetRule &&
343
- coSigners
344
- .sort((a, b) => a?.position - b?.position)
345
- .map((cng: any, idx: number) => (
346
- <div
347
- key={idx}
348
- className="verified-custd-mdl-add-cosigner-step2-body-content-header-cont"
349
- >
350
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-body">
351
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-label">
352
- <p className="verified-custd-mdl-add-cosigner-step2-body-content-header-label-text">
353
- {
354
- numberPositionsFmt[cng?.position]?.split(
355
- " "
356
- )[0]
357
- }
358
- <sup>
359
- {
360
- numberPositionsFmt[cng?.position]?.split(
361
- " "
362
- )[1]
363
- }
364
- </sup>{" "}
365
- Co-Signer
366
- </p>
367
- </div>
368
- <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-cont">
369
- <div className="verified-custd-mdl-a-c-2-b-content-header-body-header">
370
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-title">
371
- {cng?.name}
372
- </p>
373
- {cng.otpChannel === "email" && (
374
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
375
- {cng.email}
376
- </p>
377
- )}
378
- {cng.otpChannel === "sms" && (
379
- <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
380
- (+{cng?.phoneArea}) {cng.number}
381
- </p>
382
- )}
383
- </div>
384
- </div>
385
-
386
- <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-icons">
387
- <img
388
- style={{ cursor: "pointer" }}
389
- src={imageAssets.editBlack}
390
- alt="edit"
391
- />
392
- <img
393
- onClickCapture={() => {
394
- setCosigners((cngs) =>
395
- cngs
396
- ?.filter((sig) =>
397
- sig?.otpChannel === "sms"
398
- ? sig?.phoneArea?.toLowerCase() +
399
- sig?.number?.toLowerCase() !==
400
- cng?.phoneArea?.toLowerCase() +
401
- cng?.number?.toLowerCase()
402
- : sig?.email?.toLowerCase() !==
403
- cng?.email?.toLowerCase()
404
- )
405
- ?.map((nSig, newId) => {
406
- nSig.position = newId + 1;
407
- return nSig;
408
- })
409
- );
410
- }}
411
- onClick={() => {
412
- handleButtonDisplay();
413
- }}
414
- style={{ cursor: "pointer" }}
415
- src={imageAssets.delete}
416
- alt="delete"
417
- />
418
- </div>
419
- </div>
420
- </div>
421
- ))}
422
- </div>
423
-
424
- {showSetRule && (
425
- <div className="verified-custd-mdl-add-cosigner-confirm-body-content-outter">
426
- <div className="verified-custd-mdl-add-cosigner-confirm-body-content">
427
- <div className="verified-custd-mdl-add-cosigner-confirm-body-cont">
428
- <div className="verified-custd-mdl-add-cosigner-confirm-body-header">
429
- <p className="verified-custd-mdl-add-cosigner-confirm-body-title">
430
- Specify the number of Co-Signers you need to sign
431
- off for an approval
432
- </p>
433
- <p className="verified-custd-mdl-add-cosigner-confirm-body-label">
434
- By default we need 2, you can add up to 5
435
- Co-Signers as minimum sign off needed for
436
- approval.
437
- </p>
438
- </div>
439
-
440
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer">
441
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-cont">
442
- {new Array(coSigners?.length + 1)
443
- .fill("1")
444
- .map((_: any, idx: number) => (
445
- <div
446
- style={
447
- idx + 1 === requiredSigners
448
- ? {}
449
- : {
450
- height: "0",
451
- width: "0",
452
- overflow: "hidden",
453
- }
454
- }
455
- key={idx}
456
- className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind"
457
- >
458
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-text-cont">
459
- <p className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-text">
460
- {String(idx + 1)}
461
- </p>{" "}
462
- </div>
463
- <img
464
- className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-icon"
465
- src={imageAssets.pointer}
466
- alt=""
467
- />
468
- </div>
469
- ))}
470
- </div>
471
-
472
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-cont">
473
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-cont">
474
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider">
475
- <div
476
- style={
477
- coSigners?.length === 1
478
- ? {
479
- width: `${
480
- 100 / coSigners?.length
481
- }%`,
482
- }
483
- : {
484
- width: `calc(${
485
- 100 / coSigners?.length
486
- }% + 12px)`,
487
- }
488
- }
489
- className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-ind"
490
- >
491
- <img
492
- className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-icon"
493
- src={imageAssets.sliderDot}
494
- alt=""
495
- />
496
- </div>
497
- </div>
498
- </div>
499
-
500
- <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-text-cont">
501
- {new Array(coSigners?.length + 1)
502
- .fill("1")
503
- .map((_: any, idx: number) => (
504
- <p
505
- style={
506
- idx === coSigners?.length
507
- ? { paddingRight: "12px" }
508
- : idx === 0
509
- ? { paddingLeft: "12px" }
510
- : {}
511
- }
512
- onClick={() => {
513
- if (idx + 1 > 1) {
514
- setRequiredSigners(idx + 1);
515
- }
516
- }}
517
- key={idx}
518
- className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-text"
519
- >
520
- {String(idx + 1)}
521
- </p>
522
- ))}
523
- </div>
524
- </div>
525
- </div>
526
-
527
- <button
528
- id="confirm-cosigner-button"
529
- onClick={async (e: any) => {
530
- if (
531
- e.target.className.includes("startup-button") &&
532
- e.target.className !== "startup-button"
533
- ) {
534
- e.target.className = "startup-button-click";
535
- await handleCompleteVault();
536
- } else {
537
- const buttonElement =
538
- document.getElementsByClassName(
539
- "startup-button-active"
540
- );
541
- if (buttonElement.length > 0) {
542
- buttonElement[0].className =
543
- "startup-button-click";
544
- }
545
- await handleCompleteVault();
546
- }
547
- }}
548
- className="verified-custd-mdl-startup-button-active"
549
- >
550
- Confirm
551
- </button>
552
- </div>
553
- </div>
554
- </div>
555
- )}
556
-
557
- {showAddMore && coSigners?.length < 4 && (
558
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-body">
559
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-first">
560
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-first-header">
561
- <p className="verified-custd-mdl-add-cosigner-step2-add-more-first-header-text">
562
- Add Details
563
- </p>
564
- </div>
565
-
566
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-first-footer">
567
- <p className="verified-custd-mdl-add-cosigner-step2-add-more-first-footer-text">
568
- {
569
- numberPositionsFmt[coSigners?.length + 1]?.split(
570
- " "
571
- )[0]
572
- }
573
- <sup>
574
- {
575
- numberPositionsFmt[
576
- coSigners?.length + 1
577
- ]?.split(" ")[1]
578
- }
579
- </sup>{" "}
580
- Co-Signer
581
- </p>
582
- </div>
583
- </div>
584
-
585
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-second">
586
- <input
587
- onInput={(e: any) => {
588
- setCoSignerName(e.target.value);
589
- }}
590
- value={coSignerName}
591
- placeholder="Enter Co-signer name"
592
- className="verified-custd-mdl-add-cosigner-step2-add-more-second-input"
593
- type="text"
594
- />
595
- </div>
596
-
597
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-third">
598
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont">
599
- <img
600
- onClick={() => {
601
- setAddChannel("sms");
602
- setErrorText("");
603
- setCoSignerEmail("");
604
- }}
605
- src={
606
- addChannel === "sms"
607
- ? imageAssets.selectClicked
608
- : imageAssets.select
609
- }
610
- alt=""
611
- />
612
- <p className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont-text">
613
- Phone number
614
- </p>
615
- </div>
616
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont">
617
- <img
618
- onClick={() => {
619
- setAddChannel("email");
620
- setErrorText("");
621
- setCoSignerNumber("");
622
- setCoSignerNumberFmt("");
623
- setUserInput("");
624
- }}
625
- src={
626
- addChannel === "email"
627
- ? imageAssets.selectClicked
628
- : imageAssets.select
629
- }
630
- alt=""
631
- />
632
- <p className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont-text">
633
- Email
634
- </p>
635
- </div>
636
- </div>
637
-
638
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-third">
639
- {addChannel === "sms" && (
640
- <div className="verified-custd-mdl-st-contact-input">
641
- <div className="verified-custd-mdl-st-contact-content-container">
642
- <div
643
- onClick={() => {
644
- setSearchActive(!searchActive);
645
- }}
646
- className="verified-custd-mdl-st-contact-first-section"
647
- >
648
- <img
649
- onClick={() => {
650
- setSearchActive(!searchActive);
651
- }}
652
- alt="Country Flag"
653
- className="verified-custd-mdl-st-contact-selection-icon"
654
- src={selectedCountry.flag}
655
- />
656
- <p
657
- onClick={() => {
658
- setSearchActive(!searchActive);
659
- }}
660
- className="verified-custd-mdl-st-contact-selection-text"
661
- >
662
- + {selectedCountry.area}
663
- </p>
664
- {searchActive && (
665
- <img
666
- onClick={() => {
667
- setSearchActive(!searchActive);
668
- }}
669
- alt="Dropdown Icon"
670
- className="verified-custd-mdl-st-contact-dropdown"
671
- src={imageAssets.arrowUp}
672
- />
673
- )}
674
- {!searchActive && (
675
- <img
676
- onClick={() => {
677
- setSearchActive(!searchActive);
678
- }}
679
- alt="Dropdown Icon"
680
- className="verified-custd-mdl-st-contact-dropdown"
681
- src={imageAssets.arrowDown}
682
- />
683
- )}
684
- </div>
685
-
686
- <input
687
- onInputCapture={(e: any) => {
688
- if (e.target.value === "") {
689
- setUserInput(userInput + " ");
690
- } else {
691
- setUserInput(e.target.value);
692
- }
693
- const numericInput = e.target.value?.replace(
694
- /\D/g,
695
- ""
696
- );
697
- setCoSignerNumber(numericInput);
698
- let formattedNumber = "";
699
- for (
700
- let i = 0;
701
- i < numericInput?.length;
702
- i++
703
- ) {
704
- formattedNumber += numericInput[i];
705
- if (
706
- (i + 1) % 5 === 0 &&
707
- i + 1 < numericInput?.length
708
- ) {
709
- formattedNumber += " ";
710
- }
711
- }
712
- setCoSignerNumberFmt(formattedNumber);
713
- setErrorText("");
714
- }}
715
- onInput={(e) => {
716
- handleButtonDisplay();
717
- }}
718
- value={coSignerNumberFmt}
719
- id="phone-input"
720
- type="text"
721
- className="verified-custd-mdl-st-contact-second-section"
722
- placeholder="Enter phone number"
723
- />
724
- </div>
725
- {searchActive && (
726
- <SearchBox
727
- pageName="ftu/contact"
728
- searchContent={props.allCountries}
729
- type="area-code"
730
- handleButtonDisplay={handleButtonDisplay}
731
- setSelected={setSelectedCountry}
732
- selected={selectedCountry}
733
- searchActive={searchActive}
734
- setSearchActive={setSearchActive}
735
- contentMaxHeight="300"
736
- contentbottomMargin="300"
737
- />
738
- )}
739
- {errorText === "" &&
740
- coSignerNumber.length !== 10 &&
741
- userInput.length > 10 && (
742
- <div className="verified-custd-mdl-st-contact-input-error">
743
- <p className="verified-custd-mdl-input-error-text">
744
- Invalid input, please check the phone number
745
- </p>
746
- </div>
747
- )}
748
- {errorText !== "" && (
749
- <div className="verified-custd-mdl-st-contact-input-error">
750
- <p className="verified-custd-mdl-input-error-text">
751
- {errorText}
752
- </p>
753
- </div>
754
- )}
755
- </div>
756
- )}
757
- {addChannel === "email" && (
758
- <React.Fragment>
759
- <div className="verified-custd-mdl-st-contact-input">
760
- <input
761
- style={{ width: "100%" }}
762
- onInputCapture={(e: any) => {
763
- setCoSignerEmail(e.target.value);
764
- setErrorText("");
765
- }}
766
- onInput={(e) => {
767
- handleButtonDisplay();
768
- }}
769
- value={coSignerEmail}
770
- id="email-input"
771
- type="text"
772
- className="verified-custd-mdl-st-contact-second-section"
773
- placeholder="Enter email"
774
- />
775
- {errorText !== "" && (
776
- <div className="verified-custd-mdl-st-contact-input-error">
777
- <p className="verified-custd-mdl-input-error-text">
778
- {errorText}
779
- </p>
780
- </div>
781
- )}
782
- </div>
783
- </React.Fragment>
784
- )}
785
- </div>
786
-
787
- <div className="verified-custd-mdl-add-cosigner-step2-add-more-buttons">
788
- <button
789
- onClick={() => setShowAddMore(false)}
790
- className="verified-custd-mdl-add-cosigner-step2-add-more-buttons-neut"
791
- >
792
- Cancel
793
- </button>
794
- <button
795
- onClickCapture={() => {
796
- handleAddCoSigner();
797
- }}
798
- onClick={() => handleButtonDisplay()}
799
- className="verified-custd-mdl-add-cosigner-step2-add-more-buttons-action"
800
- >
801
- Add
802
- </button>
803
- </div>
804
- </div>
805
- )}
806
-
807
- {!showAddMore && !showSetRule && coSigners?.length < 4 && (
808
- <div
809
- onClick={() => setShowAddMore(true)}
810
- className="verified-custd-mdl-add-cosigner-step2-body-content-footer"
811
- >
812
- <img
813
- style={{ width: "20px" }}
814
- src={imageAssets.addIcon}
815
- alt="add icon"
816
- />
817
- <p className="verified-custd-mdl-add-cosigner-step2-body-content-footer-text">
818
- Add another Co-Signer
819
- </p>
820
- </div>
821
- )}
822
- {!showAddMore && !showSetRule && coSigners?.length === 4 && (
823
- <div className="verified-custd-mdl-add-cosigner-step2-body-content-footer-dis">
824
- <img
825
- style={{ width: "20px" }}
826
- src={imageAssets.addDisableIcon}
827
- alt="add icon"
828
- />
829
- <p className="verified-custd-mdl-add-cosigner-step2-body-content-footer-text-dis">
830
- Add another Co-Signer
831
- </p>
832
- </div>
833
- )}
834
- </div>
835
- </div>
836
- {!showSetRule && (
837
- <button
838
- style={
839
- !showAddMore && coSigners?.length < 4
840
- ? { marginTop: "50px", marginBottom: "20px" }
841
- : { marginBottom: "20px" }
842
- }
843
- id="add-cosigner-button"
844
- onClick={async (e: any) => {
845
- if (
846
- e.target.className.includes("startup-button") &&
847
- e.target.className !== "startup-button"
848
- ) {
849
- e.target.className = "startup-button-click";
850
- if (coSigners?.length > 0) {
851
- setRequiredSigners(2);
852
- setShowSetRule(true);
853
- setShowAddMore(false);
854
- }
855
- } else {
856
- const buttonElement = document.getElementsByClassName(
857
- "startup-button-active"
858
- );
859
- if (buttonElement.length > 0) {
860
- buttonElement[0].className = "startup-button-click";
861
- if (coSigners?.length > 0) {
862
- setRequiredSigners(2);
863
- setShowSetRule(true);
864
- setShowAddMore(false);
865
- }
866
- }
867
- }
868
- }}
869
- className="verified-custd-mdl-startup-button"
870
- >
871
- Proceed
872
- </button>
873
- )}
874
- </React.Fragment>
875
- )}
876
- </React.Fragment>
877
- )}
878
-
879
- {showLearnMore && (
880
- <React.Fragment>
881
- {learnMoreStep === "1" && (
882
- <React.Fragment>
883
- <img
884
- className="verified-custd-mdl-add-cosigner-body-icon"
885
- src={imageAssets.addCoSignerIcon2}
886
- alt=""
887
- />
888
-
889
- <div className="verified-custd-mdl-add-cosigner-more-body">
890
- <div className="verified-custd-mdl-add-cosigner-more-header-cont">
891
- <div className="verified-custd-mdl-add-cosigner-more-title-cont">
892
- <p className="verified-custd-mdl-add-cosigner-more-title">
893
- What is a Co-Signer?
894
- </p>
895
- </div>
896
- </div>
897
- <p className="verified-custd-mdl-add-cosigner-more-label">
898
- A Co-Signer is a person who has the right given by you to
899
- generate a new pin on your behalf incase you forget it.{" "}
900
- </p>
901
- </div>
902
-
903
- <div className="verified-custd-mdl-add-cosigner-buttons-cont">
904
- <button
905
- onClick={() => setShowLearnMore(false)}
906
- className="verified-custd-mdl-add-cosigner-button-neut"
907
- >
908
- Back
909
- </button>
910
-
911
- <button
912
- onClick={() => setLearnMoreStep("2")}
913
- className="verified-custd-mdl-add-cosigner-button-action"
914
- >
915
- Next
916
- </button>
917
- </div>
918
- </React.Fragment>
919
- )}
920
-
921
- {learnMoreStep === "2" && (
922
- <React.Fragment>
923
- <img
924
- className="verified-custd-mdl-add-cosigner-body-icon"
925
- src={imageAssets.addCoSignerIcon3}
926
- alt=""
927
- />
928
-
929
- <div className="verified-custd-mdl-add-cosigner-more-body">
930
- <div className="verified-custd-mdl-add-cosigner-more-header-cont">
931
- <div className="verified-custd-mdl-add-cosigner-more-title-cont">
932
- <p className="verified-custd-mdl-add-cosigner-more-title">
933
- Why is it needed?
934
- </p>
935
- </div>
936
- </div>
937
- <p className="verified-custd-mdl-add-cosigner-more-label">
938
- In blockchain application, it is impossible to reset a key if
939
- the PIN is forgotten you can login with the help of Co-Signer
940
- </p>
941
- </div>
942
-
943
- <div className="verified-custd-mdl-add-cosigner-buttons-cont">
944
- <button
945
- onClick={() => setLearnMoreStep("1")}
946
- className="verified-custd-mdl-add-cosigner-button-neut"
947
- >
948
- Back
949
- </button>
950
-
951
- <button
952
- onClick={() => setLearnMoreStep("3")}
953
- className="verified-custd-mdl-add-cosigner-button-action"
954
- >
955
- Next
956
- </button>
957
- </div>
958
- </React.Fragment>
959
- )}
960
-
961
- {learnMoreStep === "3" && (
962
- <React.Fragment>
963
- <img
964
- className="verified-custd-mdl-add-cosigner-body-icon"
965
- src={imageAssets.addCoSignerIcon4}
966
- alt=""
967
- />
968
-
969
- <div className="verified-custd-mdl-add-cosigner-more-body">
970
- <div className="verified-custd-mdl-add-cosigner-more-header-cont">
971
- <div className="verified-custd-mdl-add-cosigner-more-title-cont">
972
- <p className="verified-custd-mdl-add-cosigner-more-title">
973
- Who can be my Co-Signer?
974
- </p>
975
- </div>
976
- </div>
977
- <p className="verified-custd-mdl-add-cosigner-more-label">
978
- You can nominate your trusted acquaintances, family members
979
- and even yourself as a co-signer.
980
- </p>
981
- <p className="verified-custd-mdl-add-cosigner-more-label-link">
982
- Learn More in Details
983
- </p>
984
- </div>
985
-
986
- <div className="verified-custd-mdl-add-cosigner-buttons-cont">
987
- <button
988
- onClick={() => setLearnMoreStep("2")}
989
- className="verified-custd-mdl-add-cosigner-button-neut"
990
- >
991
- Back
992
- </button>
993
-
994
- <button
995
- onClick={() => {
996
- setCosignerStep("2");
997
- setShowAddMore(false);
998
- setShowLearnMore(false);
999
- setLearnMoreStep("1");
1000
- }}
1001
- className="verified-custd-mdl-add-cosigner-button-action"
1002
- >
1003
- Start
1004
- </button>
1005
- </div>
1006
- </React.Fragment>
1007
- )}
1008
- </React.Fragment>
1009
- )}
1010
- </div>
1011
- );
1012
- };
1013
-
1014
- export default AddCosignersPage;