@verified-network/verified-custody 0.1.8 → 0.2.0

package/src/pages/ftu.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from "react";
+import { debounce } from "lodash";
+import { countriesDetails, imageAssets } from "../utils/constants";
+import { useVaultStore } from "../services/store";
+import { initWalletAndContract, loadAllGoogleFonts } from "../utils/helpers";
+import ContactPage from "./contact";
+import OTPPage from "./otp";
+import CreatePinPage from "./createPin";
+import Success from "../components/success";
+import AddCosignersPage from "./addCosigners";
+import { VerifiedCustodyHelpers } from "../utils/types";
+
+const FTUPage = (props: {
+  fontsLoaded?: boolean;
+  popupView?: boolean;
+  action?: string;
+  vaultData?: any;
+  txData?: any;
+  chainId?: number;
+  defaultCountry?: {
+    area: string;
+    flag: string;
+    name: string;
+  };
+  showLogoPage?: boolean;
+  logoPageElement?: React.JSX.Element;
+  logoTimeoutTime?: number;
+  showStartupPage?: boolean;
+  startupPageElement?: React.JSX.Element;
+  setisOnboard?: (isOnboard: boolean) => void;
+  helperFunctions?: VerifiedCustodyHelpers;
+}) => {
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(
+    props.fontsLoaded || false
+  );
+  const [showLogo, setShowLogo] = useState<boolean>(
+    props.showLogoPage || false
+  );
+  const [allCountries, setAllCountries] = useState([]);
+  const [step, setStep] = useState<string>(props.showStartupPage ? "1" : "2");
+  const [selectedCountry, setSelectedCountry] = useState(
+    props.defaultCountry || {
+      area: "1",
+      flag: imageAssets.usaFlag,
+      name: "United States",
+    }
+  );
+  const [userNumberFmt, setUserNumberFmt] = useState<string>("");
+  const [userEmail, setUserEmail] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showSuccessBtn, setShowSuccessBtn] = useState<boolean>(false);
+  const [successBtnText, setSuccessBtnText] = useState<string>("");
+  const [successBtnNeutText, setSuccessBtnNeutText] = useState<string>("");
+  const [actionHeaderText, setActionHeaderText] = useState<string>("");
+  const [actionFooterText, setActionFooterText] = useState<string>("");
+  const [successBtnFunc, setSuccessBtnFunc] = useState(null);
+  const [successBtnNeutFunc, setSuccessBtnNeutFunc] = useState(null);
+
+  const {
+    setChainId,
+    setAddress,
+    setPk,
+    setProvider,
+    setSigner,
+    setVaultContract,
+    setVaultData,
+    vaultData,
+  } = useVaultStore();
+
+  useEffect(() => {
+    const PreloadGoogleFonts = () => {
+      const isFontsLoaded = loadAllGoogleFonts(document);
+      setFontsLoaded(isFontsLoaded);
+    };
+    if (!props.fontsLoaded) {
+      PreloadGoogleFonts();
+    }
+  }, []);
+
+  useEffect(() => {
+    const initializeUserWalletAndContract = async () => {
+      const walletAndContractDetails = await initWalletAndContract(
+        props.chainId
+      );
+      setChainId(walletAndContractDetails.chainId);
+      setAddress(walletAndContractDetails.address);
+      setPk(walletAndContractDetails.pk);
+      setProvider(walletAndContractDetails.provider);
+      setSigner(walletAndContractDetails.signer);
+      setVaultContract(walletAndContractDetails.vaultContract);
+      setVaultData(walletAndContractDetails.vaultData);
+    };
+    initializeUserWalletAndContract();
+  }, []);
+
+  useEffect(() => {
+    const handleLogoDisplay = debounce(
+      () => {
+        setShowLogo(false);
+      },
+      props.logoTimeoutTime ? props.logoTimeoutTime : 3000
+    ); //3 seconds??
+    handleLogoDisplay();
+  }, []);
+
+  useEffect(() => {
+    const getAndFormatAllCountries = () => {
+      const fmtCountries: any = countriesDetails
+        .map((cnt: any) => {
+          if (cnt) {
+            return {
+              name: cnt?.name,
+              countryName: cnt?.name,
+              officialName: cnt?.name,
+              currencySymbol: cnt?.currency,
+              currencyName: cnt?.currency,
+              officialCurrencySymbol: cnt?.currency,
+              countryCode: cnt?.code,
+              flag: cnt?.flag,
+              continent: cnt?.continent,
+              phone_code: cnt?.phone_code,
+              code: cnt?.code,
+            };
+          }
+        })
+        .flat();
+      setAllCountries(fmtCountries?.filter((cnt: any) => cnt !== undefined));
+    };
+    getAndFormatAllCountries();
+  }, []);
+
+  return (
+    <React.Fragment>
+      {fontsLoaded && showLogo && props.logoPageElement && (
+        <React.Fragment> {props.logoPageElement}</React.Fragment>
+      )}
+      {fontsLoaded && !showLogo && (
+        <React.Fragment>
+          {step === "1" && props.showStartupPage && (
+            <React.Fragment>{props.startupPageElement}</React.Fragment>
+          )}
+          {step === "2" && (
+            <ContactPage
+              setStep={setStep}
+              setIsLoading={setIsLoading}
+              setUserNumberFmt={setUserNumberFmt}
+              userNumberFmt={userNumberFmt}
+              setUserEmail={setUserEmail}
+              userEmail={userEmail}
+              setSelectedCountry={setSelectedCountry}
+              selectedCountry={selectedCountry}
+              allCountries={allCountries}
+            />
+          )}
+          {step === "3" && (
+            <OTPPage
+              setStep={setStep}
+              setIsLoading={setIsLoading}
+              userNumberFmt={userNumberFmt}
+              setUserNumberFmt={setUserNumberFmt}
+              setUserEmail={setUserEmail}
+              userEmail={userEmail}
+              selectedCountry={selectedCountry}
+            />
+          )}
+
+          {step === "4" && (
+            <CreatePinPage
+              setStep={setStep}
+              setIsLoading={setIsLoading}
+              setShowSuccessBtn={setShowSuccessBtn}
+              setSuccessBtnText={setSuccessBtnText}
+              setSuccessBtnNeutText={setSuccessBtnNeutText}
+              setSuccessBtnFunc={setSuccessBtnFunc}
+              setSuccessBtnNeutFunc={setSuccessBtnNeutFunc}
+              userNumberFmt={userNumberFmt}
+              userEmail={userEmail}
+              selectedCountry={selectedCountry}
+              action={props.action}
+              vaultData={props.vaultData}
+              txData={props.txData}
+              setActionHeaderText={setActionHeaderText}
+              setActionFooterText={setActionFooterText}
+              helperFunctions={props.helperFunctions}
+            />
+          )}
+
+          {step === "5" && (
+            <Success
+              setStep={setStep}
+              stepToSet="6"
+              customTextHeader="Successful"
+              customTextFooter="Congratulations! You have successfully created a PIN to protect your account."
+              action={props.action}
+              showButton={showSuccessBtn}
+              buttonText={successBtnText}
+              buttonNeutText={successBtnNeutText}
+              buttonFunc={successBtnFunc}
+              buttonNeutFunc={successBtnNeutFunc}
+              actionHeaderText={actionHeaderText}
+              actionFooterText={actionFooterText}
+            />
+          )}
+
+          {step === "6" && (
+            <AddCosignersPage
+              setStep={setStep}
+              setIsLoading={setIsLoading}
+              userNumberFmt={userNumberFmt}
+              userEmail={userEmail}
+              selectedCountry={selectedCountry}
+              allCountries={allCountries}
+              helperFunctions={props.helperFunctions}
+            />
+          )}
+
+          {step === "7" && (
+            <Success
+              action={props.action}
+              messageTosend={
+                props.action === "connect_wallet"
+                  ? { type: "vaultData", key: "vaultData", value: vaultData }
+                  : props.action === "connect_wallet"
+                  ? {
+                      type: "signRecovery",
+                      value: {
+                        vaultData: props.vaultData,
+                        txData: { newUser: true, ...props.txData },
+                      },
+                    }
+                  : { type: "closePopup", key: "", value: "" }
+              }
+              customTextHeader="Successful"
+              customTextFooter="Congratulations! You have successfully added Co-signers to your account."
+            />
+          )}
+        </React.Fragment>
+      )}
+      {!fontsLoaded && <h2>Loading...</h2>}
+    </React.Fragment>
+  );
+};
+
+export default FTUPage;

package/src/pages/index.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from "react";
+import { VaultContextProvider } from "../services/store";
+import {
+  VerifiedCustodyProps,
+  VerifiedWalletAction,
+  VerifiedWalletTx,
+  VerifiedWalletVault,
+} from "../utils/types";
+import FTUPage from "./ftu";
+import EnterPinPage from "./enterPin";
+import { hashTheString, loadAllGoogleFonts } from "../utils/helpers";
+import { actionTexts } from "../utils/constants";
+
+const VerifiedCustody = (props: VerifiedCustodyProps) => {
+  const [fontsLoaded, setFontsLoaded] = useState<boolean>(false);
+  const [isOnboard, setisOnboard] = useState<boolean | null>(null);
+
+  const [action, _setAction] = useState<VerifiedWalletAction | undefined>(
+    props.action
+  );
+
+  const [actionText, _setActionText] = useState<string | undefined>(
+    props.actionText
+  );
+
+  const [origin, _setOrigin] = useState<string | undefined>(props.origin);
+
+  const [title, _setTitle] = useState<string | undefined>(props.title);
+
+  const [chainId, _setChainId] = useState<number | undefined>(props.chainId);
+
+  const [vaultData, setVaultData] = useState<VerifiedWalletVault | undefined>(
+    props.vaultData
+  );
+
+  const [txData, _setTxData] = useState<VerifiedWalletTx | undefined>(
+    props.txData
+  );
+
+  const [vaultDataQuery, _setVaultDataQuery] = useState<
+    VerifiedWalletVault | undefined
+  >(props.reqVaultData);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const PreloadGoogleFonts = () => {
+      const isFontsLoaded = loadAllGoogleFonts(document);
+      setFontsLoaded(isFontsLoaded);
+    };
+    PreloadGoogleFonts();
+  }, []);
+
+  useEffect(() => {
+    const checkUserOnboardingStatus = () => {
+      if (chrome?.storage?.local) {
+        chrome.storage.local.get("myVault", (res: any) => {
+          // Existing user
+          if (res.myVault && JSON.parse(res.myVault)?.vaultId) {
+            setVaultData(JSON.parse(res.myVault));
+            setisOnboard(true);
+          }
+          //FTU(First Time User)
+          else setisOnboard(false);
+        });
+      } else if (localStorage) {
+        const myVault = JSON.parse(localStorage.getItem("myVault"));
+        if (myVault && myVault?.vaultId) {
+          setVaultData(myVault);
+          setisOnboard(true);
+        } else setisOnboard(false);
+      } else {
+        setisOnboard(false);
+      }
+    };
+
+    checkUserOnboardingStatus();
+  }, []);
+
+  return (
+    <React.Fragment>
+      {fontsLoaded && (
+        <VaultContextProvider>
+          <div className="verified-custd-mdl-container">
+            {/* default blank page to capture delay??? */}
+            {isOnboard === null && props.delayPageElement && (
+              <React.Fragment>{props.delayPageElement} </React.Fragment>
+            )}
+            {/* default blank screen to capture delay??? */}
+            {isOnboard === null && !props.delayPageElement && (
+              <div
+                style={
+                  props.delayPageStyle
+                    ? props.delayPageStyle
+                    : {
+                        width: "100%",
+                        height: "100%",
+                        background: "trasparent",
+                        border: "none",
+                      }
+                }
+              >
+                {" "}
+              </div>
+            )}
+
+            {/* first time users */}
+            {isOnboard !== null && !isOnboard && (
+              <FTUPage
+                fontsLoaded={fontsLoaded}
+                helperFunctions={props.helperFunctions}
+              />
+            )}
+
+            {/* existing users */}
+            {isOnboard !== null && isOnboard && (
+              <EnterPinPage
+                fontsLoaded={fontsLoaded}
+                setisOnboard={setisOnboard}
+                vaultId={vaultData?.vaultId}
+                hashedVaultId={vaultData?.hashedVaultId}
+                encrptedPk={vaultData?.pk}
+                vaultAddress={vaultData?.address}
+                vaultChannel={vaultData?.channel}
+                origin={origin}
+                title={title}
+                actionText={
+                  props.actionText ? props.actionText : actionTexts[action]
+                }
+                setIsLoading={setIsLoading}
+                newChainId={Number(chainId)}
+                action={action}
+                reqVaultData={
+                  vaultDataQuery
+                    ? {
+                        vaultId: decodeURIComponent(
+                          vaultDataQuery?.vId || vaultDataQuery?.vaultId
+                        ),
+                        hashedVaultId: hashTheString(
+                          decodeURIComponent(
+                            vaultDataQuery?.vId || vaultDataQuery?.vaultId
+                          )
+                        ),
+                        hashedVaultPin: decodeURIComponent(
+                          vaultDataQuery?.vPh || vaultDataQuery?.hashedVaultPin
+                        ),
+                        coSignerId: decodeURIComponent(vaultDataQuery?.cId),
+                      }
+                    : null
+                }
+                reqTxData={
+                  txData
+                    ? Object.keys(txData)?.map((ky) => {
+                        txData[ky] = decodeURIComponent(txData[ky]);
+                        return txData;
+                      })[Object.keys(txData)?.length - 1]
+                    : null
+                }
+                helperFunctions={props.helperFunctions}
+              />
+            )}
+          </div>
+        </VaultContextProvider>
+      )}
+      {!fontsLoaded && <h2>Loading...</h2>}
+    </React.Fragment>
+  );
+};
+
+export default VerifiedCustody;