@stokr/components-library 3.0.72-beta.6 → 3.0.72

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;
@@ -29,6 +29,7 @@ const TextBlock = styled.div`
 `;
 const Title = styled.h2`
   margin: 0;
+  font-family: 'Open Sans';
   font-size: 22px;
   font-weight: 800;
   line-height: 28px;
@@ -47,7 +48,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 +106,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/index.js

@@ -131,7 +131,7 @@ import { generateCoreChecklistTasks, getVerifyIdentityChecklist } from "./utils/
 import { CopyToClipBoardTooltip, copyTextToClipboard, useCopyToClipboard, withCopyToClipboard } from "./utils/copyToClipboard.js";
 import { cooldownHOC, useComponentVisible, useContainerSize, useCooldown, useMobileView, usePrevious } from "./utils/customHooks.js";
 import { fixDecimals, formatDisplayNumber } from "./utils/fix-decimals.js";
-import { CURRENCY_CONFIG, formatCurrencyValue, getCurrencyConfig, getCurrencyIcon, getCurrencySymbol, getLiquidAssetIcon, getProjectCurrencySign } from "./utils/formatCurrencyValue.js";
+import { CURRENCY_CONFIG, formatAmountForDisplay, formatCurrencyValue, getCurrencyConfig, getCurrencyIcon, getCurrencySymbol, getLiquidAssetIcon, getProjectCurrencySign } from "./utils/formatCurrencyValue.js";
 import { isUSInvestor, usCountries } from "./utils/isUSInvestor.js";
 import { ENTROPY_MEDIUM, ENTROPY_WEAK, PASSWORD_MIN_LENGTH, PASSWORD_REQUIREMENTS_MESSAGE, getPasswordCriteria, getPasswordEntropy, isPasswordValid } from "./utils/password-validation.js";
 import { km_ify } from "./utils/km_ify.js";
@@ -614,6 +614,7 @@ export {
   flatten,
   default2 as fontFaces,
   format,
+  formatAmountForDisplay,
   formatCurrencyValue,
   formatDisplayNumber,
   generateCoreChecklistTasks,

package/dist/static/images/currency/eur.svg

@@ -1,3 +1,4 @@
-<svg width="8" height="10" version="1.1" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">
-  <path transform="translate(0)" d="M3.45,5.385h3.1L6.375,6.538H3.45v.313a1.451,1.451,0,0,0,.412,1.166,2.523,2.523,0,0,0,1.563.349A15.75,15.75,0,0,0,7.75,8.149L8,9.712A11.974,11.974,0,0,1,5.35,10q-4.1,0-4.1-2.812V6.538H0V5.385H1.25V4.231H0V3.077H1.25V2.813Q1.25,0,5.35,0A11.974,11.974,0,0,1,8,.288L7.75,1.851a15.75,15.75,0,0,0-2.325-.216,2.53,2.53,0,0,0-1.55.349A1.273,1.273,0,0,0,3.45,3.029v.048H6.9L6.725,4.231H3.45Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <circle cx="16" cy="16" r="16" fill="#202020"/>
+  <text x="16" y="21.5" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700" fill="#ffffff">&#8364;</text>
 </svg>

package/dist/static/images/currency/eur.svg.js

@@ -0,0 +1,4 @@
+const EURLogo = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzIwMjAyMCIvPgogIDx0ZXh0IHg9IjE2IiB5PSIyMS41IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2ZmZmZmZiI+JiM4MzY0OzwvdGV4dD4KPC9zdmc+Cg==";
+export {
+  EURLogo as default
+};

package/dist/static/images/currency/usd.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <circle cx="16" cy="16" r="16" fill="#202020"/>
+  <text x="16" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="17" font-weight="700" fill="#ffffff">$</text>
+</svg>

package/dist/static/images/currency/usd.svg.js

@@ -0,0 +1,4 @@
+const USDLogo = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzIwMjAyMCIvPgogIDx0ZXh0IHg9IjE2IiB5PSIyMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTciIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmZmZmYiPiQ8L3RleHQ+Cjwvc3ZnPgo=";
+export {
+  USDLogo as default
+};

package/dist/utils/formatCurrencyValue.js

@@ -4,6 +4,9 @@ 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 USDLogo from "../static/images/currency/usd.svg.js";
+import EURLogo from "../static/images/currency/eur.svg.js";
+import { formatDisplayNumber } from "./fix-decimals.js";
 const CURRENCY_CONFIG = {
   tether: ["USDT", 2],
   gemini: ["GUSD", 2],
@@ -46,6 +49,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) {
@@ -79,6 +90,12 @@ const getCurrencyIcon = (currency, customIcon) => {
     case "eth":
     case "eth-fb":
       return ETHLogo;
+    case "usd":
+    case "usd-in-kind":
+      return USDLogo;
+    case "euro":
+    case "eur":
+      return EURLogo;
     default:
       return null;
   }
@@ -94,6 +111,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.6",
+  "version": "3.0.72",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",