@matchain/matchid-sdk-react 0.1.34 → 0.1.36

package/dist/index.js

@@ -40,7 +40,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/MatchContext.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/assets/icon/ArrowLeftIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -360,24 +360,30 @@ function PasswordRoundIcon() {
 
 // src/assets/icon/CloseEyeIcon.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function CloseEyeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+function CloseEyeIcon({
+  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: "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: "#6E6E6E"
+      fill: color
     }
   ) });
 }
 
 // src/assets/icon/OpenEyeIcon.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function OpenEyeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+function OpenEyeIcon({
+  size = 20,
+  color = "#6E6E6E"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.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: "#6E6E6E"
+      fill: color
     }
   ) });
 }
@@ -685,6 +691,26 @@ function ArrowDownIcon({ width = 20, height = 21, color = "black", ...props }) {
   ) });
 }
 
+// src/hooks/useLayout.tsx
+var useLayout_exports = {};
+__export(useLayout_exports, {
+  useDownMd: () => useDownMd
+});
+var import_react = require("react");
+function useDownMd() {
+  const [isBelowMd, setIsBelowMd] = (0, import_react.useState)(window.matchMedia("(max-width: 767px)").matches);
+  (0, import_react.useEffect)(() => {
+    const handleResize = () => {
+      setIsBelowMd(window.matchMedia("(max-width: 767px)").matches);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return isBelowMd;
+}
+
 // src/components/Modal/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Modal({
@@ -701,9 +727,12 @@ function Modal({
       style: {
         zIndex
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `matchid-modal ${className}`, style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `matchid-modal ${className}`, style: {
         width
-      }, children })
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "matchid-modal-mobile-header" }),
+        children
+      ] })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, {});
 }
@@ -716,23 +745,24 @@ function ModalWithHeader({
   showClose = true,
   ...props
 }) {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Modal, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/components/PasswordModal/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/Input/index.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function Input({
   onChange,
@@ -741,21 +771,29 @@ function Input({
   className = "",
   ...props
 }) {
-  const [inputType, setInputType] = (0, import_react.useState)(type);
+  const [inputType, setInputType] = (0, import_react2.useState)(type);
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
-      className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
+      className: `matchid-input-box ${props.value && props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-        props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+        props.value && props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DeleteRoundIcon, { className: "", color: "var(--matchid-input-delete-icon-color)" }) }),
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          DeleteRoundIcon,
+          {
+            height: isDownMd ? 16 : 21,
+            width: isDownMd ? 16 : 20,
+            color: "var(--matchid-input-delete-icon-color)"
+          }
+        ) }),
         type === "password" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OpenEyeIcon, {}) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -820,6 +858,7 @@ function Button({
 var hooks_exports = {};
 __export(hooks_exports, {
   useCopyClipboard: () => useCopyClipboard,
+  useLayout: () => useLayout_exports,
   useMatchEvents: () => useMatchEvents,
   useUserInfo: () => useUserInfo,
   useWallet: () => useWallet
@@ -865,7 +904,7 @@ var localStore = useLocalStore;
 var useLocalStore_default = useLocalStore;
 
 // src/hooks/useUserInfo.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/api/request.ts
 var import_axios = __toESM(require("axios"));
@@ -1215,7 +1254,7 @@ function useUserInfo() {
   } = useLocalStore_default();
   const { events, login } = useMatch();
   const { open: SOLOpen } = useSOLModalStore();
-  const isLogin = (0, import_react2.useMemo)(() => !!token, [token]);
+  const isLogin = (0, import_react3.useMemo)(() => !!token, [token]);
   const logout = async () => {
     try {
       await toLogoutApi();
@@ -1392,9 +1431,9 @@ function useUserInfo() {
 }
 
 // src/hooks/useMatchEvents.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useMatchEvents(handlers) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     Object.entries(handlers).forEach(([event, handler2]) => {
       if (handler2) {
         eventManager_default.on(event, handler2);
@@ -1558,14 +1597,14 @@ function useWallet() {
 
 // src/hooks/useCopyClipboard.ts
 var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useCopyClipboard(timeout = 500) {
-  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
-  const staticCopy = (0, import_react4.useCallback)((text) => {
+  const [isCopied, setIsCopied] = (0, import_react5.useState)(false);
+  const staticCopy = (0, import_react5.useCallback)((text) => {
     const didCopy = (0, import_copy_to_clipboard.default)(text);
     setIsCopied(didCopy);
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isCopied) {
       const hide = setTimeout(() => {
         setIsCopied(false);
@@ -1590,12 +1629,12 @@ function PasswordModal({
 }) {
   const { refreshOverview, overview } = useUserInfo();
   const { isLogin, did } = useUserInfo();
-  const [password, setPassword] = (0, import_react5.useState)("");
-  const [rePassword, setRePassword] = (0, import_react5.useState)("");
-  const [error, setError] = (0, import_react5.useState)("");
+  const [password, setPassword] = (0, import_react6.useState)("");
+  const [rePassword, setRePassword] = (0, import_react6.useState)("");
+  const [error, setError] = (0, import_react6.useState)("");
   const { generateWallet, initWallet } = useWallet();
   const intl = (0, import_react_intl.useIntl)();
-  const passwordError = (0, import_react5.useMemo)(() => {
+  const passwordError = (0, import_react6.useMemo)(() => {
     if (password.length < 6) return intl.formatMessage({
       id: "passwordMinError"
     }, {
@@ -1603,7 +1642,7 @@ function PasswordModal({
     });
     return "";
   }, [password]);
-  const rePasswordError = (0, import_react5.useMemo)(() => {
+  const rePasswordError = (0, import_react6.useMemo)(() => {
     if (rePassword != password) {
       return intl.formatMessage({
         id: "passwordMatchError"
@@ -1611,7 +1650,7 @@ function PasswordModal({
     }
     return "";
   }, [rePassword, password]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isOpen && overview) {
       setPassword("");
       setRePassword("");
@@ -1622,7 +1661,7 @@ function PasswordModal({
       });
     }
   }, [isOpen, overview]);
-  const [isSubmitting, setIsSubmitting] = (0, import_react5.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1688,7 +1727,7 @@ function PasswordModal({
 }
 
 // src/components/RecoveryModal/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_intl2 = require("react-intl");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function RecoveryModal({
@@ -1699,11 +1738,11 @@ function RecoveryModal({
 }) {
   const { refreshOverview } = useUserInfo();
   const { isLogin, overview } = useUserInfo();
-  const [password, setPassword] = (0, import_react6.useState)("");
+  const [password, setPassword] = (0, import_react7.useState)("");
   const { recoveryWallet, initWallet } = useWallet();
-  const [error, setError] = (0, import_react6.useState)("");
+  const [error, setError] = (0, import_react7.useState)("");
   const intl = (0, import_react_intl2.useIntl)();
-  const passwordError = (0, import_react6.useMemo)(() => {
+  const passwordError = (0, import_react7.useMemo)(() => {
     if (password.length < 6) return intl.formatMessage({
       id: "passwordMinError"
     }, {
@@ -1711,7 +1750,7 @@ function RecoveryModal({
     });
     return "";
   }, [password]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isOpen && overview) {
       setPassword("");
       const did = overview.did.split(":")[2];
@@ -1721,7 +1760,7 @@ function RecoveryModal({
       });
     }
   }, [isOpen, overview]);
-  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1769,7 +1808,7 @@ function RecoveryModal({
 }
 
 // src/components/SOLModal/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/index.tsx
 var components_exports = {};
@@ -1791,21 +1830,21 @@ __export(components_exports, {
 });
 
 // src/components/EmailModal/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/EmailModal/StepEmail.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_intl3 = require("react-intl");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function StepEmail(props) {
   const intl = (0, import_react_intl3.useIntl)();
-  const [emailVal, setEmailVal] = (0, import_react7.useState)("");
-  (0, import_react7.useEffect)(() => {
+  const [emailVal, setEmailVal] = (0, import_react8.useState)("");
+  (0, import_react8.useEffect)(() => {
     if (props.email) {
       setEmailVal(props.email);
     }
   }, []);
-  const canContinue = (0, import_react7.useMemo)(() => {
+  const canContinue = (0, import_react8.useMemo)(() => {
     return isValidEmail(emailVal);
   }, [emailVal]);
   const onContinue = async () => {
@@ -1831,7 +1870,7 @@ function StepEmail(props) {
 }
 
 // src/components/EmailModal/StepVerify.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/config/index.tsx
 var EMAIL_INTERVAL = 60;
@@ -1843,17 +1882,18 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 function StepVerify(props) {
   const intl = (0, import_react_intl4.useIntl)();
   const { getLoginEmailCode, loginByEmail } = useUserInfo();
-  const [error, setError] = (0, import_react8.useState)("");
-  const [code, setCode] = (0, import_react8.useState)("");
-  const [sending, setSending] = (0, import_react8.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const sendTimeRef = (0, import_react8.useRef)(0);
-  const [sendBtnText, setSendBtnText] = (0, import_react8.useState)(intl.formatMessage({
+  const [error, setError] = (0, import_react9.useState)("");
+  const [code, setCode] = (0, import_react9.useState)("");
+  const [sending, setSending] = (0, import_react9.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const sendTimeRef = (0, import_react9.useRef)(0);
+  const [sendBtnText, setSendBtnText] = (0, import_react9.useState)(intl.formatMessage({
     id: "send"
   }));
   const intervalTime = EMAIL_INTERVAL;
   const codeLength = EMAIL_CODE_LENGTH;
-  const intervalRef = (0, import_react8.useRef)(null);
+  const intervalRef = (0, import_react9.useRef)(null);
+  const isDownMd = useDownMd();
   const onSend = async () => {
     if (sendTimeRef.current > 0) {
       return;
@@ -1883,7 +1923,7 @@ function StepVerify(props) {
       setSending(false);
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onSend();
     return () => {
       if (intervalRef.current) {
@@ -1891,7 +1931,7 @@ function StepVerify(props) {
       }
     };
   }, []);
-  const canContinue = (0, import_react8.useMemo)(() => {
+  const canContinue = (0, import_react9.useMemo)(() => {
     return code.length === codeLength;
   }, [code]);
   const onContinue = async () => {
@@ -1917,7 +1957,7 @@ function StepVerify(props) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-email-verify-box", children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-email-verify-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EmailLineIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EmailLineIcon, { size: isDownMd ? 19 : 24 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "matchid-email-verify-header-tips", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_intl4.FormattedMessage, { id: "sendEmailTips" }) })
@@ -1968,10 +2008,10 @@ function EmailModal({
   onBack,
   onLogin
 }) {
-  const [step, setStep] = (0, import_react9.useState)("input");
-  const [emailVal, setEmailVal] = (0, import_react9.useState)("");
+  const [step, setStep] = (0, import_react10.useState)("input");
+  const [emailVal, setEmailVal] = (0, import_react10.useState)("");
   const intl = (0, import_react_intl5.useIntl)();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isOpen) {
       setStep("input");
       setEmailVal("");
@@ -1996,7 +2036,7 @@ function EmailModal({
 }
 
 // src/components/Popover/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function Popover({
   children,
@@ -2006,7 +2046,7 @@ function Popover({
   className = "",
   gap = "20px"
 }) {
-  const [active, setActive] = (0, import_react10.useState)(false);
+  const [active, setActive] = (0, import_react11.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
@@ -2027,7 +2067,7 @@ function Popover({
 }
 
 // src/components/LoginBox/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_intl6 = require("react-intl");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var RecommendItem = ({
@@ -2081,75 +2121,76 @@ function LoginBox({
   walletMethods = ["evm"],
   inModal = false
 }) {
-  const [emailOpen, setEmailOpen] = (0, import_react11.useState)(false);
+  const [emailOpen, setEmailOpen] = (0, import_react12.useState)(false);
   const { login } = useUserInfo();
-  const [showWallet, setShowWallet] = (0, import_react11.useState)(false);
+  const [showWallet, setShowWallet] = (0, import_react12.useState)(false);
   const intl = (0, import_react_intl6.useIntl)();
+  const isDownMd = useDownMd();
   const methodMap = {
     wallet: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WalletIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WalletIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "wallet" }),
       onClick: () => setShowWallet(!showWallet),
       type: "wallet"
     },
     email: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EmailIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EmailIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "email" }),
       onClick: () => {
         setEmailOpen(true);
       }
     },
     google: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(GoogleIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(GoogleIcon, { size: isDownMd ? 36 : 40 }),
       name: "Google",
       onClick: () => login("google")
     },
     twitter: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(XIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(XIcon, { size: isDownMd ? 36 : 40 }),
       name: "X",
       onClick: () => login("twitter")
     },
     telegram: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TelegramIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TelegramIcon, { size: isDownMd ? 36 : 40 }),
       name: "Telegram",
       onClick: () => login("telegram")
     },
     github: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(GithubIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(GithubIcon, { size: isDownMd ? 36 : 40 }),
       name: "Github",
       onClick: () => login("github")
     },
     discord: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DiscordIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DiscordIcon, { size: isDownMd ? 36 : 40 }),
       name: "Discord",
       onClick: () => login("discord")
     },
     linkedin: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LinkedinIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LinkedinIcon, { size: isDownMd ? 36 : 40 }),
       name: "LinkedIn",
       onClick: () => login("linkedin")
     },
     facebook: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FacebookIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FacebookIcon, { size: isDownMd ? 36 : 40 }),
       name: "Facebook",
       onClick: () => login("facebook")
     },
     youtube: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(YoutubeIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(YoutubeIcon, { size: isDownMd ? 36 : 40 }),
       name: "Youtube",
       onClick: () => login("youtube")
     }
   };
   const walletMap = {
     evm: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EVMDarkIcon, {}),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EVMLightIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EVMDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(EVMLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "EVM",
       onClick: () => login("evm")
     },
     sol: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SOLDarkIcon, {}),
-      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SOLLightIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SOLDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SOLLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "SOL",
       onClick: () => login("sol")
     }
@@ -2241,7 +2282,7 @@ function LoginBox({
 }
 
 // src/components/LoginButton/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/LoginPanel/index.tsx
 var import_react_intl7 = require("react-intl");
@@ -2251,13 +2292,14 @@ function LoginPanel({
   onClose,
   ...props
 }) {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "matchid-login-panel", children: [
     header ? header : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "matchid-login-panel-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-header-title", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_intl7.FormattedMessage, { id: "loginTitle" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_intl7.FormattedMessage, { id: "loginTips" }) })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseRoundIcon, {}) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseRoundIcon, { size: isDownMd ? 24 : 30 }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-divide" }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "matchid-login-panel-box", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoginBox, { ...props }) })
@@ -2283,7 +2325,7 @@ function LoginModal({
 }
 
 // src/components/UserPopover/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/assets/icon/ProfileIcon.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -2315,7 +2357,7 @@ var import_react_intl8 = require("react-intl");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function UserContent() {
   const { logout, address, username } = useUserInfo();
-  const [logouting, setLogouting] = (0, import_react12.useState)(false);
+  const [logouting, setLogouting] = (0, import_react13.useState)(false);
   const onLogout = async () => {
     if (logouting) return;
     try {
@@ -2344,7 +2386,7 @@ function UserContent() {
   const UserDivider = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `matchid-user-popover-divider` });
   };
-  const [usernameOpen, setUsernameOpen] = (0, import_react12.useState)(false);
+  const [usernameOpen, setUsernameOpen] = (0, import_react13.useState)(false);
   const [copied, setCopied] = useCopyClipboard();
   const intl = (0, import_react_intl8.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "matchid-user-popover-content", children: [
@@ -2390,7 +2432,7 @@ function LoginButton({
 }) {
   const intl = (0, import_react_intl9.useIntl)();
   const { isLogin, username } = useUserInfo();
-  const [loginOpen, setLoginOpen] = (0, import_react13.useState)(false);
+  const [loginOpen, setLoginOpen] = (0, import_react14.useState)(false);
   if (!isLogin) {
     return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -2418,7 +2460,7 @@ function LoginButton({
 }
 
 // src/components/UsernameModal/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/assets/icon/InfoRoundIcon.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -2448,8 +2490,9 @@ var ValidItem = ({
   success = false,
   text
 }) => {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
-    success ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(InfoRoundIcon, { size: 16 }),
+    success ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckRoundIcon, { size: isDownMd ? 12 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(InfoRoundIcon, { size: isDownMd ? 12 : 16 }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: text })
   ] });
 };
@@ -2461,22 +2504,23 @@ function UsernameModal({
 }) {
   const { username, refreshOverview } = useUserInfo();
   const { isLogin } = useUserInfo();
-  const [val, setVal] = (0, import_react14.useState)(username);
-  const [error, setError] = (0, import_react14.useState)("");
-  (0, import_react14.useEffect)(() => {
+  const [val, setVal] = (0, import_react15.useState)(username);
+  const [error, setError] = (0, import_react15.useState)("");
+  const isDownMd = useDownMd();
+  (0, import_react15.useEffect)(() => {
     if (isOpen) {
       setVal(username);
       setError("");
     }
   }, [isOpen]);
-  const isValid = (0, import_react14.useMemo)(() => {
+  const isValid = (0, import_react15.useMemo)(() => {
     return isValidUsername(val);
   }, [val]);
-  const isLength = (0, import_react14.useMemo)(() => {
+  const isLength = (0, import_react15.useMemo)(() => {
     return val.length >= 2 && val.length <= 32;
   }, [val]);
   const isSafe = isValid && isLength;
-  const [isSubmitting, setIsSubmitting] = (0, import_react14.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react15.useState)(false);
   const onSubmit = async () => {
     if (isSubmitting) return;
     try {
@@ -2530,10 +2574,10 @@ function UsernameModal({
       }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { disabled: !isSafe, loading: isSubmitting, style: {
-      marginTop: "64px"
+      marginTop: isDownMd ? "36px" : "64px"
     }, onClick: onSubmit, size: "lg", block: true, highlight: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_intl10.FormattedMessage, { id: "confirm" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { style: {
-      marginTop: "24px"
+      marginTop: isDownMd ? "12px" : "24px"
     }, onClick: props.onClose, size: "lg", block: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_intl10.FormattedMessage, { id: "nextTime" }) })
   ] }) });
 }
@@ -2572,17 +2616,17 @@ function WalletContent({
   const { setVisible, visible } = (0, import_wallet_adapter_react_ui.useWalletModal)();
   const wallet = (0, import_wallet_adapter_react.useWallet)();
   const { events, login } = useMatch();
-  const [status, setStatus] = (0, import_react15.useState)("");
-  const statusRef = import_react15.default.useRef(status);
-  const [error, setError] = (0, import_react15.useState)("");
-  (0, import_react15.useEffect)(() => {
+  const [status, setStatus] = (0, import_react16.useState)("");
+  const statusRef = import_react16.default.useRef(status);
+  const [error, setError] = (0, import_react16.useState)("");
+  (0, import_react16.useEffect)(() => {
     const init = async () => {
       await wallet.disconnect();
       setVisible(true);
     };
     init();
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (wallet.connected) {
       console.log("wallet.connected", wallet.connected);
       toLoginInWallet();
@@ -2643,7 +2687,7 @@ function WalletContent({
       statusRef.current = "";
     }
   };
-  const pageData = (0, import_react15.useMemo)(() => {
+  const pageData = (0, import_react16.useMemo)(() => {
     if (status == "success") {
       return {
         btnText: "Disconnect Wallet",
@@ -2810,7 +2854,7 @@ var Providers = ({ children }) => {
 var context_default = Providers;
 
 // src/hooks/useWalletInit.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var AppClientId2 = getAppClientId();
 function useWalletInit({
   refreshOverview
@@ -2819,10 +2863,10 @@ function useWalletInit({
   const getWalletIframe = () => {
     return document.getElementById("match-wallet");
   };
-  const [walletInited, setWalletInited] = (0, import_react16.useState)(false);
+  const [walletInited, setWalletInited] = (0, import_react17.useState)(false);
   const { appid, token, overview } = useLocalStore_default();
   const { initWallet, generateWallet } = useWallet();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (endpoints.auth) {
       if (!window.matchWalletMessageIdMap) {
         window.matchWalletMessageIdMap = {};
@@ -2880,7 +2924,7 @@ function useWalletInit({
       }
     }
   }, [endpoints.auth]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const messageHandle = async (e) => {
       if (e.origin !== endpoints.auth.substring(0, endpoints.auth.length - 1)) {
         return;
@@ -2913,7 +2957,7 @@ function useWalletInit({
       window.removeEventListener("message", messageHandle);
     };
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (token && overview && overview.did && walletInited) {
       const did = overview.did.split(":")[2];
       const newUserInit = async () => {
@@ -2944,7 +2988,7 @@ function useWalletInit({
 }
 
 // src/hooks/useInit.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useInit({
   theme,
   appid,
@@ -2963,23 +3007,23 @@ function useInit({
     setLocale,
     locale: realLocale
   } = useLocalStore_default();
-  const overviewLoadingRef = (0, import_react17.useRef)(false);
+  const overviewLoadingRef = (0, import_react18.useRef)(false);
   const searchParams = new URLSearchParams(window.location.search);
   const matchToken = searchParams.get("matchToken");
   const realEndpoints = endpoints || env_default.endpoints;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setTheme(theme);
   }, [theme]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setAppid(appid);
   }, [appid]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setEndpoints(realEndpoints);
   }, [realEndpoints]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setLocale(locale || "en");
   }, [locale]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (matchToken) {
       const tokenData = JSON.parse(atob(matchToken));
       if (tokenData && tokenData.mid && tokenData.token) {
@@ -2990,7 +3034,7 @@ function useInit({
       }
     }
   }, [matchToken]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const onLoginMessage = (event) => {
       const res = event.data;
       if (res.event === "login" && res.data && (res.data.token || res.data.token_type && res.data.access_token)) {
@@ -3026,7 +3070,7 @@ function useInit({
       overviewLoadingRef.current = false;
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (token) {
       loadOverview();
     }
@@ -3454,7 +3498,7 @@ var messages = {
 // src/MatchContext.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
-var MatchContext = (0, import_react18.createContext)(void 0);
+var MatchContext = (0, import_react19.createContext)(void 0);
 var MatchProvider = ({ children, appid, events, theme = "light", endpoints, locale }) => {
   const { loadOverview, login, endpoints: realEndPoints, locale: realLocale } = useInit({
     theme,
@@ -3489,7 +3533,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints, loca
   ) }) });
 };
 var useMatch = () => {
-  const context = (0, import_react18.useContext)(MatchContext);
+  const context = (0, import_react19.useContext)(MatchContext);
   if (context === void 0) {
     throw new Error("useMatch must be used within a MatchProvider");
   }