@verified-network/verified-custody 0.1.8 → 0.2.0

package/src/pages/addCosigners.tsx

@@ -0,0 +1,1014 @@
+import React, { useState } from "react";
+import { imageAssets, numberPositionsFmt } from "../utils/constants";
+import { useVaultStore } from "../services/store";
+import { completeVaultCreation } from "../services/contracts";
+import PageSlider from "../components/slider";
+import SearchBox from "../components/search";
+import { VerifiedCustodyHelpers } from "../utils/types";
+
+const AddCosignersPage = (props: {
+  setStep: (step: string) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  userNumberFmt: string;
+  userEmail: string;
+  selectedCountry: { name: string; area: string; flag: string };
+  allCountries: any;
+  defaultCountry?: {
+    area: string;
+    flag: string;
+    name: string;
+  };
+  helperFunctions?: VerifiedCustodyHelpers;
+}) => {
+  const [showLearnMore, setShowLearnMore] = useState<boolean>(false);
+  const [learnMoreStep, setLearnMoreStep] = useState<string>("1");
+  const [cosignerStep, setCosignerStep] = useState<string>("1");
+  const [showAddMore, setShowAddMore] = useState<boolean>(false);
+  const [addChannel, setAddChannel] = useState<string>("sms");
+  const [coSignerNumber, setCoSignerNumber] = useState<string>("");
+  const [coSignerNumberFmt, setCoSignerNumberFmt] = useState<string>("");
+  const [coSignerEmail, setCoSignerEmail] = useState<string>("");
+  const [coSignerName, setCoSignerName] = useState<string>("");
+  const [userInput, setUserInput] = useState<string>("");
+  const [searchActive, setSearchActive] = useState<boolean>(false);
+  const [selectedCountry, setSelectedCountry] = useState(
+    props.defaultCountry || {
+      area: "1",
+      flag: imageAssets.usaFlag,
+      name: "United States",
+    }
+  );
+  const [coSigners, setCosigners] = useState([]);
+  const [showSetRule, setShowSetRule] = useState<boolean>(false);
+  const [requiredSigners, setRequiredSigners] = useState<number>(2);
+  const [errorText, setErrorText] = useState<string>("");
+
+  const { pk, vaultData, vaultContract } = useVaultStore();
+
+  const handleButtonDisplay = () => {
+    const button = document.getElementById("add-cosigner-button");
+    if (button && coSigners?.length > 0) {
+      button.className = "startup-button-active";
+    } else {
+      button!.className = "startup-button";
+    }
+  };
+
+  const handleAddCoSigner = () => {
+    if (addChannel === "sms" && coSignerNumber?.length === 0) {
+      setErrorText("Invalid input, please check the phone number");
+      return;
+    } else if (addChannel === "sms" && coSignerNumber?.length !== 10) {
+      setErrorText("Invalid input, please check the phone number");
+      return;
+    } else if (addChannel === "email" && coSignerEmail?.length === 0) {
+      setErrorText("Invalid input, please check the email");
+      return;
+    } else if (
+      addChannel === "email" &&
+      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(coSignerEmail)
+    ) {
+      setErrorText("Invalid input, please check the email");
+      return;
+    } else if (
+      coSigners?.find((sig) =>
+        sig?.otpChannel === "sms"
+          ? sig?.phoneArea?.toLowerCase() + sig?.number?.toLowerCase() ===
+            selectedCountry.area?.toLowerCase() +
+              coSignerNumberFmt?.toLowerCase()
+          : sig?.email?.toLowerCase() === coSignerEmail?.toLowerCase()
+      )
+    ) {
+      setErrorText(
+        addChannel === "sms"
+          ? "Invalid input, phone number is already a co-signer"
+          : "Invalid input, email is already a co-signer"
+      );
+      return;
+    } else if (
+      addChannel === "sms" &&
+      selectedCountry?.area?.toLowerCase() +
+        coSignerNumberFmt?.toLowerCase() ===
+        props.selectedCountry.area?.toLowerCase() +
+          props.userNumberFmt?.toLowerCase()
+    ) {
+      setErrorText("Invalid input, phone number is creator's phone number");
+      return;
+    } else if (
+      addChannel === "email" &&
+      coSignerEmail?.toLowerCase() === props.userEmail?.toLowerCase()
+    ) {
+      setErrorText("Invalid input, email is creator's email");
+      return;
+    }
+    setErrorText("");
+    let coSignerLength = coSigners?.length;
+    setCosigners((cngs) => [
+      {
+        name: coSignerName,
+        email: coSignerEmail,
+        number: coSignerNumberFmt,
+        phoneNumber: `+${selectedCountry?.area}${coSignerNumber}`,
+        otpChannel: addChannel,
+        phoneArea: selectedCountry?.area,
+        position: cngs?.length + 1,
+        vaultId:
+          addChannel === "sms"
+            ? `+${selectedCountry?.area}${coSignerNumber}`
+            : coSignerEmail,
+      },
+      ...cngs,
+    ]);
+    setCoSignerEmail("");
+    setCoSignerName("");
+    setCoSignerNumber("");
+    setCoSignerNumberFmt("");
+    setUserInput("");
+    if (coSignerLength + 1 === 4) {
+      setShowAddMore(false);
+    }
+  };
+
+  const handleCompleteVault = async () => {
+    const keyHolders = [
+      {
+        otpChannel: props?.userEmail?.length > 0 ? "email" : "sms",
+        email: props?.userEmail,
+        phoneNumber: `+${
+          props?.selectedCountry?.area
+        }${props?.userNumberFmt?.replace(" ", "")}`,
+        vaultId: vaultData?.vaultId,
+      },
+      ...coSigners,
+    ];
+
+    if (
+      keyHolders?.length > 0 &&
+      coSigners?.length > 0 &&
+      requiredSigners &&
+      vaultData?.vaultId &&
+      vaultData?.hashedVaultId &&
+      vaultData?.vaultPin &&
+      vaultData?.hashedVaultPin &&
+      vaultContract &&
+      pk &&
+      props.helperFunctions?.sendCoSignerInvitation &&
+      props.helperFunctions?.sendCreatorConfirmation
+    ) {
+      props.setIsLoading(true);
+      await completeVaultCreation(
+        props.helperFunctions.sendCoSignerInvitation,
+        props.helperFunctions.sendCreatorConfirmation,
+        keyHolders,
+        coSigners,
+        props?.userEmail?.length > 0 ? "email" : "sms",
+        requiredSigners,
+        vaultData.vaultId,
+        vaultData.hashedVaultId,
+        vaultData.vaultPin,
+        vaultData.hashedVaultPin,
+        vaultContract,
+        pk
+      ).then((res) => {
+        props.setIsLoading(false);
+        if (res) {
+          props.setStep("7");
+        }
+      });
+    }
+  };
+
+  return (
+    <div
+      style={{ padding: "0" }}
+      className="verified-custd-mdl-startup-language"
+    >
+      {!showLearnMore && (
+        <React.Fragment>
+          {cosignerStep === "1" && (
+            <React.Fragment>
+              {" "}
+              <div className="verified-custd-mdl-startup-contact">
+                <PageSlider sliderCount={[1, 2, 3]} currentSlider="2" />
+                <div className="verified-custd-mdl-startup-contact-content">
+                  <p className="verified-custd-mdl-startup-contact-text">
+                    We require you to add at least another Co-Signer.
+                  </p>
+                </div>
+              </div>
+              <img
+                className="verified-custd-mdl-add-cosigner-body-icon"
+                src={imageAssets.addCoSignerIcon1}
+                alt=""
+              />
+              <div className="verified-custd-mdl-add-cosigner-body">
+                <div className="verified-custd-mdl-add-cosigner-body-text-cont">
+                  <div className="verified-custd-mdl-add-cosigner-body-text-icon">
+                    <img src={imageAssets.pkicon} alt="icon" />
+                  </div>
+                  <p className="verified-custd-mdl-add-cosigner-body-text-label">
+                    This is a blockchain based platform where{" "}
+                    <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
+                      we do not store password keys.
+                    </span>
+                  </p>
+                </div>
+
+                <div className="verified-custd-mdl-add-cosigner-body-text-cont">
+                  <div className="verified-custd-mdl-add-cosigner-body-text-icon">
+                    <img src={imageAssets.encryptedIcon} alt="icon" />
+                  </div>
+                  <p className="verified-custd-mdl-add-cosigner-body-text-label">
+                    Don’t worry, the{" "}
+                    <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
+                      Co-Signer does not get access
+                    </span>{" "}
+                    to your account in any way.
+                  </p>
+                </div>
+
+                <div className="verified-custd-mdl-add-cosigner-body-text-cont">
+                  <div className="verified-custd-mdl-add-cosigner-body-text-icon">
+                    <img src={imageAssets.supervise} alt="icon" />
+                  </div>
+                  <p className="verified-custd-mdl-add-cosigner-body-text-label">
+                    You can{" "}
+                    <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
+                      be your own Co-Signer
+                    </span>{" "}
+                    by adding a different contact number or Email ID. to your
+                    account in any way.
+                  </p>
+                </div>
+              </div>
+              <div className="verified-custd-mdl-add-cosigner-buttons-cont">
+                <button
+                  onClick={() => {
+                    setLearnMoreStep("1");
+                    setShowLearnMore(true);
+                  }}
+                  className="verified-custd-mdl-add-cosigner-button-neut"
+                >
+                  Learn More
+                </button>
+
+                <button
+                  onClick={() => {
+                    setCosignerStep("2");
+                    setShowAddMore(false);
+                    setShowLearnMore(false);
+                  }}
+                  className="verified-custd-mdl-add-cosigner-button-action"
+                >
+                  Add Co-Signer
+                </button>
+              </div>
+            </React.Fragment>
+          )}
+
+          {cosignerStep === "2" && (
+            <React.Fragment>
+              {" "}
+              <div className="verified-custd-mdl-startup-contact">
+                <PageSlider sliderCount={[1, 2, 3]} currentSlider="2" />
+                <div
+                  style={{ gap: "16px" }}
+                  className="verified-custd-mdl-startup-contact-content"
+                >
+                  <p className="verified-custd-mdl-startup-contact-text">
+                    Add your Co-Signers
+                  </p>
+                  <div className="verified-custd-mdl-startup-otp-text">
+                    <p className="verified-custd-mdl-add-cosigner-header-text">
+                      Add a phone number/an Email ID of Co-Signer to send them a
+                      request.
+                    </p>
+                    <div className="verified-custd-mdl-add-cosigner-header-info-cont">
+                      <p className="verified-custd-mdl-add-cosigner-header-info-text">
+                        <span className="verified-custd-mdl-add-cosigner-header-info-text-bold">
+                          NOTE:
+                        </span>{" "}
+                        You can add yourself as a Co-Signer and further add more
+                        Co-Signers to your account.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="verified-custd-mdl-add-cosigner-step2-body">
+                <div className="verified-custd-mdl-add-cosigner-step2-body-header">
+                  <p className="verified-custd-mdl-add-cosigner-step2-body-header-first-text">
+                    Add Co-Signers
+                  </p>
+
+                  <p className="verified-custd-mdl-add-cosigner-step2-body-header-second-text">
+                    ({coSigners?.length + 1 < 5 ? coSigners?.length + 1 : 5}/5)
+                  </p>
+                </div>
+
+                <div className="verified-custd-mdl-add-cosigner-step2-body-content">
+                  <div className="verified-custd-mdl-add-cosigner-step2-body-content-header">
+                    <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-cont">
+                      <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-body">
+                        <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-label">
+                          <p className="verified-custd-mdl-add-cosigner-step2-body-content-header-label-text">
+                            Creator
+                          </p>
+                        </div>
+                        <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-cont">
+                          <div className="verified-custd-mdl-a-c-2-b-content-header-body-header">
+                            <p className="verified-custd-mdl-a-c-2-b-content-header-body-title">
+                              You
+                            </p>
+                            {props.userEmail?.length > 0 && (
+                              <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
+                                {props.userEmail}
+                              </p>
+                            )}
+                            {props.userEmail?.length === 0 && (
+                              <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
+                                (+{props.selectedCountry.area}){" "}
+                                {props.userNumberFmt}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* <button className="verified-custd-mdl-a-c-2-b-content-header-body-button">
+                          Add Self
+                        </button> */}
+                      </div>
+                    </div>
+                    {!showSetRule &&
+                      coSigners
+                        .sort((a, b) => a?.position - b?.position)
+                        .map((cng: any, idx: number) => (
+                          <div
+                            key={idx}
+                            className="verified-custd-mdl-add-cosigner-step2-body-content-header-cont"
+                          >
+                            <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-body">
+                              <div className="verified-custd-mdl-add-cosigner-step2-body-content-header-label">
+                                <p className="verified-custd-mdl-add-cosigner-step2-body-content-header-label-text">
+                                  {
+                                    numberPositionsFmt[cng?.position]?.split(
+                                      " "
+                                    )[0]
+                                  }
+                                  <sup>
+                                    {
+                                      numberPositionsFmt[cng?.position]?.split(
+                                        " "
+                                      )[1]
+                                    }
+                                  </sup>{" "}
+                                  Co-Signer
+                                </p>
+                              </div>
+                              <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-cont">
+                                <div className="verified-custd-mdl-a-c-2-b-content-header-body-header">
+                                  <p className="verified-custd-mdl-a-c-2-b-content-header-body-title">
+                                    {cng?.name}
+                                  </p>
+                                  {cng.otpChannel === "email" && (
+                                    <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
+                                      {cng.email}
+                                    </p>
+                                  )}
+                                  {cng.otpChannel === "sms" && (
+                                    <p className="verified-custd-mdl-a-c-2-b-content-header-body-label">
+                                      (+{cng?.phoneArea}) {cng.number}
+                                    </p>
+                                  )}
+                                </div>
+                              </div>
+
+                              <div className="verified-custd-mdl-a-c-2-b-content-header-body-header-icons">
+                                <img
+                                  style={{ cursor: "pointer" }}
+                                  src={imageAssets.editBlack}
+                                  alt="edit"
+                                />
+                                <img
+                                  onClickCapture={() => {
+                                    setCosigners((cngs) =>
+                                      cngs
+                                        ?.filter((sig) =>
+                                          sig?.otpChannel === "sms"
+                                            ? sig?.phoneArea?.toLowerCase() +
+                                                sig?.number?.toLowerCase() !==
+                                              cng?.phoneArea?.toLowerCase() +
+                                                cng?.number?.toLowerCase()
+                                            : sig?.email?.toLowerCase() !==
+                                              cng?.email?.toLowerCase()
+                                        )
+                                        ?.map((nSig, newId) => {
+                                          nSig.position = newId + 1;
+                                          return nSig;
+                                        })
+                                    );
+                                  }}
+                                  onClick={() => {
+                                    handleButtonDisplay();
+                                  }}
+                                  style={{ cursor: "pointer" }}
+                                  src={imageAssets.delete}
+                                  alt="delete"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                  </div>
+
+                  {showSetRule && (
+                    <div className="verified-custd-mdl-add-cosigner-confirm-body-content-outter">
+                      <div className="verified-custd-mdl-add-cosigner-confirm-body-content">
+                        <div className="verified-custd-mdl-add-cosigner-confirm-body-cont">
+                          <div className="verified-custd-mdl-add-cosigner-confirm-body-header">
+                            <p className="verified-custd-mdl-add-cosigner-confirm-body-title">
+                              Specify the number of Co-Signers you need to sign
+                              off for an approval
+                            </p>
+                            <p className="verified-custd-mdl-add-cosigner-confirm-body-label">
+                              By default we need 2, you can add up to 5
+                              Co-Signers as minimum sign off needed for
+                              approval.
+                            </p>
+                          </div>
+
+                          <div className="verified-custd-mdl-add-cosigner-confirm-body-footer">
+                            <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-cont">
+                              {new Array(coSigners?.length + 1)
+                                .fill("1")
+                                .map((_: any, idx: number) => (
+                                  <div
+                                    style={
+                                      idx + 1 === requiredSigners
+                                        ? {}
+                                        : {
+                                            height: "0",
+                                            width: "0",
+                                            overflow: "hidden",
+                                          }
+                                    }
+                                    key={idx}
+                                    className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind"
+                                  >
+                                    <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-text-cont">
+                                      <p className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-text">
+                                        {String(idx + 1)}
+                                      </p>{" "}
+                                    </div>
+                                    <img
+                                      className="verified-custd-mdl-add-cosigner-confirm-body-footer-ind-icon"
+                                      src={imageAssets.pointer}
+                                      alt=""
+                                    />
+                                  </div>
+                                ))}
+                            </div>
+
+                            <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-cont">
+                              <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-cont">
+                                <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider">
+                                  <div
+                                    style={
+                                      coSigners?.length === 1
+                                        ? {
+                                            width: `${
+                                              100 / coSigners?.length
+                                            }%`,
+                                          }
+                                        : {
+                                            width: `calc(${
+                                              100 / coSigners?.length
+                                            }% + 12px)`,
+                                          }
+                                    }
+                                    className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-ind"
+                                  >
+                                    <img
+                                      className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-slider-icon"
+                                      src={imageAssets.sliderDot}
+                                      alt=""
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+
+                              <div className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-text-cont">
+                                {new Array(coSigners?.length + 1)
+                                  .fill("1")
+                                  .map((_: any, idx: number) => (
+                                    <p
+                                      style={
+                                        idx === coSigners?.length
+                                          ? { paddingRight: "12px" }
+                                          : idx === 0
+                                          ? { paddingLeft: "12px" }
+                                          : {}
+                                      }
+                                      onClick={() => {
+                                        if (idx + 1 > 1) {
+                                          setRequiredSigners(idx + 1);
+                                        }
+                                      }}
+                                      key={idx}
+                                      className="verified-custd-mdl-add-cosigner-confirm-body-footer-label-text"
+                                    >
+                                      {String(idx + 1)}
+                                    </p>
+                                  ))}
+                              </div>
+                            </div>
+                          </div>
+
+                          <button
+                            id="confirm-cosigner-button"
+                            onClick={async (e: any) => {
+                              if (
+                                e.target.className.includes("startup-button") &&
+                                e.target.className !== "startup-button"
+                              ) {
+                                e.target.className = "startup-button-click";
+                                await handleCompleteVault();
+                              } else {
+                                const buttonElement =
+                                  document.getElementsByClassName(
+                                    "startup-button-active"
+                                  );
+                                if (buttonElement.length > 0) {
+                                  buttonElement[0].className =
+                                    "startup-button-click";
+                                }
+                                await handleCompleteVault();
+                              }
+                            }}
+                            className="verified-custd-mdl-startup-button-active"
+                          >
+                            Confirm
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {showAddMore && coSigners?.length < 4 && (
+                    <div className="verified-custd-mdl-add-cosigner-step2-add-more-body">
+                      <div className="verified-custd-mdl-add-cosigner-step2-add-more-first">
+                        <div className="verified-custd-mdl-add-cosigner-step2-add-more-first-header">
+                          <p className="verified-custd-mdl-add-cosigner-step2-add-more-first-header-text">
+                            Add Details
+                          </p>
+                        </div>
+
+                        <div className="verified-custd-mdl-add-cosigner-step2-add-more-first-footer">
+                          <p className="verified-custd-mdl-add-cosigner-step2-add-more-first-footer-text">
+                            {
+                              numberPositionsFmt[coSigners?.length + 1]?.split(
+                                " "
+                              )[0]
+                            }
+                            <sup>
+                              {
+                                numberPositionsFmt[
+                                  coSigners?.length + 1
+                                ]?.split(" ")[1]
+                              }
+                            </sup>{" "}
+                            Co-Signer
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="verified-custd-mdl-add-cosigner-step2-add-more-second">
+                        <input
+                          onInput={(e: any) => {
+                            setCoSignerName(e.target.value);
+                          }}
+                          value={coSignerName}
+                          placeholder="Enter Co-signer name"
+                          className="verified-custd-mdl-add-cosigner-step2-add-more-second-input"
+                          type="text"
+                        />
+                      </div>
+
+                      <div className="verified-custd-mdl-add-cosigner-step2-add-more-third">
+                        <div className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont">
+                          <img
+                            onClick={() => {
+                              setAddChannel("sms");
+                              setErrorText("");
+                              setCoSignerEmail("");
+                            }}
+                            src={
+                              addChannel === "sms"
+                                ? imageAssets.selectClicked
+                                : imageAssets.select
+                            }
+                            alt=""
+                          />
+                          <p className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont-text">
+                            Phone number
+                          </p>
+                        </div>
+                        <div className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont">
+                          <img
+                            onClick={() => {
+                              setAddChannel("email");
+                              setErrorText("");
+                              setCoSignerNumber("");
+                              setCoSignerNumberFmt("");
+                              setUserInput("");
+                            }}
+                            src={
+                              addChannel === "email"
+                                ? imageAssets.selectClicked
+                                : imageAssets.select
+                            }
+                            alt=""
+                          />
+                          <p className="verified-custd-mdl-add-cosigner-step2-add-more-third-cont-text">
+                            Email
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="verified-custd-mdl-add-cosigner-step2-add-more-third">
+                        {addChannel === "sms" && (
+                          <div className="verified-custd-mdl-st-contact-input">
+                            <div className="verified-custd-mdl-st-contact-content-container">
+                              <div
+                                onClick={() => {
+                                  setSearchActive(!searchActive);
+                                }}
+                                className="verified-custd-mdl-st-contact-first-section"
+                              >
+                                <img
+                                  onClick={() => {
+                                    setSearchActive(!searchActive);
+                                  }}
+                                  alt="Country Flag"
+                                  className="verified-custd-mdl-st-contact-selection-icon"
+                                  src={selectedCountry.flag}
+                                />
+                                <p
+                                  onClick={() => {
+                                    setSearchActive(!searchActive);
+                                  }}
+                                  className="verified-custd-mdl-st-contact-selection-text"
+                                >
+                                  + {selectedCountry.area}
+                                </p>
+                                {searchActive && (
+                                  <img
+                                    onClick={() => {
+                                      setSearchActive(!searchActive);
+                                    }}
+                                    alt="Dropdown Icon"
+                                    className="verified-custd-mdl-st-contact-dropdown"
+                                    src={imageAssets.arrowUp}
+                                  />
+                                )}
+                                {!searchActive && (
+                                  <img
+                                    onClick={() => {
+                                      setSearchActive(!searchActive);
+                                    }}
+                                    alt="Dropdown Icon"
+                                    className="verified-custd-mdl-st-contact-dropdown"
+                                    src={imageAssets.arrowDown}
+                                  />
+                                )}
+                              </div>
+
+                              <input
+                                onInputCapture={(e: any) => {
+                                  if (e.target.value === "") {
+                                    setUserInput(userInput + " ");
+                                  } else {
+                                    setUserInput(e.target.value);
+                                  }
+                                  const numericInput = e.target.value?.replace(
+                                    /\D/g,
+                                    ""
+                                  );
+                                  setCoSignerNumber(numericInput);
+                                  let formattedNumber = "";
+                                  for (
+                                    let i = 0;
+                                    i < numericInput?.length;
+                                    i++
+                                  ) {
+                                    formattedNumber += numericInput[i];
+                                    if (
+                                      (i + 1) % 5 === 0 &&
+                                      i + 1 < numericInput?.length
+                                    ) {
+                                      formattedNumber += " ";
+                                    }
+                                  }
+                                  setCoSignerNumberFmt(formattedNumber);
+                                  setErrorText("");
+                                }}
+                                onInput={(e) => {
+                                  handleButtonDisplay();
+                                }}
+                                value={coSignerNumberFmt}
+                                id="phone-input"
+                                type="text"
+                                className="verified-custd-mdl-st-contact-second-section"
+                                placeholder="Enter phone number"
+                              />
+                            </div>
+                            {searchActive && (
+                              <SearchBox
+                                pageName="ftu/contact"
+                                searchContent={props.allCountries}
+                                type="area-code"
+                                handleButtonDisplay={handleButtonDisplay}
+                                setSelected={setSelectedCountry}
+                                selected={selectedCountry}
+                                searchActive={searchActive}
+                                setSearchActive={setSearchActive}
+                                contentMaxHeight="300"
+                                contentbottomMargin="300"
+                              />
+                            )}
+                            {errorText === "" &&
+                              coSignerNumber.length !== 10 &&
+                              userInput.length > 10 && (
+                                <div className="verified-custd-mdl-st-contact-input-error">
+                                  <p className="verified-custd-mdl-input-error-text">
+                                    Invalid input, please check the phone number
+                                  </p>
+                                </div>
+                              )}
+                            {errorText !== "" && (
+                              <div className="verified-custd-mdl-st-contact-input-error">
+                                <p className="verified-custd-mdl-input-error-text">
+                                  {errorText}
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                        {addChannel === "email" && (
+                          <React.Fragment>
+                            <div className="verified-custd-mdl-st-contact-input">
+                              <input
+                                style={{ width: "100%" }}
+                                onInputCapture={(e: any) => {
+                                  setCoSignerEmail(e.target.value);
+                                  setErrorText("");
+                                }}
+                                onInput={(e) => {
+                                  handleButtonDisplay();
+                                }}
+                                value={coSignerEmail}
+                                id="email-input"
+                                type="text"
+                                className="verified-custd-mdl-st-contact-second-section"
+                                placeholder="Enter email"
+                              />
+                              {errorText !== "" && (
+                                <div className="verified-custd-mdl-st-contact-input-error">
+                                  <p className="verified-custd-mdl-input-error-text">
+                                    {errorText}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </React.Fragment>
+                        )}
+                      </div>
+
+                      <div className="verified-custd-mdl-add-cosigner-step2-add-more-buttons">
+                        <button
+                          onClick={() => setShowAddMore(false)}
+                          className="verified-custd-mdl-add-cosigner-step2-add-more-buttons-neut"
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          onClickCapture={() => {
+                            handleAddCoSigner();
+                          }}
+                          onClick={() => handleButtonDisplay()}
+                          className="verified-custd-mdl-add-cosigner-step2-add-more-buttons-action"
+                        >
+                          Add
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  {!showAddMore && !showSetRule && coSigners?.length < 4 && (
+                    <div
+                      onClick={() => setShowAddMore(true)}
+                      className="verified-custd-mdl-add-cosigner-step2-body-content-footer"
+                    >
+                      <img
+                        style={{ width: "20px" }}
+                        src={imageAssets.addIcon}
+                        alt="add icon"
+                      />
+                      <p className="verified-custd-mdl-add-cosigner-step2-body-content-footer-text">
+                        Add another Co-Signer
+                      </p>
+                    </div>
+                  )}
+                  {!showAddMore && !showSetRule && coSigners?.length === 4 && (
+                    <div className="verified-custd-mdl-add-cosigner-step2-body-content-footer-dis">
+                      <img
+                        style={{ width: "20px" }}
+                        src={imageAssets.addDisableIcon}
+                        alt="add icon"
+                      />
+                      <p className="verified-custd-mdl-add-cosigner-step2-body-content-footer-text-dis">
+                        Add another Co-Signer
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+              {!showSetRule && (
+                <button
+                  style={
+                    !showAddMore && coSigners?.length < 4
+                      ? { marginTop: "50px", marginBottom: "20px" }
+                      : { marginBottom: "20px" }
+                  }
+                  id="add-cosigner-button"
+                  onClick={async (e: any) => {
+                    if (
+                      e.target.className.includes("startup-button") &&
+                      e.target.className !== "startup-button"
+                    ) {
+                      e.target.className = "startup-button-click";
+                      if (coSigners?.length > 0) {
+                        setRequiredSigners(2);
+                        setShowSetRule(true);
+                        setShowAddMore(false);
+                      }
+                    } else {
+                      const buttonElement = document.getElementsByClassName(
+                        "startup-button-active"
+                      );
+                      if (buttonElement.length > 0) {
+                        buttonElement[0].className = "startup-button-click";
+                        if (coSigners?.length > 0) {
+                          setRequiredSigners(2);
+                          setShowSetRule(true);
+                          setShowAddMore(false);
+                        }
+                      }
+                    }
+                  }}
+                  className="verified-custd-mdl-startup-button"
+                >
+                  Proceed
+                </button>
+              )}
+            </React.Fragment>
+          )}
+        </React.Fragment>
+      )}
+
+      {showLearnMore && (
+        <React.Fragment>
+          {learnMoreStep === "1" && (
+            <React.Fragment>
+              <img
+                className="verified-custd-mdl-add-cosigner-body-icon"
+                src={imageAssets.addCoSignerIcon2}
+                alt=""
+              />
+
+              <div className="verified-custd-mdl-add-cosigner-more-body">
+                <div className="verified-custd-mdl-add-cosigner-more-header-cont">
+                  <div className="verified-custd-mdl-add-cosigner-more-title-cont">
+                    <p className="verified-custd-mdl-add-cosigner-more-title">
+                      What is a Co-Signer?
+                    </p>
+                  </div>
+                </div>
+                <p className="verified-custd-mdl-add-cosigner-more-label">
+                  A Co-Signer is a person who has the right given by you to
+                  generate a new pin on your behalf incase you forget it.{" "}
+                </p>
+              </div>
+
+              <div className="verified-custd-mdl-add-cosigner-buttons-cont">
+                <button
+                  onClick={() => setShowLearnMore(false)}
+                  className="verified-custd-mdl-add-cosigner-button-neut"
+                >
+                  Back
+                </button>
+
+                <button
+                  onClick={() => setLearnMoreStep("2")}
+                  className="verified-custd-mdl-add-cosigner-button-action"
+                >
+                  Next
+                </button>
+              </div>
+            </React.Fragment>
+          )}
+
+          {learnMoreStep === "2" && (
+            <React.Fragment>
+              <img
+                className="verified-custd-mdl-add-cosigner-body-icon"
+                src={imageAssets.addCoSignerIcon3}
+                alt=""
+              />
+
+              <div className="verified-custd-mdl-add-cosigner-more-body">
+                <div className="verified-custd-mdl-add-cosigner-more-header-cont">
+                  <div className="verified-custd-mdl-add-cosigner-more-title-cont">
+                    <p className="verified-custd-mdl-add-cosigner-more-title">
+                      Why is it needed?
+                    </p>
+                  </div>
+                </div>
+                <p className="verified-custd-mdl-add-cosigner-more-label">
+                  In blockchain application, it is impossible to reset a key if
+                  the PIN is forgotten you can login with the help of Co-Signer
+                </p>
+              </div>
+
+              <div className="verified-custd-mdl-add-cosigner-buttons-cont">
+                <button
+                  onClick={() => setLearnMoreStep("1")}
+                  className="verified-custd-mdl-add-cosigner-button-neut"
+                >
+                  Back
+                </button>
+
+                <button
+                  onClick={() => setLearnMoreStep("3")}
+                  className="verified-custd-mdl-add-cosigner-button-action"
+                >
+                  Next
+                </button>
+              </div>
+            </React.Fragment>
+          )}
+
+          {learnMoreStep === "3" && (
+            <React.Fragment>
+              <img
+                className="verified-custd-mdl-add-cosigner-body-icon"
+                src={imageAssets.addCoSignerIcon4}
+                alt=""
+              />
+
+              <div className="verified-custd-mdl-add-cosigner-more-body">
+                <div className="verified-custd-mdl-add-cosigner-more-header-cont">
+                  <div className="verified-custd-mdl-add-cosigner-more-title-cont">
+                    <p className="verified-custd-mdl-add-cosigner-more-title">
+                      Who can be my Co-Signer?
+                    </p>
+                  </div>
+                </div>
+                <p className="verified-custd-mdl-add-cosigner-more-label">
+                  You can nominate your trusted acquaintances, family members
+                  and even yourself as a co-signer.
+                </p>
+                <p className="verified-custd-mdl-add-cosigner-more-label-link">
+                  Learn More in Details
+                </p>
+              </div>
+
+              <div className="verified-custd-mdl-add-cosigner-buttons-cont">
+                <button
+                  onClick={() => setLearnMoreStep("2")}
+                  className="verified-custd-mdl-add-cosigner-button-neut"
+                >
+                  Back
+                </button>
+
+                <button
+                  onClick={() => {
+                    setCosignerStep("2");
+                    setShowAddMore(false);
+                    setShowLearnMore(false);
+                    setLearnMoreStep("1");
+                  }}
+                  className="verified-custd-mdl-add-cosigner-button-action"
+                >
+                  Start
+                </button>
+              </div>
+            </React.Fragment>
+          )}
+        </React.Fragment>
+      )}
+    </div>
+  );
+};
+
+export default AddCosignersPage;