@matchain/matchid-sdk-react 0.1.17 → 0.1.18

package/dist/index.js

@@ -40,7 +40,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/MatchContext.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/assets/icon/ArrowLeftIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -187,7 +187,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 function EmailIcon({
   size = 40
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 40 40", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: "40", height: "40", rx: "8", fill: "url(#paint0_linear_124_10994)" }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "path",
@@ -392,23 +392,144 @@ function DeleteRoundIcon({ height = 21, width = 20, color = "var(--matchid-error
   ] });
 }
 
-// src/components/Modal/index.tsx
+// src/assets/icon/FacebookIcon.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/assets/icon/GithubIcon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function GithubIcon({
+  size = 40
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { width: size, height: size, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "40", height: "40", rx: "8", fill: "black" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M19.6836 7C16.434 7.00169 13.2909 8.15263 10.8165 10.247C8.34197 12.3414 6.69741 15.2427 6.17684 18.4321C5.65627 21.6215 6.29363 24.8911 7.97496 27.6561C9.6563 30.4211 12.272 32.5013 15.3542 33.5248C16.0343 33.651 16.2904 33.2295 16.2904 32.8712C16.2904 32.5128 16.2768 31.4738 16.2723 30.3379C12.4642 31.1606 11.6596 28.731 11.6596 28.731C11.0385 27.1533 10.1409 26.7386 10.1409 26.7386C8.89876 25.8957 10.2338 25.9115 10.2338 25.9115C11.6097 26.0084 12.3328 27.3156 12.3328 27.3156C13.5523 29.3958 15.5356 28.7941 16.3153 28.4425C16.4377 27.5613 16.7936 26.9618 17.1857 26.6214C14.1438 26.2789 10.9478 25.1114 10.9478 19.8961C10.929 18.5436 11.4338 17.2356 12.3577 16.2428C12.2172 15.9002 11.748 14.5164 12.4914 12.6367C12.4914 12.6367 13.6407 12.2716 16.2564 14.0318C18.5 13.4217 20.8672 13.4217 23.1108 14.0318C25.7243 12.2716 26.8712 12.6367 26.8712 12.6367C27.617 14.5119 27.1478 15.8957 27.0072 16.2428C27.9341 17.2358 28.4399 18.546 28.4194 19.9007C28.4194 25.1272 25.2166 26.2789 22.1701 26.6147C22.6597 27.0384 23.0972 27.8655 23.0972 29.1367C23.0972 30.9577 23.0814 32.4227 23.0814 32.8712C23.0814 33.234 23.3284 33.6577 24.022 33.5248C27.1047 32.5012 29.7206 30.4206 31.4019 27.6551C33.0832 24.8896 33.7202 21.6196 33.1991 18.4299C32.6779 15.2402 31.0325 12.3389 28.5572 10.2449C26.0819 8.15081 22.9381 7.00062 19.6881 7H19.6836Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M11.1789 26.543C11.1495 26.6106 11.0407 26.6309 10.9523 26.5836C10.8639 26.5362 10.7982 26.4483 10.8299 26.3785C10.8616 26.3086 10.9682 26.2906 11.0566 26.3379C11.145 26.3852 11.2129 26.4754 11.1789 26.543Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M11.7339 27.1582C11.687 27.1817 11.6333 27.1883 11.582 27.1768C11.5308 27.1652 11.4851 27.1364 11.4529 27.0951C11.3645 27.0004 11.3463 26.8697 11.4143 26.8111C11.4823 26.7525 11.6048 26.7796 11.6932 26.8742C11.7816 26.9689 11.8019 27.0996 11.7339 27.1582Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M12.2738 27.9394C12.1899 27.998 12.0471 27.9394 11.9678 27.8222C11.9459 27.8012 11.9284 27.776 11.9165 27.7481C11.9046 27.7202 11.8984 27.6902 11.8984 27.6599C11.8984 27.6296 11.9046 27.5996 11.9165 27.5718C11.9284 27.5439 11.9459 27.5187 11.9678 27.4976C12.0517 27.4413 12.1945 27.4976 12.2738 27.6126C12.3531 27.7275 12.3554 27.8808 12.2738 27.9394Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M13.0055 28.6975C12.9307 28.7809 12.7789 28.7584 12.6542 28.6457C12.5295 28.533 12.5001 28.3797 12.5749 28.2986C12.6497 28.2175 12.8015 28.24 12.9307 28.3505C13.0599 28.4609 13.0849 28.6164 13.0055 28.6975Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M14.0325 29.1386C13.9985 29.2445 13.8444 29.2919 13.6902 29.2468C13.5361 29.2017 13.4341 29.0755 13.4636 28.9673C13.493 28.8591 13.6494 28.8095 13.8058 28.8591C13.9622 28.9087 14.062 29.0282 14.0325 29.1386Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M15.1525 29.216C15.1525 29.3264 15.0256 29.421 14.8624 29.4233C14.6992 29.4256 14.5654 29.3354 14.5654 29.225C14.5654 29.1145 14.6924 29.0199 14.8556 29.0176C15.0188 29.0154 15.1525 29.1033 15.1525 29.216Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "path",
+      {
+        d: "M16.1947 29.0423C16.2151 29.1527 16.1018 29.2677 15.9386 29.2947C15.7754 29.3218 15.6326 29.2564 15.6122 29.1482C15.5918 29.0401 15.7096 28.9229 15.8683 28.8936C16.027 28.8643 16.1743 28.9319 16.1947 29.0423Z",
+        fill: "white"
+      }
+    )
+  ] });
+}
+
+// src/assets/icon/DiscordIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function DiscordIcon({
+  size = 40
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { width: size, height: size, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "40", height: "40", rx: "8", fill: "#5865F2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "path",
+      {
+        d: "M29.7032 10.8237C27.9186 9.97958 26.0048 9.35768 24.0039 9.00149C23.9674 8.99462 23.931 9.0118 23.9123 9.04616C23.6661 9.4974 23.3935 10.0861 23.2026 10.5488C21.0505 10.2167 18.9094 10.2167 16.8014 10.5488C16.6104 10.0758 16.3279 9.4974 16.0807 9.04616C16.0619 9.01295 16.0255 8.99577 15.9891 9.00149C13.9892 9.35654 12.0755 9.97844 10.2898 10.8237C10.2743 10.8306 10.261 10.842 10.2523 10.8569C6.62229 16.4471 5.62789 21.9 6.11571 27.2852C6.11792 27.3116 6.13226 27.3368 6.15213 27.3528C8.54708 29.1658 10.867 30.2664 13.1438 30.996C13.1803 31.0075 13.2189 30.9937 13.2421 30.9628C13.7806 30.2046 14.2607 29.4052 14.6724 28.5645C14.6967 28.5153 14.6735 28.4569 14.6238 28.4374C13.8623 28.1396 13.1372 27.7765 12.4397 27.3642C12.3845 27.331 12.3801 27.2497 12.4309 27.2107C12.5776 27.0974 12.7245 26.9794 12.8646 26.8603C12.89 26.8385 12.9253 26.8339 12.9551 26.8477C17.5375 29.0043 22.4985 29.0043 27.0268 26.8477C27.0566 26.8328 27.0919 26.8374 27.1184 26.8591C27.2586 26.9783 27.4054 27.0974 27.5533 27.2107C27.604 27.2497 27.6007 27.331 27.5455 27.3642C26.848 27.7845 26.1229 28.1396 25.3603 28.4362C25.3106 28.4557 25.2885 28.5153 25.3128 28.5645C25.7333 29.404 26.2134 30.2034 26.742 30.9616C26.7641 30.9937 26.8038 31.0075 26.8403 30.996C29.1282 30.2664 31.4481 29.1658 33.843 27.3528C33.864 27.3368 33.8772 27.3127 33.8794 27.2864C34.4633 21.0604 32.9016 15.6523 29.7396 10.858C29.7319 10.842 29.7186 10.8306 29.7032 10.8237ZM15.3567 24.0062C13.9771 24.0062 12.8403 22.7005 12.8403 21.0971C12.8403 19.4937 13.955 18.188 15.3567 18.188C16.7694 18.188 17.8951 19.5051 17.873 21.0971C17.873 22.7005 16.7583 24.0062 15.3567 24.0062ZM24.6605 24.0062C23.281 24.0062 22.1442 22.7005 22.1442 21.0971C22.1442 19.4937 23.2589 18.188 24.6605 18.188C26.0732 18.188 27.199 19.5051 27.1769 21.0971C27.1769 22.7005 26.0732 24.0062 24.6605 24.0062Z",
+        fill: "white"
+      }
+    )
+  ] });
+}
+
+// src/assets/icon/CheckIcon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function CheckIcon({
+  size = 20,
+  color = "black",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "path",
+    {
+      d: "M5 9.99996L8.33333 13.3333L15 6.66663",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/assets/icon/CopyIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function CopyIcon({ size = 20, color = "black", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "path",
+    {
+      d: "M4.16673 12.5009C3.24625 12.5009 2.50006 11.7547 2.50006 10.8342V4.16752C2.50006 3.24705 3.24625 2.50085 4.16673 2.50085H10.8334C11.7539 2.50085 12.5001 3.24705 12.5001 4.16752M9.16673 17.5009H15.8334C16.7539 17.5009 17.5001 16.7547 17.5001 15.8342V9.16752C17.5001 8.24705 16.7539 7.50086 15.8334 7.50086H9.16673C8.24625 7.50086 7.50006 8.24705 7.50006 9.16752V15.8342C7.50006 16.7547 8.24625 17.5009 9.16673 17.5009Z",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+
+// src/components/Modal/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Modal({
   children,
   isOpen,
   width = 480,
   className = ""
 }) {
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: "matchid-overlay",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `matchid-modal ${className}`, style: {
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `matchid-modal ${className}`, style: {
         width
       }, children })
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+  ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {});
 }
 function ModalWithHeader({
   children,
@@ -419,24 +540,24 @@ function ModalWithHeader({
   showClose = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Modal, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "matchid-modal-header-title", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Modal, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
 }
 
 // src/components/PasswordModal/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/Input/index.tsx
 var import_react = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Input({
   onChange,
   type,
@@ -445,22 +566,22 @@ function Input({
   ...props
 }) {
   const [inputType, setInputType] = (0, import_react.useState)(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-    props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DeleteRoundIcon, { onClick: (e) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+    props.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DeleteRoundIcon, { onClick: (e) => {
       if (onChange) {
         onChange({ target: { value: "" } });
       }
     }, className: "matchid-input-delete-icon", color: "var(--matchid-input-delete-icon-color)" }),
-    type === "password" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
+    type === "password" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "matchid-input-eye-icon", onClick: () => {
       setInputType(inputType === "password" ? "text" : "password");
-    }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(OpenEyeIcon, {}) }),
+    }, children: inputType === "password" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseEyeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OpenEyeIcon, {}) }),
     after
   ] });
 }
 
 // src/components/Field/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Field({
   label,
   children,
@@ -468,18 +589,18 @@ function Field({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matchid-field-label", children: [
-      required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matchid-field-required", children: "*" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
 // src/components/Button/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Button({
   size = "df",
   disabled = false,
@@ -498,7 +619,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "button",
     {
       type,
@@ -508,7 +629,7 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
     }
   );
 }
@@ -516,6 +637,7 @@ function Button({
 // src/hooks/index.tsx
 var hooks_exports = {};
 __export(hooks_exports, {
+  useCopyClipboard: () => useCopyClipboard,
   useMatchEvents: () => useMatchEvents,
   useUserInfo: () => useUserInfo,
   useWallet: () => useWallet
@@ -865,10 +987,10 @@ function useUserInfo() {
     events && events.onLogout && events.onLogout();
     eventManager_default.emit("onLogout");
   };
-  const loginByMethod = (method) => {
+  const loginByMethod = async (method) => {
     const link = `${endpoints.back}api/v1/auth/${method}?appid=${appid}&provider=${method}&redirect=${encodeURIComponent(endpoints.auth + "login/" + method)}&authorization=${(/* @__PURE__ */ new Date()).getTime()}`;
     matchlog_default.log("link", link);
-    const authWindow = window.open(
+    return window.open(
       link,
       // Replace with the actual authorization URL
       "authWindow",
@@ -876,10 +998,42 @@ function useUserInfo() {
     );
   };
   const loginByTwitter = () => {
-    loginByMethod("twitter");
+    return loginByMethod("twitter");
   };
   const loginByGoogle = () => {
-    loginByMethod("google");
+    return loginByMethod("google");
+  };
+  const loginByWallet = async () => {
+    return window.open(
+      `${endpoints.auth}login/wallet?appid=${appid}`,
+      // Replace with the actual authorization URL
+      "_blank"
+      // 'width=800,height=600'
+    );
+  };
+  const loginByTelegram = async () => {
+    return window.open(
+      `${endpoints.auth}login/telegram?appid=${appid}`,
+      // Replace with the actual authorization URL
+      "authWindow",
+      "width=800,height=600"
+    );
+  };
+  const loginMethod = async (method) => {
+    switch (method) {
+      case "wallet":
+        return await loginByWallet();
+      case "telegram":
+        return await loginByTelegram();
+      case "twitter":
+      case "google":
+      case "discord":
+      case "github":
+      case "linkedin":
+        return await loginByMethod(method);
+      default:
+        throw new Error("unsupported method");
+    }
   };
   const getLoginEmailCode = async (email) => {
     const res = await getEmailCodeApi(email);
@@ -915,22 +1069,6 @@ function useUserInfo() {
     }
     return false;
   };
-  const loginByWallet = () => {
-    const authWindow = window.open(
-      `${endpoints.auth}login/wallet?appid=${appid}`,
-      // Replace with the actual authorization URL
-      "_blank"
-      // 'width=800,height=600'
-    );
-  };
-  const loginByTelegram = () => {
-    const authWindow = window.open(
-      `${endpoints.auth}login/telegram?appid=${appid}`,
-      // Replace with the actual authorization URL
-      "authWindow",
-      "width=800,height=600"
-    );
-  };
   const refreshOverview = async () => {
     const res = await getOverviewInfoApi();
     if (res.data) {
@@ -965,7 +1103,30 @@ function useUserInfo() {
     }
     throw new Error(res.message);
   };
+  const bind = async (method) => {
+    switch (method) {
+      case "wallet":
+        return await bindWallet();
+      case "telegram":
+        return await bindTelegram();
+      case "twitter":
+      case "google":
+      case "discord":
+      case "github":
+      case "linkedin":
+        const link = `${endpoints.back}api/v1/auth/${method}?appid=${appid}&provider=${method}&redirect=${encodeURIComponent(endpoints.auth + "bind/" + method)}&authorization=${token.includes("Bearer ") ? token.split(" ")[1] : token}`;
+        matchlog_default.log("link", link);
+        return window.open(
+          link,
+          "authWindow",
+          "width=800,height=600"
+        );
+      default:
+        throw new Error("unsupported method");
+    }
+  };
   return {
+    loginByMethod,
     loginByTelegram,
     loginByTwitter,
     loginByGoogle,
@@ -983,7 +1144,9 @@ function useUserInfo() {
     bindWallet,
     bindTelegram,
     username: overview?.username || "",
-    auth
+    auth,
+    login: loginMethod,
+    bind
   };
 }
 
@@ -1152,8 +1315,31 @@ function useWallet() {
   };
 }
 
+// src/hooks/useCopyClipboard.ts
+var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
+var import_react4 = require("react");
+function useCopyClipboard(timeout = 500) {
+  const [isCopied, setIsCopied] = (0, import_react4.useState)(false);
+  const staticCopy = (0, import_react4.useCallback)((text) => {
+    const didCopy = (0, import_copy_to_clipboard.default)(text);
+    setIsCopied(didCopy);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (isCopied) {
+      const hide = setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+      return () => {
+        clearTimeout(hide);
+      };
+    }
+    return void 0;
+  }, [isCopied, setIsCopied, timeout]);
+  return [isCopied, staticCopy];
+}
+
 // src/components/PasswordModal/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function PasswordModal({
   title,
   isOpen,
@@ -1162,27 +1348,27 @@ function PasswordModal({
 }) {
   const { refreshOverview } = useUserInfo();
   const { isLogin, did } = useUserInfo();
-  const [password, setPassword] = (0, import_react4.useState)("");
-  const [rePassword, setRePassword] = (0, import_react4.useState)("");
-  const [error, setError] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react5.useState)("");
+  const [rePassword, setRePassword] = (0, import_react5.useState)("");
+  const [error, setError] = (0, import_react5.useState)("");
   const { generateWallet } = useWallet();
-  const passwordError = (0, import_react4.useMemo)(() => {
+  const passwordError = (0, import_react5.useMemo)(() => {
     if (password.length < 6) return "Password must be at least 6 characters";
     return "";
   }, [password]);
-  const rePasswordError = (0, import_react4.useMemo)(() => {
+  const rePasswordError = (0, import_react5.useMemo)(() => {
     if (rePassword != password) {
       return "The password you entered twice do not match";
     }
     return "";
   }, [rePassword, password]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isOpen) {
       setPassword("");
       setRePassword("");
     }
   }, [isOpen]);
-  const [isSubmitting, setIsSubmitting] = (0, import_react4.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react5.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1199,13 +1385,13 @@ function PasswordModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set Password", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "matchid-password-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "matchid-password-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PasswordRoundIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "matchid-password-header-content", children: "Please set the wallet password that will be used to recover the wallet" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set Password", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "matchid-password-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "matchid-password-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PasswordRoundIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "matchid-password-header-content", children: "Please set the wallet password that will be used to recover the wallet" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "matchid-password-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Field, { label: "Password", error: password.length > 0 && passwordError, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "matchid-password-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Field, { label: "Password", error: password.length > 0 && passwordError, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Input,
         {
           placeholder: "Enter the Password",
@@ -1215,7 +1401,7 @@ function PasswordModal({
           value: password
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Field, { label: "Re Password", error: rePassword.length > 0 ? rePasswordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Field, { label: "Re Password", error: rePassword.length > 0 ? rePasswordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Input,
         {
           placeholder: "Re Enter the Password",
@@ -1226,7 +1412,7 @@ function PasswordModal({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Button,
       {
         disabled: password.length == 0 || !!passwordError || !!rePasswordError,
@@ -1242,8 +1428,8 @@ function PasswordModal({
 }
 
 // src/components/RecoveryModal/index.tsx
-var import_react5 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function RecoveryModal({
   title,
   isOpen,
@@ -1252,19 +1438,19 @@ function RecoveryModal({
 }) {
   const { refreshOverview } = useUserInfo();
   const { isLogin } = useUserInfo();
-  const [password, setPassword] = (0, import_react5.useState)("");
+  const [password, setPassword] = (0, import_react6.useState)("");
   const { recoveryWallet } = useWallet();
-  const [error, setError] = (0, import_react5.useState)("");
-  const passwordError = (0, import_react5.useMemo)(() => {
+  const [error, setError] = (0, import_react6.useState)("");
+  const passwordError = (0, import_react6.useMemo)(() => {
     if (password.length < 6) return "Password must be at least 6 characters";
     return "";
   }, [password]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isOpen) {
       setPassword("");
     }
   }, [isOpen]);
-  const [isSubmitting, setIsSubmitting] = (0, import_react5.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
     try {
@@ -1279,12 +1465,12 @@ function RecoveryModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Recover Wallet", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "matchid-password-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "matchid-password-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PasswordRoundIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "matchid-password-header-content", children: "Please enter your password to recover your wallet" })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Recover Wallet", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-password-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-password-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PasswordRoundIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-password-header-content", children: "Please enter your password to recover your wallet" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "matchid-password-content", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Field, { label: "Password", error: password.length > 0 ? passwordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-password-content", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Field, { label: "Password", error: password.length > 0 ? passwordError || error : error, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Input,
       {
         placeholder: "Enter the Password",
@@ -1294,7 +1480,7 @@ function RecoveryModal({
         value: password
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Button,
       {
         disabled: password.length == 0 || !!passwordError,
@@ -1310,13 +1496,13 @@ function RecoveryModal({
 }
 
 // src/context/BusinessProvider.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function BusinessProvider({ children }) {
   const { overview, token } = useUserInfo();
   const { recoveryModal } = useStore_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       RecoveryModal,
       {
         isOpen: !!token && !!overview && !!overview.address && recoveryModal.open,
@@ -1329,17 +1515,17 @@ function BusinessProvider({ children }) {
 }
 
 // src/context/index.tsx
-var import_jsx_runtime27 = (
+var import_jsx_runtime32 = (
   // <MpcWalletProvider>
   require("react/jsx-runtime")
 );
 var Providers = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BusinessProvider, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BusinessProvider, { children });
 };
 var context_default = Providers;
 
 // src/hooks/useWalletInit.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var AppClientId2 = "react-sdk-" + getVersion();
 function useWalletInit({
   refreshOverview
@@ -1348,10 +1534,10 @@ function useWalletInit({
   const getWalletIframe = () => {
     return document.getElementById("match-wallet");
   };
-  const [walletInited, setWalletInited] = (0, import_react6.useState)(false);
+  const [walletInited, setWalletInited] = (0, import_react7.useState)(false);
   const { appid, token, overview } = useLocalStore_default();
   const { initWallet, generateWallet } = useWallet();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (endpoints.auth) {
       if (!window.matchWalletMessageIdMap) {
         window.matchWalletMessageIdMap = {};
@@ -1409,7 +1595,7 @@ function useWalletInit({
       }
     }
   }, [endpoints.auth]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const messageHandle = async (e) => {
       if (e.origin !== endpoints.auth.substring(0, endpoints.auth.length - 1)) {
         return;
@@ -1442,7 +1628,7 @@ function useWalletInit({
       window.removeEventListener("message", messageHandle);
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (token && overview && overview.did && walletInited) {
       const did = overview.did.split(":")[2];
       const newUserInit = async () => {
@@ -1473,7 +1659,7 @@ function useWalletInit({
 }
 
 // src/hooks/useInit.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useInit({
   theme,
   appid,
@@ -1489,20 +1675,20 @@ function useInit({
     setOverview,
     setTheme
   } = useLocalStore_default();
-  const overviewLoadingRef = (0, import_react7.useRef)(false);
+  const overviewLoadingRef = (0, import_react8.useRef)(false);
   const searchParams = new URLSearchParams(window.location.search);
   const matchToken = searchParams.get("matchToken");
   const realEndpoints = endpoints || env_default.endpoints;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setTheme(theme);
   }, [theme]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setAppid(appid);
   }, [appid]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setEndpoints(realEndpoints);
   }, [realEndpoints]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (matchToken) {
       const tokenData = JSON.parse(atob(matchToken));
       if (tokenData && tokenData.mid && tokenData.token) {
@@ -1513,7 +1699,7 @@ function useInit({
       }
     }
   }, [matchToken]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.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)) {
@@ -1549,7 +1735,7 @@ function useInit({
       overviewLoadingRef.current = false;
     }
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (token) {
       loadOverview();
     }
@@ -1580,9 +1766,9 @@ function useInit({
 
 // src/MatchContext.tsx
 var import_react_query = require("@tanstack/react-query");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
-var MatchContext = (0, import_react8.createContext)(void 0);
+var MatchContext = (0, import_react9.createContext)(void 0);
 var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) => {
   const { loadOverview, login, endpoints: realEndPoints } = useInit({
     theme,
@@ -1593,7 +1779,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
   useWalletInit({
     refreshOverview: loadOverview
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     MatchContext.Provider,
     {
       value: {
@@ -1603,12 +1789,12 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
         login,
         theme
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(context_default, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(context_default, { children })
     }
   ) });
 };
 var useMatch = () => {
-  const context = (0, import_react8.useContext)(MatchContext);
+  const context = (0, import_react9.useContext)(MatchContext);
   if (context === void 0) {
     throw new Error("useMatch must be used within a MatchProvider");
   }
@@ -1629,30 +1815,31 @@ __export(components_exports, {
   Modal: () => Modal,
   ModalWithHeader: () => ModalWithHeader,
   PasswordModal: () => PasswordModal,
+  Popover: () => Popover,
   UsernameModal: () => UsernameModal
 });
 
 // src/components/EmailModal/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/EmailModal/StepEmail.tsx
-var import_react9 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function StepEmail(props) {
-  const [emailVal, setEmailVal] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
+  const [emailVal, setEmailVal] = (0, import_react10.useState)("");
+  (0, import_react10.useEffect)(() => {
     if (props.email) {
       setEmailVal(props.email);
     }
   }, []);
-  const canContinue = (0, import_react9.useMemo)(() => {
+  const canContinue = (0, import_react10.useMemo)(() => {
     return isValidEmail(emailVal);
   }, [emailVal]);
   const onContinue = async () => {
     props.onContinue(emailVal);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "matchid-email-email-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Field, { label: "Email Address", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "matchid-email-email-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Field, { label: "Email Address", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Input,
       {
         placeholder: "Enter Your Email Address",
@@ -1660,32 +1847,32 @@ function StepEmail(props) {
         value: emailVal
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { disabled: !canContinue, style: {
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { disabled: !canContinue, style: {
       marginTop: "64px"
     }, onClick: onContinue, size: "lg", block: true, highlight: true, children: "Continue" })
   ] });
 }
 
 // src/components/EmailModal/StepVerify.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/config/index.tsx
 var EMAIL_INTERVAL = 60;
 var EMAIL_CODE_LENGTH = 6;
 
 // src/components/EmailModal/StepVerify.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function StepVerify(props) {
   const { getLoginEmailCode, loginByEmail } = useUserInfo();
-  const [error, setError] = (0, import_react10.useState)("");
-  const [code, setCode] = (0, import_react10.useState)("");
-  const [sending, setSending] = (0, import_react10.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
-  const sendTimeRef = (0, import_react10.useRef)(0);
-  const [sendBtnText, setSendBtnText] = (0, import_react10.useState)("Send");
+  const [error, setError] = (0, import_react11.useState)("");
+  const [code, setCode] = (0, import_react11.useState)("");
+  const [sending, setSending] = (0, import_react11.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
+  const sendTimeRef = (0, import_react11.useRef)(0);
+  const [sendBtnText, setSendBtnText] = (0, import_react11.useState)("Send");
   const intervalTime = EMAIL_INTERVAL;
   const codeLength = EMAIL_CODE_LENGTH;
-  const intervalRef = (0, import_react10.useRef)(null);
+  const intervalRef = (0, import_react11.useRef)(null);
   const onSend = async () => {
     if (sendTimeRef.current > 0) {
       return;
@@ -1711,7 +1898,7 @@ function StepVerify(props) {
       setSending(false);
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     onSend();
     return () => {
       if (intervalRef.current) {
@@ -1719,7 +1906,7 @@ function StepVerify(props) {
       }
     };
   }, []);
-  const canContinue = (0, import_react10.useMemo)(() => {
+  const canContinue = (0, import_react11.useMemo)(() => {
     return code.length === codeLength;
   }, [code]);
   const onContinue = async () => {
@@ -1743,22 +1930,22 @@ function StepVerify(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-email-verify-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-email-verify-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(EmailLineIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "matchid-email-verify-header-tips", children: "We have sent a verification code to your email" })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "matchid-email-verify-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "matchid-email-verify-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(EmailLineIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "matchid-email-verify-header-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "matchid-email-verify-header-value", children: props.email }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "matchid-email-verify-header-tips", children: "We have sent a verification code to your email" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Field, { label: "Verification Code", error, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Field, { label: "Verification Code", error, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Input,
       {
         placeholder: "Enter the code",
         maxLength: codeLength,
         onChange: (e) => setCode(e.target.value),
         value: code,
-        after: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        after: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           Button,
           {
             highlight: true,
@@ -1777,12 +1964,12 @@ function StepVerify(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: "Continue" })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: "Continue" })
   ] });
 }
 
 // src/components/EmailModal/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function EmailModal({
   isOpen = false,
   width = 480,
@@ -1790,15 +1977,15 @@ function EmailModal({
   onBack,
   onLogin
 }) {
-  const [step, setStep] = (0, import_react11.useState)("input");
-  const [emailVal, setEmailVal] = (0, import_react11.useState)("");
-  (0, import_react11.useEffect)(() => {
+  const [step, setStep] = (0, import_react12.useState)("input");
+  const [emailVal, setEmailVal] = (0, import_react12.useState)("");
+  (0, import_react12.useEffect)(() => {
     if (!isOpen) {
       setStep("input");
       setEmailVal("");
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ModalWithHeader,
     {
       isOpen,
@@ -1806,31 +1993,62 @@ function EmailModal({
       onClose,
       title: "Email",
       onBack: step == "verify" ? () => setStep("input") : onBack,
-      children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
+      children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
         setEmailVal(email);
         setStep("verify");
-      } }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
+      } }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
+    }
+  );
+}
+
+// src/components/Popover/index.tsx
+var import_react13 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function Popover({
+  children,
+  content,
+  position = "right",
+  type = "hover",
+  className = "",
+  gap = "20px"
+}) {
+  const [active, setActive] = (0, import_react13.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      onClick: () => {
+        if (type == "click") {
+          setActive(!active);
+        }
+      },
+      className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: {
+          paddingTop: gap
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `matchid-popover-content`, children: content }) })
+      ]
     }
   );
 }
 
 // src/components/LoginBox/index.tsx
-var import_react12 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function LoginBox({
   methods,
   inModal = false
 }) {
-  const [emailOpen, setEmailOpen] = (0, import_react12.useState)(false);
-  const { loginByTelegram, loginByTwitter, loginByGoogle, loginByWallet } = useUserInfo();
+  const [emailOpen, setEmailOpen] = (0, import_react14.useState)(false);
+  const { login } = useUserInfo();
   const defaultMethods = [
     "wallet",
     "google",
     "email",
     "telegram",
-    "X"
+    "twitter"
   ];
-  const methodList = (0, import_react12.useMemo)(() => {
+  const methodList = (0, import_react14.useMemo)(() => {
     return methods || defaultMethods;
   }, [methods]);
   const LoginItem = ({
@@ -1838,46 +2056,56 @@ function LoginBox({
     name,
     onClick
   }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "matchid-login-method", onClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "matchid-login-method-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "matchid-login-method-icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "matchid-login-method-name", children: name })
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "matchid-login-method", onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "matchid-login-method-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "matchid-login-method-icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "matchid-login-method-name", children: name })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ArrowRightIcon, { className: "matchid-login-method-arrow", size: 20, color: "var(--matchid-arrow-color)" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ArrowRightIcon, { className: "matchid-login-method-arrow", size: 20, color: "var(--matchid-arrow-color)" })
     ] });
   };
   const methodMap = {
     wallet: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(WalletIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(WalletIcon, {}),
       name: "Wallet",
-      onClick: loginByWallet
+      onClick: () => login("wallet")
     },
     email: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EmailIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(EmailIcon, {}),
       name: "Email",
       onClick: () => {
         setEmailOpen(true);
       }
     },
     google: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GoogleIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GoogleIcon, {}),
       name: "Google",
-      onClick: loginByGoogle
+      onClick: () => login("google")
     },
-    X: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(XIcon, {}),
+    twitter: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(XIcon, {}),
       name: "X",
-      onClick: loginByTwitter
+      onClick: () => login("twitter")
     },
     telegram: {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TelegramIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TelegramIcon, {}),
       name: "Telegram",
-      onClick: loginByTelegram
+      onClick: () => login("telegram")
+    },
+    github: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GithubIcon, {}),
+      name: "Github",
+      onClick: () => login("github")
+    },
+    discord: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DiscordIcon, {}),
+      name: "Discord",
+      onClick: () => login("discord")
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "matchid-login-box", children: methodList.map((m) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "matchid-login-box", children: methodList.map((m) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         LoginItem,
         {
           icon: methodMap[m].icon,
@@ -1887,7 +2115,7 @@ function LoginBox({
         m
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       EmailModal,
       {
         isOpen: emailOpen,
@@ -1903,83 +2131,174 @@ function LoginBox({
 }
 
 // src/components/LoginButton/index.tsx
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // src/components/LoginPanel/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function LoginPanel({
   header,
   onClose,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "matchid-login-panel", children: [
-    header ? header : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "matchid-login-panel-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matchid-login-panel-header-title", children: "Log in / Sign up" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: "You can use the following methods" })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "matchid-login-panel", children: [
+    header ? header : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "matchid-login-panel-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "matchid-login-panel-header-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-panel-header-title", children: "Log in / Sign up" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-panel-header-subtilte", children: "You can use the following methods" })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseRoundIcon, {}) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseRoundIcon, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matchid-login-panel-divide" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LoginBox, { ...props })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "matchid-login-panel-divide" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LoginBox, { ...props })
   ] });
 }
 
 // src/components/LoginModal/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function LoginModal({
   isOpen = false,
   width = 480,
   ...props
 }) {
   const { isLogin } = useUserInfo();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Modal,
     {
       isOpen: isOpen && !isLogin,
       width,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoginPanel, { ...props, inModal: true })
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LoginPanel, { ...props, inModal: true })
     }
   );
 }
 
+// src/components/UserPopover/index.tsx
+var import_react15 = require("react");
+
+// src/assets/icon/ProfileIcon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ProfileIcon({ size = 24, color = "black", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.5 6.75C7.5 4.95507 8.95507 3.5 10.75 3.5C12.5449 3.5 14 4.95507 14 6.75C14 8.54493 12.5449 10 10.75 10C8.95507 10 7.5 8.54493 7.5 6.75ZM10.75 2C8.12665 2 6 4.12665 6 6.75C6 9.37335 8.12665 11.5 10.75 11.5C13.3734 11.5 15.5 9.37335 15.5 6.75C15.5 4.12665 13.3734 2 10.75 2ZM8.75 13C5.57436 13 3 15.5744 3 18.75V19.75C3 20.7165 3.7835 21.5 4.75 21.5H13.6646L13.0292 20.8646C12.7764 20.6118 12.5733 20.3185 12.4263 20H4.75C4.61193 20 4.5 19.8881 4.5 19.75V18.75C4.5 16.4028 6.40279 14.5 8.75 14.5H12.6452C13.0508 13.8858 13.676 13.4295 14.4091 13.243C13.8838 13.0849 13.3268 13 12.75 13H8.75Z",
+        fill: color
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M19.0677 22.4771L21.4771 20.0677C21.841 19.7038 21.841 19.1139 21.4771 18.75L17.75 15.0229C17.5753 14.8482 17.3383 14.75 17.0911 14.75H14.6818C14.1672 14.75 13.75 15.1672 13.75 15.6818V18.0911C13.75 18.3383 13.8482 18.5753 14.0229 18.75L17.75 22.4771C18.1139 22.841 18.7038 22.841 19.0677 22.4771ZM15.6135 17.3124C15.9995 17.3124 16.3124 16.9995 16.3124 16.6135C16.3124 16.2276 15.9995 15.9147 15.6135 15.9147C15.2276 15.9147 14.9147 16.2276 14.9147 16.6135C14.9147 16.9995 15.2276 17.3124 15.6135 17.3124Z",
+        fill: color
+      }
+    )
+  ] });
+}
+
+// src/components/UserPopover/index.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function UserContent() {
+  const { logout, address, username } = useUserInfo();
+  const [logouting, setLogouting] = (0, import_react15.useState)(false);
+  const onLogout = async () => {
+    if (logouting) return;
+    try {
+      setLogouting(true);
+      await logout();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLogouting(false);
+    }
+  };
+  const UserItem = ({
+    children,
+    icon,
+    rightIcon,
+    onClick
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "matchid-user-popover-item", onClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `matchid-user-popover-item-content`, children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "matchid-user-popover-item-text", children })
+      ] }),
+      rightIcon
+    ] });
+  };
+  const UserDivider = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `matchid-user-popover-divider` });
+  };
+  const [usernameOpen, setUsernameOpen] = (0, import_react15.useState)(false);
+  const [copied, setCopied] = useCopyClipboard();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "matchid-user-popover-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "matchid-user-popover-list", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UserItem, { onClick: () => {
+        setCopied(address);
+      }, icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UserDivider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UserItem, { onClick: () => {
+        setUsernameOpen(true);
+      }, icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || "Set a username" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { onClick: onLogout, loading: logouting, children: "Disconnect" }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UsernameModal, { isOpen: usernameOpen, onClose: () => {
+      setUsernameOpen(false);
+    }, onSuccess: () => {
+      setUsernameOpen(false);
+    } })
+  ] });
+}
+function UserPopover({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Popover, { ...props, content: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UserContent, {}), children });
+}
+
 // src/components/LoginButton/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function LoginButton({
   loginRender,
   methods,
   onLoginClick,
+  popoverPosition = "right",
+  popoverType = "hover",
+  popoverGap = 20,
   ...props
 }) {
   const { isLogin, username } = useUserInfo();
-  const [loginOpen, setLoginOpen] = (0, import_react13.useState)(false);
+  const [loginOpen, setLoginOpen] = (0, import_react16.useState)(false);
   if (!isLogin) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LoginModal, { methods, isOpen: loginOpen, onClose: () => setLoginOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UnLoginIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Login" })
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LoginModal, { methods, isOpen: loginOpen, onClose: () => setLoginOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UnLoginIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: "Login" })
       ] })
     ] });
   }
-  return loginRender ? loginRender() : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LoginIcon_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: username ? truncateAddress(username) : "MatchID User" })
-  ] });
+  return loginRender ? { loginRender } : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LoginIcon_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: username ? truncateAddress(username) : "MatchID User" })
+  ] }) });
 }
 
 // src/components/UsernameModal/index.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 
 // src/assets/icon/InfoRoundIcon.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function InfoRoundIcon({
   size,
   color = "#6E6E6E",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "path",
       {
         fillRule: "evenodd",
@@ -1988,19 +2307,19 @@ function InfoRoundIcon({
         fill: color
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
   ] });
 }
 
 // src/components/UsernameModal/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ValidItem = ({
   success = false,
   text
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
-    success ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(InfoRoundIcon, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: text })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
+    success ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InfoRoundIcon, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: text })
   ] });
 };
 function UsernameModal({
@@ -2011,22 +2330,22 @@ 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_react17.useState)(username);
+  const [error, setError] = (0, import_react17.useState)("");
+  (0, import_react17.useEffect)(() => {
     if (isOpen) {
       setVal(username);
       setError("");
     }
   }, [isOpen]);
-  const isValid = (0, import_react14.useMemo)(() => {
+  const isValid = (0, import_react17.useMemo)(() => {
     return isValidUsername(val);
   }, [val]);
-  const isLength = (0, import_react14.useMemo)(() => {
+  const isLength = (0, import_react17.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_react17.useState)(false);
   const onSubmit = async () => {
     if (isSubmitting) return;
     try {
@@ -2046,8 +2365,8 @@ function UsernameModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set User Name", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "matchid-username-box", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Field, { label: "User Name", error, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || (username ? "Edit User Name" : "Set User Name"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "matchid-username-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Field, { label: "User Name", error, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Input,
       {
         placeholder: "Enter Your User Name",
@@ -2058,20 +2377,20 @@ function UsernameModal({
         value: val
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "matchid-valid", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "matchid-valid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         ValidItem,
         {
           success: isValid,
           text: "Name can be composed of numbers and letters as well as characters"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ValidItem, { success: isLength, text: "No less than 2 characters" })
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ValidItem, { success: isLength, text: "No less than 2 characters" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { disabled: !isSafe, loading: isSubmitting, style: {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { disabled: !isSafe, loading: isSubmitting, style: {
       marginTop: "64px"
     }, onClick: onSubmit, size: "lg", block: true, highlight: true, children: "Confirm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { style: {
       marginTop: "24px"
     }, onClick: props.onClose, size: "lg", block: true, children: "Next Time" })
   ] }) });