@stokr/components-library 3.0.39 → 3.0.41

package/dist/components/2FA/Connect2FA.js

@@ -5,7 +5,7 @@ import { Text } from "../Text/Text.styles.js";
 import { Button } from "../Button/Button.styles.js";
 import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
 import { ModalWrapper, ModalInner } from "../Modal/Modal.styles.js";
-import QRCode from "react-qr-code";
+import { QRCodeSVG } from "qrcode.react";
 import { Row, Column } from "../Grid/Grid.styles.js";
 import stdin_default$1 from "../CryptoAddress/CryptoAddress.js";
 import { useMobileView } from "../../utils/customHooks.js";
@@ -24,11 +24,10 @@ const Connect2FA = (props) => {
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
       totpData && /* @__PURE__ */ jsxs(ComponentWrapper, { center: true, noPaddingHorizontal: true, children: [
         !isMobile && /* @__PURE__ */ jsx(
-          QRCode,
+          QRCodeSVG,
           {
             size: 180,
-            value: totpData?.totpUri,
-            viewBox: `0 0 256 256`
+            value: totpData?.totpUri
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/components/2FA/login-with-otp-flow.js

@@ -13,7 +13,7 @@ import { getConfig, getPlatformURL } from "../../runtime-config.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
 const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
   const navigate = useNavigate();
-  const { loginUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow } = useContext(AuthContext);
+  const { loginUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow, logoutUser } = useContext(AuthContext);
   const [isModalOpen, setIsModalOpen] = useState({
     login: true,
     enter2fa: false,
@@ -79,6 +79,7 @@ const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
           clearPopupError();
           setIsActionLoading(void 0);
         },
+        logoutUser,
         onFormSend: async ({ email, password }) => {
           clearPopupError();
           setIsActionLoading("login");

package/dist/components/Button/Button.styles.js

@@ -45,7 +45,6 @@ const Button = styled.button.withConfig({
   user-select: none;
   cursor: pointer;
   transition:
-    color 0.2s,
     background-color 0.2s,
     border-color 0.2s;
 

package/dist/components/HeroBlock/HeroVideoBlock.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useRef, useEffect } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 const VideoContainer = styled.div`
   position: relative;
@@ -16,14 +16,41 @@ const VideoBackground = styled.video`
   top: 0;
   left: 0;
 `;
-const now = Date.now();
+const CLOUDINARY_BASE = "https://res.cloudinary.com/stokr/video/upload";
+const CLOUDINARY_VERSION = "v1745923531";
+const CLOUDINARY_PUBLIC_ID = "Static/Hero_section_video_kuatj1";
+const VIDEO_SRC_DESKTOP = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
+const VIDEO_SRC_MOBILE = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1280,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
+const VIDEO_POSTER = `${CLOUDINARY_BASE}/so_0,f_auto,q_auto:good,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.jpg`;
+const shouldLoadVideo = () => {
+  if (typeof navigator === "undefined") return true;
+  const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+  if (conn) {
+    if (conn.saveData) return false;
+    if (conn.effectiveType && ["slow-2g", "2g"].includes(conn.effectiveType)) return false;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+  }
+  return true;
+};
 const HeroVideoBlock = () => {
   const videoRef = useRef(null);
   const lastTimeRef = useRef(0);
-  const lastVisibleTime = useRef(now);
-  const playVideo = () => {
-    if (!videoRef.current) return;
+  const lastVisibleTime = useRef(0);
+  const visibilityTimeoutRef = useRef(null);
+  const hasTriggeredLoadRef = useRef(false);
+  const [shouldAutoplay] = useState(() => shouldLoadVideo());
+  const playVideo = useCallback(() => {
+    if (!videoRef.current || !shouldAutoplay) return;
     const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    if (!hasTriggeredLoadRef.current) {
+      hasTriggeredLoadRef.current = true;
+      try {
+        videoRef.current.load();
+      } catch (_e) {
+      }
+    }
     if (videoRef.current.currentTime > 0) {
       lastTimeRef.current = videoRef.current.currentTime;
     }
@@ -40,7 +67,7 @@ const HeroVideoBlock = () => {
         }
       });
     }
-  };
+  }, [shouldAutoplay]);
   const handleVisibilityChange = (isVisible) => {
     if (isVisible) {
       lastVisibleTime.current = Date.now();
@@ -59,13 +86,13 @@ const HeroVideoBlock = () => {
     }
   });
   useEffect(() => {
-    let visibilityTimeoutId;
     const handleDocVisibilityChange = () => {
       if (document.visibilityState === "visible") {
         lastVisibleTime.current = Date.now();
-        if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
-        visibilityTimeoutId = setTimeout(() => {
+        if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+        visibilityTimeoutRef.current = setTimeout(() => {
           playVideo();
+          visibilityTimeoutRef.current = null;
         }, 300);
       } else if (videoRef.current) {
         lastTimeRef.current = videoRef.current.currentTime;
@@ -74,29 +101,27 @@ const HeroVideoBlock = () => {
     document.addEventListener("visibilitychange", handleDocVisibilityChange);
     playVideo();
     return () => {
-      if (visibilityTimeoutId != null) clearTimeout(visibilityTimeoutId);
+      if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
       document.removeEventListener("visibilitychange", handleDocVisibilityChange);
     };
-  }, []);
+  }, [playVideo]);
   return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsx(VideoContainer, { children: /* @__PURE__ */ jsx(
     VideoBackground,
     {
       ref: videoRef,
-      autoPlay: true,
+      autoPlay: shouldAutoplay,
       muted: true,
       loop: true,
       playsInline: true,
-      preload: "metadata",
+      preload: "none",
+      disableRemotePlayback: true,
+      poster: VIDEO_POSTER,
       "data-vsc-ignore": "true",
       fetchPriority: "high",
-      children: /* @__PURE__ */ jsx(
-        "source",
-        {
-          src: "https://res.cloudinary.com/stokr/video/upload/f_auto,q_auto:best/v1745923531/Static/Hero_section_video_kuatj1.mp4",
-          type: "video/mp4",
-          fetchPriority: "high"
-        }
-      )
+      children: shouldAutoplay && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("source", { src: VIDEO_SRC_MOBILE, type: "video/mp4", media: "(max-width: 767px)" }),
+        /* @__PURE__ */ jsx("source", { src: VIDEO_SRC_DESKTOP, type: "video/mp4", media: "(min-width: 768px)" })
+      ] })
     }
   ) }) });
 };

package/dist/components/Layout/Layout.js

@@ -27,7 +27,9 @@ class Layout extends React__default.PureComponent {
       noFooter,
       noHeader,
       noLogout,
-      useRelativePathForMenu = false
+      useRelativePathForMenu = false,
+      logoutUser = () => {
+      }
     } = this.props;
     return /* @__PURE__ */ jsx(ThemeProvider, { theme: { ...theme }, children: /* @__PURE__ */ jsxs(PageWrapper, { children: [
       /* @__PURE__ */ jsx(GlobalStyle, {}),
@@ -40,7 +42,8 @@ class Layout extends React__default.PureComponent {
           signupHandler,
           siteTitle: title,
           noLogout,
-          useRelativePathForMenu
+          useRelativePathForMenu,
+          logoutUser
         }
       ),
       /* @__PURE__ */ jsx(
@@ -64,7 +67,8 @@ Layout.propTypes = {
   progress: PropTypes.bool,
   footerColor: PropTypes.string,
   children: PropTypes.node.isRequired,
-  useRelativePathForMenu: PropTypes.bool
+  useRelativePathForMenu: PropTypes.bool,
+  logoutUser: PropTypes.func
 };
 ProgressStatusContext.Consumer;
 export {

package/dist/components/StepsProgress/StepsProgress.js

@@ -24,10 +24,10 @@ const StepsProgressSignup = (props) => {
       isActive: isActiveStep("/verify-identity")
     },
     {
-      id: "taxId",
-      handleClick: () => navigate("/taxid"),
+      id: "self-certification",
+      handleClick: () => navigate("/self-certification"),
       isDone: !!taxId,
-      isActive: isActiveStep("/taxid")
+      isActive: isActiveStep("/self-certification")
     },
     {
       id: "ampID",

package/dist/context/Auth.js

@@ -35,14 +35,14 @@ class Auth {
    */
   static setAccessToken(token, options = {}) {
     this.logout();
-    const cookieDomain = getCookieDomain();
+    const cookieOptions = getCookieDomain();
     const raw = options?.expiresInMs;
     const expiresInMs = typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : Number(DEFAULT_TOKEN_EXPIRY_MS) || 60 * 60 * 1e3;
     const expiresAtMs = Date.now() + expiresInMs;
     const expiresInDays = expiresInMs / (24 * 60 * 60 * 1e3);
-    cookieDomain.expires = expiresInDays;
-    Cookies.set("STOKR_ACCESS_TOKEN", token, cookieDomain);
-    Cookies.set("STOKR_ACCESS_TOKEN_EXPIRES", String(expiresAtMs), cookieDomain);
+    const finalOptions = { ...cookieOptions, expires: expiresInDays };
+    Cookies.set("STOKR_ACCESS_TOKEN", token, finalOptions);
+    Cookies.set("STOKR_ACCESS_TOKEN_EXPIRES", String(expiresAtMs), finalOptions);
   }
   static getAccessToken() {
     return Cookies.get("STOKR_ACCESS_TOKEN");
@@ -58,6 +58,10 @@ class Auth {
     const cookieDomain = getCookieDomain();
     Cookies.remove("STOKR_ACCESS_TOKEN", cookieDomain);
     Cookies.remove("STOKR_ACCESS_TOKEN_EXPIRES", cookieDomain);
+    if (cookieDomain.domain) {
+      Cookies.remove("STOKR_ACCESS_TOKEN");
+      Cookies.remove("STOKR_ACCESS_TOKEN_EXPIRES");
+    }
   }
   static async login(email, password) {
     const auth = getFirebaseAuth();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.39",
+  "version": "3.0.41",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",
@@ -84,7 +84,6 @@
     "react-intersection-observer": "^10.0.2",
     "react-otp-input": "^3.1.0",
     "react-portal": "^4.2.2",
-    "react-qr-code": "^2.0.12",
     "react-range": "^1.8.14",
     "react-select": "^5.7.0",
     "react-slick": "^0.31.0",