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

package/dist/hooks/index.js

@@ -39,6 +39,7 @@ __export(hooks_exports, {
   useModal: () => useModal,
   useReceipt: () => useReceipt,
   useToast: () => useToast,
+  useTransaction: () => useTransaction,
   useUserInfo: () => useUserInfo,
   useWallet: () => useWallet2
 });
@@ -256,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`,
@@ -394,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");
@@ -479,9 +518,12 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 // src/assets/icon/ErrorRoundIcon.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
-// src/assets/icon/InfoRoundIcon.tsx
+// src/assets/icon/InfoLineIcon.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 
+// src/assets/icon/InfoRoundIcon.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
 // src/hooks/useLayout.tsx
 var useLayout_exports = {};
 __export(useLayout_exports, {
@@ -503,7 +545,7 @@ function useDownMd() {
 }
 
 // src/hooks/useConfig.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DEFAULT_WALLET_METHODS = ["evm", "sol", "btc", "tron", "ton"];
 
 // src/store/useModalStore.ts
@@ -561,10 +603,10 @@ var import_react6 = require("react");
 
 // src/ui/Overlay/index.tsx
 var import_react2 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 
 // src/ui/Modal/index.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // src/components/EmailModal/StepEmail.tsx
 var import_react4 = require("react");
@@ -581,7 +623,7 @@ function getAppClientId() {
 }
 
 // src/ui/Button/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -600,7 +642,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "button",
     {
       type,
@@ -610,34 +652,85 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
     }
   );
 }
 
 // src/ui/Input/index.tsx
 var import_react3 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+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_runtime51 = require("react/jsx-runtime");
+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");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 
 // src/components/EmailModal/StepVerify.tsx
 var import_react5 = require("react");
 var import_react_intl2 = require("react-intl");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/components/EmailModal/index.tsx
 var import_react_intl3 = require("react-intl");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/ui/Popover/index.tsx
 var import_react7 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/LoginBox/index.tsx
 var import_react8 = require("react");
@@ -647,36 +740,36 @@ var import_react_intl4 = require("react-intl");
 var import_react_query = require("@tanstack/react-query");
 
 // src/components/LoginBox/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/components/LoginButton/index.tsx
 var import_react10 = require("react");
 
 // src/components/LoginPanel/index.tsx
 var import_react_intl5 = require("react-intl");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/components/LoginModal/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/components/UserPopover/index.tsx
 var import_react9 = require("react");
 
 // src/assets/icon/ProfileIcon.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 
 // src/components/UserPopover/index.tsx
 var import_react_intl6 = require("react-intl");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 
 // src/components/LoginButton/index.tsx
 var import_react_intl7 = require("react-intl");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/components/UsernameModal/index.tsx
 var import_react11 = require("react");
 var import_react_intl8 = require("react-intl");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/components/SOLModal/index.tsx
 var import_react13 = __toESM(require("react"));
@@ -729,10 +822,10 @@ var import_react_intl9 = require("react-intl");
 
 // src/components/WalletModalContent/index.tsx
 var import_react12 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/components/SOLModal/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var wallets = [
   new import_wallet_adapter_wallets.PhantomWalletAdapter(),
   new import_wallet_adapter_wallets.SolflareWalletAdapter(),
@@ -783,13 +876,13 @@ var import_react_intl10 = require("react-intl");
 var import_react14 = require("react");
 
 // src/components/TRONModal/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 
 // src/components/TONModal/index.tsx
 var import_react16 = __toESM(require("react"));
 var import_react_intl11 = require("react-intl");
 var import_ui_react = require("@tonconnect/ui-react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 
 // src/components/BTCModal/index.tsx
 var import_react18 = __toESM(require("react"));
@@ -802,17 +895,17 @@ var import_sats_connect = require("sats-connect");
 var import_react17 = require("react");
 
 // src/components/BTCModal/index.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 
 // src/components/WalletModal/index.tsx
 var import_react19 = require("react");
 var import_react_intl13 = require("react-intl");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 
 // src/components/CEXBindModal/index.tsx
 var import_react20 = require("react");
 var import_react_intl14 = require("react-intl");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 
 // src/ui/HashPanel/index.tsx
 var import_viem = require("viem");
@@ -820,30 +913,30 @@ var import_react21 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 
 // src/ui/Drawer/index.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 
 // src/ui/ModalDrawer/index.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 
 // src/ui/HashPanel/index.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 
 // src/context/BusinessProvider.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 
 // src/context/ModalContext.tsx
 var import_react23 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/ui/Switch/index.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 
 // src/ui/AlphaAvatar/index.tsx
 var import_react22 = require("react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 
 // src/ui/Radio/index.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 function Radio({
   checked = false,
   onChange,
@@ -852,20 +945,20 @@ function Radio({
   className = "",
   style = {}
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { onClick: onChange, className: `matchid-radio ${className} ${checked ? "matchid-radio-checked" : ""}`, style: {
     width: size,
     height: size,
     ...style,
     // @ts-ignore
     "--matchid-radio-checked": color
-  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: `matchid-radio-content`, style: {
+  }, children: checked && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: `matchid-radio-content`, style: {
     width: Math.floor(size * 0.7),
     height: Math.floor(size * 0.7)
   } }) });
 }
 
 // src/context/ModalContext.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ModalContext = (0, import_react23.createContext)(null);
 function useModal() {
   const context = (0, import_react23.useContext)(ModalContext);
@@ -878,7 +971,7 @@ function useModal() {
 // src/context/ToastContext.tsx
 var import_react24 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var ToastContext = (0, import_react24.createContext)(null);
 function useToast() {
   const context = (0, import_react24.useContext)(ToastContext);
@@ -889,7 +982,7 @@ function useToast() {
 }
 
 // src/context/index.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 
 // src/hooks/useWalletInit.ts
 var import_react25 = require("react");
@@ -911,7 +1004,7 @@ var import_react26 = require("react");
 // src/MatchContext.tsx
 var import_react_query3 = require("@tanstack/react-query");
 var import_react_intl15 = require("react-intl");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var queryClient = new import_react_query3.QueryClient();
 var MatchContext = (0, import_react27.createContext)(void 0);
 var useMatch = () => {
@@ -1448,7 +1541,8 @@ function useChainListQuery(options) {
 
 // src/hooks/useMatchChain.tsx
 var import_react32 = require("react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_viem5 = require("viem");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 function useMatchChain() {
   const chainListQuery = useChainListQuery();
   const modal = useModal();
@@ -1477,25 +1571,25 @@ function useMatchChain() {
   }) {
     const { chainId: storeChainId2, setChainId: setChainId2 } = useLocalStore_default();
     const [selectedChainId, setSelectedChainId] = (0, import_react32.useState)(storeChainId2);
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: `matchid-change-network-box`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: `matchid-change-network-list`, children: chainListQuery.data?.map((item, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: `matchid-change-network-box`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `matchid-change-network-list`, children: chainListQuery.data?.map((item, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
           "div",
           {
             onClick: () => setSelectedChainId(item.id),
             className: `matchid-change-network-item  ${selectedChainId == item.id ? "matchid-change-network-selected" : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: `matchid-change-network-item-content`, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("img", { src: item.iconUrl, className: `matchid-change-network-item-icon` }),
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "matchid-change-network-item-name", children: item.name })
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: `matchid-change-network-item-content`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("img", { src: item.iconUrl, className: `matchid-change-network-item-icon` }),
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "matchid-change-network-item-name", children: item.name })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Radio, { checked: selectedChainId === item.id })
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Radio, { checked: selectedChainId === item.id })
             ]
           },
           index
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Button, { size: "lg", highlight: true, onClick: () => {
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { size: "lg", highlight: true, onClick: () => {
         setChainId2(selectedChainId || 0);
         close();
       }, block: true, children: "Confirm" })
@@ -1507,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
   };
 }
 
@@ -1525,51 +1629,211 @@ var import_react33 = require("react");
 var address = "0x4143e29770fd63e24bb1f32d50bf8a590e34de4b";
 
 // src/hooks/useMatchWallet.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-function useMatchWallet() {
-  const modal = useModal();
-  const { address: address2 } = useWallet2();
+var import_jsx_runtime83 = require("react/jsx-runtime");
+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_runtime82.jsxs)("div", { className: `matchid-receive-modal`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "matchid-receive-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `matchid-receive-text`, children: "Receive by scanning the QR code" }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `matchid-qr-container`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-            import_react_qrcode.QRCode,
-            {
-              margin: "0",
-              className: `matchid-qr-code`,
-              value: address2
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-            "a",
-            {
-              href: chainLink,
-              target: "_blank",
-              className: `matchid-receive-link`,
-              children: address2
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.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({
@@ -1578,8 +1842,9 @@ function useMatchWalletRecords({
   const [hasMore, setHasMore] = (0, import_react33.useState)(true);
   const [items, setItems] = (0, import_react33.useState)([]);
   const { chainId } = useMatchChain();
+  const hasMoreRef = (0, import_react33.useRef)(hasMore);
   const fetchMoreData = async () => {
-    if (!hasMore) {
+    if (!hasMoreRef.current) {
       return;
     }
     const chainIdStr = chainId ? chainId.toString() : "";
@@ -1592,12 +1857,14 @@ function useMatchWalletRecords({
       if (res.data && res.data.transactions.length > 0) {
         setItems(items.concat(res.data.transactions));
       }
+      hasMoreRef.current = res.data && res.data.transactions.length >= pageSize;
       setHasMore(res.data && res.data.transactions.length >= pageSize);
     }
   };
   const onInit = async () => {
     setItems([]);
     setHasMore(true);
+    hasMoreRef.current = true;
     fetchMoreData();
   };
   (0, import_react33.useEffect)(() => {
@@ -1615,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";
@@ -1732,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) {
@@ -1756,6 +2022,150 @@ function useReceipt({
   }, [query.data]);
   return query;
 }
+
+// src/hooks/useTransaction.tsx
+var import_react35 = require("react");
+var import_react_query6 = require("@tanstack/react-query");
+var import_viem7 = require("viem");
+var CACHE_TTL2 = 86400 * 30 * 1e3;
+var MAX_CACHE_SIZE2 = 500;
+var STORAGE_KEY2 = "match_transaction_logs";
+function useTransactionCache() {
+  const [cache, setCache] = (0, import_react35.useState)(/* @__PURE__ */ new Map());
+  const isLocalStorageAvailable = (() => {
+    try {
+      const testKey = "__test__";
+      localStorage.setItem(testKey, "1");
+      localStorage.removeItem(testKey);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+  (0, import_react35.useEffect)(() => {
+    if (isLocalStorageAvailable) {
+      try {
+        const storedData = localStorage.getItem(STORAGE_KEY2);
+        if (storedData) {
+          try {
+            const parsed = JSON.parse(storedData);
+            const now = Date.now();
+            const validEntries = Object.entries(parsed).filter(([_, entry]) => typeof entry === "object" && entry !== null && "timestamp" in entry && now - entry.timestamp <= CACHE_TTL2).map(([key, entry]) => [key, entry]);
+            setCache(new Map(validEntries));
+          } catch (e) {
+            console.error("Failed to parse cache from localStorage:", e);
+          }
+        }
+      } catch (e) {
+        console.error("Failed to load cache from localStorage:", e);
+      }
+    }
+  }, []);
+  const updateLocalStorage = (0, import_react35.useCallback)((updatedCache) => {
+    if (isLocalStorageAvailable) {
+      try {
+        const storedData = localStorage.getItem(STORAGE_KEY2);
+        let parsed = {};
+        if (storedData) {
+          parsed = JSON.parse(storedData);
+        }
+        updatedCache.forEach((entry, key) => {
+          parsed[key] = entry;
+        });
+        localStorage.setItem(STORAGE_KEY2, JSON.stringify(parsed));
+      } catch (e) {
+        console.error("Failed to update localStorage:", e);
+      }
+    }
+  }, []);
+  const set = (0, import_react35.useCallback)((key, value) => {
+    const now = Date.now();
+    const newCache = new Map(cache);
+    newCache.forEach((entry, k) => {
+      if (now - entry.timestamp > CACHE_TTL2) {
+        newCache.delete(k);
+      }
+    });
+    if (newCache.size >= MAX_CACHE_SIZE2) {
+      const firstKey = newCache.keys().next().value;
+      if (firstKey !== void 0) {
+        newCache.delete(firstKey);
+      }
+    }
+    newCache.set(key, { value, timestamp: now });
+    setCache(newCache);
+    updateLocalStorage(newCache);
+  }, [cache, updateLocalStorage]);
+  const get = (0, import_react35.useCallback)((key) => {
+    const entry = cache.get(key);
+    if (entry) {
+      if (Date.now() - entry.timestamp > CACHE_TTL2) {
+        const newCache = new Map(cache);
+        newCache.delete(key);
+        setCache(newCache);
+        updateLocalStorage(newCache);
+        return void 0;
+      }
+      return entry.value;
+    }
+    return void 0;
+  }, [cache, updateLocalStorage]);
+  const del = (0, import_react35.useCallback)((key) => {
+    if (cache.has(key)) {
+      const newCache = new Map(cache);
+      newCache.delete(key);
+      setCache(newCache);
+      updateLocalStorage(newCache);
+    }
+  }, [cache, updateLocalStorage]);
+  const clear = (0, import_react35.useCallback)(() => {
+    setCache(/* @__PURE__ */ new Map());
+    if (isLocalStorageAvailable) {
+      localStorage.removeItem(STORAGE_KEY2);
+    }
+  }, [isLocalStorageAvailable]);
+  return { set, get, del, clear };
+}
+function useTransaction({
+  chainId,
+  hash
+}) {
+  const { list } = useMatchChain();
+  const cache = useTransactionCache();
+  const chain = list?.find((item) => item.id === chainId);
+  const [shouldRefetch, setShouldRefetch] = (0, import_react35.useState)(true);
+  const query = (0, import_react_query6.useQuery)({
+    queryKey: ["match-tx-transaction", hash, chain],
+    queryFn: async () => {
+      if (!chain || !hash) return false;
+      const cacheKey = `${chain.id}-${hash}`;
+      if (cache.get(cacheKey)) {
+        return cache.get(cacheKey);
+      }
+      try {
+        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) {
+          return false;
+        }
+        cache.set(cacheKey, transaction);
+        return transaction;
+      } catch (e) {
+        return false;
+      }
+    },
+    refetchInterval: shouldRefetch ? 1e4 : false
+  });
+  (0, import_react35.useEffect)(() => {
+    if (query.data) {
+      setShouldRefetch(false);
+    }
+  }, [query.data]);
+  return query;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useCopyClipboard,
@@ -1767,6 +2177,7 @@ function useReceipt({
   useModal,
   useReceipt,
   useToast,
+  useTransaction,
   useUserInfo,
   useWallet
 });