@verified-network/verified-custody 0.1.9 → 0.2.0

package/src/pages/enterPin.tsx

@@ -0,0 +1,821 @@
+import React, { useEffect, useState } from "react";
+import { hashTheString, loadAllGoogleFonts } from "../utils/helpers";
+import { defaultChainId, imageAssets } from "../utils/constants";
+import {
+  acceptOrRejectInvitation,
+  initiateVaultRecovery,
+  restoreVaultLogin,
+  signVaultRecovery,
+  validateVaultPin,
+} from "../services/contracts";
+import PageSlider from "../components/slider";
+import { LogoutOverlay, PrivacyOverlay } from "../components/overlays";
+import Success from "../components/success";
+import { VerifiedCustodyHelpers } from "../utils/types";
+
+const EnterPinPage = (props: {
+  fontsLoaded?: boolean;
+  setisOnboard: (isOnboard: boolean) => void;
+  vaultId: string;
+  hashedVaultId: string;
+  encrptedPk: string;
+  vaultAddress: string;
+  vaultChannel: "sms" | "email";
+  actionText?: string;
+  title?: string;
+  origin?: string;
+  chainId?: number;
+  newChainId?: number;
+  action?: string;
+  reqVaultData?: any;
+  reqTxData?: any;
+  setIsLoading: (isLoading: boolean) => void;
+  helperFunctions?: VerifiedCustodyHelpers;
+}) => {
+  const [fontsLoaded, setFontsLoaded] = useState(props.fontsLoaded || false);
+  const [pinIncorrect, setPinIncorrect] = useState(false);
+  const [pinHide, setPinHide] = useState(true); //hide pin by default
+  const [searchActive, setSearchActive] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [vaultData, setVaultData] = useState(null);
+  const [chainId, setChainId] = useState(props.newChainId || defaultChainId);
+  const [showChains, setShowChains] = useState(false);
+  const [showInvitation, setShowInvitation] = useState(false);
+  const [showInvitationSuccess, setShowInvitationSuccess] = useState(false);
+  const [showRejectInvitation, setShowRejectInvitation] = useState(false);
+  const [isAccepted, setIsAccepted] = useState(false);
+  const [pinIncorrectText, setPinIncorrectText] = useState("");
+
+  useEffect(() => {
+    const PreloadGoogleFonts = () => {
+      const isFontsLoaded = loadAllGoogleFonts(document);
+      setFontsLoaded(isFontsLoaded);
+    };
+    if (!props.fontsLoaded) {
+      PreloadGoogleFonts();
+    }
+  }, []);
+
+  //todo: add key actions to input focus change
+  const handlleInputFocus = (currentInput: any) => {
+    if (currentInput.value.length > 0) {
+      const nextInput = currentInput.nextElementSibling;
+      if (nextInput) {
+        nextInput.focus();
+      }
+    } else if (currentInput.value.length === 0) {
+      currentInput.focus();
+    }
+  };
+
+  const hanlePinPaste = (e: any) => {
+    const pastedText = e.clipboardData.getData("text");
+    const numbersFromText = pastedText?.replace(/\D/g, "");
+    const allOptInputs: any = document.getElementsByClassName("otp-input");
+    if (allOptInputs?.length === 4 && numbersFromText?.length > 0) {
+      for (let i = 0; i < allOptInputs.length; i++) {
+        if (numbersFromText[i]) {
+          allOptInputs[i].value = numbersFromText[i];
+          allOptInputs[i].focus();
+        }
+      }
+    }
+  };
+
+  const hanslePinBackspace = (e: any) => {
+    const previousInpput = e.target.previousElementSibling;
+    if (previousInpput) {
+      previousInpput.focus();
+    }
+  };
+
+  const handleButtonDisplay = () => {
+    const button: any = document.getElementById(
+      "verified-custd-mdl-otp-button"
+    );
+    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
+    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
+    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
+    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
+    if (
+      button &&
+      otp1?.value.length > 0 &&
+      otp2?.value.length > 0 &&
+      otp3?.value.length > 0 &&
+      otp4?.value.length > 0 &&
+      !pinIncorrect
+    ) {
+      button.className = "verified-custd-mdl-startup-button-active";
+    } else {
+      button.className = "verified-custd-mdl-startup-button";
+    }
+  };
+
+  const handleVerifyPin = async () => {
+    if (!props.helperFunctions) {
+      setPinIncorrectText(
+        "No Helper Functions. Please include all helper functions in the EnterPinPage props."
+      );
+      setPinIncorrect(true);
+    } else {
+      setPinIncorrectText("");
+      setPinIncorrect(false);
+      const otp1: any = document.getElementById(
+        "verified-custd-mdl-otp-input-1"
+      );
+      const otp2: any = document.getElementById(
+        "verified-custd-mdl-otp-input-2"
+      );
+      const otp3: any = document.getElementById(
+        "verified-custd-mdl-otp-input-3"
+      );
+      const otp4: any = document.getElementById(
+        "verified-custd-mdl-otp-input-4"
+      );
+      if (
+        otp1?.value?.length > 0 &&
+        otp2?.value?.length > 0 &&
+        otp3?.value?.length > 0 &&
+        otp4?.value?.length > 0 &&
+        props.hashedVaultId &&
+        props.encrptedPk
+      ) {
+        props.setIsLoading(true);
+        const fullOtp = otp1?.value + otp2?.value + otp3?.value + otp4?.value;
+        await validateVaultPin(
+          props.vaultId,
+          props.hashedVaultId,
+          fullOtp,
+          hashTheString(fullOtp),
+          props.encrptedPk,
+          props.vaultAddress,
+          props.vaultChannel,
+          Number(chainId)
+        ).then(async (res) => {
+          props.setIsLoading(false);
+          if (res) {
+            setVaultData(res);
+            if (
+              props.action === "getPk" &&
+              props.reqVaultData?.vaultId?.toLowerCase() ===
+                props.vaultId?.toLowerCase()
+            ) {
+              props.setIsLoading(true);
+              await initiateVaultRecovery(
+                props.helperFunctions.sendCreatorInitiation,
+                props.hashedVaultId,
+                hashTheString(fullOtp),
+                props.vaultId,
+                fullOtp,
+                props.encrptedPk,
+                props.vaultChannel,
+                Number(chainId)
+              ).then(async (res) => {
+                props.setIsLoading(false);
+                if (chrome?.storage?.local) {
+                  await chrome.storage.local.remove("myVault");
+                }
+                if (res) {
+                  setShowSuccess(true);
+                } else {
+                  setPinIncorrectText(
+                    `Account recovery failed. Verify you don't have pending account recovery process and Try again later`
+                  );
+                  setPinIncorrect(true);
+                }
+              });
+            } else if (props.action === "signRecovery") {
+              props.setIsLoading(true);
+              await signVaultRecovery(
+                props.helperFunctions.sendCreatorSigned,
+                props.helperFunctions.sendCreatorCompleted,
+                props.hashedVaultId,
+                hashTheString(fullOtp),
+                props.vaultId,
+                fullOtp,
+                props.encrptedPk,
+                props.reqVaultData?.vaultId,
+                props.reqVaultData?.hashedVaultId,
+                props.reqVaultData?.hashedVaultPin,
+                props.reqTxData?.id,
+                Number(chainId)
+              ).then(async (res) => {
+                props.setIsLoading(false);
+                if (
+                  !props.reqTxData?.newUser &&
+                  chrome?.storage?.local &&
+                  !props.vaultAddress
+                ) {
+                  await chrome.storage.local.remove("myVault");
+                }
+                if (res) {
+                  setShowSuccess(true);
+                } else {
+                  setPinIncorrectText(
+                    `Error while signing transaction; it's either you  are not a valid co-signer or you had signed this particular transaction before. Verify and try again later.`
+                  );
+                  setPinIncorrect(true);
+                }
+              });
+            } else if (
+              props.action === "completeRecovery" &&
+              props.reqVaultData?.vaultId?.toLowerCase() ===
+                props.vaultId?.toLowerCase()
+            ) {
+              props.setIsLoading(true);
+              await restoreVaultLogin(
+                props.hashedVaultId,
+                hashTheString(fullOtp),
+                props.vaultId,
+                fullOtp,
+                props.encrptedPk,
+                props.reqTxData?.id,
+                props.vaultChannel,
+                Number(chainId)
+              ).then(async (res) => {
+                props.setIsLoading(false);
+                if (res) {
+                  setShowSuccess(true);
+                } else {
+                  if (chrome?.storage?.local) {
+                    await chrome.storage.local.remove("myVault");
+                  }
+                  setPinIncorrectText(
+                    `Error while restoring login access. Verify all required co-signers had signed our account recovery and try again later.`
+                  );
+                  setPinIncorrect(true);
+                }
+              });
+            } else if (
+              props.action === "invitation" &&
+              props.reqVaultData?.vaultId?.toLowerCase() !==
+                props.vaultId?.toLowerCase() &&
+              props.reqVaultData?.coSignerId?.toLowerCase() ===
+                props.vaultId?.toLowerCase()
+            ) {
+              setPinIncorrectText("");
+              setPinIncorrect(false);
+              setShowInvitation(true);
+            } else if (
+              props.action === "invitation" &&
+              props.reqVaultData?.vaultId?.toLowerCase() ===
+                props.vaultId?.toLowerCase()
+            ) {
+              setPinIncorrectText(
+                `You cannot accept your own Co-Signer invitation. please logout and login to: ${props.reqVaultData?.coSignerId} account`
+              );
+              setPinIncorrect(true);
+            } else if (
+              props.action === "invitation" &&
+              props.reqVaultData?.coSignerId?.toLowerCase() !==
+                props.vaultId?.toLowerCase()
+            ) {
+              setPinIncorrectText(
+                `You cannot accept this Co-Signer invitation. please logout and login to: ${props.reqVaultData?.coSignerId} account`
+              );
+              setPinIncorrect(true);
+            } else if (
+              props.action === "getPk" &&
+              props.reqVaultData?.vaultId?.toLowerCase() !==
+                props.vaultId?.toLowerCase()
+            ) {
+              if (chrome?.storage?.local) {
+                await chrome.storage.local.remove("myVault");
+              }
+              setPinIncorrectText(
+                `You are not authorized to fetch account details. please logout and login to: ${props.reqVaultData?.vaultId} account`
+              );
+              setPinIncorrect(true);
+            } else if (
+              props.action === "completeRecovery" &&
+              props.reqVaultData?.vaultId?.toLowerCase() !==
+                props.vaultId?.toLowerCase()
+            ) {
+              if (chrome?.storage?.local) {
+                await chrome.storage.local.remove("myVault");
+              }
+              setPinIncorrectText(
+                `You are not authorized to restore login access for this account. please logout and login to: ${props.reqVaultData?.vaultId} account`
+              );
+              setPinIncorrect(true);
+            } else if (
+              props.action === "connect_wallet" &&
+              !props?.vaultAddress
+            ) {
+              setPinIncorrectText(
+                `Incomplete account details received. This may be due to incomplete/unexpected error from last login. Please logout and login back to recover account details.`
+              );
+              setPinIncorrect(true);
+            } else {
+              setPinIncorrectText("");
+              setPinIncorrect(false);
+              setShowSuccess(true);
+            }
+          } else {
+            setPinIncorrectText("");
+            setPinIncorrect(true);
+          }
+        });
+      }
+    }
+  };
+
+  const handleAcceptAndRejectInvitation = async (accepted: boolean) => {
+    const otp1: any = document.getElementById("verified-custd-mdl-otp-input-1");
+    const otp2: any = document.getElementById("verified-custd-mdl-otp-input-2");
+    const otp3: any = document.getElementById("verified-custd-mdl-otp-input-3");
+    const otp4: any = document.getElementById("verified-custd-mdl-otp-input-4");
+    const vaultId = props.vaultId;
+    if (
+      otp1?.value?.length > 0 &&
+      otp2?.value?.length > 0 &&
+      otp3?.value?.length > 0 &&
+      otp4?.value?.length > 0 &&
+      props?.reqVaultData?.hashedVaultId &&
+      props.reqVaultData?.hashedVaultPin &&
+      vaultId &&
+      props.helperFunctions?.sendCreatorAcceptance &&
+      props.helperFunctions?.sendCreatorRejection
+    ) {
+      props.setIsLoading(true);
+      const vaultPin = otp1?.value + otp2?.value + otp3?.value + otp4?.value;
+      const hashedVaultId = hashTheString(vaultId);
+      const hashedVaultPin = hashTheString(vaultPin);
+      await acceptOrRejectInvitation(
+        props.helperFunctions.sendCreatorAcceptance,
+        props.helperFunctions.sendCreatorRejection,
+        props.vaultChannel,
+        hashedVaultId,
+        hashedVaultPin,
+        props?.reqVaultData?.hashedVaultId,
+        props.reqVaultData?.hashedVaultPin,
+        props?.reqVaultData?.vaultId,
+        vaultId,
+        accepted,
+        null,
+        props.encrptedPk,
+        Number(chainId)
+      ).then((res) => {
+        props.setIsLoading(false);
+        if (res) {
+          setIsAccepted(accepted);
+          setShowInvitationSuccess(true);
+        }
+      });
+    }
+  };
+
+  return (
+    <React.Fragment>
+      {!showInvitation && (
+        <React.Fragment>
+          {!showSuccess && (
+            <div className="verified-custd-mdl-startup-language">
+              <div className="verified-custd-mdl-startup-contact">
+                <PageSlider sliderCount={[1]} currentSlider="0" />
+                <div className="verified-custd-mdl-startup-contact-content">
+                  <div className="verified-custd-mdl-startup-contact-content-heder-cont">
+                    <p
+                      style={{ alignSelf: "center" }}
+                      className="verified-custd-mdl-startup-contact-text"
+                    >
+                      Enter PIN
+                    </p>
+                    {/* <div className="verified-custd-mdl-portfolio-page-content-header-button-cont">
+                  <button
+                    onClick={() => setShowChains(!showChains)}
+                    className="verified-custd-mdl-portfolio-page-content-header-button"
+                  >
+                    {chainConfig[chainId].chainName}
+                    <img src={expandIcon} alt="Expand Icon" />
+                  </button>
+                  {showChains && (
+                    <div className="verified-custd-mdl-portfolio-page-content-header-button-body">
+                      {Object.keys(chainConfig).map((chn: any) => (
+                        <div
+                          onClick={() => {
+                            setChainId(chn);
+                            setShowChains(false);
+                          }}
+                          className="verified-custd-mdl-portfolio-page-content-header-button-body-cont"
+                        >
+                          <p className="verified-custd-mdl-portfolio-page-content-header-button-body-text">
+                            {chainConfig[chn].chainName}
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div> */}
+                  </div>
+                  <div className="verified-custd-mdl-startup-otp-text">
+                    <p className="verified-custd-mdl-startup-otp-header-text">
+                      Welcome back, please enter the{" "}
+                      <span style={{ color: "#0C0C0E" }}>4-Digit PIN</span> for
+                      your{" "}
+                      <span style={{ color: "#0C0C0E" }}>{props.vaultId}</span>{" "}
+                      account.
+                    </p>
+                    <div className="verified-custd-mdl-startup-otp-footer">
+                      {props.actionText && (
+                        <p className="verified-custd-mdl-startup-otp-footer-text">
+                          {props.actionText ? `To ${props.actionText} ` : ""}{" "}
+                          from origin: {props.origin || props.title}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="verified-custd-mdl-otp-input-container">
+                  <div className="verified-custd-mdl-otp-input-group">
+                    <input
+                      onInputCapture={(e: any) => {
+                        e.target.value = e.target.value?.replace(/\D/g, "");
+                        setPinIncorrect(false);
+                      }}
+                      onInput={(e) => {
+                        handlleInputFocus(e.target);
+                        handleButtonDisplay();
+                      }}
+                      onKeyDown={(e: any) => {
+                        if (e.key === "Backspace" && e.target.value === "") {
+                          hanslePinBackspace(e);
+                        }
+                      }}
+                      onPaste={(e) => {
+                        hanlePinPaste(e);
+                      }}
+                      className={
+                        pinIncorrect
+                          ? "verified-custd-mdl-otp-input-red"
+                          : "verified-custd-mdl-otp-input"
+                      }
+                      type={pinHide ? "password" : "text"}
+                      maxLength={1}
+                      id="verified-custd-mdl-otp-input-1"
+                    />
+                    <input
+                      onInputCapture={(e: any) => {
+                        e.target.value = e.target.value?.replace(/\D/g, "");
+                        setPinIncorrect(false);
+                      }}
+                      onInput={(e) => {
+                        handlleInputFocus(e.target);
+                        handleButtonDisplay();
+                      }}
+                      onKeyDown={(e: any) => {
+                        if (e.key === "Backspace" && e.target.value === "") {
+                          hanslePinBackspace(e);
+                        }
+                      }}
+                      className={
+                        pinIncorrect
+                          ? "verified-custd-mdl-otp-input-red"
+                          : "verified-custd-mdl-otp-input"
+                      }
+                      type={pinHide ? "password" : "text"}
+                      maxLength={1}
+                      id="verified-custd-mdl-otp-input-2"
+                    />
+                    <input
+                      onInputCapture={(e: any) => {
+                        e.target.value = e.target.value?.replace(/\D/g, "");
+                        setPinIncorrect(false);
+                      }}
+                      onInput={(e) => {
+                        handlleInputFocus(e.target);
+                        handleButtonDisplay();
+                      }}
+                      onKeyDown={(e: any) => {
+                        if (e.key === "Backspace" && e.target.value === "") {
+                          hanslePinBackspace(e);
+                        }
+                      }}
+                      className={
+                        pinIncorrect
+                          ? "verified-custd-mdl-otp-input-red"
+                          : "verified-custd-mdl-otp-input"
+                      }
+                      type={pinHide ? "password" : "text"}
+                      maxLength={1}
+                      id="verified-custd-mdl-otp-input-3"
+                    />
+                    <input
+                      onInputCapture={(e: any) => {
+                        e.target.value = e.target.value?.replace(/\D/g, "");
+                        setPinIncorrect(false);
+                      }}
+                      onInput={(e) => {
+                        handlleInputFocus(e.target);
+                        handleButtonDisplay();
+                      }}
+                      onKeyDown={(e: any) => {
+                        if (e.key === "Backspace" && e.target.value === "") {
+                          hanslePinBackspace(e);
+                        }
+                      }}
+                      className={
+                        pinIncorrect
+                          ? "verified-custd-mdl-otp-input-red"
+                          : "verified-custd-mdl-otp-input"
+                      }
+                      type={pinHide ? "password" : "text"}
+                      maxLength={1}
+                      id="verified-custd-mdl-otp-input-4"
+                    />
+                  </div>
+                  <div className="verified-custd-mdl-otp-timer">
+                    {pinIncorrect && pinIncorrectText === "" && (
+                      <p className="verified-custd-mdl-otp-incorrect-text">
+                        Please enter the correct pin
+                      </p>
+                    )}
+                    {pinIncorrect && pinIncorrectText?.length > 0 && (
+                      <p className="verified-custd-mdl-otp-incorrect-text">
+                        {pinIncorrectText}
+                      </p>
+                    )}
+                    {!pinIncorrect && (
+                      <p className="verified-custd-mdl-otp-incorrect-text"></p>
+                    )}
+
+                    {!pinHide && (
+                      <img
+                        style={{
+                          cursor: "pointer",
+                          width: "24px",
+                          height: "24px",
+                        }}
+                        onClick={() => setPinHide(true)}
+                        src={imageAssets.pinShow}
+                        alt="show pin icon"
+                      />
+                    )}
+                    {pinHide && (
+                      <img
+                        style={{
+                          cursor: "pointer",
+                          width: "24px",
+                          height: "24px",
+                        }}
+                        onClick={() => setPinHide(false)}
+                        src={imageAssets.pinHide}
+                        alt="hide pin icon"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {!searchActive && <div style={{ height: "100px" }}></div>}
+
+              <div className="verified-custd-mdl-startup-contact-footer">
+                <div className="verified-custd-mdl-st-contact-footer-first-section">
+                  <LogoutOverlay
+                    setisOnboard={props.setisOnboard}
+                    setIsLoading={props.setIsLoading}
+                  />
+                  <button
+                    id="verified-custd-mdl-otp-button"
+                    onClick={async (e: any) => {
+                      if (
+                        e.target.className.includes(
+                          "verified-custd-mdl-startup-button"
+                        ) &&
+                        e.target.className !==
+                          "verified-custd-mdl-startup-button"
+                      ) {
+                        e.target.className =
+                          "verified-custd-mdl-startup-button-click";
+                        await handleVerifyPin();
+                      } else {
+                        const buttonElement = document.getElementsByClassName(
+                          "verified-custd-mdl-startup-button-active"
+                        );
+                        if (buttonElement.length > 0) {
+                          buttonElement[0].className =
+                            "verified-custd-mdl-startup-button-click";
+                          await handleVerifyPin();
+                        }
+                      }
+                    }}
+                    className="verified-custd-mdl-startup-button"
+                  >
+                    Proceed
+                  </button>
+                  <div className="verified-custd-mdl-st-contact-footer-second-section">
+                    <PrivacyOverlay />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {showSuccess && (
+            <Success
+              messageTosend={
+                props.action === "getPk"
+                  ? {
+                      type: "closePopup",
+                      key: "",
+                      value: "",
+                    }
+                  : props.action === "signRecovery"
+                  ? {
+                      type: "closePopup",
+                      key: "",
+                      value: "",
+                    }
+                  : props.action === "completeRecovery"
+                  ? {
+                      type: "closePopup",
+                      key: "",
+                      value: "",
+                    }
+                  : {
+                      type: "vaultData",
+                      key: "vaultData",
+                      value: vaultData,
+                    }
+              }
+              customTextHeader={"Successful"}
+              customTextFooter={
+                props.action === "getPk" && props.vaultChannel === "email"
+                  ? "You have successfully initiated your account recovery process check your email for further instructions"
+                  : props.action === "getPk" && props.vaultChannel === "sms"
+                  ? "You have successfully initiated your account recovery process check your phone number messages for further instructions"
+                  : props.action === "signRecovery"
+                  ? `Congratulations! You have successfully signed account recovery transaction for user: ${props.reqVaultData?.vaultId}`
+                  : props.action === "completeRecovery"
+                  ? `Congratulations! You have successfully restored login access for your ${props?.vaultId} account`
+                  : `Congratulations! You have successfully ${
+                      props.action === "connect_wallet"
+                        ? "connected your account"
+                        : props?.actionText
+                        ? props.actionText
+                        : "logged in to your account."
+                    } `
+              }
+            />
+          )}
+        </React.Fragment>
+      )}
+      {showInvitation && (
+        <React.Fragment>
+          {!showInvitationSuccess && (
+            <div
+              style={{ padding: "0", position: "relative" }}
+              className="verified-custd-mdl-startup-language"
+            >
+              <div className="verified-custd-mdl-startup-contact">
+                <PageSlider sliderCount={[1, 2, 3]} currentSlider="1" />
+                <div className="verified-custd-mdl-startup-contact-content">
+                  <p className="verified-custd-mdl-startup-contact-text">
+                    <b>{props.reqVaultData?.vaultId}</b> has requested you to be
+                    a Co-Signer
+                  </p>
+                </div>
+              </div>
+              <img
+                className="verified-custd-mdl-add-cosigner-body-icon"
+                src={imageAssets.addCoSignerIcon1}
+                alt=""
+              />
+              {!showRejectInvitation && (
+                <React.Fragment>
+                  <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
+                      style={{
+                        fontSize: "12px",
+                        color: "var(--Neutral-600, #5B5D6E)",
+                      }}
+                      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 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">
+                        As a Co Signer you can help{" "}
+                        <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
+                          reset PIN
+                        </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, they{" "}
+                        <span className="verified-custd-mdl-add-cosigner-body-text-label-bold">
+                          will not get access
+                        </span>{" "}
+                        to your account in any way.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="verified-custd-mdl-add-cosigner-buttons-cont">
+                    <button
+                      onClick={() => {
+                        setShowRejectInvitation(true);
+                      }}
+                      className="verified-custd-mdl-add-cosigner-button-neut"
+                    >
+                      Reject
+                    </button>
+
+                    <button
+                      onClick={async () => {
+                        await handleAcceptAndRejectInvitation(true);
+                      }}
+                      className="verified-custd-mdl-add-cosigner-button-action"
+                    >
+                      Accept
+                    </button>
+                  </div>
+                </React.Fragment>
+              )}
+
+              {showRejectInvitation && (
+                <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">
+                          Are you sure you want to reject this request?
+                        </p>
+                        <p
+                          style={{
+                            fontSize: "12px",
+                            color: "var(--Neutral-600, #5B5D6E)",
+                          }}
+                          className="verified-custd-mdl-add-cosigner-confirm-body-label"
+                        >
+                          Once you reject to be a co-signer for{" "}
+                          <b>{props.reqVaultData?.vaultId}</b>, you will not be
+                          able to reset the PIN for them.
+                        </p>
+                      </div>
+
+                      <div
+                        style={{ width: "90%" }}
+                        className="verified-custd-mdl-add-cosigner-buttons-cont"
+                      >
+                        <button
+                          onClick={async () => {
+                            await handleAcceptAndRejectInvitation(false);
+                          }}
+                          className="verified-custd-mdl-add-cosigner-button-action"
+                        >
+                          Yes
+                        </button>
+
+                        <button
+                          onClick={() => {
+                            setShowRejectInvitation(false);
+                          }}
+                          className="verified-custd-mdl-add-cosigner-button-action"
+                        >
+                          No
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {showInvitationSuccess && (
+            <Success
+              messageTosend={{
+                type: "getPk",
+                key: "vaultData",
+                value: vaultData,
+              }}
+              customTextHeader="Successful"
+              customTextFooter={
+                isAccepted
+                  ? `You have been added as a Co-Signer for ${props.reqVaultData?.vaultId}`
+                  : `You rejected Co-signer reject from ${props.reqVaultData?.vaultId}`
+              }
+            />
+          )}
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default EnterPinPage;