@verified-network/verified-custody 0.2.0 → 0.2.2

package/src/pages/ftu.tsx

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

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