@stokr/components-library 3.0.72-beta.5 → 3.0.72-beta.7

package/dist/components/Lottie/LottieAnimation.js

@@ -61,6 +61,25 @@ const LottieAnimation = ({
     [animationSegment, animationLoop, speed]
   );
   useEffect(() => clearTimers, []);
+  useEffect(() => {
+    const redrawFrame = (d, frame) => {
+      d.setFrame(frame < 1 ? frame + 1 : frame - 1);
+      d.setFrame(frame);
+    };
+    const onVisible = () => {
+      const d = dotRef.current;
+      if (document.visibilityState !== "visible" || !d?.isLoaded) return;
+      if (!animationLoop) {
+        const endFrame = animationSegment?.[1] ?? d.totalFrames;
+        d.pause();
+        redrawFrame(d, endFrame);
+        return;
+      }
+      redrawFrame(d, d.currentFrame);
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [animationLoop, animationSegment]);
   return /* @__PURE__ */ jsx(AnimationWrapper, { $size: size, style, className, children: /* @__PURE__ */ jsx(
     DotLottieReact,
     {

package/dist/components/Payment/PaymentDetailsCard.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { colors } from "../../styles/colors.js";
 import { InfoIcon } from "../InfoIcon/InfoIcon.js";
 import { ArrowSimple } from "../icons/ArrowSimple.js";
-import { getCurrencyConfig, getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import { getCurrencyConfig, getCurrencyIcon, formatAmountForDisplay } from "../../utils/formatCurrencyValue.js";
 import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
 const CardContainer = styled.div`
   background: ${colors.white};
@@ -48,11 +48,13 @@ const AmountSubtitle = styled.div`
 const AmountDisplay = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 16px;
 `;
 const AmountLeft = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
   flex: 1;
   min-width: 0;
@@ -94,7 +96,9 @@ const AmountValue = styled.div`
   text-transform: uppercase;
   line-height: 40px;
   letter-spacing: 1.5px;
-  word-wrap: break-word;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
   color: ${colors.futureBlack};
 `;
 const Separator = styled.hr`
@@ -282,7 +286,7 @@ const AmountBlock = ({ config }) => {
     /* @__PURE__ */ jsxs(AmountDisplay, { children: [
       /* @__PURE__ */ jsxs(AmountLeft, { children: [
         renderCurrencyLogo(),
-        /* @__PURE__ */ jsx(AmountValue, { children: displayValue !== null ? displayValue : "-" })
+        /* @__PURE__ */ jsx(AmountValue, { children: displayValue !== null ? formatAmountForDisplay(displayValue) : "-" })
       ] }),
       ticker && /* @__PURE__ */ jsx(CurrencyTicker, { children: ticker })
     ] }),

package/dist/components/Payment/PaymentDisplay.js

@@ -9,7 +9,7 @@ import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js"
 import stdin_default from "../QRCode/QRCode.js";
 import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
 import { StatusDot } from "../StatusDot/StatusDot.js";
-import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import { getCurrencyIcon, formatAmountForDisplay } from "../../utils/formatCurrencyValue.js";
 const CodeWrapper = styled.div.withConfig({
   shouldForwardProp: (props) => !["maxWidth"].includes(props)
 })`
@@ -35,12 +35,18 @@ const AmountBlock = styled.div`
 const AmountRow = styled.div`
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   gap: 10px;
+  width: 100%;
 `;
 const AmountValueGroup = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 8px;
+  min-width: 0;
 `;
 const AmountValue = styled.p`
   margin: 0;
@@ -50,7 +56,9 @@ const AmountValue = styled.p`
   line-height: 40px;
   letter-spacing: 1.5px;
   color: ${colors.black};
-  word-wrap: break-word;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
 `;
 const AmountCurrency = styled.p`
   margin: 0;
@@ -169,7 +177,7 @@ const PaymentDisplay = ({
       /* @__PURE__ */ jsxs(AmountRow, { style: amountSectionStyle, children: [
         /* @__PURE__ */ jsxs(AmountValueGroup, { children: [
           /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), style: amountIconStyle, alt: currency }),
-          /* @__PURE__ */ jsx(AmountValue, { style: amountTextStyle, children: amount }),
+          /* @__PURE__ */ jsx(AmountValue, { style: amountTextStyle, children: formatAmountForDisplay(amount) }),
           /* @__PURE__ */ jsx(AmountCurrency, { style: amountTextStyle, children: currency })
         ] }),
         showCopyIcons && /* @__PURE__ */ jsx(

package/dist/components/Payment/PaymentPendingCard.js

@@ -28,6 +28,7 @@ const TextBlock = styled.div`
 `;
 const Title = styled.h2`
   margin: 0;
+  font-family: 'Open Sans', sans-serif;
   font-size: 22px;
   font-weight: 800;
   line-height: 28px;
@@ -37,6 +38,7 @@ const Title = styled.h2`
 `;
 const Description = styled.p`
   margin: 0;
+  font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   font-weight: 300;
   line-height: 24px;
@@ -45,6 +47,7 @@ const Description = styled.p`
 `;
 const FooterNote = styled.p`
   margin: 0;
+  font-family: 'Open Sans', sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 18px;

package/dist/components/Payment/PaymentSuccessCard.js

@@ -7,7 +7,7 @@ import { Button } from "../Button/Button.styles.js";
 import { CodeWrapper, AmountIcon, AmountValue, AmountCurrency } from "./PaymentDisplay.js";
 import { DetailsToggle } from "./DetailsToggle.js";
 import { LottieAnimation } from "../Lottie/LottieAnimation.js";
-import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import { getCurrencyIcon, formatAmountForDisplay } from "../../utils/formatCurrencyValue.js";
 import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
 const IconCircle = styled.div`
   flex-shrink: 0;
@@ -47,7 +47,10 @@ const Description = styled.p`
 const AmountRow = styled.div`
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   gap: 8px;
+  max-width: 100%;
 `;
 const ActionsRow = styled.div`
   display: flex;
@@ -102,7 +105,7 @@ const PaymentSuccessCard = ({
     ] }),
     hasAmount && /* @__PURE__ */ jsxs(AmountRow, { children: [
       currency && /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), alt: currency }),
-      /* @__PURE__ */ jsx(AmountValue, { children: amount }),
+      /* @__PURE__ */ jsx(AmountValue, { children: formatAmountForDisplay(amount) }),
       currency && /* @__PURE__ */ jsx(AmountCurrency, { children: currency })
     ] }),
     rows.length > 0 && /* @__PURE__ */ jsx(DetailsToggle, { rows, defaultOpen: detailsDefaultOpen, showLabel: showDetailsLabel, hideLabel: hideDetailsLabel }),

package/dist/utils/formatCurrencyValue.js

@@ -4,6 +4,7 @@ import BitcoinLogo from "../static/images/currency/bitcoin-logo.png.js";
 import BMN2Logo from "../static/images/currency/bmn2-logo.png.js";
 import ETHLogo from "../static/images/currency/eth_logo.svg.js";
 import USDTLogo from "../static/images/currency/usdt-logo.png.js";
+import { formatDisplayNumber } from "./fix-decimals.js";
 const CURRENCY_CONFIG = {
   tether: ["USDT", 2],
   gemini: ["GUSD", 2],
@@ -46,6 +47,14 @@ const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) =
   const formattedValue = parseFloat(Math.abs(value)).toFixed(decimals);
   return valueFirst ? `${formattedValue} ${symbol}` : `${symbol} ${formattedValue}`;
 };
+const formatAmountForDisplay = (amount) => {
+  if (amount === void 0 || amount === null || amount === "") return amount;
+  const plain = String(amount).replace(/,/g, "");
+  const decimalPart = plain.split(".")[1];
+  const digits = decimalPart ? decimalPart.length : 0;
+  const formatted = formatDisplayNumber(plain, { minimumFractionDigits: digits, maximumFractionDigits: digits });
+  return formatted || amount;
+};
 const getCurrencySymbol = (currencySelected) => {
   const config = CURRENCY_CONFIG[currencySelected];
   if (config) {
@@ -94,6 +103,7 @@ const getLiquidAssetIcon = async (assetId) => {
 };
 export {
   CURRENCY_CONFIG,
+  formatAmountForDisplay,
   formatCurrencyValue,
   getCurrencyConfig,
   getCurrencyIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.72-beta.5",
+  "version": "3.0.72-beta.7",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",