@matchain/matchid-sdk-react 0.1.48-alpha.7 → 0.1.48-alpha.8

package/dist/hooks/api/index.mjs

@@ -2,11 +2,11 @@ import {
   bind_exports,
   poh_exports,
   user_exports
-} from "../../chunk-YXPWZXPT.mjs";
+} from "../../chunk-J5U7AXYA.mjs";
 import {
   isSuccess,
   wallet_exports
-} from "../../chunk-2CK7JQWH.mjs";
+} from "../../chunk-EY6NPX4M.mjs";
 import "../../chunk-UA6XHZHX.mjs";
 import "../../chunk-USKUYOYJ.mjs";
 import "../../chunk-7UTR37EJ.mjs";

package/dist/hooks/index.d.mts

@@ -1,8 +1,9 @@
-export { c as useCopyClipboard, l as useLayout, f as useMatchChain, a as useMatchEvents, g as useMatchWallet, h as useMatchWalletRecords, d as useModal, j as useReceipt, e as useToast, k as useTransaction, u as useUserInfo, b as useWallet } from '../index-DktvxNJc.mjs';
-import '../types-CHkU0WHZ.mjs';
+export { c as useCopyClipboard, l as useLayout, f as useMatchChain, a as useMatchEvents, g as useMatchWallet, h as useMatchWalletRecords, d as useModal, j as useReceipt, e as useToast, k as useTransaction, u as useUserInfo, b as useWallet } from '../index-DDV4F9ka.mjs';
+import '../types-B4BYNw8B.mjs';
 import 'react';
 import 'viem';
 import '../mpc-CTbBWHld.mjs';
 import 'viem/types/misc';
 import 'abitype';
+import 'viem/_types/actions/siwe/verifySiweMessage';
 import '@tanstack/react-query';

package/dist/hooks/index.d.ts

@@ -1,8 +1,9 @@
-export { c as useCopyClipboard, l as useLayout, f as useMatchChain, a as useMatchEvents, g as useMatchWallet, h as useMatchWalletRecords, d as useModal, j as useReceipt, e as useToast, k as useTransaction, u as useUserInfo, b as useWallet } from '../index-DaEFoDv_.js';
-import '../types-CHkU0WHZ.js';
+export { c as useCopyClipboard, l as useLayout, f as useMatchChain, a as useMatchEvents, g as useMatchWallet, h as useMatchWalletRecords, d as useModal, j as useReceipt, e as useToast, k as useTransaction, u as useUserInfo, b as useWallet } from '../index-Bz53bbI_.js';
+import '../types-B4BYNw8B.js';
 import 'react';
 import 'viem';
 import '../mpc-CTbBWHld.js';
 import 'viem/types/misc';
 import 'abitype';
+import 'viem/_types/actions/siwe/verifySiweMessage';
 import '@tanstack/react-query';

package/dist/hooks/index.js

@@ -257,6 +257,13 @@ var getUserChainListApi = () => {
     method: "GET"
   });
 };
+var userImportTokenApi = (data) => {
+  return request_default({
+    url: `/api/v1/user/import/token`,
+    method: "POST",
+    data
+  });
+};
 var getUserWalletTransactionsApi = (data) => {
   return request_default({
     url: `/api/v1/user/wallet/transactions`,
@@ -395,12 +402,43 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // src/assets/icon/CloseEyeIcon.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function CloseEyeIcon({
+  size = 20,
+  color = "#6E6E6E"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "path",
+    {
+      d: "M9.15132 12.5568V11.5464C8.21031 11.4949 7.28023 11.3193 6.38524 11.024L6.04233 11.9579C6.00626 12.0669 5.94867 12.1676 5.87299 12.2539C5.79731 12.3403 5.70508 12.4106 5.60174 12.4607C5.4984 12.5108 5.38607 12.5396 5.27139 12.5455C5.15671 12.5514 5.04201 12.5342 4.93409 12.4949C4.82617 12.4557 4.72722 12.3952 4.6431 12.317C4.55898 12.2389 4.49139 12.1446 4.44435 12.0399C4.3973 11.9351 4.37175 11.822 4.36921 11.7072C4.36667 11.5924 4.38719 11.4783 4.42955 11.3715L4.80788 10.3268C4.04603 9.88461 3.32634 9.37345 2.65789 8.79975C2.54358 8.70488 2.42928 8.61687 2.32184 8.52772C2.1442 8.38554 2.03031 8.17862 2.00523 7.95247C1.98015 7.72633 2.04593 7.49948 2.18811 7.32184C2.33028 7.1442 2.5372 7.03031 2.76335 7.00523C2.98949 6.98015 3.21634 7.04593 3.39398 7.18811C3.50828 7.27955 3.62258 7.37099 3.73689 7.47043C5.46065 9.00826 7.68996 9.85815 10 9.85815C12.31 9.85815 14.5393 9.00826 16.2631 7.47043C16.3774 7.37099 16.4917 7.27955 16.606 7.18811C16.694 7.11771 16.7949 7.06533 16.9031 7.03395C17.0114 7.00257 17.1247 6.99281 17.2367 7.00523C17.3486 7.01765 17.4571 7.052 17.5558 7.10632C17.6545 7.16065 17.7415 7.23388 17.8119 7.32184C17.8823 7.4098 17.9347 7.51077 17.9661 7.61897C17.9974 7.72717 18.0072 7.8405 17.9948 7.95247C17.9824 8.06445 17.948 8.17288 17.8937 8.27158C17.8394 8.37028 17.7661 8.45732 17.6782 8.52772L17.3421 8.79975C16.6737 9.37354 15.954 9.88471 15.1921 10.3268L15.5705 11.3715C15.6128 11.4783 15.6333 11.5924 15.6308 11.7072C15.6283 11.822 15.6027 11.9351 15.5557 12.0399C15.5086 12.1446 15.441 12.2389 15.3569 12.317C15.2728 12.3952 15.1738 12.4557 15.0659 12.4949C14.958 12.5342 14.8433 12.5514 14.7286 12.5455C14.6139 12.5396 14.5016 12.5108 14.3983 12.4607C14.2949 12.4106 14.2027 12.3403 14.127 12.2539C14.0513 12.1676 13.9937 12.0669 13.9577 11.9579L13.6148 11.024C12.7198 11.3193 11.7897 11.4949 10.8487 11.5464V12.5568C10.8487 12.7842 10.7584 13.0022 10.5976 13.163C10.4368 13.3238 10.2188 13.4141 9.99143 13.4141C9.76407 13.4141 9.54602 13.3238 9.38526 13.163C9.22449 13.0022 9.13417 12.7842 9.13417 12.5568H9.15132Z",
+      fill: color
+    }
+  ) });
+}
 
 // src/assets/icon/OpenEyeIcon.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+function OpenEyeIcon({
+  size = 20,
+  color = "#6E6E6E"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "path",
+    {
+      d: "M10 6.4543C11.3373 6.44986 12.6486 6.82287 13.7834 7.53047C14.9181 8.23806 15.8301 9.25151 16.4145 10.4543C15.2145 12.9052 12.7564 14.4543 10 14.4543C7.24364 14.4543 4.78545 12.9052 3.58545 10.4543C4.1699 9.25151 5.08191 8.23806 6.21664 7.53047C7.35136 6.82287 8.66274 6.44986 10 6.4543ZM10 4.99976C6.36364 4.99976 3.25818 7.26157 2 10.4543C3.25818 13.647 6.36364 15.9088 10 15.9088C13.6364 15.9088 16.7418 13.647 18 10.4543C16.7418 7.26157 13.6364 4.99976 10 4.99976ZM10 8.63612C10.4822 8.63617 10.9446 8.82774 11.2855 9.16871C11.6265 9.50968 11.818 9.97212 11.818 10.4543C11.818 10.9365 11.6265 11.3989 11.2855 11.7399C10.9446 12.0809 10.4822 12.2724 10 12.2725C9.51782 12.2724 9.0554 12.0809 8.71447 11.7399C8.37353 11.3989 8.18199 10.9365 8.18199 10.4543C8.18199 9.97212 8.37353 9.50968 8.71447 9.16871C9.0554 8.82774 9.51782 8.63617 10 8.63612ZM10 7.18157C8.19636 7.18157 6.72727 8.65066 6.72727 10.4543C6.72727 12.2579 8.19636 13.727 10 13.727C11.8036 13.727 13.2727 12.2579 13.2727 10.4543C13.2727 8.65066 11.8036 7.18157 10 7.18157Z",
+      fill: color
+    }
+  ) });
+}
 
 // src/assets/icon/DeleteRoundIcon.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+function DeleteRoundIcon({ height = 21, width = 20, color = "var(--matchid-error-color)", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width, height, viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { y: "0.5", width: "20", height: "20", rx: "10", fill: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M7.17139 7.67188L12.8282 13.3287", stroke: "white", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12.8286 7.67188L7.17176 13.3287", stroke: "white", strokeLinecap: "round" })
+  ] });
+}
 
 // src/assets/icon/FacebookIcon.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -622,9 +660,60 @@ function Button({
 // src/ui/Input/index.tsx
 var import_react3 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
+function Input({
+  onChange,
+  type,
+  after,
+  className = "",
+  ...props
+}) {
+  const [inputType, setInputType] = (0, import_react3.useState)(type);
+  const isDownMd = useDownMd();
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
+    {
+      className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+          if (onChange) {
+            onChange({ target: { value: "" } });
+          }
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          DeleteRoundIcon,
+          {
+            height: isDownMd ? 16 : 21,
+            width: isDownMd ? 16 : 20,
+            color: "var(--matchid-input-delete-icon-color)"
+          }
+        ) }),
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+          setInputType(inputType === "password" ? "text" : "password");
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
+        after
+      ]
+    }
+  );
+}
 
 // src/ui/Field/index.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
+function Field({
+  label,
+  children,
+  error,
+  required,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "matchid-field-required", children: "*" }),
+      label
+    ] }),
+    children,
+    error && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "matchid-field-error", children: error })
+  ] });
+}
 
 // src/components/EmailModal/StepEmail.tsx
 var import_react_intl = require("react-intl");
@@ -1452,6 +1541,7 @@ function useChainListQuery(options) {
 
 // src/hooks/useMatchChain.tsx
 var import_react32 = require("react");
+var import_viem5 = require("viem");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 function useMatchChain() {
   const chainListQuery = useChainListQuery();
@@ -1511,13 +1601,23 @@ function useMatchChain() {
       content: ChangeNetwork
     });
   };
+  const publicClient = (0, import_react32.useMemo)(() => {
+    if (!chain) {
+      return null;
+    }
+    return (0, import_viem5.createPublicClient)({
+      chain,
+      transport: (0, import_viem5.http)()
+    });
+  }, [chain]);
   return {
     list: chainListQuery.data,
     chainId,
     setChainId,
     chain,
     explorerLink,
-    showChangeNetwork
+    showChangeNetwork,
+    publicClient
   };
 }
 
@@ -1530,50 +1630,210 @@ var address = "0x4143e29770fd63e24bb1f32d50bf8a590e34de4b";
 
 // src/hooks/useMatchWallet.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
-function useMatchWallet() {
-  const modal = useModal();
-  const { address: address2 } = useWallet2();
+var ReceiveModal = () => {
   const chain = useMatchChain();
+  const { address: address2 } = useWallet2();
   const [copied, setCopied] = useCopyClipboard();
   const toast = useToast();
   const onCopy = () => {
     setCopied(address2);
     toast.success("Copied!");
   };
+  const chainLink = chain.explorerLink("address/" + address2);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `matchid-receive-modal`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "matchid-receive-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `matchid-receive-text`, children: "Receive by scanning the QR code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `matchid-qr-container`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        import_react_qrcode.QRCode,
+        {
+          margin: "0",
+          className: `matchid-qr-code`,
+          value: address2
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        "a",
+        {
+          href: chainLink,
+          target: "_blank",
+          className: `matchid-receive-link`,
+          children: address2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { size: "lg", onClick: onCopy, block: true, highlight: true, disabled: copied, children: "Copy Address" })
+  ] });
+};
+var ImportTokenModal = ({ close }) => {
+  const [address2, setAddress] = (0, import_react33.useState)("");
+  const [symbol, setSymbol] = (0, import_react33.useState)("");
+  const [decimals, setDecimals] = (0, import_react33.useState)("");
+  const [error, setError] = (0, import_react33.useState)({});
+  const { publicClient, chainId } = useMatchChain();
+  const getContractInfo = async () => {
+    if (!publicClient) return;
+    const erc20Abi = [
+      {
+        name: "decimals",
+        type: "function",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [{ name: "decimals", type: "uint8" }]
+      },
+      {
+        name: "symbol",
+        type: "function",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [{ name: "symbol", type: "string" }]
+      }
+    ];
+    const calls = [
+      {
+        address: address2,
+        abi: erc20Abi,
+        functionName: "symbol",
+        args: []
+      },
+      {
+        address: address2,
+        abi: erc20Abi,
+        functionName: "decimals",
+        args: []
+      }
+    ];
+    try {
+      const results = await publicClient.multicall({ contracts: calls });
+      console.log("results", results);
+      if (!symbol && results[0]?.status == "success") {
+        setSymbol(results[0]?.result);
+      }
+      if (!decimals && results[1]?.status == "success") {
+        setDecimals((results[1]?.result).toString());
+      }
+    } catch (error2) {
+      setError({
+        address: error2.message
+      });
+    }
+  };
+  (0, import_react33.useEffect)(() => {
+    if (address2.length === 42) {
+      const reg = /^0x[0-9a-fA-F]{40}$/;
+      if (!reg.test(address2)) {
+        setError({
+          ...error,
+          address: "Invalid address"
+        });
+      } else {
+        setError({
+          ...error,
+          address: ""
+        });
+        publicClient && getContractInfo();
+      }
+    }
+  }, [address2, publicClient]);
+  const [loading, setLoading] = (0, import_react33.useState)(false);
+  const toast = useToast();
+  const onImport = async () => {
+    setLoading(true);
+    try {
+      const res = await userImportTokenApi({
+        chain_id: chainId?.toString() || "",
+        symbol,
+        address: address2,
+        decimals
+      });
+      if (isSuccess(res)) {
+        toast.success("Imported successfully");
+        close();
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error2) {
+      toast.error(error2.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const canImport = (0, import_react33.useMemo)(() => {
+    if (!address2) {
+      return false;
+    }
+    if (!symbol) {
+      return false;
+    }
+    if (decimals.length === 0) {
+      return false;
+    }
+    const reg = /^0x[0-9a-fA-F]{40}$/;
+    if (!reg.test(address2)) {
+      return false;
+    }
+    return true;
+  }, [error, address2, symbol, decimals]);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `matchid-import-token`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "matchid-import-token-form", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Field, { label: "Token Smart Contract", error: error.address, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        Input,
+        {
+          placeholder: "Enter the Token Smart Contract",
+          value: address2,
+          onChange: (e) => setAddress(e.target.value),
+          maxLength: 42
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Field, { label: "Token Symbol", error: error.symbol, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        Input,
+        {
+          placeholder: "Enter the Token Symbol",
+          value: symbol,
+          onChange: (e) => setSymbol(e.target.value),
+          maxLength: 16
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Field, { label: "Decimals", error: error.decimals, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        Input,
+        {
+          placeholder: "Enter the Decimals",
+          type: "number",
+          value: decimals,
+          onChange: (e) => setDecimals(e.target.value)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      Button,
+      {
+        size: "lg",
+        onClick: onImport,
+        block: true,
+        loading,
+        disabled: !canImport,
+        highlight: true,
+        children: "Import"
+      }
+    )
+  ] });
+};
+function useMatchWallet() {
+  const modal = useModal();
   const showReceiveModal = () => {
-    const chainLink = chain.explorerLink("address/" + address2);
-    const ReceiveModal = () => {
-      return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `matchid-receive-modal`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "matchid-receive-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `matchid-receive-text`, children: "Receive by scanning the QR code" }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `matchid-qr-container`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-            import_react_qrcode.QRCode,
-            {
-              margin: "0",
-              className: `matchid-qr-code`,
-              value: address2
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-            "a",
-            {
-              href: chainLink,
-              target: "_blank",
-              className: `matchid-receive-link`,
-              children: address2
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button, { size: "lg", onClick: onCopy, block: true, highlight: true, disabled: copied, children: "Copy Address" })
-      ] });
-    };
     modal.open({
       title: "Receive",
       content: ReceiveModal
     });
   };
+  const showImportTokenModal = () => {
+    modal.open({
+      title: "Customized Token",
+      content: ImportTokenModal
+    });
+  };
   return {
-    showReceiveModal
+    showReceiveModal,
+    showImportTokenModal
   };
 }
 function useMatchWalletRecords({
@@ -1622,7 +1882,7 @@ function useMatchWalletRecords({
 // src/hooks/useReceipt.tsx
 var import_react34 = require("react");
 var import_react_query5 = require("@tanstack/react-query");
-var import_viem5 = require("viem");
+var import_viem6 = require("viem");
 var CACHE_TTL = 86400 * 30 * 1e3;
 var MAX_CACHE_SIZE = 500;
 var STORAGE_KEY = "match_receipt_logs";
@@ -1739,10 +1999,9 @@ function useReceipt({
         return cache.get(cacheKey);
       }
       try {
-        const publicClient = (0, import_viem5.createPublicClient)({
-          //@ts-ignore
-          chain: (0, import_viem5.defineChain)(chain),
-          transport: (0, import_viem5.http)()
+        const publicClient = (0, import_viem6.createPublicClient)({
+          chain: (0, import_viem6.defineChain)(chain),
+          transport: (0, import_viem6.http)()
         });
         const receipt = await publicClient.getTransactionReceipt({ hash });
         if (!receipt) {
@@ -1767,7 +2026,7 @@ function useReceipt({
 // src/hooks/useTransaction.tsx
 var import_react35 = require("react");
 var import_react_query6 = require("@tanstack/react-query");
-var import_viem6 = require("viem");
+var import_viem7 = require("viem");
 var CACHE_TTL2 = 86400 * 30 * 1e3;
 var MAX_CACHE_SIZE2 = 500;
 var STORAGE_KEY2 = "match_transaction_logs";
@@ -1884,10 +2143,9 @@ function useTransaction({
         return cache.get(cacheKey);
       }
       try {
-        const publicClient = (0, import_viem6.createPublicClient)({
-          //@ts-ignore
-          chain: (0, import_viem6.defineChain)(chain),
-          transport: (0, import_viem6.http)()
+        const publicClient = (0, import_viem7.createPublicClient)({
+          chain: (0, import_viem7.defineChain)(chain),
+          transport: (0, import_viem7.http)()
         });
         const transaction = await publicClient.getTransaction({ hash });
         if (!transaction) {