@verified-network/verified-custody 0.1.9 → 0.2.0

package/src/pages/createPin.tsx

@@ -0,0 +1,693 @@
+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;