@matchain/matchid-sdk-react 0.1.34 → 0.1.35

package/dist/index.mjs

@@ -325,24 +325,30 @@ function PasswordRoundIcon() {
 
 // src/assets/icon/CloseEyeIcon.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-function CloseEyeIcon() {
-  return /* @__PURE__ */ jsx17("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
+function CloseEyeIcon({
+  size = 20,
+  color = "#6E6E6E"
+}) {
+  return /* @__PURE__ */ jsx17("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17(
     "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
 import { jsx as jsx18 } from "react/jsx-runtime";
-function OpenEyeIcon() {
-  return /* @__PURE__ */ jsx18("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18(
+function OpenEyeIcon({
+  size = 20,
+  color = "#6E6E6E"
+}) {
+  return /* @__PURE__ */ jsx18("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18(
     "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
     }
   ) });
 }
@@ -650,6 +656,26 @@ function ArrowDownIcon({ width = 20, height = 21, color = "black", ...props }) {
   ) });
 }
 
+// src/hooks/useLayout.tsx
+var useLayout_exports = {};
+__export(useLayout_exports, {
+  useDownMd: () => useDownMd
+});
+import { useState, useEffect } from "react";
+function useDownMd() {
+  const [isBelowMd, setIsBelowMd] = useState(window.matchMedia("(max-width: 767px)").matches);
+  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
 import { Fragment, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function Modal({
@@ -666,9 +692,12 @@ function Modal({
       style: {
         zIndex
       },
-      children: /* @__PURE__ */ jsx36("div", { className: `matchid-modal ${className}`, style: {
+      children: /* @__PURE__ */ jsxs23("div", { className: `matchid-modal ${className}`, style: {
         width
-      }, children })
+      }, children: [
+        /* @__PURE__ */ jsx36("div", { className: "matchid-modal-mobile-header" }),
+        children
+      ] })
     }
   ) : /* @__PURE__ */ jsx36(Fragment, {});
 }
@@ -681,23 +710,24 @@ function ModalWithHeader({
   showClose = true,
   ...props
 }) {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ jsxs23(Modal, { ...props, children: [
     /* @__PURE__ */ jsxs23("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
       /* @__PURE__ */ jsxs23("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ jsx36(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
+        onBack && /* @__PURE__ */ jsx36(ArrowLeftIcon, { height: isDownMd ? 20 : 25, width: isDownMd ? 20 : 24, className: "matchid-modal-header-back", onClick: onBack }),
         /* @__PURE__ */ jsx36("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ jsx36(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ jsx36(CloseRoundIcon, { size: isDownMd ? 24 : 30, className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/components/PasswordModal/index.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useState as useState4 } from "react";
 
 // src/components/Input/index.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function Input({
   onChange,
@@ -706,21 +736,29 @@ function Input({
   className = "",
   ...props
 }) {
-  const [inputType, setInputType] = useState(type);
+  const [inputType, setInputType] = useState2(type);
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ jsxs24(
     "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__ */ jsx37("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-        props.value.length > 0 && /* @__PURE__ */ jsx37("div", { className: "matchid-input-delete-icon", onClick: (e) => {
+        props.value && props.value.length > 0 && /* @__PURE__ */ jsx37("div", { className: "matchid-input-delete-icon", onClick: (e) => {
           if (onChange) {
             onChange({ target: { value: "" } });
           }
-        }, children: /* @__PURE__ */ jsx37(DeleteRoundIcon, { className: "", color: "var(--matchid-input-delete-icon-color)" }) }),
+        }, children: /* @__PURE__ */ jsx37(
+          DeleteRoundIcon,
+          {
+            height: isDownMd ? 16 : 21,
+            width: isDownMd ? 16 : 20,
+            color: "var(--matchid-input-delete-icon-color)"
+          }
+        ) }),
         type === "password" && /* @__PURE__ */ jsx37("div", { className: "matchid-input-eye-icon", onClick: () => {
           setInputType(inputType === "password" ? "text" : "password");
-        }, children: inputType === "password" ? /* @__PURE__ */ jsx37(CloseEyeIcon, {}) : /* @__PURE__ */ jsx37(OpenEyeIcon, {}) }),
+        }, children: inputType === "password" ? /* @__PURE__ */ jsx37(CloseEyeIcon, { size: isDownMd ? 16 : 20 }) : /* @__PURE__ */ jsx37(OpenEyeIcon, { size: isDownMd ? 16 : 20 }) }),
         after
       ]
     }
@@ -785,6 +823,7 @@ function Button({
 var hooks_exports = {};
 __export(hooks_exports, {
   useCopyClipboard: () => useCopyClipboard,
+  useLayout: () => useLayout_exports,
   useMatchEvents: () => useMatchEvents,
   useUserInfo: () => useUserInfo,
   useWallet: () => useWallet
@@ -1357,9 +1396,9 @@ function useUserInfo() {
 }
 
 // src/hooks/useMatchEvents.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useMatchEvents(handlers) {
-  useEffect(() => {
+  useEffect2(() => {
     Object.entries(handlers).forEach(([event, handler2]) => {
       if (handler2) {
         eventManager_default.on(event, handler2);
@@ -1523,14 +1562,14 @@ function useWallet() {
 
 // src/hooks/useCopyClipboard.ts
 import copy from "copy-to-clipboard";
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 function useCopyClipboard(timeout = 500) {
-  const [isCopied, setIsCopied] = useState2(false);
+  const [isCopied, setIsCopied] = useState3(false);
   const staticCopy = useCallback((text) => {
     const didCopy = copy(text);
     setIsCopied(didCopy);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isCopied) {
       const hide = setTimeout(() => {
         setIsCopied(false);
@@ -1555,9 +1594,9 @@ function PasswordModal({
 }) {
   const { refreshOverview, overview } = useUserInfo();
   const { isLogin, did } = useUserInfo();
-  const [password, setPassword] = useState3("");
-  const [rePassword, setRePassword] = useState3("");
-  const [error, setError] = useState3("");
+  const [password, setPassword] = useState4("");
+  const [rePassword, setRePassword] = useState4("");
+  const [error, setError] = useState4("");
   const { generateWallet, initWallet } = useWallet();
   const intl = useIntl();
   const passwordError = useMemo2(() => {
@@ -1576,7 +1615,7 @@ function PasswordModal({
     }
     return "";
   }, [rePassword, password]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen && overview) {
       setPassword("");
       setRePassword("");
@@ -1587,7 +1626,7 @@ function PasswordModal({
       });
     }
   }, [isOpen, overview]);
-  const [isSubmitting, setIsSubmitting] = useState3(false);
+  const [isSubmitting, setIsSubmitting] = useState4(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1653,7 +1692,7 @@ function PasswordModal({
 }
 
 // src/components/RecoveryModal/index.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 import { FormattedMessage as FormattedMessage2, useIntl as useIntl2 } from "react-intl";
 import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function RecoveryModal({
@@ -1664,9 +1703,9 @@ function RecoveryModal({
 }) {
   const { refreshOverview } = useUserInfo();
   const { isLogin, overview } = useUserInfo();
-  const [password, setPassword] = useState4("");
+  const [password, setPassword] = useState5("");
   const { recoveryWallet, initWallet } = useWallet();
-  const [error, setError] = useState4("");
+  const [error, setError] = useState5("");
   const intl = useIntl2();
   const passwordError = useMemo3(() => {
     if (password.length < 6) return intl.formatMessage({
@@ -1676,7 +1715,7 @@ function RecoveryModal({
     });
     return "";
   }, [password]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isOpen && overview) {
       setPassword("");
       const did = overview.did.split(":")[2];
@@ -1686,7 +1725,7 @@ function RecoveryModal({
       });
     }
   }, [isOpen, overview]);
-  const [isSubmitting, setIsSubmitting] = useState4(false);
+  const [isSubmitting, setIsSubmitting] = useState5(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1734,7 +1773,7 @@ function RecoveryModal({
 }
 
 // src/components/SOLModal/index.tsx
-import React2, { useEffect as useEffect9, useMemo as useMemo7, useState as useState13 } from "react";
+import React2, { useEffect as useEffect10, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/components/index.tsx
 var components_exports = {};
@@ -1756,16 +1795,16 @@ __export(components_exports, {
 });
 
 // src/components/EmailModal/index.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 
 // src/components/EmailModal/StepEmail.tsx
-import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState6 } from "react";
 import { FormattedMessage as FormattedMessage3, useIntl as useIntl3 } from "react-intl";
 import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function StepEmail(props) {
   const intl = useIntl3();
-  const [emailVal, setEmailVal] = useState5("");
-  useEffect5(() => {
+  const [emailVal, setEmailVal] = useState6("");
+  useEffect6(() => {
     if (props.email) {
       setEmailVal(props.email);
     }
@@ -1796,7 +1835,7 @@ function StepEmail(props) {
 }
 
 // src/components/EmailModal/StepVerify.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useRef, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef, useState as useState7 } from "react";
 
 // src/config/index.tsx
 var EMAIL_INTERVAL = 60;
@@ -1808,17 +1847,18 @@ import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function StepVerify(props) {
   const intl = useIntl4();
   const { getLoginEmailCode, loginByEmail } = useUserInfo();
-  const [error, setError] = useState6("");
-  const [code, setCode] = useState6("");
-  const [sending, setSending] = useState6(false);
-  const [submitting, setSubmitting] = useState6(false);
+  const [error, setError] = useState7("");
+  const [code, setCode] = useState7("");
+  const [sending, setSending] = useState7(false);
+  const [submitting, setSubmitting] = useState7(false);
   const sendTimeRef = useRef(0);
-  const [sendBtnText, setSendBtnText] = useState6(intl.formatMessage({
+  const [sendBtnText, setSendBtnText] = useState7(intl.formatMessage({
     id: "send"
   }));
   const intervalTime = EMAIL_INTERVAL;
   const codeLength = EMAIL_CODE_LENGTH;
   const intervalRef = useRef(null);
+  const isDownMd = useDownMd();
   const onSend = async () => {
     if (sendTimeRef.current > 0) {
       return;
@@ -1848,7 +1888,7 @@ function StepVerify(props) {
       setSending(false);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     onSend();
     return () => {
       if (intervalRef.current) {
@@ -1882,7 +1922,7 @@ function StepVerify(props) {
   };
   return /* @__PURE__ */ jsxs29("div", { className: "matchid-email-verify-box", children: [
     /* @__PURE__ */ jsxs29("div", { className: "matchid-email-verify-header", children: [
-      /* @__PURE__ */ jsx43("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ jsx43(EmailLineIcon, {}) }),
+      /* @__PURE__ */ jsx43("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ jsx43(EmailLineIcon, { size: isDownMd ? 19 : 24 }) }),
       /* @__PURE__ */ jsxs29("div", { className: "matchid-email-verify-header-content", children: [
         /* @__PURE__ */ jsx43("div", { className: "matchid-email-verify-header-value", children: props.email }),
         /* @__PURE__ */ jsx43("div", { className: "matchid-email-verify-header-tips", children: /* @__PURE__ */ jsx43(FormattedMessage4, { id: "sendEmailTips" }) })
@@ -1933,10 +1973,10 @@ function EmailModal({
   onBack,
   onLogin
 }) {
-  const [step, setStep] = useState7("input");
-  const [emailVal, setEmailVal] = useState7("");
+  const [step, setStep] = useState8("input");
+  const [emailVal, setEmailVal] = useState8("");
   const intl = useIntl5();
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isOpen) {
       setStep("input");
       setEmailVal("");
@@ -1961,7 +2001,7 @@ function EmailModal({
 }
 
 // src/components/Popover/index.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function Popover({
   children,
@@ -1971,7 +2011,7 @@ function Popover({
   className = "",
   gap = "20px"
 }) {
-  const [active, setActive] = useState8(false);
+  const [active, setActive] = useState9(false);
   return /* @__PURE__ */ jsxs30(
     "div",
     {
@@ -1992,7 +2032,7 @@ function Popover({
 }
 
 // src/components/LoginBox/index.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { FormattedMessage as FormattedMessage5, useIntl as useIntl6 } from "react-intl";
 import { Fragment as Fragment2, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var RecommendItem = ({
@@ -2046,75 +2086,76 @@ function LoginBox({
   walletMethods = ["evm"],
   inModal = false
 }) {
-  const [emailOpen, setEmailOpen] = useState9(false);
+  const [emailOpen, setEmailOpen] = useState10(false);
   const { login } = useUserInfo();
-  const [showWallet, setShowWallet] = useState9(false);
+  const [showWallet, setShowWallet] = useState10(false);
   const intl = useIntl6();
+  const isDownMd = useDownMd();
   const methodMap = {
     wallet: {
-      icon: /* @__PURE__ */ jsx46(WalletIcon, {}),
+      icon: /* @__PURE__ */ jsx46(WalletIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "wallet" }),
       onClick: () => setShowWallet(!showWallet),
       type: "wallet"
     },
     email: {
-      icon: /* @__PURE__ */ jsx46(EmailIcon, {}),
+      icon: /* @__PURE__ */ jsx46(EmailIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "email" }),
       onClick: () => {
         setEmailOpen(true);
       }
     },
     google: {
-      icon: /* @__PURE__ */ jsx46(GoogleIcon, {}),
+      icon: /* @__PURE__ */ jsx46(GoogleIcon, { size: isDownMd ? 36 : 40 }),
       name: "Google",
       onClick: () => login("google")
     },
     twitter: {
-      icon: /* @__PURE__ */ jsx46(XIcon, {}),
+      icon: /* @__PURE__ */ jsx46(XIcon, { size: isDownMd ? 36 : 40 }),
       name: "X",
       onClick: () => login("twitter")
     },
     telegram: {
-      icon: /* @__PURE__ */ jsx46(TelegramIcon, {}),
+      icon: /* @__PURE__ */ jsx46(TelegramIcon, { size: isDownMd ? 36 : 40 }),
       name: "Telegram",
       onClick: () => login("telegram")
     },
     github: {
-      icon: /* @__PURE__ */ jsx46(GithubIcon, {}),
+      icon: /* @__PURE__ */ jsx46(GithubIcon, { size: isDownMd ? 36 : 40 }),
       name: "Github",
       onClick: () => login("github")
     },
     discord: {
-      icon: /* @__PURE__ */ jsx46(DiscordIcon, {}),
+      icon: /* @__PURE__ */ jsx46(DiscordIcon, { size: isDownMd ? 36 : 40 }),
       name: "Discord",
       onClick: () => login("discord")
     },
     linkedin: {
-      icon: /* @__PURE__ */ jsx46(LinkedinIcon, {}),
+      icon: /* @__PURE__ */ jsx46(LinkedinIcon, { size: isDownMd ? 36 : 40 }),
       name: "LinkedIn",
       onClick: () => login("linkedin")
     },
     facebook: {
-      icon: /* @__PURE__ */ jsx46(FacebookIcon, {}),
+      icon: /* @__PURE__ */ jsx46(FacebookIcon, { size: isDownMd ? 36 : 40 }),
       name: "Facebook",
       onClick: () => login("facebook")
     },
     youtube: {
-      icon: /* @__PURE__ */ jsx46(YoutubeIcon, {}),
+      icon: /* @__PURE__ */ jsx46(YoutubeIcon, { size: isDownMd ? 36 : 40 }),
       name: "Youtube",
       onClick: () => login("youtube")
     }
   };
   const walletMap = {
     evm: {
-      icon: /* @__PURE__ */ jsx46(EVMDarkIcon, {}),
-      activeIcon: /* @__PURE__ */ jsx46(EVMLightIcon, {}),
+      icon: /* @__PURE__ */ jsx46(EVMDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ jsx46(EVMLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "EVM",
       onClick: () => login("evm")
     },
     sol: {
-      icon: /* @__PURE__ */ jsx46(SOLDarkIcon, {}),
-      activeIcon: /* @__PURE__ */ jsx46(SOLLightIcon, {}),
+      icon: /* @__PURE__ */ jsx46(SOLDarkIcon, { size: isDownMd ? 36 : 40 }),
+      activeIcon: /* @__PURE__ */ jsx46(SOLLightIcon, { size: isDownMd ? 36 : 40 }),
       name: "SOL",
       onClick: () => login("sol")
     }
@@ -2206,7 +2247,7 @@ function LoginBox({
 }
 
 // src/components/LoginButton/index.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/LoginPanel/index.tsx
 import { FormattedMessage as FormattedMessage6 } from "react-intl";
@@ -2216,13 +2257,14 @@ function LoginPanel({
   onClose,
   ...props
 }) {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ jsxs32("div", { className: "matchid-login-panel", children: [
     header ? header : /* @__PURE__ */ jsxs32("div", { className: "matchid-login-panel-header", children: [
       /* @__PURE__ */ jsxs32("div", { className: "matchid-login-panel-header-content", children: [
         /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-header-title", children: /* @__PURE__ */ jsx47(FormattedMessage6, { id: "loginTitle" }) }),
         /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-header-subtilte", children: /* @__PURE__ */ jsx47(FormattedMessage6, { id: "loginTips" }) })
       ] }),
-      onClose && /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ jsx47(CloseRoundIcon, {}) })
+      onClose && /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ jsx47(CloseRoundIcon, { size: isDownMd ? 24 : 30 }) })
     ] }),
     /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-divide" }),
     /* @__PURE__ */ jsx47("div", { className: "matchid-login-panel-box", children: /* @__PURE__ */ jsx47(LoginBox, { ...props }) })
@@ -2248,7 +2290,7 @@ function LoginModal({
 }
 
 // src/components/UserPopover/index.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/assets/icon/ProfileIcon.tsx
 import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -2280,7 +2322,7 @@ import { FormattedMessage as FormattedMessage7, useIntl as useIntl7 } from "reac
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function UserContent() {
   const { logout, address, username } = useUserInfo();
-  const [logouting, setLogouting] = useState10(false);
+  const [logouting, setLogouting] = useState11(false);
   const onLogout = async () => {
     if (logouting) return;
     try {
@@ -2309,7 +2351,7 @@ function UserContent() {
   const UserDivider = () => {
     return /* @__PURE__ */ jsx50("div", { className: `matchid-user-popover-divider` });
   };
-  const [usernameOpen, setUsernameOpen] = useState10(false);
+  const [usernameOpen, setUsernameOpen] = useState11(false);
   const [copied, setCopied] = useCopyClipboard();
   const intl = useIntl7();
   return /* @__PURE__ */ jsxs34("div", { className: "matchid-user-popover-content", children: [
@@ -2355,7 +2397,7 @@ function LoginButton({
 }) {
   const intl = useIntl8();
   const { isLogin, username } = useUserInfo();
-  const [loginOpen, setLoginOpen] = useState11(false);
+  const [loginOpen, setLoginOpen] = useState12(false);
   if (!isLogin) {
     return /* @__PURE__ */ jsxs35(Fragment3, { children: [
       /* @__PURE__ */ jsx51(
@@ -2383,7 +2425,7 @@ function LoginButton({
 }
 
 // src/components/UsernameModal/index.tsx
-import { useEffect as useEffect8, useMemo as useMemo6, useState as useState12 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo6, useState as useState13 } from "react";
 
 // src/assets/icon/InfoRoundIcon.tsx
 import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -2413,8 +2455,9 @@ var ValidItem = ({
   success = false,
   text
 }) => {
+  const isDownMd = useDownMd();
   return /* @__PURE__ */ jsxs37("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
-    success ? /* @__PURE__ */ jsx53(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ jsx53(InfoRoundIcon, { size: 16 }),
+    success ? /* @__PURE__ */ jsx53(CheckRoundIcon, { size: isDownMd ? 12 : 16 }) : /* @__PURE__ */ jsx53(InfoRoundIcon, { size: isDownMd ? 12 : 16 }),
     /* @__PURE__ */ jsx53("span", { children: text })
   ] });
 };
@@ -2426,9 +2469,10 @@ function UsernameModal({
 }) {
   const { username, refreshOverview } = useUserInfo();
   const { isLogin } = useUserInfo();
-  const [val, setVal] = useState12(username);
-  const [error, setError] = useState12("");
-  useEffect8(() => {
+  const [val, setVal] = useState13(username);
+  const [error, setError] = useState13("");
+  const isDownMd = useDownMd();
+  useEffect9(() => {
     if (isOpen) {
       setVal(username);
       setError("");
@@ -2441,7 +2485,7 @@ function UsernameModal({
     return val.length >= 2 && val.length <= 32;
   }, [val]);
   const isSafe = isValid && isLength;
-  const [isSubmitting, setIsSubmitting] = useState12(false);
+  const [isSubmitting, setIsSubmitting] = useState13(false);
   const onSubmit = async () => {
     if (isSubmitting) return;
     try {
@@ -2495,10 +2539,10 @@ function UsernameModal({
       }) })
     ] }),
     /* @__PURE__ */ jsx53(Button, { disabled: !isSafe, loading: isSubmitting, style: {
-      marginTop: "64px"
+      marginTop: isDownMd ? "36px" : "64px"
     }, onClick: onSubmit, size: "lg", block: true, highlight: true, children: /* @__PURE__ */ jsx53(FormattedMessage9, { id: "confirm" }) }),
     /* @__PURE__ */ jsx53(Button, { style: {
-      marginTop: "24px"
+      marginTop: isDownMd ? "12px" : "24px"
     }, onClick: props.onClose, size: "lg", block: true, children: /* @__PURE__ */ jsx53(FormattedMessage9, { id: "nextTime" }) })
   ] }) });
 }
@@ -2572,17 +2616,17 @@ function WalletContent({
   const { setVisible, visible } = useWalletModal();
   const wallet = useWallet2();
   const { events, login } = useMatch();
-  const [status, setStatus] = useState13("");
+  const [status, setStatus] = useState14("");
   const statusRef = React2.useRef(status);
-  const [error, setError] = useState13("");
-  useEffect9(() => {
+  const [error, setError] = useState14("");
+  useEffect10(() => {
     const init = async () => {
       await wallet.disconnect();
       setVisible(true);
     };
     init();
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (wallet.connected) {
       console.log("wallet.connected", wallet.connected);
       toLoginInWallet();
@@ -2810,7 +2854,7 @@ var Providers = ({ children }) => {
 var context_default = Providers;
 
 // src/hooks/useWalletInit.ts
-import { useEffect as useEffect10, useState as useState14 } from "react";
+import { useEffect as useEffect11, useState as useState15 } from "react";
 var AppClientId2 = getAppClientId();
 function useWalletInit({
   refreshOverview
@@ -2819,10 +2863,10 @@ function useWalletInit({
   const getWalletIframe = () => {
     return document.getElementById("match-wallet");
   };
-  const [walletInited, setWalletInited] = useState14(false);
+  const [walletInited, setWalletInited] = useState15(false);
   const { appid, token, overview } = useLocalStore_default();
   const { initWallet, generateWallet } = useWallet();
-  useEffect10(() => {
+  useEffect11(() => {
     if (endpoints.auth) {
       if (!window.matchWalletMessageIdMap) {
         window.matchWalletMessageIdMap = {};
@@ -2880,7 +2924,7 @@ function useWalletInit({
       }
     }
   }, [endpoints.auth]);
-  useEffect10(() => {
+  useEffect11(() => {
     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);
     };
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     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
-import { useEffect as useEffect11, useRef as useRef2 } from "react";
+import { useEffect as useEffect12, useRef as useRef2 } from "react";
 function useInit({
   theme,
   appid,
@@ -2967,19 +3011,19 @@ function useInit({
   const searchParams = new URLSearchParams(window.location.search);
   const matchToken = searchParams.get("matchToken");
   const realEndpoints = endpoints || env_default.endpoints;
-  useEffect11(() => {
+  useEffect12(() => {
     setTheme(theme);
   }, [theme]);
-  useEffect11(() => {
+  useEffect12(() => {
     setAppid(appid);
   }, [appid]);
-  useEffect11(() => {
+  useEffect12(() => {
     setEndpoints(realEndpoints);
   }, [realEndpoints]);
-  useEffect11(() => {
+  useEffect12(() => {
     setLocale(locale || "en");
   }, [locale]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (matchToken) {
       const tokenData = JSON.parse(atob(matchToken));
       if (tokenData && tokenData.mid && tokenData.token) {
@@ -2990,7 +3034,7 @@ function useInit({
       }
     }
   }, [matchToken]);
-  useEffect11(() => {
+  useEffect12(() => {
     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;
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (token) {
       loadOverview();
     }