@verified-network/verified-custody 0.1.8 → 0.2.0

package/package.json

@@ -1,50 +1,43 @@
 {
   "name": "@verified-network/verified-custody",
-  "version": "0.1.8",
-  "description": "React submodule for Custody of digital assets",
-  "main": "dist/main.js",
+  "version": "0.2.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack"
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "files": ["dist"],
   "keywords": [],
   "author": "",
   "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^5.1.4"
-  },
+  "description": "React submodule for Custody of digital assets",
   "dependencies": {
-    "@verified-network/verified-sdk": "^1.8.9",
-    "assert": "^2.1.0",
-    "axios": "^1.7.2",
-    "babel-loader": "^9.1.3",
-    "browserify-zlib": "^0.2.0",
-    "buffer": "^6.0.3",
-    "constants-browserify": "^1.0.0",
-    "crypto-browserify": "^3.12.0",
+    "@biconomy/account": "^4.5.7",
+    "@verified-network/verified-sdk": "^1.9.5",
+    "axios": "^1.8.4",
     "crypto-js": "^4.2.0",
-    "ethers": "^6.12.1",
-    "firebase": "^10.12.0",
-    "https-browserify": "^1.0.0",
-    "husky": "^9.0.11",
-    "node-polyfill-webpack-plugin": "^4.0.0",
-    "os-browserify": "^0.3.0",
-    "path-browserify": "^1.0.1",
-    "process": "^0.11.10",
-    "react-native-web": "^0.19.11",
-    "shamir-secret-sharing": "^0.0.3",
-    "shamirs-secret-sharing": "^2.0.0",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "url": "^0.11.3",
-    "viem": "^2.12.5"
+    "ethers": "^6.13.5",
+    "lodash": "^4.17.21",
+    "react-toastify": "^11.0.5",
+    "shamir-secret-sharing": "^0.0.4"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-native": "^0.78.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/plugin-transform-runtime": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@types/chrome": "^0.0.313",
+    "@types/crypto-js": "^4.2.2",
+    "@types/lodash": "^4.17.16",
+    "@types/react": "^19.1.0",
+    "node-libs-browser": "^2.2.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
   }
-}
+}

package/src/components/overlays.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { imageAssets } from "../utils/constants";
+
+export const TermsAndConditionsOverlay = () => {
+  return (
+    <p className="verified-custd-mdl-terms-and-condition">
+      By proceeding, you agree with Verified Wallet{" "}
+      <span style={{ color: "#603FF4", cursor: "pointer" }}>T&C</span> and{" "}
+      <span style={{ color: "#603FF4", cursor: "pointer" }}>
+        Privacy Policy.
+      </span>
+    </p>
+  );
+};
+
+export const LogoutOverlay = (props: {
+  setIsLoading: (isLoading: boolean) => void;
+  setisOnboard?: (isOnboard: boolean) => void;
+}) => {
+  return (
+    <p
+      style={{ fontSize: "0.7rem" }}
+      className="verified-custd-mdl-terms-and-condition"
+    >
+      Want to access a different account? Click{" "}
+      <span
+        style={{ color: "#603FF4", cursor: "pointer" }}
+        onClick={async () => {
+          props.setIsLoading(true);
+          if (chrome?.storage?.local) {
+            await chrome.storage.local.remove("myVault");
+          } else if (localStorage) {
+            localStorage.removeItem("myVault");
+          }
+          if (props.setisOnboard) {
+            props.setisOnboard(false);
+          }
+          props.setIsLoading(false);
+        }}
+      >
+        Logout
+      </span>{" "}
+      to logout and login/create another account
+    </p>
+  );
+};
+
+export const PrivacyOverlay = () => {
+  return (
+    <div className="verified-custd-mdl-privacy">
+      <img
+        alt="Privacy Icon"
+        src={imageAssets.privacyTip}
+        className="verified-custd-mdl-privacy-icon"
+      />
+      <p className="verified-custd-mdl-privacy-text">
+        Trusted by 10M+ Investors globally
+      </p>
+    </div>
+  );
+};

package/src/components/search.tsx

@@ -0,0 +1,381 @@
+import React, { useState } from "react";
+import { imageAssets } from "../utils/constants";
+
+const SearchBox = (props: any) => {
+  const [newSearchContent, setNewSearchContent] = useState<null | [Object]>(
+    null
+  );
+
+  return (
+    <div className="verified-custd-mdl-startup-language-content-container">
+      <div className="verified-custd-mdl-st-language-content">
+        {props.headerText && (
+          <p className="verified-custd-mdl-st-language-text">
+            {props.headerText}
+          </p>
+        )}
+        <div className="verified-custd-mdl-mobille-startup-search-box-container">
+          <div className="verified-custd-mdl-mobile-startup-search-box">
+            <img
+              style={{ paddingLeft: "6px" }}
+              src={imageAssets.search}
+              alt="Search Icon"
+              className="verified-custd-mdl-mobile-search-icon"
+            />
+            <input
+              onInputCapture={() => {
+                if (props.type === "language") {
+                  props.setSelected("");
+                }
+              }}
+              onInput={(e: any) => {
+                if (e.target.value === "") {
+                  setNewSearchContent(null);
+                } else {
+                  if (props.type === "language") {
+                    setNewSearchContent(
+                      // eslint-disable-next-line array-callback-return
+                      props.searchContent.filter((src: any) => {
+                        if (
+                          src.name
+                            .toLowerCase()
+                            .includes(e.target.value.toLowerCase())
+                        ) {
+                          src.searched = e.target.value.toLowerCase();
+                          src.nameArray = src.name.split("");
+                          return src;
+                        }
+                      })
+                    );
+                  } else if (props.type === "area-code") {
+                    setNewSearchContent(
+                      // eslint-disable-next-line array-callback-return
+
+                      props.searchContent.filter((src: any) => {
+                        if (
+                          src?.name
+                            ?.toLowerCase()
+                            .includes(e.target.value.toLowerCase())
+                        ) {
+                          src.searched = e.target.value.toLowerCase();
+                          src.nameArray = src?.name?.split("");
+                          return src;
+                        }
+                      })
+                    );
+                  }
+                }
+
+                props.handleButtonDisplay();
+              }}
+              type="text"
+              className="verified-custd-mdl-ms-search-box-content"
+              placeholder="Search"
+            />
+          </div>
+          <div className="verified-custd-mdl-mobile-startup-search-content">
+            <div
+              style={
+                props.contentMaxHeight
+                  ? { maxHeight: `${props.contentMaxHeight}px` }
+                  : {}
+              }
+              className="verified-custd-mdl-ms-search-content-container"
+            >
+              {!newSearchContent &&
+                props?.searchContent?.length > 0 &&
+                props.searchContent.map((src: any, idx: number) => (
+                  <React.Fragment key={idx}>
+                    {props.type === "area-code" && (
+                      <div
+                        key={idx}
+                        onClickCapture={() => {
+                          props.setSelected({
+                            area: src.phone_code,
+                            flag: src.flag,
+                            name: src.name,
+                          });
+                        }}
+                        onClick={() => {
+                          if (props.setSearchActive) {
+                            props.setSearchActive(!props.setSearchActive);
+                          }
+                          props.handleButtonDisplay();
+                        }}
+                        className="verified-custd-mdl-ms-search-content"
+                      >
+                        <img
+                          src={src.flag}
+                          alt="Search Result Icon"
+                          className="verified-custd-mdl-ms-search-content-icon"
+                        />
+                        <p className="verified-custd-mdl-ms-search-content-text">
+                          {src.name}
+                        </p>
+                      </div>
+                    )}
+                    {props.type === "language" && (
+                      <React.Fragment>
+                        {window.location.search !== `?${idx}` && (
+                          <div
+                            key={idx}
+                            onClickCapture={() => {
+                              props.setSelected(src.name);
+                            }}
+                            onClick={() => {
+                              props.setSelected(src.name);
+                              if (props.setSearchActive) {
+                                props.setSearchActive(!props.setSearchActive);
+                              }
+                              props.handleButtonDisplay();
+                            }}
+                            className="verified-custd-mdl-ms-search-content"
+                          >
+                            <img
+                              src={src.icon}
+                              alt="Search Result Icon"
+                              className="verified-custd-mdl-ms-search-content-icon"
+                            />
+                            {src.label && (
+                              <p className="verified-custd-mdl-ms-search-content-text">
+                                {src.name} {`(${src.label})`}
+                              </p>
+                            )}
+                            {!src.label && (
+                              <p className="verified-custd-mdl-ms-search-content-text">
+                                {src.name}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                        {window.location.search === `?${idx}` && (
+                          <div
+                            key={idx}
+                            onClickCapture={() => {
+                              props.setSelected(src.name);
+                            }}
+                            onClick={() => {
+                              props.setSelected(src.name);
+                              if (props.setSearchActive) {
+                                props.setSearchActive(!props.setSearchActive);
+                              }
+                              props.handleButtonDisplay();
+                            }}
+                            className="verified-custd-mdl-ms-search-content-active"
+                          >
+                            <div className="verified-custd-mdl-ms-search-content-text-container">
+                              <img
+                                src={src.icon}
+                                alt="Search Result Icon"
+                                className="verified-custd-mdl-ms-search-content-icon"
+                              />
+                              {src.label && (
+                                <p className="verified-custd-mdl-ms-search-content-text">
+                                  {src.name} {`(${src.label})`}
+                                </p>
+                              )}
+                              {!src.label && (
+                                <p className="verified-custd-mdl-ms-search-content-text">
+                                  {src.name}
+                                </p>
+                              )}
+                            </div>
+                            {props.selected && props.selected.length > 0 && (
+                              <img
+                                src={imageAssets.circleClicked}
+                                alt="Clicked Icon"
+                              />
+                            )}
+                          </div>
+                        )}
+                      </React.Fragment>
+                    )}
+                  </React.Fragment>
+                ))}
+
+              {newSearchContent &&
+                newSearchContent.length > 0 &&
+                newSearchContent.map((src: any, idx: number) => (
+                  <React.Fragment key={idx}>
+                    {props.type === "area-code" && (
+                      <div
+                        key={idx}
+                        onClickCapture={() => {
+                          props.setSelected({
+                            area: src?.phone_code,
+                            flag: src?.flag,
+                            name: src?.name,
+                          });
+                        }}
+                        onClick={() => {
+                          if (props.setSearchActive) {
+                            props.setSearchActive(!props.setSearchActive);
+                          }
+                          props.handleButtonDisplay();
+                        }}
+                        className="verified-custd-mdl-ms-search-content"
+                      >
+                        <img
+                          src={src?.flag}
+                          alt="Search Result Icon"
+                          className="verified-custd-mdl-ms-search-content-icon"
+                        />
+                        <p className="verified-custd-mdl-ms-search-content-text">
+                          {src?.nameArray?.length > 0 &&
+                            src?.nameArray.map((nm: any, idx: number) => (
+                              <React.Fragment key={idx}>
+                                {!src.searched.includes(nm.toLowerCase()) && (
+                                  <span
+                                    key={idx}
+                                    style={{
+                                      color: "#B6B7C3",
+                                    }}
+                                  >
+                                    {nm}
+                                  </span>
+                                )}
+                                {src.searched.includes(nm.toLowerCase()) && (
+                                  <span key={idx}>{nm}</span>
+                                )}
+                              </React.Fragment>
+                            ))}
+                        </p>
+                      </div>
+                    )}
+                    {props.type === "language" && (
+                      <React.Fragment key={idx}>
+                        {window.location.search !== `?${idx}` && (
+                          <div
+                            onClickCapture={() => {
+                              props.setSelected(src.name);
+                            }}
+                            onClick={() => {
+                              props.setSelected(src.name);
+                              if (props.setSearchActive) {
+                                props.setSearchActive(!props.setSearchActive);
+                              }
+                              props.handleButtonDisplay();
+                            }}
+                            className="verified-custd-mdl-ms-search-content"
+                          >
+                            <img
+                              src={src.icon}
+                              alt="Search Result Icon"
+                              className="verified-custd-mdl-ms-search-content-icon"
+                            />
+                            {!src.label && (
+                              <p className="verified-custd-mdl-ms-search-content-text">
+                                {src.nameArray?.length > 0 &&
+                                  src.nameArray.map((nm: any, idx: number) => (
+                                    <React.Fragment key={idx}>
+                                      {!src.searched.includes(
+                                        nm.toLowerCase()
+                                      ) && (
+                                        <span
+                                          key={idx}
+                                          style={{
+                                            color: "#B6B7C3",
+                                          }}
+                                        >
+                                          {nm}
+                                        </span>
+                                      )}
+                                      {src.searched.includes(
+                                        nm.toLowerCase()
+                                      ) && <span key={idx}>{nm}</span>}
+                                    </React.Fragment>
+                                  ))}
+                              </p>
+                            )}
+                            {src.label && (
+                              <p className="verified-custd-mdl-ms-search-content-text">
+                                {src.nameArray?.length > 0 &&
+                                  src.nameArray.map((nm: any, idx: number) => (
+                                    <React.Fragment key={idx}>
+                                      {!src.searched.includes(
+                                        nm.toLowerCase()
+                                      ) && (
+                                        <span
+                                          key={idx}
+                                          style={{
+                                            color: "#B6B7C3",
+                                          }}
+                                        >
+                                          {nm}
+                                        </span>
+                                      )}
+                                      {src.searched.includes(
+                                        nm.toLowerCase()
+                                      ) && <span key={idx}>{nm}</span>}
+                                    </React.Fragment>
+                                  ))}
+                                {!src.searched.includes(
+                                  src.label.toLowerCase()
+                                ) && (
+                                  <span
+                                    style={{
+                                      color: "#B6B7C3",
+                                    }}
+                                  >{` (${src.label})`}</span>
+                                )}
+                                {src.searched.includes(
+                                  src.label.toLowerCase()
+                                ) && <span>{` (${src.label})`}</span>}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                        {window.location.search === `?${idx}` && (
+                          <div
+                            key={idx}
+                            onClickCapture={() => {
+                              props.setSelected(src.name);
+                            }}
+                            onClick={() => {
+                              props.setSelected(src.name);
+                              if (props.setSearchActive) {
+                                props.setSearchActive(!props.setSearchActive);
+                              }
+                              props.handleButtonDisplay();
+                            }}
+                            className="verified-custd-mdl-ms-search-content-active"
+                          >
+                            <div className="verified-custd-mdl-ms-search-content-text-container">
+                              <img
+                                src={src.icon}
+                                alt="Search Result Icon"
+                                className="verified-custd-mdl-ms-search-content-icon"
+                              />
+                              {src.label && (
+                                <p className="verified-custd-mdl-ms-search-content-text">
+                                  {src.name} {`(${src.label})`}
+                                </p>
+                              )}
+                              {!src.label && (
+                                <p className="verified-custd-mdl-ms-search-content-text">
+                                  {src.name}
+                                </p>
+                              )}
+                            </div>
+
+                            {props.selected && props.selected.length > 0 && (
+                              <img
+                                src={imageAssets.circleClicked}
+                                alt="Clicked Icon"
+                              />
+                            )}
+                          </div>
+                        )}
+                      </React.Fragment>
+                    )}
+                  </React.Fragment>
+                ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBox;

package/src/components/slider.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const PageSlider = (props: any) => {
+  return (
+    <div className="verified-custd-mdl-startup-slider">
+      {props.sliderCount?.length > 0 &&
+        props.sliderCount.map((_: any, idx: number) => (
+          <React.Fragment key={idx}>
+            {idx <= Number(props.currentSlider) && (
+              <div
+                key={`active-${idx}`}
+                style={{ width: `${100 / props.sliderCount.length}%` }}
+                className="verified-custd-mdl-startup-slider-line-active"
+              ></div>
+            )}
+            {idx > Number(props.currentSlider) && (
+              <div
+                key={`inactive-${idx}`}
+                style={{ width: `${100 / props.sliderCount.length}%` }}
+                className="verified-custd-mdl-startup-slider-line"
+              ></div>
+            )}
+          </React.Fragment>
+        ))}
+    </div>
+  );
+};
+
+export default PageSlider;