@stokr/components-library 2.3.73 → 2.3.75

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -108,7 +108,7 @@ const ConfirmModalComponent = _ref => {
     style: {
       marginTop: '16px'
     }
-  }, content)), renderFooter ? /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, renderFooter({
+  }, content)), renderFooter ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFooter({
     onConfirm: handleConfirm,
     onCancel: handleCancel
   })) : /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {

package/dist/components/InfoBox/InfoBox.js

@@ -28,7 +28,7 @@ const VARIANTS = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "InfoBox__Container",
   componentId: "sc-fb6dfq-0"
-})(["position:relative;display:flex;overflow:hidden;align-items:flex-start;align-items:center;gap:12px;padding:12px 20px 12px 16px;background:", ";border:1px solid ", ";border-radius:8px;font-size:12px;line-height:18px;letter-spacing:0.6px;font-weight:400;color:", ";&:before{content:'';display:block;width:4px;position:absolute;height:100%;left:0px;background:", ";}"], props => props.$bg, props => props.$border, _colors.default.black, props => props.$border);
+})(["position:relative;display:flex;overflow:hidden;align-items:flex-start;align-items:center;gap:12px;padding:12px 20px 12px 16px;background:", ";border:1px solid ", ";border-radius:8px;font-size:12px;line-height:18px;letter-spacing:0.6px;font-weight:400;color:", ";", ""], props => props.$bg, props => props.$border, _colors.default.black, props => !props.$noLeftBorder && "\n    &:before {\n      content: '';\n      display: block;\n      width: 4px;\n      position: absolute;\n      height: 100%;\n      left: 0px;\n      background: ".concat(props.$border, ";\n    }\n  "));
 const DefaultIcon = _styledComponents.default.i.attrs({
   className: 'ion ion-md-information-circle-outline'
 }).withConfig({
@@ -59,7 +59,8 @@ const InfoBox = _ref => {
     children,
     icon,
     style,
-    className
+    className,
+    noLeftBorder
   } = _ref;
   const theme = VARIANTS[variant] || VARIANTS.warning;
   const renderIcon = () => {
@@ -72,6 +73,7 @@ const InfoBox = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(Container, {
     $bg: theme.background,
+    $noLeftBorder: noLeftBorder,
     $border: theme.border,
     style: style,
     className: className

package/dist/components/Modal/SideModal.js

@@ -13,6 +13,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function findScrolledElement() {
+  let best = null;
+  function walk(el) {
+    if (!el || el.nodeType !== 1) return;
+    const s = getComputedStyle(el);
+    const scrollable = (s.overflowY === 'auto' || s.overflowY === 'scroll' || s.overflow === 'auto' || s.overflow === 'scroll') && el.scrollHeight > el.clientHeight && el.scrollTop > 0;
+    if (scrollable && (!best || el.scrollTop > best.scrollTop)) best = {
+      el,
+      scrollTop: el.scrollTop
+    };
+    for (let i = 0; i < el.children.length; i++) walk(el.children[i]);
+  }
+  walk(document.body);
+  return best;
+}
 const SideModal = _ref => {
   let {
       children,
@@ -27,60 +42,50 @@ const SideModal = _ref => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const savedScroll = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    // Disable scroll on background when modal is open
     if (isOpen) {
-      // Calculate scrollbar width before hiding it
+      const found = findScrolledElement();
+      if (found) savedScroll.current = found;else if (window.scrollY > 0) savedScroll.current = {
+        type: 'window',
+        y: window.scrollY
+      };else savedScroll.current = null;
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-
-      // Store current scroll position
-      const scrollY = window.scrollY;
-
-      // Apply styles to prevent layout shift
-      document.body.style.position = 'fixed';
-      document.body.style.top = "-".concat(scrollY, "px");
-      document.body.style.left = '0';
-      document.body.style.right = '0';
+      document.documentElement.style.overflow = 'hidden';
       document.body.style.overflow = 'hidden';
       document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
-
-      // Set CSS variable for fixed elements (like headers)
       document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
-
-      // Store scroll position for restoration
-      document.body.dataset.scrollY = scrollY;
-
-      // Small delay to trigger animation
       setTimeout(() => setIsVisible(true), 10);
     } else {
-      // Restore scroll position
-      const scrollY = document.body.dataset.scrollY || '0';
-
-      // Reset all body styles
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
+      const saved = savedScroll.current;
+      savedScroll.current = null;
+      document.documentElement.style.overflow = '';
       document.body.style.overflow = '';
       document.body.style.paddingRight = '';
-
-      // Reset CSS variable
       document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
-
-      // Restore scroll position
-      window.scrollTo(0, parseInt(scrollY));
       setIsVisible(false);
+      if (saved) {
+        requestAnimationFrame(() => {
+          if (saved.type === 'window') window.scrollTo(0, saved.y);else if (saved.el && document.contains(saved.el)) saved.el.scrollTop = saved.scrollTop;
+        });
+      }
     }
     return () => {
-      const scrollY = document.body.dataset.scrollY || '0';
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.left = '';
-      document.body.style.right = '';
+      const saved = savedScroll.current;
+      savedScroll.current = null;
+      document.documentElement.style.overflow = '';
       document.body.style.overflow = '';
       document.body.style.paddingRight = '';
       document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
-      window.scrollTo(0, parseInt(scrollY));
+      if (saved && saved.el && document.contains(saved.el)) {
+        requestAnimationFrame(() => {
+          saved.el.scrollTop = saved.scrollTop;
+        });
+      } else if (saved && saved.type === 'window') {
+        requestAnimationFrame(() => {
+          window.scrollTo(0, saved.y);
+        });
+      }
     };
   }, [isOpen]);
 

package/dist/components/Payment/PaymentDetailsCard.js

@@ -39,7 +39,7 @@ const AmountDisplay = _styledComponents.default.div.withConfig({
 const AmountLeft = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountLeft",
   componentId: "sc-e830fo-6"
-})(["display:flex;align-items:center;gap:16px;flex:1;min-width:0;"]);
+})(["display:flex;align-items:center;gap:12px;flex:1;min-width:0;"]);
 const CurrencyTicker = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CurrencyTicker",
   componentId: "sc-e830fo-7"
@@ -75,7 +75,7 @@ const SectionHeader = _styledComponents.default.div.withConfig({
 const DetailsSection = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailsSection",
   componentId: "sc-e830fo-15"
-})(["margin-bottom:", ";"], props => props.noMargin ? '0' : '20px');
+})(["margin-bottom:", ";"], props => props.noMargin ? '0' : '24px');
 const DetailRow = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailRow",
   componentId: "sc-e830fo-16"
@@ -189,7 +189,7 @@ const AmountBlock = _ref2 => {
     }
     return /*#__PURE__*/_react.default.createElement(CurrencyLogo, {
       color: logoColor
-    }, currency ? currency.charAt(0).toUpperCase() : '');
+    });
   };
   return /*#__PURE__*/_react.default.createElement(AmountSection, null, /*#__PURE__*/_react.default.createElement(AmountLabel, {
     hasSubtitle: !!subtitle

package/dist/hooks/useTransactionPolling.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTransactionPolling = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Generic polling hook. Calls fetcher (with optional payload) until isSuccess(response)
+ * is true or maxAttempts is reached.
+ *
+ * @param {Object} options
+ * @param {function(payload?: any): Promise<any>} options.fetcher - Required. Async function called each poll. Receives options.payload if provided.
+ * @param {any} [options.payload] - Optional. Passed to fetcher each poll. Omit when fetcher needs no args. For objects, use a stable reference (e.g. useMemo) to avoid restarting every render.
+ * @param {boolean} [options.enabled=true] - When false, polling does not start. Use to gate on e.g. having an id.
+ * @param {function(any): boolean} [options.isSuccess] - Predicate to treat response as success. Default: truthy check.
+ * @param {number} [options.pollingInterval=5000] - Ms between polls.
+ * @param {number} [options.maxAttempts=360] - Max poll attempts (~30 min at 5s).
+ * @param {number} [options.delayBeforeStart=2000] - Ms before first poll.
+ * @param {function(any)} [options.onSuccess] - Called with response when isSuccess(response) is true.
+ * @param {function(Error)} [options.onError] - Called on fetcher error.
+ * @param {function()} [options.onMaxAttemptsReached] - Called when attempts reach maxAttempts.
+ * @returns {{ isLoading: boolean, error: Error|null, attempts: number, isPolling: boolean, maxAttempts: number }}
+ */
+const useTransactionPolling = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    fetcher,
+    payload,
+    enabled = true,
+    isSuccess = response => Boolean(response),
+    pollingInterval = 5000,
+    maxAttempts = 360,
+    delayBeforeStart = 2000,
+    onSuccess,
+    onError,
+    onMaxAttemptsReached
+  } = options;
+  if (typeof fetcher !== 'function') {
+    throw new Error('useTransactionPolling: options.fetcher is required and must be a function');
+  }
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)(null);
+  const [attempts, setAttempts] = (0, _react.useState)(0);
+  const [isPolling, setIsPolling] = (0, _react.useState)(false);
+  const intervalRef = (0, _react.useRef)(null);
+  const timeoutRef = (0, _react.useRef)(null);
+  const completedRef = (0, _react.useRef)(false);
+  const pollRef = (0, _react.useRef)(null);
+  const poll = (0, _react.useCallback)(async () => {
+    if (!enabled || attempts >= maxAttempts || completedRef.current) {
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetcher(payload);
+      if (isSuccess(response)) {
+        completedRef.current = true;
+        setIsPolling(false);
+        setIsLoading(false);
+        onSuccess === null || onSuccess === void 0 || onSuccess(response);
+        return;
+      }
+    } catch (err) {
+      console.error('Transaction polling error:', err);
+      setError(err);
+      onError === null || onError === void 0 || onError(err);
+    } finally {
+      setIsLoading(false);
+      setAttempts(prev => prev + 1);
+    }
+  }, [enabled, attempts, maxAttempts, fetcher, payload, isSuccess, onSuccess, onError]);
+  pollRef.current = poll;
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    setIsPolling(true);
+    setAttempts(0);
+    completedRef.current = false;
+    setError(null);
+    const runPoll = () => {
+      var _pollRef$current;
+      return (_pollRef$current = pollRef.current) === null || _pollRef$current === void 0 ? void 0 : _pollRef$current.call(pollRef);
+    };
+    timeoutRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(runPoll, pollingInterval);
+      runPoll();
+    }, delayBeforeStart);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsPolling(false);
+    };
+  }, [enabled, payload, pollingInterval, delayBeforeStart, maxAttempts]);
+  (0, _react.useEffect)(() => {
+    if (attempts >= maxAttempts && isPolling) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      setIsPolling(false);
+      onMaxAttemptsReached === null || onMaxAttemptsReached === void 0 || onMaxAttemptsReached();
+    }
+  }, [attempts, maxAttempts, isPolling, onMaxAttemptsReached]);
+  return {
+    isLoading,
+    error,
+    attempts,
+    isPolling,
+    maxAttempts
+  };
+};
+exports.useTransactionPolling = useTransactionPolling;
+var _default = exports.default = useTransactionPolling;

package/dist/index.js

@@ -1466,6 +1466,17 @@ Object.keys(_useTimer).forEach(function (key) {
     }
   });
 });
+var _useTransactionPolling = require("./hooks/useTransactionPolling");
+Object.keys(_useTransactionPolling).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTransactionPolling[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTransactionPolling[key];
+    }
+  });
+});
 var _PaymentDisplay = require("./components/Payment/PaymentDisplay");
 Object.keys(_PaymentDisplay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.73",
+  "version": "2.3.75",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",