@matchain/matchid-sdk-react 0.1.18 → 0.1.19

package/dist/index.mjs

@@ -478,23 +478,41 @@ function CopyIcon({ size = 20, color = "black", ...props }) {
   ) });
 }
 
+// src/assets/icon/LinkedinIcon.tsx
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+function LinkedinIcon({
+  size = 40,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs15("svg", { width: size, height: size, ...props, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx25("rect", { width: "40", height: "40", rx: "8", fill: "#0A66C2" }),
+    /* @__PURE__ */ jsx25(
+      "path",
+      {
+        d: "M29.376 9H10.624C10.1933 9 9.78023 9.1711 9.47567 9.47567C9.1711 9.78023 9 10.1933 9 10.624V29.376C9 29.8067 9.1711 30.2198 9.47567 30.5243C9.78023 30.8289 10.1933 31 10.624 31H29.376C29.8067 31 30.2198 30.8289 30.5243 30.5243C30.8289 30.2198 31 29.8067 31 29.376V10.624C31 10.1933 30.8289 9.78023 30.5243 9.47567C30.2198 9.1711 29.8067 9 29.376 9ZM15.5572 27.7413H12.2496V17.2347H15.5572V27.7413ZM13.9011 15.7788C13.5259 15.7766 13.1598 15.6634 12.8488 15.4534C12.5379 15.2434 12.2962 14.946 12.1541 14.5987C12.0121 14.2514 11.9761 13.8699 12.0507 13.5022C12.1253 13.1345 12.3072 12.7971 12.5733 12.5326C12.8395 12.2682 13.178 12.0885 13.5462 12.0163C13.9144 11.944 14.2957 11.9825 14.642 12.1267C14.9884 12.271 15.2842 12.5147 15.4923 12.8269C15.7003 13.1392 15.8111 13.5061 15.8108 13.8813C15.8144 14.1324 15.7673 14.3818 15.6724 14.6144C15.5776 14.847 15.4368 15.0582 15.2586 15.2352C15.0804 15.4123 14.8684 15.5517 14.6351 15.6451C14.4019 15.7384 14.1523 15.7839 13.9011 15.7788ZM27.7489 27.7504H24.4428V22.0106C24.4428 20.3178 23.7232 19.7953 22.7943 19.7953C21.8135 19.7953 20.851 20.5347 20.851 22.0533V27.7504H17.5433V17.2424H20.7242V18.6983H20.7669C21.0863 18.0521 22.2046 16.9475 23.9111 16.9475C25.7567 16.9475 27.7504 18.0429 27.7504 21.2513L27.7489 27.7504Z",
+        fill: "white"
+      }
+    )
+  ] });
+}
+
 // src/components/Modal/index.tsx
-import { Fragment, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 function Modal({
   children,
   isOpen,
   width = 480,
   className = ""
 }) {
-  return isOpen ? /* @__PURE__ */ jsx25(
+  return isOpen ? /* @__PURE__ */ jsx26(
     "div",
     {
       className: "matchid-overlay",
-      children: /* @__PURE__ */ jsx25("div", { className: `matchid-modal ${className}`, style: {
+      children: /* @__PURE__ */ jsx26("div", { className: `matchid-modal ${className}`, style: {
         width
       }, children })
     }
-  ) : /* @__PURE__ */ jsx25(Fragment, {});
+  ) : /* @__PURE__ */ jsx26(Fragment, {});
 }
 function ModalWithHeader({
   children,
@@ -505,13 +523,13 @@ function ModalWithHeader({
   showClose = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(Modal, { ...props, children: [
-    /* @__PURE__ */ jsxs15("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
-      /* @__PURE__ */ jsxs15("div", { className: "matchid-modal-header-content", children: [
-        onBack && /* @__PURE__ */ jsx25(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
-        /* @__PURE__ */ jsx25("span", { className: "matchid-modal-header-title", children: title })
+  return /* @__PURE__ */ jsxs16(Modal, { ...props, children: [
+    /* @__PURE__ */ jsxs16("div", { className: `matchid-modal-header ${showBorder ? "matchid-modal-header-border" : ""}`, children: [
+      /* @__PURE__ */ jsxs16("div", { className: "matchid-modal-header-content", children: [
+        onBack && /* @__PURE__ */ jsx26(ArrowLeftIcon, { className: "matchid-modal-header-back", onClick: onBack }),
+        /* @__PURE__ */ jsx26("span", { className: "matchid-modal-header-title", children: title })
       ] }),
-      onClose && /* @__PURE__ */ jsx25(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
+      onClose && /* @__PURE__ */ jsx26(CloseRoundIcon, { className: "matchid-modal-header-close", onClick: onClose })
     ] }),
     children
   ] });
@@ -522,7 +540,7 @@ import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } f
 
 // src/components/Input/index.tsx
 import { useState } from "react";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function Input({
   onChange,
   type,
@@ -531,22 +549,22 @@ function Input({
   ...props
 }) {
   const [inputType, setInputType] = useState(type);
-  return /* @__PURE__ */ jsxs16("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
-    /* @__PURE__ */ jsx26("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
-    props.value.length > 0 && /* @__PURE__ */ jsx26(DeleteRoundIcon, { onClick: (e) => {
+  return /* @__PURE__ */ jsxs17("div", { className: `matchid-input-box ${props.value.length > 0 ? "matchid-input-has-content" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx27("input", { type: inputType, onChange, ...props, className: "matchid-input-field" }),
+    props.value.length > 0 && /* @__PURE__ */ jsx27(DeleteRoundIcon, { onClick: (e) => {
       if (onChange) {
         onChange({ target: { value: "" } });
       }
     }, className: "matchid-input-delete-icon", color: "var(--matchid-input-delete-icon-color)" }),
-    type === "password" && /* @__PURE__ */ jsx26("div", { className: "matchid-input-eye-icon", onClick: () => {
+    type === "password" && /* @__PURE__ */ jsx27("div", { className: "matchid-input-eye-icon", onClick: () => {
       setInputType(inputType === "password" ? "text" : "password");
-    }, children: inputType === "password" ? /* @__PURE__ */ jsx26(CloseEyeIcon, {}) : /* @__PURE__ */ jsx26(OpenEyeIcon, {}) }),
+    }, children: inputType === "password" ? /* @__PURE__ */ jsx27(CloseEyeIcon, {}) : /* @__PURE__ */ jsx27(OpenEyeIcon, {}) }),
     after
   ] });
 }
 
 // src/components/Field/index.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function Field({
   label,
   children,
@@ -554,18 +572,18 @@ function Field({
   required,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs17("div", { className: `matchid-field-box ${className}`, children: [
-    /* @__PURE__ */ jsxs17("div", { className: "matchid-field-label", children: [
-      required && /* @__PURE__ */ jsx27("span", { className: "matchid-field-required", children: "*" }),
+  return /* @__PURE__ */ jsxs18("div", { className: `matchid-field-box ${className}`, children: [
+    /* @__PURE__ */ jsxs18("div", { className: "matchid-field-label", children: [
+      required && /* @__PURE__ */ jsx28("span", { className: "matchid-field-required", children: "*" }),
       label
     ] }),
     children,
-    error && /* @__PURE__ */ jsx27("div", { className: "matchid-field-error", children: error })
+    error && /* @__PURE__ */ jsx28("div", { className: "matchid-field-error", children: error })
   ] });
 }
 
 // src/components/Button/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Button({
   size = "df",
   disabled = false,
@@ -584,7 +602,7 @@ function Button({
       onClick && onClick();
     }
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "button",
     {
       type,
@@ -594,7 +612,7 @@ function Button({
         ...style
       },
       onClick: onAction,
-      children: loading ? /* @__PURE__ */ jsx28(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
+      children: loading ? /* @__PURE__ */ jsx29(LoadingIcon_default, { className: "matchid-btn-loading-icon", color: "var(--matchid-btn-loading-color)" }) : children
     }
   );
 }
@@ -1304,7 +1322,7 @@ function useCopyClipboard(timeout = 500) {
 }
 
 // src/components/PasswordModal/index.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function PasswordModal({
   title,
   isOpen,
@@ -1350,13 +1368,13 @@ function PasswordModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx29(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set Password", children: /* @__PURE__ */ jsxs18("div", { className: "matchid-password-box", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "matchid-password-header", children: [
-      /* @__PURE__ */ jsx29("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ jsx29(PasswordRoundIcon, {}) }),
-      /* @__PURE__ */ jsx29("div", { className: "matchid-password-header-content", children: "Please set the wallet password that will be used to recover the wallet" })
+  return /* @__PURE__ */ jsx30(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Set Password", children: /* @__PURE__ */ jsxs19("div", { className: "matchid-password-box", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "matchid-password-header", children: [
+      /* @__PURE__ */ jsx30("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ jsx30(PasswordRoundIcon, {}) }),
+      /* @__PURE__ */ jsx30("div", { className: "matchid-password-header-content", children: "Please set the wallet password that will be used to recover the wallet" })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "matchid-password-content", children: [
-      /* @__PURE__ */ jsx29(Field, { label: "Password", error: password.length > 0 && passwordError, children: /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsxs19("div", { className: "matchid-password-content", children: [
+      /* @__PURE__ */ jsx30(Field, { label: "Password", error: password.length > 0 && passwordError, children: /* @__PURE__ */ jsx30(
         Input,
         {
           placeholder: "Enter the Password",
@@ -1366,7 +1384,7 @@ function PasswordModal({
           value: password
         }
       ) }),
-      /* @__PURE__ */ jsx29(Field, { label: "Re Password", error: rePassword.length > 0 ? rePasswordError || error : error, children: /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(Field, { label: "Re Password", error: rePassword.length > 0 ? rePasswordError || error : error, children: /* @__PURE__ */ jsx30(
         Input,
         {
           placeholder: "Re Enter the Password",
@@ -1377,7 +1395,7 @@ function PasswordModal({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       Button,
       {
         disabled: password.length == 0 || !!passwordError || !!rePasswordError,
@@ -1394,7 +1412,7 @@ function PasswordModal({
 
 // src/components/RecoveryModal/index.tsx
 import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function RecoveryModal({
   title,
   isOpen,
@@ -1430,12 +1448,12 @@ function RecoveryModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx30(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Recover Wallet", children: /* @__PURE__ */ jsxs19("div", { className: "matchid-password-box", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "matchid-password-header", children: [
-      /* @__PURE__ */ jsx30("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ jsx30(PasswordRoundIcon, {}) }),
-      /* @__PURE__ */ jsx30("div", { className: "matchid-password-header-content", children: "Please enter your password to recover your wallet" })
+  return /* @__PURE__ */ jsx31(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || "Recover Wallet", children: /* @__PURE__ */ jsxs20("div", { className: "matchid-password-box", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "matchid-password-header", children: [
+      /* @__PURE__ */ jsx31("div", { className: "matchid-password-header-icon", children: /* @__PURE__ */ jsx31(PasswordRoundIcon, {}) }),
+      /* @__PURE__ */ jsx31("div", { className: "matchid-password-header-content", children: "Please enter your password to recover your wallet" })
     ] }),
-    /* @__PURE__ */ jsx30("div", { className: "matchid-password-content", children: /* @__PURE__ */ jsx30(Field, { label: "Password", error: password.length > 0 ? passwordError || error : error, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31("div", { className: "matchid-password-content", children: /* @__PURE__ */ jsx31(Field, { label: "Password", error: password.length > 0 ? passwordError || error : error, children: /* @__PURE__ */ jsx31(
       Input,
       {
         placeholder: "Enter the Password",
@@ -1445,7 +1463,7 @@ function RecoveryModal({
         value: password
       }
     ) }) }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       Button,
       {
         disabled: password.length == 0 || !!passwordError,
@@ -1461,13 +1479,13 @@ function RecoveryModal({
 }
 
 // src/context/BusinessProvider.tsx
-import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function BusinessProvider({ children }) {
   const { overview, token } = useUserInfo();
   const { recoveryModal } = useStore_default();
-  return /* @__PURE__ */ jsxs20(Fragment2, { children: [
-    /* @__PURE__ */ jsx31(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx32(PasswordModal, { isOpen: !!token && !!overview && !overview.address && !!overview.did, showClose: false }),
+    /* @__PURE__ */ jsx32(
       RecoveryModal,
       {
         isOpen: !!token && !!overview && !!overview.address && recoveryModal.open,
@@ -1480,11 +1498,11 @@ function BusinessProvider({ children }) {
 }
 
 // src/context/index.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Providers = ({ children }) => {
   return (
     // <MpcWalletProvider>
-    /* @__PURE__ */ jsx32(BusinessProvider, { children })
+    /* @__PURE__ */ jsx33(BusinessProvider, { children })
   );
 };
 var context_default = Providers;
@@ -1731,7 +1749,7 @@ function useInit({
 
 // src/MatchContext.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var MatchContext = createContext(void 0);
 var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) => {
@@ -1744,7 +1762,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
   useWalletInit({
     refreshOverview: loadOverview
   });
-  return /* @__PURE__ */ jsx33(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx34(
     MatchContext.Provider,
     {
       value: {
@@ -1754,7 +1772,7 @@ var MatchProvider = ({ children, appid, events, theme = "light", endpoints }) =>
         login,
         theme
       },
-      children: /* @__PURE__ */ jsx33(context_default, { children })
+      children: /* @__PURE__ */ jsx34(context_default, { children })
     }
   ) });
 };
@@ -1789,7 +1807,7 @@ import { useEffect as useEffect10, useState as useState9 } from "react";
 
 // src/components/EmailModal/StepEmail.tsx
 import { useEffect as useEffect8, useMemo as useMemo4, useState as useState7 } from "react";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function StepEmail(props) {
   const [emailVal, setEmailVal] = useState7("");
   useEffect8(() => {
@@ -1803,8 +1821,8 @@ function StepEmail(props) {
   const onContinue = async () => {
     props.onContinue(emailVal);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "matchid-email-email-box", children: [
-    /* @__PURE__ */ jsx34(Field, { label: "Email Address", children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs22("div", { className: "matchid-email-email-box", children: [
+    /* @__PURE__ */ jsx35(Field, { label: "Email Address", children: /* @__PURE__ */ jsx35(
       Input,
       {
         placeholder: "Enter Your Email Address",
@@ -1812,7 +1830,7 @@ function StepEmail(props) {
         value: emailVal
       }
     ) }),
-    /* @__PURE__ */ jsx34(Button, { disabled: !canContinue, style: {
+    /* @__PURE__ */ jsx35(Button, { disabled: !canContinue, style: {
       marginTop: "64px"
     }, onClick: onContinue, size: "lg", block: true, highlight: true, children: "Continue" })
   ] });
@@ -1826,7 +1844,7 @@ var EMAIL_INTERVAL = 60;
 var EMAIL_CODE_LENGTH = 6;
 
 // src/components/EmailModal/StepVerify.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function StepVerify(props) {
   const { getLoginEmailCode, loginByEmail } = useUserInfo();
   const [error, setError] = useState8("");
@@ -1895,22 +1913,22 @@ function StepVerify(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs22("div", { className: "matchid-email-verify-box", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "matchid-email-verify-header", children: [
-      /* @__PURE__ */ jsx35("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ jsx35(EmailLineIcon, {}) }),
-      /* @__PURE__ */ jsxs22("div", { className: "matchid-email-verify-header-content", children: [
-        /* @__PURE__ */ jsx35("div", { className: "matchid-email-verify-header-value", children: props.email }),
-        /* @__PURE__ */ jsx35("div", { className: "matchid-email-verify-header-tips", children: "We have sent a verification code to your email" })
+  return /* @__PURE__ */ jsxs23("div", { className: "matchid-email-verify-box", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "matchid-email-verify-header", children: [
+      /* @__PURE__ */ jsx36("div", { className: "matchid-email-verify-header-icon", children: /* @__PURE__ */ jsx36(EmailLineIcon, {}) }),
+      /* @__PURE__ */ jsxs23("div", { className: "matchid-email-verify-header-content", children: [
+        /* @__PURE__ */ jsx36("div", { className: "matchid-email-verify-header-value", children: props.email }),
+        /* @__PURE__ */ jsx36("div", { className: "matchid-email-verify-header-tips", children: "We have sent a verification code to your email" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx35(Field, { label: "Verification Code", error, children: /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(Field, { label: "Verification Code", error, children: /* @__PURE__ */ jsx36(
       Input,
       {
         placeholder: "Enter the code",
         maxLength: codeLength,
         onChange: (e) => setCode(e.target.value),
         value: code,
-        after: /* @__PURE__ */ jsx35(
+        after: /* @__PURE__ */ jsx36(
           Button,
           {
             highlight: true,
@@ -1929,12 +1947,12 @@ function StepVerify(props) {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx35(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: "Continue" })
+    /* @__PURE__ */ jsx36(Button, { disabled: !canContinue, highlight: true, block: true, size: "lg", onClick: onContinue, children: "Continue" })
   ] });
 }
 
 // src/components/EmailModal/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function EmailModal({
   isOpen = false,
   width = 480,
@@ -1950,7 +1968,7 @@ function EmailModal({
       setEmailVal("");
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     ModalWithHeader,
     {
       isOpen,
@@ -1958,17 +1976,17 @@ function EmailModal({
       onClose,
       title: "Email",
       onBack: step == "verify" ? () => setStep("input") : onBack,
-      children: step === "input" ? /* @__PURE__ */ jsx36(StepEmail, { email: emailVal, onContinue: (email) => {
+      children: step === "input" ? /* @__PURE__ */ jsx37(StepEmail, { email: emailVal, onContinue: (email) => {
         setEmailVal(email);
         setStep("verify");
-      } }) : /* @__PURE__ */ jsx36(StepVerify, { email: emailVal, onSuccess: onLogin })
+      } }) : /* @__PURE__ */ jsx37(StepVerify, { email: emailVal, onSuccess: onLogin })
     }
   );
 }
 
 // src/components/Popover/index.tsx
 import { useState as useState10 } from "react";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function Popover({
   children,
   content,
@@ -1978,7 +1996,7 @@ function Popover({
   gap = "20px"
 }) {
   const [active, setActive] = useState10(false);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       onClick: () => {
@@ -1989,9 +2007,9 @@ function Popover({
       className: `matchid-popover-box matchid-popover-${position} matchid-popover-${type} ${className} ${type == "click" && active ? "matchid-popover-click-active" : ""}`,
       children: [
         children,
-        /* @__PURE__ */ jsx37("div", { style: {
+        /* @__PURE__ */ jsx38("div", { style: {
           paddingTop: gap
-        }, children: /* @__PURE__ */ jsx37("div", { className: `matchid-popover-content`, children: content }) })
+        }, children: /* @__PURE__ */ jsx38("div", { className: `matchid-popover-content`, children: content }) })
       ]
     }
   );
@@ -1999,7 +2017,7 @@ function Popover({
 
 // src/components/LoginBox/index.tsx
 import { useMemo as useMemo6, useState as useState11 } from "react";
-import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 function LoginBox({
   methods,
   inModal = false
@@ -2021,66 +2039,71 @@ function LoginBox({
     name,
     onClick
   }) => {
-    return /* @__PURE__ */ jsxs24("div", { className: "matchid-login-method", onClick, children: [
-      /* @__PURE__ */ jsxs24("div", { className: "matchid-login-method-content", children: [
-        /* @__PURE__ */ jsx38("div", { className: "matchid-login-method-icon", children: icon }),
-        /* @__PURE__ */ jsx38("span", { className: "matchid-login-method-name", children: name })
+    return /* @__PURE__ */ jsxs25("div", { className: "matchid-login-method", onClick, children: [
+      /* @__PURE__ */ jsxs25("div", { className: "matchid-login-method-content", children: [
+        /* @__PURE__ */ jsx39("div", { className: "matchid-login-method-icon", children: icon }),
+        /* @__PURE__ */ jsx39("span", { className: "matchid-login-method-name", children: name })
       ] }),
-      /* @__PURE__ */ jsx38(ArrowRightIcon, { className: "matchid-login-method-arrow", size: 20, color: "var(--matchid-arrow-color)" })
+      /* @__PURE__ */ jsx39(ArrowRightIcon, { className: "matchid-login-method-arrow", size: 20, color: "var(--matchid-arrow-color)" })
     ] });
   };
   const methodMap = {
     wallet: {
-      icon: /* @__PURE__ */ jsx38(WalletIcon, {}),
+      icon: /* @__PURE__ */ jsx39(WalletIcon, {}),
       name: "Wallet",
       onClick: () => login("wallet")
     },
     email: {
-      icon: /* @__PURE__ */ jsx38(EmailIcon, {}),
+      icon: /* @__PURE__ */ jsx39(EmailIcon, {}),
       name: "Email",
       onClick: () => {
         setEmailOpen(true);
       }
     },
     google: {
-      icon: /* @__PURE__ */ jsx38(GoogleIcon, {}),
+      icon: /* @__PURE__ */ jsx39(GoogleIcon, {}),
       name: "Google",
       onClick: () => login("google")
     },
     twitter: {
-      icon: /* @__PURE__ */ jsx38(XIcon, {}),
+      icon: /* @__PURE__ */ jsx39(XIcon, {}),
       name: "X",
       onClick: () => login("twitter")
     },
     telegram: {
-      icon: /* @__PURE__ */ jsx38(TelegramIcon, {}),
+      icon: /* @__PURE__ */ jsx39(TelegramIcon, {}),
       name: "Telegram",
       onClick: () => login("telegram")
     },
     github: {
-      icon: /* @__PURE__ */ jsx38(GithubIcon, {}),
+      icon: /* @__PURE__ */ jsx39(GithubIcon, {}),
       name: "Github",
       onClick: () => login("github")
     },
     discord: {
-      icon: /* @__PURE__ */ jsx38(DiscordIcon, {}),
+      icon: /* @__PURE__ */ jsx39(DiscordIcon, {}),
       name: "Discord",
       onClick: () => login("discord")
+    },
+    linkedin: {
+      icon: /* @__PURE__ */ jsx39(LinkedinIcon, {}),
+      name: "Linkedin",
+      onClick: () => login("linkedin")
     }
   };
-  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
-    (!inModal || !emailOpen) && /* @__PURE__ */ jsx38("div", { className: "matchid-login-box", children: methodList.map((m) => {
-      return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs25(Fragment3, { children: [
+    (!inModal || !emailOpen) && /* @__PURE__ */ jsx39("div", { className: "matchid-login-box", children: methodList.map((m) => {
+      return /* @__PURE__ */ jsx39(
         LoginItem,
         {
-          icon: methodMap[m].icon,
-          name: methodMap[m].name,
-          onClick: methodMap[m].onClick
+          icon: methodMap[m]?.icon,
+          name: methodMap[m]?.name,
+          onClick: methodMap[m]?.onClick
         },
         m
       );
     }) }),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       EmailModal,
       {
         isOpen: emailOpen,
@@ -2099,39 +2122,39 @@ function LoginBox({
 import { useState as useState13 } from "react";
 
 // src/components/LoginPanel/index.tsx
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function LoginPanel({
   header,
   onClose,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25("div", { className: "matchid-login-panel", children: [
-    header ? header : /* @__PURE__ */ jsxs25("div", { className: "matchid-login-panel-header", children: [
-      /* @__PURE__ */ jsxs25("div", { className: "matchid-login-panel-header-content", children: [
-        /* @__PURE__ */ jsx39("div", { className: "matchid-login-panel-header-title", children: "Log in / Sign up" }),
-        /* @__PURE__ */ jsx39("div", { className: "matchid-login-panel-header-subtilte", children: "You can use the following methods" })
+  return /* @__PURE__ */ jsxs26("div", { className: "matchid-login-panel", children: [
+    header ? header : /* @__PURE__ */ jsxs26("div", { className: "matchid-login-panel-header", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "matchid-login-panel-header-content", children: [
+        /* @__PURE__ */ jsx40("div", { className: "matchid-login-panel-header-title", children: "Log in / Sign up" }),
+        /* @__PURE__ */ jsx40("div", { className: "matchid-login-panel-header-subtilte", children: "You can use the following methods" })
       ] }),
-      onClose && /* @__PURE__ */ jsx39("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ jsx39(CloseRoundIcon, {}) })
+      onClose && /* @__PURE__ */ jsx40("div", { className: "matchid-login-panel-header-close", onClick: onClose, children: /* @__PURE__ */ jsx40(CloseRoundIcon, {}) })
     ] }),
-    /* @__PURE__ */ jsx39("div", { className: "matchid-login-panel-divide" }),
-    /* @__PURE__ */ jsx39(LoginBox, { ...props })
+    /* @__PURE__ */ jsx40("div", { className: "matchid-login-panel-divide" }),
+    /* @__PURE__ */ jsx40(LoginBox, { ...props })
   ] });
 }
 
 // src/components/LoginModal/index.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function LoginModal({
   isOpen = false,
   width = 480,
   ...props
 }) {
   const { isLogin } = useUserInfo();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Modal,
     {
       isOpen: isOpen && !isLogin,
       width,
-      children: /* @__PURE__ */ jsx40(LoginPanel, { ...props, inModal: true })
+      children: /* @__PURE__ */ jsx41(LoginPanel, { ...props, inModal: true })
     }
   );
 }
@@ -2140,10 +2163,10 @@ function LoginModal({
 import { useState as useState12 } from "react";
 
 // src/assets/icon/ProfileIcon.tsx
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function ProfileIcon({ size = 24, color = "black", ...props }) {
-  return /* @__PURE__ */ jsxs26("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs27("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx42(
       "path",
       {
         fillRule: "evenodd",
@@ -2152,7 +2175,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
         fill: color
       }
     ),
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(
       "path",
       {
         fillRule: "evenodd",
@@ -2165,7 +2188,7 @@ function ProfileIcon({ size = 24, color = "black", ...props }) {
 }
 
 // src/components/UserPopover/index.tsx
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 function UserContent() {
   const { logout, address, username } = useUserInfo();
   const [logouting, setLogouting] = useState12(false);
@@ -2186,31 +2209,31 @@ function UserContent() {
     rightIcon,
     onClick
   }) => {
-    return /* @__PURE__ */ jsxs27("div", { className: "matchid-user-popover-item", onClick, children: [
-      /* @__PURE__ */ jsxs27("div", { className: `matchid-user-popover-item-content`, children: [
+    return /* @__PURE__ */ jsxs28("div", { className: "matchid-user-popover-item", onClick, children: [
+      /* @__PURE__ */ jsxs28("div", { className: `matchid-user-popover-item-content`, children: [
         icon,
-        /* @__PURE__ */ jsx42("div", { className: "matchid-user-popover-item-text", children })
+        /* @__PURE__ */ jsx43("div", { className: "matchid-user-popover-item-text", children })
       ] }),
       rightIcon
     ] });
   };
   const UserDivider = () => {
-    return /* @__PURE__ */ jsx42("div", { className: `matchid-user-popover-divider` });
+    return /* @__PURE__ */ jsx43("div", { className: `matchid-user-popover-divider` });
   };
   const [usernameOpen, setUsernameOpen] = useState12(false);
   const [copied, setCopied] = useCopyClipboard();
-  return /* @__PURE__ */ jsxs27("div", { className: "matchid-user-popover-content", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "matchid-user-popover-list", children: [
-      /* @__PURE__ */ jsx42(UserItem, { onClick: () => {
+  return /* @__PURE__ */ jsxs28("div", { className: "matchid-user-popover-content", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "matchid-user-popover-list", children: [
+      /* @__PURE__ */ jsx43(UserItem, { onClick: () => {
         setCopied(address);
-      }, icon: copied ? /* @__PURE__ */ jsx42(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ jsx42(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ jsx42(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address) }),
-      /* @__PURE__ */ jsx42(UserDivider, {}),
-      /* @__PURE__ */ jsx42(UserItem, { onClick: () => {
+      }, icon: copied ? /* @__PURE__ */ jsx43(CheckIcon, { size: 20, color: "#0ecb81" }) : /* @__PURE__ */ jsx43(CopyIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ jsx43(CheckIcon, { size: 20, color: "var(--icon-color)" }), children: truncateAddress(address) }),
+      /* @__PURE__ */ jsx43(UserDivider, {}),
+      /* @__PURE__ */ jsx43(UserItem, { onClick: () => {
         setUsernameOpen(true);
-      }, icon: /* @__PURE__ */ jsx42(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ jsx42(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || "Set a username" })
+      }, icon: /* @__PURE__ */ jsx43(ProfileIcon, { size: 20, color: "var(--icon-color)" }), rightIcon: /* @__PURE__ */ jsx43(ArrowRightIcon, { size: 20, color: "var(--icon-color)" }), children: username || "Set a username" })
     ] }),
-    /* @__PURE__ */ jsx42(Button, { onClick: onLogout, loading: logouting, children: "Disconnect" }),
-    /* @__PURE__ */ jsx42(UsernameModal, { isOpen: usernameOpen, onClose: () => {
+    /* @__PURE__ */ jsx43(Button, { onClick: onLogout, loading: logouting, children: "Disconnect" }),
+    /* @__PURE__ */ jsx43(UsernameModal, { isOpen: usernameOpen, onClose: () => {
       setUsernameOpen(false);
     }, onSuccess: () => {
       setUsernameOpen(false);
@@ -2221,11 +2244,11 @@ function UserPopover({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(Popover, { ...props, content: /* @__PURE__ */ jsx42(UserContent, {}), children });
+  return /* @__PURE__ */ jsx43(Popover, { ...props, content: /* @__PURE__ */ jsx43(UserContent, {}), children });
 }
 
 // src/components/LoginButton/index.tsx
-import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 function LoginButton({
   loginRender,
   methods,
@@ -2238,17 +2261,17 @@ function LoginButton({
   const { isLogin, username } = useUserInfo();
   const [loginOpen, setLoginOpen] = useState13(false);
   if (!isLogin) {
-    return /* @__PURE__ */ jsxs28(Fragment4, { children: [
-      /* @__PURE__ */ jsx43(LoginModal, { methods, isOpen: loginOpen, onClose: () => setLoginOpen(false) }),
-      /* @__PURE__ */ jsxs28(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
-        /* @__PURE__ */ jsx43(UnLoginIcon_default, {}),
-        /* @__PURE__ */ jsx43("span", { children: "Login" })
+    return /* @__PURE__ */ jsxs29(Fragment4, { children: [
+      /* @__PURE__ */ jsx44(LoginModal, { methods, isOpen: loginOpen, onClose: () => setLoginOpen(false) }),
+      /* @__PURE__ */ jsxs29(Button, { className: "matchid-unlogin-btn", ...props, highlight: true, onClick: () => setLoginOpen(true), children: [
+        /* @__PURE__ */ jsx44(UnLoginIcon_default, {}),
+        /* @__PURE__ */ jsx44("span", { children: "Login" })
       ] })
     ] });
   }
-  return loginRender ? { loginRender } : /* @__PURE__ */ jsx43(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ jsxs28(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
-    /* @__PURE__ */ jsx43(LoginIcon_default, {}),
-    /* @__PURE__ */ jsx43("span", { children: username ? truncateAddress(username) : "MatchID User" })
+  return loginRender ? { loginRender } : /* @__PURE__ */ jsx44(UserPopover, { position: popoverPosition, type: popoverType, gap: popoverGap, children: /* @__PURE__ */ jsxs29(Button, { onClick: onLoginClick, className: "matchid-login-btn", ...props, children: [
+    /* @__PURE__ */ jsx44(LoginIcon_default, {}),
+    /* @__PURE__ */ jsx44("span", { children: username ? truncateAddress(username) : "MatchID User" })
   ] }) });
 }
 
@@ -2256,14 +2279,14 @@ function LoginButton({
 import { useEffect as useEffect11, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/assets/icon/InfoRoundIcon.tsx
-import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function InfoRoundIcon({
   size,
   color = "#6E6E6E",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs29("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsx44("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs30("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsx45("g", { clipPath: "url(#clip0_418_7746)", children: /* @__PURE__ */ jsx45(
       "path",
       {
         fillRule: "evenodd",
@@ -2272,19 +2295,19 @@ function InfoRoundIcon({
         fill: color
       }
     ) }),
-    /* @__PURE__ */ jsx44("defs", { children: /* @__PURE__ */ jsx44("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ jsx44("rect", { width: "16", height: "16", fill: "white" }) }) })
+    /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsx45("clipPath", { id: "clip0_418_7746", children: /* @__PURE__ */ jsx45("rect", { width: "16", height: "16", fill: "white" }) }) })
   ] });
 }
 
 // src/components/UsernameModal/index.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var ValidItem = ({
   success = false,
   text
 }) => {
-  return /* @__PURE__ */ jsxs30("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
-    success ? /* @__PURE__ */ jsx45(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ jsx45(InfoRoundIcon, { size: 16 }),
-    /* @__PURE__ */ jsx45("span", { children: text })
+  return /* @__PURE__ */ jsxs31("div", { className: `matchid-valid-status-item matchid-valid-status-${success ? "success" : "error"}`, children: [
+    success ? /* @__PURE__ */ jsx46(CheckRoundIcon, { size: 16 }) : /* @__PURE__ */ jsx46(InfoRoundIcon, { size: 16 }),
+    /* @__PURE__ */ jsx46("span", { children: text })
   ] });
 };
 function UsernameModal({
@@ -2330,8 +2353,8 @@ function UsernameModal({
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx45(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || (username ? "Edit User Name" : "Set User Name"), children: /* @__PURE__ */ jsxs30("div", { className: "matchid-username-box", children: [
-    /* @__PURE__ */ jsx45(Field, { label: "User Name", error, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(ModalWithHeader, { isOpen: isOpen && isLogin, ...props, title: title || (username ? "Edit User Name" : "Set User Name"), children: /* @__PURE__ */ jsxs31("div", { className: "matchid-username-box", children: [
+    /* @__PURE__ */ jsx46(Field, { label: "User Name", error, children: /* @__PURE__ */ jsx46(
       Input,
       {
         placeholder: "Enter Your User Name",
@@ -2342,20 +2365,20 @@ function UsernameModal({
         value: val
       }
     ) }),
-    /* @__PURE__ */ jsxs30("div", { className: "matchid-valid", children: [
-      /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsxs31("div", { className: "matchid-valid", children: [
+      /* @__PURE__ */ jsx46(
         ValidItem,
         {
           success: isValid,
           text: "Name can be composed of numbers and letters as well as characters"
         }
       ),
-      /* @__PURE__ */ jsx45(ValidItem, { success: isLength, text: "No less than 2 characters" })
+      /* @__PURE__ */ jsx46(ValidItem, { success: isLength, text: "No less than 2 characters" })
     ] }),
-    /* @__PURE__ */ jsx45(Button, { disabled: !isSafe, loading: isSubmitting, style: {
+    /* @__PURE__ */ jsx46(Button, { disabled: !isSafe, loading: isSubmitting, style: {
       marginTop: "64px"
     }, onClick: onSubmit, size: "lg", block: true, highlight: true, children: "Confirm" }),
-    /* @__PURE__ */ jsx45(Button, { style: {
+    /* @__PURE__ */ jsx46(Button, { style: {
       marginTop: "24px"
     }, onClick: props.onClose, size: "lg", block: true, children: "Next Time" })
   ] }) });