@stokr/components-library 3.0.56 → 3.0.57

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

@@ -16,10 +16,10 @@ const EnterCode = (props) => {
   return /* @__PURE__ */ jsx(Wrapper, { isModal, ...props, children: /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
       /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "Enter 2FA code" }),
-        /* @__PURE__ */ jsx("p", { children: "Enter the log in 2FA code from your authenticator app" })
+        /* @__PURE__ */ jsx("h3", { children: "TWO-FACTOR AUTHENTICATION" }),
+        /* @__PURE__ */ jsx("p", { children: "Enter the verification code from your authenticator application." })
       ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: onModalSwitch && /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-enter-code-lost-device", onClick: onModalSwitch, children: "Lost your device?" }) }) })
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: onModalSwitch && /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-enter-code-lost-device", onClick: onModalSwitch, children: "Lost access to your device?" }) }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
       Formik,

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

@@ -9,10 +9,10 @@ const ResetCode = (props) => {
   return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, background, children: /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
       /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "Lost your device?" }),
-        /* @__PURE__ */ jsx("p", { children: "No problem! We are here to help you..." })
+        /* @__PURE__ */ jsx("h3", { children: "AUTHENTICATION DEVICE UNAVAILABLE" }),
+        /* @__PURE__ */ jsx("p", { children: "Please contact our support team to reset your two-factor authentication." })
       ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-reset-code-back-to-enter-code", onClick: onModalSwitch, children: "Enter 2FA code" }) }) })
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-reset-code-back-to-enter-code", onClick: onModalSwitch, children: "Return to log in" }) }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
       "a",
@@ -22,7 +22,7 @@ const ResetCode = (props) => {
         rel: "noreferrer",
         "data-cy": "2fa-reset-code-contact-support",
         style: { textDecoration: "underline" },
-        children: "Contact us to reset your 2FA."
+        children: "Contact us to reset your two-factor authentication."
       }
     ) }) }) }) })
   ] }) });

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -33,8 +33,8 @@ class ForgotPasswordModal extends PureComponent {
       isResettingExpiredToken
     } = this.props;
     const headerTextContent = isResettingExpiredToken ? "This Invite Link Has Expired" : "Reset Your password";
-    const mainTextContent = isResettingExpiredToken ? "To continue, request a new one using your email, and access will be sent shortly." : "No hints. No nudges. Just a nice, easy reset link direct to your inbox.";
-    const footerTextContent = isResettingExpiredToken ? "Already have an account? " : "Remember your password? ";
+    const mainTextContent = isResettingExpiredToken ? "To continue, request a new one using your email, and access will be sent shortly." : "Enter your email address and we will send you a link to reset your password.";
+    const footerTextContent = isResettingExpiredToken ? "Already registered? " : "Remember your password? ";
     return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, background, children: /* @__PURE__ */ jsxs(Row, { children: [
       /* @__PURE__ */ jsxs(Column, { part: 8, children: [
         /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [

package/dist/components/LoginModal/LoginModal.js

@@ -45,11 +45,21 @@ const LoginModal = (props) => {
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
       /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
         /* @__PURE__ */ jsx("h3", { children: "Log in" }),
-        /* @__PURE__ */ jsx("p", { children: "Come on in to stoke up innovation..." })
+        /* @__PURE__ */ jsx("p", { children: "Access your account and manage your investments." })
       ] }) }),
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
-        "Don't have an account yet? ",
-        /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", "data-cy": "login-modal-switch-to-signup", onClick: onModalSwitch, children: "Sign up" })
+        "Don't have an account? ",
+        /* @__PURE__ */ jsx(
+          ModalLink,
+          {
+            type: "button",
+            to: "#",
+            as: "button",
+            "data-cy": "login-modal-switch-to-signup",
+            onClick: onModalSwitch,
+            children: "Sign up"
+          }
+        )
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
@@ -104,7 +114,17 @@ const LoginModal = (props) => {
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password })
             ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "login-submit-btn", "data-cy": "login-modal-submit", fluid: true, disabled: submitDisabled, children: isActionLoading === "login" ? "Logging in" : "Login" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                id: "login-submit-btn",
+                "data-cy": "login-modal-submit",
+                fluid: true,
+                disabled: submitDisabled,
+                children: isActionLoading === "login" ? "Logging in" : "Login"
+              }
+            ) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "login", children: popupError.message }) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
               TextLink,

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 { formatCurrencyValue, getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+import { getCurrencyConfig, getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
 import externalLinkIcon from "../../static/images/external-link-icon.svg.js";
 const CardContainer = styled.div`
   background: ${colors.white};
@@ -65,6 +65,7 @@ const CurrencyTicker = styled.div`
   line-height: 28px;
   flex-shrink: 0;
   margin-left: auto;
+  text-transform: uppercase;
 `;
 const CurrencyLogo = styled.div.withConfig({
   shouldForwardProp: (props) => !["color"].includes(props)
@@ -245,12 +246,23 @@ const AmountBlock = ({ config }) => {
   if (React__default.isValidElement(config)) {
     return config;
   }
-  const { label = "Amount", subtitle, amount, currency, currencyColor, icon, showTicker = true, banner } = config;
-  const formattedAmount = amount !== void 0 && amount !== null && amount !== "" ? formatCurrencyValue(currency, amount, 2, { valueFirst: true }) : null;
+  const {
+    label = "Amount",
+    subtitle,
+    amount,
+    currency,
+    decimals,
+    currencyColor,
+    icon,
+    showTicker = true,
+    banner
+  } = config;
+  const { symbol, decimals: resolvedDecimals } = getCurrencyConfig(currency, decimals ?? 2);
+  const hasAmount = amount !== void 0 && amount !== null && amount !== "";
+  const displayValue = hasAmount ? parseFloat(Math.abs(amount)).toFixed(resolvedDecimals) : null;
   const currencyIcon = getCurrencyIcon(currency, icon);
   const logoColor = currencyColor || colors.black;
-  const ticker = showTicker ? (currency || "").toUpperCase() : null;
-  const displayValue = formattedAmount ? formattedAmount.replace(/\s*\S+$/, "") : null;
+  const ticker = showTicker ? symbol : null;
   const renderCurrencyLogo = () => {
     if (currencyIcon) {
       return /* @__PURE__ */ jsx(CurrencyLogo, { color: "transparent", children: /* @__PURE__ */ jsx(CurrencyIcon, { src: currencyIcon, alt: currency || "currency" }) });

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.js

@@ -34,18 +34,27 @@ const RegisterConfirmModal = ({
   return /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, id, children: [
     /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
       /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "GREAT! CHECK YOUR INBOX" }),
+        /* @__PURE__ */ jsx("h3", { children: "VERIFY YOUR EMAIL ADDRESS" }),
         /* @__PURE__ */ jsxs("p", { children: [
-          "We sent an email to ",
+          "A verification link has been sent to ",
           userEmail,
-          " — tap the link to verify your address and activate your account."
+          ". Please follow the link in the email to confirm your email address and activate your account."
         ] })
       ] }),
       /* @__PURE__ */ jsxs(Text.Caption, { children: [
-        "Email didn't arrive?",
+        "Email not received?",
         /* @__PURE__ */ jsx("br", {})
       ] }),
-      /* @__PURE__ */ jsx(TextLink, { to: "", "data-cy": "register-confirm-modal-resend-email", onClick: onResend, disabled: cooldown?.isDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }),
+      /* @__PURE__ */ jsx(
+        TextLink,
+        {
+          to: "",
+          "data-cy": "register-confirm-modal-resend-email",
+          onClick: onResend,
+          disabled: cooldown?.isDisabled,
+          children: isActionLoading === "resend" ? "Resending email" : "Resend verification email"
+        }
+      ),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resend", children: popupError.message }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupSuccess.popup === "resend", children: popupSuccess.message }) }),
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: cooldown?.isDisabled && /* @__PURE__ */ jsx(FormError, { show: cooldown?.isDisabled, children: `You can resend email in ${cooldown?.secondsRemaining} seconds` }) })

package/dist/components/RegisterModal/RegisterModal.js

@@ -40,7 +40,7 @@ const RegisterModal = (props) => {
     title: "privacy"
   });
   const [newsletterCheckbox, setNewsletterCheckbox] = useState({
-    agreementText: "Yes! Send me STOKR news and updates",
+    agreementText: "I would like to receive updates and news from STOKR.",
     label: "newsletter",
     text: "",
     title: "newsletter"
@@ -93,10 +93,10 @@ const RegisterModal = (props) => {
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
       /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
         /* @__PURE__ */ jsx("h3", { children: "CREATE YOUR STOKR ACCOUNT" }),
-        /* @__PURE__ */ jsx("p", { children: "Get ready to invest in innovative business ventures. No fees. Always free." })
+        /* @__PURE__ */ jsx("p", { children: "Register on STOKR to access digital securities offerings and manage your investments." })
       ] }) }),
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
-        "Already have an account?",
+        "Already registered?",
         " ",
         /* @__PURE__ */ jsx(
           ModalLink,

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -20,16 +20,12 @@ const RedBar = styled.div`
 const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, children: [
   /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { relative: true, part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { isConfirmModal: true, children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
     /* @__PURE__ */ jsxs(Text, { withBorder: true, isConfirm: true, children: [
-      /* @__PURE__ */ jsxs("h3", { children: [
-        "Abracadabra!",
-        /* @__PURE__ */ jsx("br", {}),
-        "You're back in the game!"
-      ] }),
-      /* @__PURE__ */ jsx("p", { children: "Your new password has been set." })
+      /* @__PURE__ */ jsx("h3", { children: "PASSWORD UPDATED" }),
+      /* @__PURE__ */ jsx("p", { children: "Your password has been updated. You may now sign in with your new credentials." })
     ] }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(Button, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Login" })
+    /* @__PURE__ */ jsx(Button, { "data-cy": "reset-confirm-modal-login", onClick: onModalSwitch, children: "Log in" })
   ] }) }) }) }),
   /* @__PURE__ */ jsx(RedBar, {})
 ] });

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -40,8 +40,8 @@ const ResetPasswordModal = ({
   return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
       /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx("h3", { children: "RESET YOUR PASSWORD" }),
-        /* @__PURE__ */ jsx("p", { children: "Please set your new password." })
+        /* @__PURE__ */ jsx("h3", { children: "SET A NEW PASSWORD" }),
+        /* @__PURE__ */ jsx("p", { children: "Enter and confirm your new password." })
       ] }) }),
       /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
         "Remember your password? ",

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -23,7 +23,8 @@ const renderSuccessModal = (continueUrl) => /* @__PURE__ */ jsx(Fragment, { chil
     onClick: () => {
       window.open(continueUrl, "_self");
     },
-    textRight: "We have successfully verified your email!"
+    titleText: "Email verified",
+    textRight: "Your email address has been verified."
   }
 ) });
 const RenderErrorModal = (props) => {

package/dist/index.js

@@ -122,7 +122,7 @@ import { checkTodoStatus } from "./utils/check-todo-status.js";
 import { generateCoreChecklistTasks, getVerifyIdentityChecklist } from "./utils/checklistGenerator.js";
 import { CopyToClipBoardTooltip, copyTextToClipboard, useCopyToClipboard, withCopyToClipboard } from "./utils/copyToClipboard.js";
 import { cooldownHOC, useComponentVisible, useContainerSize, useCooldown, useMobileView, usePrevious } from "./utils/customHooks.js";
-import { fixDecimals } from "./utils/fix-decimals.js";
+import { fixDecimals, formatDisplayNumber } from "./utils/fix-decimals.js";
 import { CURRENCY_CONFIG, 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";
@@ -599,6 +599,7 @@ export {
   default2 as fontFaces,
   format,
   formatCurrencyValue,
+  formatDisplayNumber,
   generateCoreChecklistTasks,
   getAmountBucket,
   getAnalyticsIngestUrl,

package/dist/utils/fix-decimals.js

@@ -1,4 +1,11 @@
 const fixDecimals = (value, decimals, roundingFn = Math.round) => (roundingFn(Number(value) * 10 ** decimals) / 10 ** decimals).toFixed(decimals);
+const formatDisplayNumber = (value, { minimumFractionDigits = 0, maximumFractionDigits } = {}) => {
+  const num = typeof value === "number" ? value : parseFloat(value);
+  if (num == null || Number.isNaN(num)) return "";
+  const max = maximumFractionDigits != null ? Math.max(maximumFractionDigits, minimumFractionDigits) : Math.max(minimumFractionDigits, 3);
+  return num.toLocaleString("en", { minimumFractionDigits, maximumFractionDigits: max });
+};
 export {
-  fixDecimals
+  fixDecimals,
+  formatDisplayNumber
 };

package/dist/utils/formatCurrencyValue.js

@@ -14,8 +14,8 @@ const CURRENCY_CONFIG = {
   "lusdt-bfx": ["USDT", 2],
   "lbtc-bfx": ["LBTC", 8],
   "btc-bfx": ["BTC", 8],
-  euro: ["EUR", 2],
-  usd: ["USD", 2],
+  euro: ["EUR", 2, "€"],
+  usd: ["USD", 2, "$"],
   chf: ["CHF", 2],
   lusdt: ["USDT", 2],
   "bitcoin-private": ["EUR", 2],
@@ -25,12 +25,17 @@ const CURRENCY_CONFIG = {
   "btc-fb": ["BTC", 8],
   "usdc-fb": ["USDC", 2],
   "usdq-fb": ["USDQ", 2],
+  "eth-fb": ["ETH", 4],
   xaut: ["XAUt", 6],
-  "usd-in-kind": ["USD", 2]
+  "usd-in-kind": ["USD", 2, "$"]
 };
 const getCurrencyConfig = (currency, tokenDecimals = 2) => {
-  const [symbol, decimals] = CURRENCY_CONFIG[currency] || [currency, tokenDecimals];
-  return { symbol, decimals };
+  const config = CURRENCY_CONFIG[String(currency ?? "").toLowerCase()];
+  if (config) {
+    const [symbol, decimals, sign] = config;
+    return { symbol, decimals, sign: sign ?? symbol, matched: true };
+  }
+  return { symbol: currency, decimals: tokenDecimals, sign: currency, matched: false };
 };
 const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) => {
   const { valueFirst = false, formatter } = options;
@@ -41,27 +46,14 @@ const formatCurrencyValue = (currency, value, tokenDecimals = 2, options = {}) =
   const formattedValue = parseFloat(Math.abs(value)).toFixed(decimals);
   return valueFirst ? `${formattedValue} ${symbol}` : `${symbol} ${formattedValue}`;
 };
-const getCurrencySymbol = (currencySelected) => ({
-  euro: "€",
-  usd: "$",
-  ether: "ETH",
-  chf: "CHF",
-  tether: "USDT",
-  bitcoin: "BTC",
-  lbtc: "LBTC",
-  lusdt: "USDT",
-  "lusdt-bfx": "USDT",
-  "lbtc-bfx": "LBTC",
-  "btc-bfx": "BTC",
-  bmn1: "BMN1",
-  bmn2: "BMN2",
-  "btc-fb": "BTC",
-  "usdc-fb": "USDC",
-  "usdq-fb": "USDQ",
-  xaut: "XAUt",
-  "eth-fb": "ETH",
-  "usd-in-kind": "$"
-})[currencySelected] || currencySelected;
+const getCurrencySymbol = (currencySelected) => {
+  const config = CURRENCY_CONFIG[currencySelected];
+  if (config) {
+    const [symbol, , sign] = config;
+    return sign ?? symbol;
+  }
+  return currencySelected;
+};
 const getProjectCurrencySign = (tokenCurrency) => {
   return tokenCurrency === "EUR" ? "€" : tokenCurrency === "USD" ? "$" : tokenCurrency === "BTC" ? "₿" : "";
 };

package/package.json

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