@verified-network/verified-custody 0.1.9 → 0.2.0

package/src/utils/helpers.tsx

@@ -0,0 +1,334 @@
+import {
+  contractAddress,
+  Custody,
+  Provider,
+  VerifiedWallet,
+} from "@verified-network/verified-sdk";
+import {
+  allGoogleFontUrls,
+  defaultChainId,
+  imageAssets,
+  TwiloBaseUrl,
+} from "./constants";
+import { ChainConfig, PaymasterConfig } from "./config";
+import crypto from "crypto";
+import crypt from "crypto-js";
+import { toast } from "react-toastify";
+import axios from "axios";
+import { createSmartAccountClient } from "@biconomy/account";
+import React from "react";
+
+/**
+ *
+ * @param document Any web page loaded in the browser / Dom tree
+ */
+export const loadAllGoogleFonts = (document: Document) => {
+  const apiExists = document.querySelector(
+    `link[href="https://fonts.googleapis.com"]`
+  );
+  if (!apiExists) {
+    const apiLink = document.createElement("link");
+    apiLink.rel = "preconnect";
+    apiLink.href = "https://fonts.googleapis.com";
+    document.head.appendChild(apiLink);
+  }
+  const staticExists = document.querySelector(
+    `link[href="https://fonts.gstatic.com"]`
+  );
+  if (!staticExists) {
+    const staticLink = document.createElement("link");
+    staticLink.rel = "preconnect";
+    staticLink.href = "https://fonts.gstatic.com";
+    document.head.appendChild(staticLink);
+  }
+  allGoogleFontUrls.map((fontUrl) => {
+    const fontExists = document.querySelector(`link[href="${fontUrl}"]`);
+    if (!fontExists) {
+      const fontLink = document.createElement("link");
+      fontLink.rel = "stylesheet";
+      fontLink.href = fontUrl;
+      document.head.appendChild(fontLink);
+    }
+  });
+
+  return true;
+};
+
+/**
+ * initialize user's wallet and vault contract using existing private key or create a new wallet for user
+ * unsupported/invalid chainId passed will automatically use default supported chainId
+ * @param chainId
+ * @param privateKey
+ *
+ */
+export const initWalletAndContract = async (
+  chainId?: number,
+  privateKey?: string
+) => {
+  try {
+    let sender: VerifiedWallet;
+    //import existing wallet or create new one.
+    if (privateKey) {
+      sender = new VerifiedWallet(privateKey);
+    } else {
+      const mnemonics = VerifiedWallet.generateMnemonic();
+      sender = VerifiedWallet.importWallet(mnemonics);
+    }
+
+    //initialize provider, signer, privatekey and vault contract
+    const cntAddresses: any = contractAddress;
+    const _chainId =
+      chainId &&
+      cntAddresses[chainId]?.Custody &&
+      ChainConfig[chainId]?.rpcUrls?.length > 0
+        ? chainId
+        : defaultChainId;
+    const provider = ChainConfig[_chainId]?.rpcUrls[0];
+    const signer = sender.setProvider(new Provider(provider));
+    const pk = sender.privateKey;
+    const vaultContract = new Custody(signer, cntAddresses[_chainId]?.Custody);
+    const smartAccount = await createSmartAccountClient({
+      signer: signer,
+      bundlerUrl: `${PaymasterConfig.BUNDLER_URL_FIRST_SECTION}/${_chainId}/${PaymasterConfig[_chainId]["BUNDLER_API_KEY"]}`,
+      biconomyPaymasterApiKey: PaymasterConfig[_chainId]["PAYMASTER_API_KEY"],
+    });
+    const address = await smartAccount.getAccountAddress();
+
+    //valid return
+    return {
+      chainId: _chainId,
+      address,
+      pk,
+      signer,
+      provider,
+      vaultContract,
+      vaultData: null,
+    };
+  } catch (err) {
+    if (process.env.REACT_APP_NODE_ENV !== "production") {
+      console.error(
+        "Error while initializing user's wallet and contract: ",
+        err
+      );
+    }
+    //default return;
+    return {
+      chainId: null,
+      address: null,
+      pk: null,
+      signer: null,
+      provider: null,
+      vaultContract: null,
+      vaultData: null,
+    };
+  }
+};
+
+export const sendOTPVerification = async (
+  recipient: string,
+  channel: "sms" | "email"
+) => {
+  try {
+    const data = JSON.stringify({
+      to: recipient,
+      channel: channel,
+    });
+
+    const response = await fetch(`${TwiloBaseUrl}/start-verify`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: data,
+    });
+
+    const json = await response.json();
+    return json.success;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+};
+
+export const checkOTPVerification = async (recipient: string, code: string) => {
+  try {
+    const data = JSON.stringify({
+      to: recipient,
+      code,
+    });
+
+    const response = await fetch(`${TwiloBaseUrl}/check-verify`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: data,
+    });
+
+    const json = await response.json();
+    return json.success;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+};
+
+export const hashTheString = (text: string) => {
+  const hash = crypto.createHash("sha256").update(text).digest("hex");
+  return hash.slice(0, 30); // Truncate to 30 characters
+};
+
+export const encryptString = (text: string, secretKey: string) => {
+  const encryptedAES = crypt.AES.encrypt(text, secretKey);
+  return encryptedAES.toString();
+};
+
+export const decryptString = (encryptedText: string, secretKey: string) => {
+  var decryptedBytes = crypt.AES.decrypt(encryptedText, secretKey);
+  var decryptedText = decryptedBytes.toString(crypt.enc.Utf8);
+  return decryptedText;
+};
+
+export const customEncryptString = (inputString: string, password: string) => {
+  const salt = crypt.lib.WordArray.random(128 / 8);
+  const key = crypt.PBKDF2(password, salt, {
+    keySize: 256 / 32,
+    iterations: 1000,
+  });
+
+  const iv = crypt.lib.WordArray.random(128 / 8);
+
+  const encrypted = crypt.AES.encrypt(inputString, key, {
+    iv: iv,
+    padding: crypt.pad.Pkcs7,
+    mode: crypt.mode.CBC,
+  });
+
+  const result = salt.toString() + iv.toString() + encrypted.toString();
+  return result;
+};
+
+export const customDecryptString = (
+  encryptedString: string,
+  password: string
+) => {
+  const salt = crypt.enc.Hex.parse(encryptedString.substr(0, 32));
+  const iv = crypt.enc.Hex.parse(encryptedString.substr(32, 32));
+  const encrypted = encryptedString.substr(64);
+
+  const key = crypt.PBKDF2(password, salt, {
+    keySize: 256 / 32,
+    iterations: 1000,
+  });
+
+  const decrypted = crypt.AES.decrypt(encrypted, key, {
+    iv: iv,
+    padding: crypt.pad.Pkcs7,
+    mode: crypt.mode.CBC,
+  });
+
+  return decrypted.toString(crypt.enc.Utf8);
+};
+
+export const getErrorToastContent = (title: string, content: string) => {
+  return (
+    <div className="verified-custd-mdl-general-web-toast-error">
+      <img style={{ marginLeft: "5px" }} src={imageAssets.errorAlert} alt="" />
+      <div className="verified-custd-mdl-general-web-toast-error-container">
+        <p className="verified-custd-mdl-general-web-toast-error-title">
+          {title}
+        </p>
+        <p className="verified-custd-mdl-general-web-toast-error-label">
+          {content}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const getSuccessToastContent = (
+  title: string,
+  content: string,
+  link: string
+) => {
+  return (
+    <div className="verified-custd-mdl-general-web-toast-success">
+      <div className="verified-custd-mdl-general-web-toast-success-cont">
+        <img
+          style={{ marginLeft: "5px" }}
+          src={imageAssets.successAlert}
+          alt=""
+        />
+        <div className="verified-custd-mdl-general-web-toast-success-container">
+          <p className="verified-custd-mdl-general-web-toast-error-title">
+            {title}
+          </p>
+          <p className="verified-custd-mdl-general-web-toast-error-label">
+            {content}
+          </p>
+        </div>
+      </div>
+      {link?.length > 0 && (
+        <div className="verified-custd-mdl-general-web-toast-success-link">
+          <a
+            className="verified-custd-mdl-general-web-toast-success-link-text"
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Follow your transaction.
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const errorToast = (title: string, content: string) => {
+  toast.dismiss();
+  return toast.error(getErrorToastContent(title, content), {
+    closeButton: false,
+    position: "top-center",
+    autoClose: 3000,
+    hideProgressBar: false,
+    pauseOnHover: false,
+    draggable: false,
+    closeOnClick: false,
+    style: {
+      background: "#fef2f2",
+      width: "600px",
+      height: "67px",
+      maxHeight: "67px",
+      position: "absolute",
+      top: "5px",
+      right: "5px",
+      borderRadius: "8px",
+    },
+    icon: false,
+  });
+};
+
+export const successToast = (title: string, content: string, link: string) => {
+  toast.dismiss();
+  return toast.success(getSuccessToastContent(title, content, link), {
+    closeButton: false,
+    position: "top-center",
+    autoClose: 3000,
+    hideProgressBar: false,
+    pauseOnHover: false,
+    draggable: false,
+    closeOnClick: false,
+    style: {
+      background: "var(--Success-50, #F1F8ED)",
+
+      width: "600px",
+      height: "67px",
+      maxHeight: "67px",
+      position: "absolute",
+      top: "5px",
+      right: "5px",
+      borderRadius: "8px",
+    },
+    icon: false,
+  });
+};

package/src/utils/types.ts

@@ -0,0 +1,85 @@
+export type VerifiedWalletAction =
+  | "connect_wallet"
+  | "getPk"
+  | "invitation"
+  | "signRecovery"
+  | "completeRecovery";
+
+export type VerifiedWalletVault = {
+  vaultId: string;
+  hashedVaultId?: string;
+  hashedVaultPin?: string;
+  CoSignerId?: string;
+  vId?: string;
+  vPh?: string;
+  cId?: string;
+  address?: string;
+  channel?: "sms" | "email";
+  pk?: string;
+};
+
+export type VerifiedWalletTx = {
+  id: string;
+};
+
+export interface VerifiedCustodyProps {
+  action?: VerifiedWalletAction;
+  actionText?: string;
+  origin?: string;
+  title?: string;
+  chainId?: number;
+  vaultData?: VerifiedWalletVault;
+  txData?: VerifiedWalletTx;
+  reqVaultData?: VerifiedWalletVault;
+  delayPageElement?: React.JSX.Element;
+  delayPageStyle?: React.CSSProperties;
+  helperFunctions?: VerifiedCustodyHelpers;
+}
+
+export interface VerifiedCustodyHelpers {
+  sendCoSignerInvitation: (
+    channel: "sms" | "email",
+    cosigerId: string,
+    cretorId: string,
+    hashedCretorPin: string
+  ) => Promise<boolean>;
+
+  sendCreatorConfirmation: (
+    channel: "sms" | "email",
+    cretorId: string,
+    cosigersList: [],
+    requiredSigners: number
+  ) => Promise<boolean>;
+
+  sendCreatorInitiation: (
+    channel: "sms" | "email",
+    cretorId: string,
+    hashedCretorPin: string,
+    txId: number,
+    requiredSigners: number
+  ) => Promise<boolean>;
+
+  sendCreatorSigned: (
+    channel: "sms" | "email",
+    cretorId: string,
+    coSignerId: string
+  ) => Promise<boolean>;
+
+  sendCreatorCompleted: (
+    channel: "sms" | "email",
+    cretorId: string,
+    txId: number
+  ) => Promise<boolean>;
+
+  sendCreatorAcceptance: (
+    channel: "sms" | "email",
+    creatorId: string,
+    coSignerId: string
+  ) => Promise<boolean>;
+
+  sendCreatorRejection: (
+    channel: "sms" | "email",
+    creatorId: string,
+    coSignerId: string
+  ) => Promise<boolean>;
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "moduleResolution": "node",
+      "declaration": true,
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "strict": false,
+      "forceConsistentCasingInFileNames": true,
+      "jsx": "react",
+      "outDir": "./dist"
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/customTypes.d.ts"],
+    "exclude": ["node_modules"]
+  }

package/tsup.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "tsup";
+
+const injectFunc = `
+function injectStyle(css) {
+  if (!css || typeof document === 'undefined') return
+
+  const head = document.head || document.getElementsByTagName('head')[0]
+  const style = document.createElement('style')
+  style.type = 'text/css'
+          
+  if(head.firstChild) {
+    head.insertBefore(style, head.firstChild)
+  } else {
+    head.appendChild(style)
+  }
+
+  if(style.styleSheet) {
+    style.styleSheet.cssText = css
+  } else {
+    style.appendChild(document.createTextNode(css))
+  }
+}
+`;
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  sourcemap: true,
+  minify: true,
+  clean: true,
+  external: ["react", "react-dom", "react-native"],
+  injectStyle: (css) => {
+    return `${injectFunc}injectStyle(${css});`;
+  },
+});

package/README.md

@@ -1,93 +0,0 @@
-# Verified Custody
-
-This react module allows users to create a vault using Mobile/ E-mail as their vault id and gives you a private Key which the users can use to sign all transactions further.
-
-### Build:
-- All the components of the module is compiled and available under the dist/ directory.
-
-
-###  Install: 
-``` npm install @verified-network/verified-custody```
-
- 
-The react module exports some constants and helper functions which will be useful when changing UI based on a user's state or any business logic
-
- **IS_CUSTODY_SET - (bool)** - Returns true when the user's pk is stored in the device and is validated by the users pin.
-
- **useCustody() - (hook)** - contains vaultInfo and IS_CUSTODY_SET.
-
- **initializeMessaging() - (void)** - Should be called to initialise the fcm which will get the device token. Should be called at the earliest.
-
-**getPermissionStatus - (bool** - Returns the status whether the user has allowed Push notification permissions. 
-
-**getFcmToken - ( string)** - Returns the FCM token of the device.
-
-
-
-
-
-****< StartCustody />**** component is the entry component, which starts from asking the user to enter their phone/email and follows. 
-
-This **< StartCustody />** component, can be used for multiple use case like to Sign Transactions and Retrieve Private Key by passing props.
-
-- Create a new vault
-- To Accept and Decline Cosigner Request
-- To Sign Transactions
-
-**creator, txId, transactionType, user(id), etc.,** will be obtained from the notification params and as the query params.
-
-## Usage:
-
-### Creating a vault:
-
-    return (
-        <>
-          { IS_CUSTODY_SET ? (
-            <div>Welcome to dashboard</div>
-          ) : permissionStatus === "granted" ? (
-            <>
-              { fcmToken ? (
-                <StartCustody creatorInfo={{ fcmToken }} />
-              ) : (
-                <div>Retrieving fcm token...</div>
-              ) }
-            </>
-          ) :  permissionStatus === 'denied' ? (
-              <p>
-                Notifications are blocked. Please enable them from your browser
-                settings.
-              </p>
-          ) : (
-            <div>Requesting notification permissions...</div>
-          )}
-        </>
-      )
-
-
-### Handling cosigner requests:
-
-        <StartCustody
-            startPoint={{
-                component: "StartCosigner",  // currently supports all forms of signing
-                args: { creator, txId, transactionType, id },
-            }}
-        />
-    
-*transactionType* determines the type of signing request. 
-
-
-
-### Recovering a private key:
-
-This **< GetPrivateKey  />** component, will let you to retreive the private key once all your cosigners signoff your recovery code request.
-
-    return (
-    <GetPrivateKey
-      setupProps={{
-        chainId: 84532,
-      }}
-      signingInfo={{ creator, txId, transactionType, user }}
-     />
-    )
-
-