@matchain/matchid-sdk-react 0.1.56-alpha.12 → 0.1.56-alpha.13

package/dist/components.d.mts

@@ -1,6 +1,6 @@
-export { B as BTCModal, d as EVMModal, E as EmailModal, L as LoginBox, a as LoginButton, c as LoginModal, b as LoginPanel, e as TONModal, T as TRONModal, g as TokenDetail, h as TokenSend, j as TokenSendList, k as TransactionList, U as UsernameModal, f as WalletAsset, W as WalletModal } from './index-DVlulZhE.mjs';
-export { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-BqI0PEIi.mjs';
+export { B as BTCModal, d as EVMModal, E as EmailModal, L as LoginBox, a as LoginButton, c as LoginModal, b as LoginPanel, e as TONModal, T as TRONModal, g as TokenDetail, h as TokenSend, j as TokenSendList, k as TransactionList, U as UsernameModal, f as WalletAsset, W as WalletModal } from './index-CqHlL6ue.mjs';
+export { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DuCefmJ0.mjs';
 import 'react/jsx-runtime';
-import './types-BrVeC0c8.mjs';
+import './types-C8FLH1yn.mjs';
 import 'react';
 import '@tanstack/react-query/src/types';

package/dist/components.d.ts

@@ -1,6 +1,6 @@
-export { B as BTCModal, d as EVMModal, E as EmailModal, L as LoginBox, a as LoginButton, c as LoginModal, b as LoginPanel, e as TONModal, T as TRONModal, g as TokenDetail, h as TokenSend, j as TokenSendList, k as TransactionList, U as UsernameModal, f as WalletAsset, W as WalletModal } from './index-qmC4zt6V.js';
-export { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-CvzpMw3N.js';
+export { B as BTCModal, d as EVMModal, E as EmailModal, L as LoginBox, a as LoginButton, c as LoginModal, b as LoginPanel, e as TONModal, T as TRONModal, g as TokenDetail, h as TokenSend, j as TokenSendList, k as TransactionList, U as UsernameModal, f as WalletAsset, W as WalletModal } from './index-DZpXCByF.js';
+export { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-m2bn_W3Y.js';
 import 'react/jsx-runtime';
-import './types-BrVeC0c8.js';
+import './types-C8FLH1yn.js';
 import 'react';
 import '@tanstack/react-query/src/types';

package/dist/components.js

@@ -3284,6 +3284,12 @@ var useWalletModalStore = (0, import_zustand5.create)((set) => ({
   open: (type, methods = DEFAULT_WALLET_METHODS) => set({ isOpen: true, type, methods }),
   close: () => set({ isOpen: false })
 }));
+var useEmailModalStore = (0, import_zustand5.create)((set) => ({
+  isOpen: false,
+  type: "login",
+  open: (type) => set({ isOpen: true, type }),
+  close: () => set({ isOpen: false })
+}));
 
 // src/components/CEXBindModal/index.tsx
 var import_react19 = require("react");
@@ -3362,6 +3368,7 @@ function useUserInfo() {
   const { open: TONOpen } = useTONModalStore();
   const { open: BTCOpen } = useBTCModalStore();
   const { open: CEXBindOpen } = useCEXBindModalStore();
+  const { open: EmailOpen } = useEmailModalStore();
   const walletModalStore = useWalletModalStore();
   const getRedirectUri = () => {
     return encodeURIComponent(window.location.href);
@@ -3496,6 +3503,34 @@ function useUserInfo() {
     }
     return false;
   };
+  const bindByEmail = async ({
+    email,
+    code
+  }) => {
+    try {
+      const obj = {
+        email,
+        verification_key: emailLoginKey,
+        verification_code: code
+      };
+      const res = await verifyEmailCodeApi(obj);
+      if (res && res.data && isSuccess(res)) {
+        events.onBind && events.onBind({
+          type: "email"
+        });
+        eventManager_default.emit("onBind", {
+          type: "email"
+        });
+        return true;
+      } else {
+        throw new Error(res.message);
+      }
+    } catch (error) {
+      console.error("bindByEmail", error);
+      throw error;
+    }
+    return false;
+  };
   const bindWallet = async () => {
     if (!token) {
       throw new Error("You must login first");
@@ -3543,12 +3578,15 @@ function useUserInfo() {
         return BTCOpen("bind");
       case "telegram":
         return await bindTelegram();
+      case "email":
+        return EmailOpen("bind");
       case "twitter":
       case "google":
       case "discord":
       case "github":
       case "linkedin":
       case "facebook":
+      case "kakao":
       case "youtube":
         const link = `${endpoints.back}api/v1/auth/${method == "youtube" ? "google" : method}?appid=${appid}&provider=${method == "youtube" ? "google" : method}&redirect=${encodeURIComponent(endpoints.auth + "bind/" + method)}&authorization=${token.includes("Bearer ") ? token.split(" ")[1] : token}${method == "youtube" ? "&auth_type=youtube" : ""}`;
         matchlog_default.log("link", link);
@@ -3632,6 +3670,7 @@ function useUserInfo() {
     auth,
     login: loginMethod,
     bind,
+    bindByEmail,
     getAuthInfo,
     invite
   };
@@ -3643,7 +3682,7 @@ var import_react_intl8 = require("react-intl");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 function StepVerify(props) {
   const intl = (0, import_react_intl8.useIntl)();
-  const { getLoginEmailCode, loginByEmail } = useUserInfo();
+  const { getLoginEmailCode, bindByEmail, loginByEmail } = useUserInfo();
   const [error, setError] = (0, import_react24.useState)("");
   const [code, setCode] = (0, import_react24.useState)("");
   const [sending, setSending] = (0, import_react24.useState)(false);
@@ -3703,7 +3742,10 @@ function StepVerify(props) {
     try {
       setError("");
       setSubmitting(true);
-      const res = await loginByEmail({
+      const res = props.type === "bind" ? await bindByEmail({
+        email: props.email,
+        code
+      }) : await loginByEmail({
         email: props.email,
         code
       });
@@ -3765,6 +3807,7 @@ var import_react_intl9 = require("react-intl");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 function EmailModal({
   isOpen = false,
+  type = "login",
   width = 480,
   onClose,
   onBack,
@@ -3792,7 +3835,7 @@ function EmailModal({
       children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
         setEmailVal(email);
         setStep("verify");
-      } }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
+      } }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(StepVerify, { email: emailVal, type, onSuccess: onLogin })
     }
   );
 }
@@ -3911,7 +3954,7 @@ function LoginBox({
       walletMethods: walletMethodList
     };
   }, [config.platform, recommendMethods, methods, walletMethods]);
-  const [emailOpen, setEmailOpen] = (0, import_react26.useState)(false);
+  const { open: emailOpen } = useEmailModalStore();
   const { login } = useUserInfo();
   const [showWallet, setShowWallet] = (0, import_react26.useState)(false);
   const intl = (0, import_react_intl10.useIntl)();
@@ -3927,7 +3970,7 @@ function LoginBox({
       icon: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(EmailIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "email" }),
       onClick: () => {
-        setEmailOpen(true);
+        emailOpen("login");
       }
     },
     google: {
@@ -3977,130 +4020,116 @@ function LoginBox({
     }
   };
   const { walletMap } = useWalletConfig();
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-box", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-          RecommendItem,
-          {
-            icon: methodMap[m]?.icon,
-            name: methodMap[m]?.name,
-            onClick: methodMap[m]?.onClick,
-            showChildren: m == "wallet" && showWallet,
-            children: m == "wallet" && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
-                const m2 = walletMap[n];
-                return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-                  "div",
-                  {
-                    className: "matchid-login-recommend-wallet-item",
-                    onClick: () => {
-                      login(m2.method);
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                          "div",
-                          {
-                            className: "matchid-login-recommend-wallet-item-hover-icon",
-                            children: m2.activeIcon
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                          "span",
-                          {
-                            className: "matchid-login-recommend-wallet-item-name",
-                            children: m2.name
-                          }
-                        )
-                      ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        RecommendItem,
+        {
+          icon: methodMap[m]?.icon,
+          name: methodMap[m]?.name,
+          onClick: methodMap[m]?.onClick,
+          showChildren: m == "wallet" && showWallet,
+          children: m == "wallet" && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
+              const m2 = walletMap[n];
+              return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+                "div",
+                {
+                  className: "matchid-login-recommend-wallet-item",
+                  onClick: () => {
+                    login(m2.method);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                        "div",
+                        {
+                          className: "matchid-login-recommend-wallet-item-hover-icon",
+                          children: m2.activeIcon
+                        }
+                      ),
                       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                        ArrowRightIcon,
+                        "span",
                         {
-                          className: "matchid-login-recommend-wallet-item-arrow",
-                          size: 20,
-                          color: "var(--matchid-arrow-color)"
+                          className: "matchid-login-recommend-wallet-item-name",
+                          children: m2.name
                         }
                       )
-                    ]
-                  },
-                  m2.name
-                );
-              }) })
-            ] })
-          },
-          m
-        );
-      }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-privacy-policy", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-privacy-policy-content", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-          import_react_intl10.FormattedMessage,
-          {
-            id: "loginAgreement",
-            values: {
-              termsLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                "a",
-                {
-                  href: TERMS_OF_SERVICE_URL,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: "matchid-privacy-policy-content-link",
-                  children: chunks
-                }
-              ),
-              privacyLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                "a",
-                {
-                  href: PRIVACY_POLICY_URL,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: "matchid-privacy-policy-content-link",
-                  children: chunks
-                }
-              )
-            }
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                      ArrowRightIcon,
+                      {
+                        className: "matchid-login-recommend-wallet-item-arrow",
+                        size: 20,
+                        color: "var(--matchid-arrow-color)"
+                      }
+                    )
+                  ]
+                },
+                m2.name
+              );
+            }) })
+          ] })
+        },
+        m
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-privacy-policy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-privacy-policy-content", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        import_react_intl10.FormattedMessage,
+        {
+          id: "loginAgreement",
+          values: {
+            termsLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "a",
+              {
+                href: TERMS_OF_SERVICE_URL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "matchid-privacy-policy-content-link",
+                children: chunks
+              }
+            ),
+            privacyLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "a",
+              {
+                href: PRIVACY_POLICY_URL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "matchid-privacy-policy-content-link",
+                children: chunks
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-privacy-policy-powered-by", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_intl10.FormattedMessage, { id: "poweredBy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MatchIdIcon_default, {})
-        ] })
-      ] }),
-      methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-other", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-other-line-box", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-line" }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_intl10.FormattedMessage, { id: "otherLoginMethods" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-line" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-            "div",
-            {
-              className: "matchid-login-method-item",
-              onClick: methodMap[m]?.onClick,
-              title: methodMap[m]?.name,
-              children: methodMap[m]?.icon
-            },
-            m
-          );
-        }) })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-privacy-policy-powered-by", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_intl10.FormattedMessage, { id: "poweredBy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MatchIdIcon_default, {})
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      EmailModal,
-      {
-        isOpen: emailOpen,
-        onClose: () => {
-          setEmailOpen(false);
-        },
-        onBack: inModal ? () => {
-          setEmailOpen(false);
-        } : void 0
-      }
-    )
-  ] });
+    methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-other", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "matchid-login-other-line-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-line" }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_intl10.FormattedMessage, { id: "otherLoginMethods" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-other-line" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "div",
+          {
+            className: "matchid-login-method-item",
+            onClick: methodMap[m]?.onClick,
+            title: methodMap[m]?.name,
+            children: methodMap[m]?.icon
+          },
+          m
+        );
+      }) })
+    ] })
+  ] }) });
 }
 
 // src/components/LoginButton/index.tsx