@0xchain/with-login 1.1.0-beta.17 → 1.1.0-beta.19

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present 0xchain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -1,103 +1,150 @@
 'use client';
-import { jsx as m, jsxs as y } from "react/jsx-runtime";
-import I, { createContext as M, useState as w, useRef as N, useCallback as c, useEffect as p, useContext as R } from "react";
-import { useLocale as O } from "next-intl";
-import { twMerge as $ } from "tailwind-merge";
-import { useTheme as P } from "@0xchain/next-themes";
-import k from "js-cookie";
-const z = () => !!k.get("refresh_token");
-var A = /* @__PURE__ */ ((e) => (e.CLOSE_LOGIN_MODAL = "closeLoginModal", e.LOGIN_SUCCESS = "loginSuccess", e))(A || {}), B = /* @__PURE__ */ ((e) => (e.LOGIN = "login", e.REGISTER = "register", e))(B || {});
-const C = M(void 0);
-function F({ children: e, loginSuccessCallback: n = () => Promise.resolve() }) {
-  const [i, s] = w(!1), [l, h] = w(!1), [a, v] = w(null), _ = N(/* @__PURE__ */ new Set()), u = O(), { resolvedTheme: U } = P(), t = l && U ? U : "light", L = c((o) => {
-    const r = typeof window < "u" ? window.location.href : "", g = `${process.env.NEXT_PUBLIC_AUTH_URL}/${u}/login?mode=dialog&theme=${t}&redirect_uri=${r}`, f = `${process.env.NEXT_PUBLIC_AUTH_URL}/${u}/register?mode=dialog&theme=${t}&redirect_uri=${r}`;
-    s(!0), v(o === "register" ? f : g);
-  }, [t, u]), d = c(() => {
-    s(!1);
-  }, []), E = c((o) => {
-    s(o);
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useState, useRef, useCallback, useEffect, useContext } from "react";
+import { useLocale } from "next-intl";
+import { twMerge } from "tailwind-merge";
+import { useTheme } from "@0xchain/next-themes";
+import Cookies from "js-cookie";
+const isLogin = () => {
+  return Boolean(Cookies.get("refresh_token"));
+};
+var LoginMessageType = /* @__PURE__ */ ((LoginMessageType2) => {
+  LoginMessageType2["CLOSE_LOGIN_MODAL"] = "closeLoginModal";
+  LoginMessageType2["LOGIN_SUCCESS"] = "loginSuccess";
+  return LoginMessageType2;
+})(LoginMessageType || {});
+var OpenLoginType = /* @__PURE__ */ ((OpenLoginType2) => {
+  OpenLoginType2["LOGIN"] = "login";
+  OpenLoginType2["REGISTER"] = "register";
+  return OpenLoginType2;
+})(OpenLoginType || {});
+const LoginContext = createContext(void 0);
+function LoginProvider({ children, loginSuccessCallback = () => Promise.resolve() }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [url, setUrl] = useState(null);
+  const callbacksRef = useRef(/* @__PURE__ */ new Set());
+  const locale = useLocale();
+  const { resolvedTheme } = useTheme();
+  const currentTheme = mounted && resolvedTheme ? resolvedTheme : "light";
+  const openLogin = useCallback((type) => {
+    const redirect_uri = typeof window !== "undefined" ? window.location.href : "";
+    const loginUrl = `${process.env.NEXT_PUBLIC_AUTH_URL}/${locale}/login?mode=dialog&theme=${currentTheme}&redirect_uri=${redirect_uri}`;
+    const registerUrl = `${process.env.NEXT_PUBLIC_AUTH_URL}/${locale}/register?mode=dialog&theme=${currentTheme}&redirect_uri=${redirect_uri}`;
+    setIsOpen(true);
+    setUrl(type === "register" ? registerUrl : loginUrl);
+  }, [currentTheme, locale]);
+  const closeLogin = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const setLoginOpen = useCallback((open) => {
+    setIsOpen(open);
   }, []);
-  p(() => {
-    if (t) {
-      const o = typeof window < "u" ? window.location.href : "", r = `${process.env.NEXT_PUBLIC_AUTH_URL}/${u}/login?mode=dialog&theme=${t}&redirect_uri=${o}`;
-      v(r);
+  useEffect(() => {
+    if (currentTheme) {
+      const redirect_uri = typeof window !== "undefined" ? window.location.href : "";
+      const loginUrl = `${process.env.NEXT_PUBLIC_AUTH_URL}/${locale}/login?mode=dialog&theme=${currentTheme}&redirect_uri=${redirect_uri}`;
+      setUrl(loginUrl);
     }
-  }, [t]), p(() => {
-    h(!0);
-    const o = (r) => {
-      var g, f;
-      ((g = r.data) == null ? void 0 : g.type) === "closeLoginModal" && d(), ((f = r.data) == null ? void 0 : f.type) === "loginSuccess" && (console.log("handleMessage", r.data.type), d(), window.location.reload());
+  }, [currentTheme]);
+  useEffect(() => {
+    setMounted(true);
+    const handleMessage = (event) => {
+      if (event.data?.type === "closeLoginModal") {
+        closeLogin();
+      }
+      if (event.data?.type === "loginSuccess") {
+        console.log("handleMessage", event.data.type);
+        closeLogin();
+        window.location.reload();
+      }
     };
-    return window.addEventListener("message", o), () => {
-      window.removeEventListener("message", o);
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
     };
-  }, [d, n]);
-  const S = c((o) => (_.current.add(o), () => {
-    _.current.delete(o);
-  }), []), x = c(
-    ({ children: o, ...r }) => /* @__PURE__ */ m("div", { onClick: () => L(), style: { cursor: "pointer" }, ...r, children: o }),
-    [L]
-  ), T = I.useMemo(() => z() ? null : /* @__PURE__ */ m(
-    "div",
-    {
-      className: $(
-        " left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[rgba(0,0,0,0.7)] opacity-0 z-[-1]",
-        "transition-all duration-500 zoom-in-out fixed block",
-        i && "z-99999 opacity-100"
-      ),
-      children: a && /* @__PURE__ */ m(
-        "iframe",
-        {
-          src: a ?? "",
-          className: $(
-            "w-full h-full border-none relative z-10 transition-opacity duration-300",
-            "opacity-100"
-          ),
-          title: "Login",
-          sandbox: "allow-scripts allow-forms allow-same-origin"
-        },
-        `login-iframe-${t}`
-      )
-    }
-  ), [
-    t,
-    i,
-    a
-  ]), b = {
-    isOpen: i,
-    openLogin: L,
-    closeLogin: d,
-    setLoginOpen: E,
-    url: a,
-    currentTheme: t,
-    mounted: l,
-    Trigger: x,
-    registerLoginSuccessCallback: S
+  }, [closeLogin, loginSuccessCallback]);
+  const registerLoginSuccessCallback = useCallback((callback) => {
+    callbacksRef.current.add(callback);
+    return () => {
+      callbacksRef.current.delete(callback);
+    };
+  }, []);
+  const Trigger = useCallback(
+    ({ children: children2, ...rest }) => /* @__PURE__ */ jsx("div", { onClick: () => openLogin(), style: { cursor: "pointer" }, ...rest, children: children2 }),
+    [openLogin]
+  );
+  const loginModalElement = React.useMemo(() => {
+    if (isLogin()) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: twMerge(
+          " left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[rgba(0,0,0,0.7)] opacity-0 z-[-1]",
+          "transition-all duration-500 zoom-in-out fixed block",
+          isOpen && "z-99999 opacity-100"
+        ),
+        children: url && /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: url ?? "",
+            className: twMerge(
+              "w-full h-full border-none relative z-10 transition-opacity duration-300",
+              "opacity-100"
+            ),
+            title: "Login",
+            sandbox: "allow-scripts allow-forms allow-same-origin"
+          },
+          `login-iframe-${currentTheme}`
+        )
+      }
+    );
+  }, [
+    currentTheme,
+    isOpen,
+    url
+  ]);
+  const value = {
+    isOpen,
+    openLogin,
+    closeLogin,
+    setLoginOpen,
+    url,
+    currentTheme,
+    mounted,
+    Trigger,
+    registerLoginSuccessCallback
   };
-  return /* @__PURE__ */ y(C.Provider, { value: b, children: [
-    e,
-    T
+  return /* @__PURE__ */ jsxs(LoginContext.Provider, { value, children: [
+    children,
+    loginModalElement
   ] });
 }
-function G() {
-  const e = R(C);
-  if (e === void 0)
+function useLogin() {
+  const context = useContext(LoginContext);
+  if (context === void 0) {
     throw new Error("useLogin must be used within a LoginProvider");
-  return e;
+  }
+  return context;
 }
-function J({ children: e, onClick: n, ...i }) {
-  const { Trigger: s, registerLoginSuccessCallback: l } = G();
-  return p(() => {
-    if (n)
-      return l(n);
-  }, [n, l]), e ? /* @__PURE__ */ m(s, { ...i, children: e }) : null;
+function WithLogin({ children, onClick, ...rest }) {
+  const { Trigger, registerLoginSuccessCallback } = useLogin();
+  useEffect(() => {
+    if (onClick) {
+      const unregister = registerLoginSuccessCallback(onClick);
+      return unregister;
+    }
+    return void 0;
+  }, [onClick, registerLoginSuccessCallback]);
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(Trigger, { ...rest, children });
 }
 export {
-  A as LoginMessageType,
-  F as LoginProvider,
-  B as OpenLoginType,
-  J as WithLogin,
-  J as default,
-  z as isLogin,
-  G as useLogin
+  LoginMessageType,
+  LoginProvider,
+  OpenLoginType,
+  WithLogin,
+  WithLogin as default,
+  isLogin,
+  useLogin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xchain/with-login",
-  "version": "1.1.0-beta.17",
+  "version": "1.1.0-beta.19",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,16 +17,30 @@
     "dist",
     "!**/*.tsbuildinfo"
   ],
-  "devDependencies": {
-    "rollup-plugin-preserve-use-client": "3.0.1",
-    "@types/js-cookie": "3.0.6"
-  },
-  "dependencies": {
-    "tailwind-merge": "3.3.1",
+  "peerDependencies": {
     "@0xchain/next-themes": "1.0.0",
+    "js-cookie": "3.0.5",
+    "next": "16.1.6",
     "next-intl": "4.8.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "devDependencies": {
+    "@0xchain/next-themes": "1.0.0",
+    "@types/js-cookie": "3.0.6",
+    "js-cookie": "3.0.5",
     "next": "16.1.6",
-    "js-cookie": "3.0.5"
+    "next-intl": "4.8.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "rollup-plugin-preserve-use-client": "3.0.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "nx": {
+    "tags": [
+      "type:feature"
+    ]
   },
   "publishConfig": {
     "access": "public"