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

package/dist/index.js

@@ -2171,6 +2171,12 @@ var useWalletModalStore = (0, import_zustand2.create)((set) => ({
   open: (type, methods = DEFAULT_WALLET_METHODS) => set({ isOpen: true, type, methods }),
   close: () => set({ isOpen: false })
 }));
+var useEmailModalStore = (0, import_zustand2.create)((set) => ({
+  isOpen: false,
+  type: "login",
+  open: (type) => set({ isOpen: true, type }),
+  close: () => set({ isOpen: false })
+}));
 
 // src/store/useStore.ts
 var import_zustand3 = require("zustand");
@@ -2207,6 +2213,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);
@@ -2341,6 +2348,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");
@@ -2388,12 +2423,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);
@@ -2477,6 +2515,7 @@ function useUserInfo() {
     auth,
     login: loginMethod,
     bind,
+    bindByEmail,
     getAuthInfo,
     invite
   };
@@ -2820,7 +2859,7 @@ var import_react_intl2 = require("react-intl");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function StepVerify(props) {
   const intl = (0, import_react_intl2.useIntl)();
-  const { getLoginEmailCode, loginByEmail } = useUserInfo();
+  const { getLoginEmailCode, bindByEmail, loginByEmail } = useUserInfo();
   const [error, setError] = (0, import_react7.useState)("");
   const [code, setCode] = (0, import_react7.useState)("");
   const [sending, setSending] = (0, import_react7.useState)(false);
@@ -2880,7 +2919,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
       });
@@ -2942,6 +2984,7 @@ var import_react_intl3 = require("react-intl");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function EmailModal({
   isOpen = false,
+  type = "login",
   width = 480,
   onClose,
   onBack,
@@ -2969,7 +3012,7 @@ function EmailModal({
       children: step === "input" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StepEmail, { email: emailVal, onContinue: (email) => {
         setEmailVal(email);
         setStep("verify");
-      } }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StepVerify, { email: emailVal, onSuccess: onLogin })
+      } }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StepVerify, { email: emailVal, type, onSuccess: onLogin })
     }
   );
 }
@@ -3119,7 +3162,7 @@ function LoginBox({
       walletMethods: walletMethodList
     };
   }, [config.platform, recommendMethods, methods, walletMethods]);
-  const [emailOpen, setEmailOpen] = (0, import_react10.useState)(false);
+  const { open: emailOpen } = useEmailModalStore();
   const { login } = useUserInfo();
   const [showWallet, setShowWallet] = (0, import_react10.useState)(false);
   const intl = (0, import_react_intl4.useIntl)();
@@ -3135,7 +3178,7 @@ function LoginBox({
       icon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(EmailIcon, { size: isDownMd ? 36 : 40 }),
       name: intl.formatMessage({ id: "email" }),
       onClick: () => {
-        setEmailOpen(true);
+        emailOpen("login");
       }
     },
     google: {
@@ -3185,130 +3228,116 @@ function LoginBox({
     }
   };
   const { walletMap } = useWalletConfig();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-box", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
-                const m2 = walletMap[n];
-                return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
-                  "div",
-                  {
-                    className: "matchid-login-recommend-wallet-item",
-                    onClick: () => {
-                      login(m2.method);
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
-                        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-                          "div",
-                          {
-                            className: "matchid-login-recommend-wallet-item-hover-icon",
-                            children: m2.activeIcon
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-                          "span",
-                          {
-                            className: "matchid-login-recommend-wallet-item-name",
-                            children: m2.name
-                          }
-                        )
-                      ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: (!inModal || !emailOpen) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-list", children: methodConfig.recommendMethods.map((m) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-divider" }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-list", children: methodConfig.walletMethods.map((n) => {
+              const m2 = walletMap[n];
+              return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+                "div",
+                {
+                  className: "matchid-login-recommend-wallet-item",
+                  onClick: () => {
+                    login(m2.method);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-recommend-wallet-item-content", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-recommend-wallet-item-icon", children: m2.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                        "div",
+                        {
+                          className: "matchid-login-recommend-wallet-item-hover-icon",
+                          children: m2.activeIcon
+                        }
+                      ),
                       /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsxs)("div", { className: "matchid-privacy-policy", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-privacy-policy-content", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-          import_react_intl4.FormattedMessage,
-          {
-            id: "loginAgreement",
-            values: {
-              termsLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsx)(
-                "a",
-                {
-                  href: PRIVACY_POLICY_URL,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: "matchid-privacy-policy-content-link",
-                  children: chunks
-                }
-              )
-            }
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                      ArrowRightIcon,
+                      {
+                        className: "matchid-login-recommend-wallet-item-arrow",
+                        size: 20,
+                        color: "var(--matchid-arrow-color)"
+                      }
+                    )
+                  ]
+                },
+                m2.name
+              );
+            }) })
+          ] })
+        },
+        m
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-privacy-policy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-privacy-policy-content", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        import_react_intl4.FormattedMessage,
+        {
+          id: "loginAgreement",
+          values: {
+            termsLink: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.jsx)(
+              "a",
+              {
+                href: PRIVACY_POLICY_URL,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "matchid-privacy-policy-content-link",
+                children: chunks
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-privacy-policy-powered-by", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "poweredBy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MatchIdIcon_default, {})
-        ] })
-      ] }),
-      methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-other", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-other-line-box", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-line" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "otherLoginMethods" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-line" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-            "div",
-            {
-              className: "matchid-login-method-item",
-              onClick: methodMap[m]?.onClick,
-              title: methodMap[m]?.name,
-              children: methodMap[m]?.icon
-            },
-            m
-          );
-        }) })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-privacy-policy-powered-by", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "poweredBy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MatchIdIcon_default, {})
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-      EmailModal,
-      {
-        isOpen: emailOpen,
-        onClose: () => {
-          setEmailOpen(false);
-        },
-        onBack: inModal ? () => {
-          setEmailOpen(false);
-        } : void 0
-      }
-    )
-  ] });
+    methodConfig.methods.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-other", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "matchid-login-other-line-box", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-line" }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-text", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_intl4.FormattedMessage, { id: "otherLoginMethods" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-other-line" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matchid-login-method-box", children: methodConfig.methods.map((m) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime67.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
@@ -7665,7 +7694,7 @@ function CEXBindModal({
   const [secret, setSecret] = (0, import_react39.useState)("");
   const [error, setError] = (0, import_react39.useState)("");
   const needPassphrase = (0, import_react39.useMemo)(() => {
-    return ["bitget", "okx"].includes(type.toLowerCase());
+    return ["bitget", "okx", "kucoin"].includes(type.toLowerCase());
   }, [type]);
   (0, import_react39.useEffect)(() => {
     if (isOpen) {
@@ -7770,6 +7799,7 @@ function BusinessProvider({ children }) {
   const { type: BTCType, isOpen: BTCIsOpen, close: BTCClose } = useBTCModalStore();
   const { type: CEXType, isOpen: CEXIsOpen, close: CEXClose } = useCEXBindModalStore();
   const WalletModalStore = useWalletModalStore();
+  const EmailModalStore = useEmailModalStore();
   const { tgAppAuthCode, setTgAppAuthCode } = useStore_default();
   const { login } = useMatch();
   const walletModalClose = (func) => {
@@ -7855,6 +7885,16 @@ function BusinessProvider({ children }) {
         zIndex: 150
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+      EmailModal,
+      {
+        isOpen: EmailModalStore.isOpen && (EmailModalStore.type == "login" && !overview && !token || EmailModalStore.type == "bind" && !!token && !!overview),
+        onClose: EmailModalStore.close,
+        onLogin: () => EmailModalStore.close,
+        type: EmailModalStore.type,
+        zIndex: 199
+      }
+    ),
     children
   ] });
 }