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

package/dist/components/index.js

@@ -1096,6 +1096,27 @@ function TonLightIcon2({ size = 40, ...props }) {
 // src/assets/icon/ErrorRoundIcon.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 
+// src/assets/icon/InfoRoundIcon.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function InfoRoundIcon({
+  size,
+  color = "#6E6E6E",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.99984 0.666504C3.94975 0.666504 0.666504 3.94975 0.666504 7.99984C0.666504 12.0499 3.94975 15.3332 7.99984 15.3332C12.0499 15.3332 15.3332 12.0499 15.3332 7.99984C15.3332 3.94975 12.0499 0.666504 7.99984 0.666504ZM1.99984 7.99984C1.99984 4.68613 4.68613 1.99984 7.99984 1.99984C11.3135 1.99984 13.9998 4.68613 13.9998 7.99984C13.9998 11.3135 11.3135 13.9998 7.99984 13.9998C4.68613 13.9998 1.99984 11.3135 1.99984 7.99984ZM8.6665 7.33317C8.6665 6.96498 8.36803 6.6665 7.99984 6.6665C7.63165 6.6665 7.33317 6.96498 7.33317 7.33317V11.3332C7.33317 11.7014 7.63165 11.9998 7.99984 11.9998C8.36803 11.9998 8.6665 11.7014 8.6665 11.3332V7.33317ZM7.99984 5.33317C8.36803 5.33317 8.6665 5.03469 8.6665 4.6665C8.6665 4.29831 8.36803 3.99984 7.99984 3.99984C7.63165 3.99984 7.33317 4.29831 7.33317 4.6665C7.33317 5.03469 7.63165 5.33317 7.99984 5.33317Z",
+        fill: color
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+  ] });
+}
+
 // src/hooks/useLayout.tsx
 var import_react = require("react");
 function useDownMd() {
@@ -1114,7 +1135,7 @@ function useDownMd() {
 
 // src/ui/Overlay/index.tsx
 var import_react2 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Overlay({
   isOpen = false,
   children,
@@ -1130,7 +1151,7 @@ function Overlay({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       className: "matchid-overlay",
@@ -1139,11 +1160,11 @@ function Overlay({
       },
       children
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, {});
+  ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {});
 }
 
 // src/ui/Modal/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
@@ -1151,10 +1172,10 @@ function Modal({
   zIndex = 100,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `matchid-modal ${className}`, style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Overlay, { isOpen, zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `matchid-modal ${className}`, style: {
     width
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "matchid-modal-mobile-header" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-modal-mobile-header" }),
     children
   ] }) });
 }
@@ -1168,13 +1189,13 @@ function ModalWithHeader({
   ...props
 }) {
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Modal, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "matchid-modal-header-title", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Modal, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
@@ -1209,7 +1230,7 @@ function getAppClientId() {
 }
 
 // src/ui/Button/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -1228,7 +1249,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "button",
     {
       type,
@@ -1238,14 +1259,14 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Input({
   onChange,
   type,
@@ -1255,17 +1276,17 @@ function Input({
 }) {
   const [inputType, setInputType] = (0, import_react3.useState)(type);
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           DeleteRoundIcon,
           {
             height: isDownMd ? 16 : 21,
@@ -1273,9 +1294,9 @@ function Input({
             color: "var(--matchid-input-delete-icon-color)"
           }
         ) }),
-        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+        type === "password" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -1283,7 +1304,7 @@ function Input({
 }
 
 // src/ui/Field/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Field({
   label,
   children,
@@ -1291,19 +1312,19 @@ function Field({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "matchid-field-label", children: [
-      required && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "matchid-field-required", children: "*" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
 // src/components/EmailModal/StepEmail.tsx
 var import_react_intl = require("react-intl");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function StepEmail(props) {
   const intl = (0, import_react_intl.useIntl)();
   const [emailVal, setEmailVal] = (0, import_react4.useState)("");
@@ -1318,10 +1339,10 @@ function StepEmail(props) {
   const onContinue = async () => {
     props.onContinue(emailVal);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "matchid-email-email-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Field, { label: intl.formatMessage({
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "matchid-email-email-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Field, { label: intl.formatMessage({
       id: "emailAddress"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       Input,
       {
         placeholder: intl.formatMessage({
@@ -1331,9 +1352,9 @@ function StepEmail(props) {
         value: emailVal
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { disabled: !canContinue, style: {
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { disabled: !canContinue, style: {
       marginTop: "64px"
-    }, onClick: onContinue, size: "lg", block: true, highlight: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_intl.FormattedMessage, { id: "continue" }) })
+    }, onClick: onContinue, size: "lg", block: true, highlight: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_intl.FormattedMessage, { id: "continue" }) })
   ] });
 }
 
@@ -1708,39 +1729,39 @@ var import_viem3 = require("viem");
 var import_zustand3 = require("zustand");
 
 // src/hooks/useConfig.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var DEFAULT_WALLET_METHODS = ["evm", "sol", "btc", "tron", "ton"];
 var WALLET_METHODS = ["evm", "sol", "btc", "tron", "ton"];
 function useWalletConfig() {
   const isDownMd = useDownMd();
   const walletMap = {
     evm: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EVMDarkIcon, { size: isDownMd ? 36 : 40 }),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EVMLightIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EVMDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EVMLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "EVM",
       method: "evm"
     },
     sol: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SOLDarkIcon, { size: isDownMd ? 36 : 40 }),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SOLLightIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SOLDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SOLLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "SOL",
       method: "sol"
     },
     btc: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BTCDarkIcon, { size: isDownMd ? 36 : 40 }),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BTCLightIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BTCDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BTCLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "BTC",
       method: "btc"
     },
     tron: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TRXDarkIcon, { size: isDownMd ? 36 : 40 }),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TRXDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TRXLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "TRON",
       method: "tron"
     },
     ton: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TonLightIcon, { size: isDownMd ? 36 : 40 }),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TonLightIcon2, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TonLightIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TonLightIcon2, { size: isDownMd ? 36 : 40 }),
       name: "TON",
       method: "ton"
     }
@@ -1831,7 +1852,7 @@ var import_react11 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/ui/Drawer/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 
 // src/ui/HashPanel/index.tsx
 var import_viem4 = require("viem");
@@ -1839,14 +1860,14 @@ var import_react8 = require("react");
 var import_react_query = require("@tanstack/react-query");
 
 // src/ui/ModalDrawer/index.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 
 // src/ui/HashPanel/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/ui/Popover/index.tsx
 var import_react9 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Popover({
   children,
   content,
@@ -1856,7 +1877,7 @@ function Popover({
   gap = "20px"
 }) {
   const [active, setActive] = (0, import_react9.useState)(false);
-  return children && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return children && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       onClick: () => {
@@ -1867,32 +1888,32 @@ function Popover({
       className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: {
           paddingTop: gap
-        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: `matchid-popover-content`, children: content }) })
+        }, className: `matchid-popover-area`, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: `matchid-popover-content`, children: content }) })
       ]
     }
   );
 }
 
 // src/ui/Switch/index.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/ui/AlphaAvatar/index.tsx
 var import_react10 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/ui/Radio/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 
 // src/context/ModalContext.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var ModalContext = (0, import_react11.createContext)(null);
 
 // src/context/ToastContext.tsx
 var import_react12 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ToastContext = (0, import_react12.createContext)(null);
 
 // src/hooks/api/wallet.ts
@@ -1900,12 +1921,12 @@ var import_react_query2 = require("@tanstack/react-query");
 
 // src/hooks/useMatchChain.tsx
 var import_react13 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/hooks/useMatchWallet.tsx
 var import_react_qrcode = require("react-qrcode");
 var import_react14 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/hooks/useReceipt.tsx
 var import_react15 = require("react");
@@ -1916,13 +1937,13 @@ var CACHE_TTL = 86400 * 30 * 1e3;
 // src/components/CEXBindModal/index.tsx
 var import_react16 = require("react");
 var import_react_intl2 = require("react-intl");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/context/BusinessProvider.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/context/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 
 // src/hooks/useWalletInit.ts
 var import_react17 = require("react");
@@ -1934,7 +1955,7 @@ var import_react18 = require("react");
 // src/MatchContext.tsx
 var import_react_query4 = require("@tanstack/react-query");
 var import_react_intl3 = require("react-intl");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var queryClient = new import_react_query4.QueryClient();
 var MatchContext = (0, import_react19.createContext)(void 0);
 var useMatch = () => {
@@ -2207,7 +2228,7 @@ var EMAIL_CODE_LENGTH = 6;
 
 // src/components/EmailModal/StepVerify.tsx
 var import_react_intl4 = require("react-intl");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function StepVerify(props) {
   const intl = (0, import_react_intl4.useIntl)();
   const { getLoginEmailCode, loginByEmail } = useUserInfo();
@@ -2284,17 +2305,17 @@ function StepVerify(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-email-verify-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-email-verify-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(EmailLineIcon, { size: isDownMd ? 19 : 24 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-email-verify-header-tips", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "sendEmailTips" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "matchid-email-verify-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "matchid-email-verify-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EmailLineIcon, { size: isDownMd ? 19 : 24 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matchid-email-verify-header-tips", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_intl4.FormattedMessage, { id: "sendEmailTips" }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Field, { label: intl.formatMessage({
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Field, { label: intl.formatMessage({
       id: "verificationCode"
-    }), error, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    }), error, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Input,
       {
         placeholder: intl.formatMessage({
@@ -2304,7 +2325,7 @@ function StepVerify(props) {
         maxLength: codeLength,
         onChange: (e) => setCode(e.target.value),
         value: code,
-        after: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        after: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           Button,
           {
             highlight: true,
@@ -2323,13 +2344,13 @@ function StepVerify(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "continue" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_intl4.FormattedMessage, { id: "continue" }) })
   ] });
 }
 
 // src/components/EmailModal/index.tsx
 var import_react_intl5 = require("react-intl");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function EmailModal({
   isOpen = false,
   width = 480,
@@ -2346,7 +2367,7 @@ function EmailModal({
       setEmailVal("");
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     ModalWithHeader,
     {
       isOpen,
@@ -2356,10 +2377,10 @@ function EmailModal({
         id: "email"
       }),
       onBack: step == "verify" ? () => setStep("input") : onBack,
-      children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
+      children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
         setEmailVal(email);
         setStep("verify");
-      } }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
+      } }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
     }
   );
 }
@@ -2389,7 +2410,7 @@ function useAppConfig() {
 }
 
 // src/components/LoginBox/index.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var RecommendItem = ({
   icon,
   name,
@@ -2398,20 +2419,20 @@ var RecommendItem = ({
   children,
   footer
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-recommend-method", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-recommend-method-item", onClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-recommend-method-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-recommend-method-icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "matchid-login-recommend-method-name", children: name })
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-recommend-method", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-recommend-method-item", onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-recommend-method-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-recommend-method-icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "matchid-login-recommend-method-name", children: name })
       ] }),
-      footer ? footer : children ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      footer ? footer : children ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         ArrowDownIcon,
         {
           className: `matchid-login-recommend-method-arrow ${showChildren ? "matchid-login-recommend-method-arrow-active" : ""}`,
           size: 20,
           color: "var(--matchid-arrow-color)"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         ArrowRightIcon,
         {
           className: "matchid-login-recommend-method-arrow",
@@ -2420,7 +2441,7 @@ var RecommendItem = ({
         }
       )
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    children && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "div",
       {
         className: `matchid-login-recommend-method-popover ${showChildren ? "matchid-login-recommend-method-popover-active" : ""}`,
@@ -2485,75 +2506,75 @@ function LoginBox({
   const isDownMd = useDownMd();
   const methodMap = {
     wallet: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(WalletIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(WalletIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "wallet" }),
       onClick: () => setShowWallet(!showWallet),
       type: "wallet"
     },
     email: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EmailIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(EmailIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "email" }),
       onClick: () => {
         setEmailOpen(true);
       }
     },
     google: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(GoogleIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(GoogleIcon, { size: isDownMd ? 36 : 40 }),
       name: "Google",
       onClick: () => login("google")
     },
     twitter: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(XIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(XIcon, { size: isDownMd ? 36 : 40 }),
       name: "X",
       onClick: () => login("twitter")
     },
     telegram: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TelegramIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TelegramIcon, { size: isDownMd ? 36 : 40 }),
       name: "Telegram",
       onClick: () => login("telegram")
     },
     github: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(GithubIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(GithubIcon, { size: isDownMd ? 36 : 40 }),
       name: "Github",
       onClick: () => login("github")
     },
     discord: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DiscordIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DiscordIcon, { size: isDownMd ? 36 : 40 }),
       name: "Discord",
       onClick: () => login("discord")
     },
     linkedin: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(LinkedinIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LinkedinIcon, { size: isDownMd ? 36 : 40 }),
       name: "LinkedIn",
       onClick: () => login("linkedin")
     },
     facebook: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FacebookIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FacebookIcon, { size: isDownMd ? 36 : 40 }),
       name: "Facebook",
       onClick: () => login("facebook")
     },
     youtube: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(YoutubeIcon, { size: isDownMd ? 36 : 40 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(YoutubeIcon, { size: isDownMd ? 36 : 40 }),
       name: "Youtube",
       onClick: () => login("youtube")
     }
   };
   const { walletMap } = useWalletConfig();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-box", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-box", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           RecommendItem,
           {
             icon: methodMap[m]?.icon,
             name: methodMap[m]?.name,
             onClick: methodMap[m]?.onClick,
             showChildren: m == "wallet" && showWallet,
-            children: m == "wallet" && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
+            children: m == "wallet" && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
                 const m2 = walletMap[n];
-                return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
                   "div",
                   {
                     className: "matchid-login-recommend-wallet-item",
@@ -2561,16 +2582,16 @@ function LoginBox({
                       login(m2.method);
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
-                        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                           "div",
                           {
                             className: "matchid-login-recommend-wallet-item-hover-icon",
                             children: m2.activeIcon
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                           "span",
                           {
                             className: "matchid-login-recommend-wallet-item-name",
@@ -2578,7 +2599,7 @@ function LoginBox({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                         ArrowRightIcon,
                         {
                           className: "matchid-login-recommend-wallet-item-arrow",
@@ -2596,10 +2617,10 @@ function LoginBox({
           m
         );
       }) }),
-      methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "matchid-login-other", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_intl6.FormattedMessage, { id: "otherLoginMethods" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-other", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_intl6.FormattedMessage, { id: "otherLoginMethods" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "div",
             {
               className: "matchid-login-method-item",
@@ -2612,7 +2633,7 @@ function LoginBox({
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       EmailModal,
       {
         isOpen: emailOpen,
@@ -2632,40 +2653,40 @@ var import_react25 = require("react");
 
 // src/components/LoginPanel/index.tsx
 var import_react_intl7 = require("react-intl");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function LoginPanel({
   header,
   onClose,
   ...props
 }) {
   const isDownMd = useDownMd();
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-panel", children: [
-    header ? header : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-panel-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-panel-header-title", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_intl7.FormattedMessage, { id: "loginTitle" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_intl7.FormattedMessage, { id: "loginTips" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "matchid-login-panel", children: [
+    header ? header : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "matchid-login-panel-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "matchid-login-panel-header-title", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_intl7.FormattedMessage, { id: "loginTitle" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_intl7.FormattedMessage, { id: "loginTips" }) })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30 }) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-panel-divide" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "matchid-login-panel-box", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LoginBox, { ...props }) })
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "matchid-login-panel-divide" }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "matchid-login-panel-box", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoginBox, { ...props }) })
   ] });
 }
 
 // src/components/LoginModal/index.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function LoginModal({
   isOpen = false,
   width = 480,
   ...props
 }) {
   const { isLogin } = useUserInfo();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Modal,
     {
       isOpen: isOpen && !isLogin,
       width,
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoginPanel, { ...props, inModal: true })
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(LoginPanel, { ...props, inModal: true })
     }
   );
 }
@@ -2674,10 +2695,10 @@ function LoginModal({
 var import_react24 = require("react");
 
 // src/assets/icon/ProfileIcon.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function ProfileIcon({ size = 24, color = "black", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -2686,7 +2707,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
         fill: color
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -2700,7 +2721,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
 
 // src/components/UserPopover/index.tsx
 var import_react_intl8 = require("react-intl");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function UserContent() {
   const { logout, address: address2, username } = useUserInfo();
   const [logouting, setLogouting] = (0, import_react24.useState)(false);
@@ -2721,34 +2742,34 @@ function UserContent() {
     rightIcon,
     onClick
   }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "matchid-user-popover-item", onClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: `matchid-user-popover-item-content`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "matchid-user-popover-item", onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `matchid-user-popover-item-content`, children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "matchid-user-popover-item-text", children })
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "matchid-user-popover-item-text", children })
       ] }),
       rightIcon
     ] });
   };
   const UserDivider = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: `matchid-user-popover-divider` });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: `matchid-user-popover-divider` });
   };
   const [usernameOpen, setUsernameOpen] = (0, import_react24.useState)(false);
   const [copied, setCopied] = useCopyClipboard();
   const intl = (0, import_react_intl8.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "matchid-user-popover-content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "matchid-user-popover-list", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UserItem, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "matchid-user-popover-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "matchid-user-popover-list", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UserItem, { onClick: () => {
         setCopied(address2);
-      }, icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address2) }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UserDivider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UserItem, { onClick: () => {
+      }, icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UserDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UserItem, { onClick: () => {
         setUsernameOpen(true);
-      }, icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || intl.formatMessage({
+      }, icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || intl.formatMessage({
         id: "setUsername"
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Button, { onClick: onLogout, loading: logouting, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react_intl8.FormattedMessage, { id: "disconnect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UsernameModal, { isOpen: usernameOpen, onClose: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Button, { onClick: onLogout, loading: logouting, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_intl8.FormattedMessage, { id: "disconnect" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UsernameModal, { isOpen: usernameOpen, onClose: () => {
       setUsernameOpen(false);
     }, onSuccess: () => {
       setUsernameOpen(false);
@@ -2759,12 +2780,12 @@ function UserPopover({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Popover, { ...props, content: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UserContent, {}), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Popover, { ...props, content: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UserContent, {}), children });
 }
 
 // src/components/LoginButton/index.tsx
 var import_react_intl9 = require("react-intl");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function LoginButton({
   loginRender,
   methods,
@@ -2780,8 +2801,8 @@ function LoginButton({
   const { isLogin, username } = useUserInfo();
   const [loginOpen, setLoginOpen] = (0, import_react25.useState)(false);
   if (!isLogin) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         LoginModal,
         {
           methods,
@@ -2791,15 +2812,15 @@ function LoginButton({
           onClose: () => setLoginOpen(false)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UnLoginIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_intl9.FormattedMessage, { id: "login" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(UnLoginIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react_intl9.FormattedMessage, { id: "login" }) })
       ] })
     ] });
   }
-  return loginRender ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: loginRender }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoginIcon_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: username ? truncateAddress(username) : "MatchID " + intl.formatMessage({
+  return loginRender ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: loginRender }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LoginIcon_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: username ? truncateAddress(username) : "MatchID " + intl.formatMessage({
       id: "user"
     }) })
   ] }) });
@@ -2807,29 +2828,6 @@ function LoginButton({
 
 // src/components/UsernameModal/index.tsx
 var import_react26 = require("react");
-
-// src/assets/icon/InfoRoundIcon.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-function InfoRoundIcon({
-  size,
-  color = "#6E6E6E",
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M7.99984 0.666504C3.94975 0.666504 0.666504 3.94975 0.666504 7.99984C0.666504 12.0499 3.94975 15.3332 7.99984 15.3332C12.0499 15.3332 15.3332 12.0499 15.3332 7.99984C15.3332 3.94975 12.0499 0.666504 7.99984 0.666504ZM1.99984 7.99984C1.99984 4.68613 4.68613 1.99984 7.99984 1.99984C11.3135 1.99984 13.9998 4.68613 13.9998 7.99984C13.9998 11.3135 11.3135 13.9998 7.99984 13.9998C4.68613 13.9998 1.99984 11.3135 1.99984 7.99984ZM8.6665 7.33317C8.6665 6.96498 8.36803 6.6665 7.99984 6.6665C7.63165 6.6665 7.33317 6.96498 7.33317 7.33317V11.3332C7.33317 11.7014 7.63165 11.9998 7.99984 11.9998C8.36803 11.9998 8.6665 11.7014 8.6665 11.3332V7.33317ZM7.99984 5.33317C8.36803 5.33317 8.6665 5.03469 8.6665 4.6665C8.6665 4.29831 8.36803 3.99984 7.99984 3.99984C7.63165 3.99984 7.33317 4.29831 7.33317 4.6665C7.33317 5.03469 7.63165 5.33317 7.99984 5.33317Z",
-        fill: color
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
-  ] });
-}
-
-// src/components/UsernameModal/index.tsx
 var import_react_intl10 = require("react-intl");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var ValidItem = ({