@verified-network/verified-custody 0.2.0 → 0.2.2

package/src/pages/createPin.tsx

@@ -1,693 +0,0 @@
-import React, { useState } from "react";
-import { useVaultStore } from "../services/store";
-import { hashTheString } from "../utils/helpers";
-import {
-  acceptOrRejectInvitation,
-  checkOrCreateVault,
-} from "../services/contracts";
-import PageSlider from "../components/slider";
-import Success from "../components/success";
-import { imageAssets } from "../utils/constants";
-import { VerifiedCustodyHelpers } from "../utils/types";
-
-const CreatePinPage = (props: {
-  setStep: (step: string) => void;
-  setIsLoading: (isLoading: boolean) => void;
-  setShowSuccessBtn: (showSuccessBtn: boolean) => void;
-  setSuccessBtnText: (successBtnText: string) => void;
-  setSuccessBtnNeutText: (successBtnNeutText: string) => void;
-  setSuccessBtnFunc: (successBtnFunc: any) => void;
-  setSuccessBtnNeutFunc: (successBtnNeutFunc: any) => void;
-  setActionHeaderText: (actionHeaderText: string) => void;
-  setActionFooterText: (actionFooterText: string) => void;
-  userNumberFmt: string;
-  userEmail: string;
-  selectedCountry: { name: string; area: string; flag: string };
-  action?: string;
-  vaultData?: any;
-  txData?: any;
-  helperFunctions?: VerifiedCustodyHelpers;
-}) => {
-  const [searchActive, setSearchActive] = useState(false);
-  const [pinIncorrect, setPinIncorrect] = useState(false);
-  const [pinIncorrectText, setPinIncorrectText] = useState("");
-  const [pinHide, setPinHide] = useState(true); //hide pin by default
-  const [showInvitation, setShowInvitation] = useState(false);
-  const [showInvitationSuccess, setShowInvitationSuccess] = useState(false);
-  const [vaultPin, setVaultPin] = useState("");
-  const [showRejectInvitation, setShowRejectInvitation] = useState(false);
-
-  const { address, pk, vaultContract, setVaultData, vaultData } =
-    useVaultStore();
-
-  //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 handleOtpBackspace = (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");
-    const otp5: any = document.getElementById("verified-custd-mdl-otp-input-5");
-    const otp6: any = document.getElementById("verified-custd-mdl-otp-input-6");
-    const otp7: any = document.getElementById("verified-custd-mdl-otp-input-7");
-    const otp8: any = document.getElementById("verified-custd-mdl-otp-input-8");
-    if (
-      button &&
-      otp1?.value.length > 0 &&
-      otp2?.value.length > 0 &&
-      otp3?.value.length > 0 &&
-      otp4?.value.length > 0 &&
-      otp5?.value.length > 0 &&
-      otp6?.value.length > 0 &&
-      otp7?.value.length > 0 &&
-      otp8?.value.length > 0
-    ) {
-      if (
-        otp1?.value + otp2?.value + otp3?.value + otp4?.value ===
-        otp5?.value + otp6?.value + otp7?.value + otp8?.value
-      ) {
-        button.className = "verified-custd-mdl-startup-button-active";
-      } else {
-        button.className = "verified-custd-mdl-startup-button";
-        setPinIncorrect(true);
-      }
-    } else {
-      button.className = "verified-custd-mdl-startup-button";
-    }
-  };
-
-  const handleVaultManagement = async () => {
-    if (!props.helperFunctions) {
-      setPinIncorrectText(
-        "No Helper Functions. Please include all helper functions in the CreatePinPage 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"
-      );
-      const otp5: any = document.getElementById(
-        "verified-custd-mdl-otp-input-5"
-      );
-      const otp6: any = document.getElementById(
-        "verified-custd-mdl-otp-input-6"
-      );
-      const otp7: any = document.getElementById(
-        "verified-custd-mdl-otp-input-7"
-      );
-      const otp8: any = document.getElementById(
-        "verified-custd-mdl-otp-input-8"
-      );
-      const vaultId =
-        props.userEmail?.length > 0
-          ? props.userEmail
-          : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
-              " ",
-              ""
-            )}`;
-      const channel = props.userEmail?.length > 0 ? "email" : "sms";
-      if (
-        otp1?.value?.length > 0 &&
-        otp2?.value?.length > 0 &&
-        otp3?.value?.length > 0 &&
-        otp4?.value?.length > 0 &&
-        otp5?.value?.length > 0 &&
-        otp6?.value?.length > 0 &&
-        otp7?.value?.length > 0 &&
-        otp8?.value?.length > 0 &&
-        address &&
-        vaultId &&
-        channel &&
-        pk &&
-        vaultContract
-      ) {
-        props.setIsLoading(true);
-        const vaultPin = otp1?.value + otp2?.value + otp3?.value + otp4?.value;
-        const hashedVaultId = hashTheString(vaultId);
-        const hashedVaultPin = hashTheString(vaultPin);
-
-        await checkOrCreateVault(
-          vaultId,
-          hashedVaultId,
-          vaultPin,
-          hashedVaultPin,
-          channel,
-          pk,
-          address,
-          vaultContract,
-          props.action,
-          props.vaultData,
-          props.txData
-        ).then((res) => {
-          props.setIsLoading(false);
-
-          if (res) {
-            setVaultData(res);
-            setPinIncorrectText("");
-            setPinIncorrect(false);
-            if (props.action === "invitation") {
-              setVaultPin(vaultPin);
-              setShowInvitation(true);
-            } else {
-              props.setStep("5");
-            }
-          } else if (res === null) {
-            setPinIncorrectText(
-              "You are an existing user. Please input the right pin to recover your account."
-            );
-            setPinIncorrect(true);
-          } else {
-            setPinIncorrectText(
-              "Unexpected error while creating account. Please try again later."
-            );
-            setPinIncorrect(true);
-          }
-        });
-      }
-    }
-  };
-
-  const handleAcceptAndRejectInvitation = async (accepted: boolean) => {
-    const vaultId =
-      props.userEmail?.length > 0
-        ? props.userEmail
-        : `+${props.selectedCountry.area}${props.userNumberFmt?.replace(
-            " ",
-            ""
-          )}`;
-    const channel = props.userEmail?.length > 0 ? "email" : "sms";
-    if (
-      vaultPin?.length === 4 &&
-      props?.vaultData?.hashedVaultId &&
-      props.vaultData?.hashedVaultPin &&
-      vaultId
-    ) {
-      props.setIsLoading(true);
-      const hashedVaultId = hashTheString(vaultId);
-      const hashedVaultPin = hashTheString(vaultPin);
-      await acceptOrRejectInvitation(
-        props.helperFunctions.sendCreatorAcceptance,
-        props.helperFunctions.sendCreatorRejection,
-        channel,
-        hashedVaultId,
-        hashedVaultPin,
-        props?.vaultData?.hashedVaultId,
-        props.vaultData?.hashedVaultPin,
-        props.vaultData?.vaultId,
-        vaultId,
-        accepted,
-        vaultContract
-      ).then((res) => {
-        props.setIsLoading(false);
-        if (res && !vaultData?.isExisting) {
-          props.setShowSuccessBtn(true);
-          props.setSuccessBtnText("Continue Setting Up Your Account");
-          props.setSuccessBtnNeutText("Do It Later");
-          props.setActionHeaderText("Successful");
-          props.setActionFooterText(
-            accepted
-              ? `You have been added as a Co-Signer for ${props.vaultData?.vaultId}`
-              : `You rejected Co-signer reject from ${props.vaultData?.vaultId}`
-          );
-          props.setStep("5");
-        } else if (res && vaultData?.isExisting) {
-          setShowInvitationSuccess(true);
-        }
-      });
-    }
-  };
-
-  return (
-    <React.Fragment>
-      {!showInvitation && (
-        <div 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">
-                Create PIN
-              </p>
-              <div className="verified-custd-mdl-startup-otp-text">
-                <p className="verified-custd-mdl-startup-otp-header-text">
-                  Protect your blockchain assets. This PIN will be required for
-                  all transactions and logins.
-                </p>
-              </div>
-            </div>
-            <div className="verified-custd-mdl-otp-input-container">
-              <p className="verified-custd-mdl-pin-input-container-text">
-                New PIN
-              </p>
-              <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 === "") {
-                      handleOtpBackspace(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 === "") {
-                      handleOtpBackspace(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 === "") {
-                      handleOtpBackspace(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 === "") {
-                      handleOtpBackspace(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>
-
-            <div className="verified-custd-mdl-otp-input-container">
-              <p className="verified-custd-mdl-pin-input-container-text">
-                Confirm PIN
-              </p>
-              <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 === "") {
-                      handleOtpBackspace(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-5"
-                />
-                <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 === "") {
-                      handleOtpBackspace(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-6"
-                />
-                <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 === "") {
-                      handleOtpBackspace(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-7"
-                />
-                <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 === "") {
-                      handleOtpBackspace(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-8"
-                />
-              </div>
-              <div className="verified-custd-mdl-otp-timer">
-                {!pinIncorrect && <p></p>}
-                {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>
-                )}
-                {!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: "30px" }}></div>}
-
-          <div className="verified-custd-mdl-startup-contact-footer">
-            <div className="verified-custd-mdl-st-contact-footer-first-section">
-              <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 handleVaultManagement();
-                  } 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 handleVaultManagement();
-                    }
-                  }
-                }}
-                className="verified-custd-mdl-startup-button"
-              >
-                Confirm
-              </button>
-              {/* <div className="verified-custd-mdl-st-contact-footer-second-section">
-             <PrivacyOverlay />
-           </div> */}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {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.vaultData?.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.vaultData?.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: "closePopup", key: "", value: "" }}
-              customTextHeader="Successful"
-              customTextFooter={
-                !showRejectInvitation
-                  ? `You have been added as a Co-Signer for ${props.vaultData?.vaultId}`
-                  : `You rejected Co-signer reject from ${props.vaultData?.vaultId}`
-              }
-            />
-          )}
-        </React.Fragment>
-      )}
-    </React.Fragment>
-  );
-};
-
-export default CreatePinPage;