@multiversx/sdk-dapp-liquidity 0.2.0-alpha.1

package/reactjs/components/CopyButton/CopyButton.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const faCheck = require("@fortawesome/free-solid-svg-icons/faCheck");
+const faCopy = require("@fortawesome/free-solid-svg-icons/faCopy");
+const reactFontawesome = require("@fortawesome/react-fontawesome");
+const require$$0 = require("react");
+const reactjs_components_CopyButton_utils_copyToClipboard = require("./utils/copyToClipboard.js");
+const reactjs_components_base_MxButton_MxButton = require("../base/MxButton/MxButton.js");
+const CopyButton = ({ text, className = "" }) => {
+  const [copyResult, setCopyResut] = require$$0.useState({
+    default: true,
+    success: false
+  });
+  const handleOnClick = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const noSpaces = text ? text.trim() : text;
+    setCopyResut({
+      default: false,
+      success: await reactjs_components_CopyButton_utils_copyToClipboard.copyTextToClipboard(noSpaces)
+    });
+    setTimeout(() => {
+      setCopyResut({
+        default: true,
+        success: false
+      });
+    }, 1e3);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactjs_components_base_MxButton_MxButton.MxButton,
+    {
+      btnSize: "sm",
+      className,
+      variant: "link-neutral-500",
+      onClick: handleOnClick,
+      children: copyResult.default || !copyResult.success ? /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faCopy.faCopy }) : /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: faCheck.faCheck })
+    }
+  );
+};
+exports.CopyButton = CopyButton;

package/reactjs/components/CopyButton/CopyButton.mjs

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
+import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import require$$0 from "react";
+import { copyTextToClipboard } from "./utils/copyToClipboard.mjs";
+import { MxButton } from "../base/MxButton/MxButton.mjs";
+const CopyButton = ({ text, className = "" }) => {
+  const [copyResult, setCopyResut] = require$$0.useState({
+    default: true,
+    success: false
+  });
+  const handleOnClick = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const noSpaces = text ? text.trim() : text;
+    setCopyResut({
+      default: false,
+      success: await copyTextToClipboard(noSpaces)
+    });
+    setTimeout(() => {
+      setCopyResut({
+        default: true,
+        success: false
+      });
+    }, 1e3);
+  };
+  return /* @__PURE__ */ jsx(
+    MxButton,
+    {
+      btnSize: "sm",
+      className,
+      variant: "link-neutral-500",
+      onClick: handleOnClick,
+      children: copyResult.default || !copyResult.success ? /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCopy }) : /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCheck })
+    }
+  );
+};
+export {
+  CopyButton
+};

package/reactjs/components/CopyButton/index.d.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

package/reactjs/components/CopyButton/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_CopyButton_CopyButton = require("./CopyButton.js");
+exports.CopyButton = reactjs_components_CopyButton_CopyButton.CopyButton;

package/reactjs/components/CopyButton/index.mjs

@@ -0,0 +1,4 @@
+import { CopyButton } from "./CopyButton.mjs";
+export {
+  CopyButton
+};

package/reactjs/components/CopyButton/utils/copyToClipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyTextToClipboard(text: string): Promise<boolean>;

package/reactjs/components/CopyButton/utils/copyToClipboard.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function fallbackCopyTextToClipboard(text) {
+  let success = false;
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.style.position = "fixed";
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    success = true;
+  } catch (err) {
+    console.error("Fallback: Oops, unable to copy", err);
+  }
+  document.body.removeChild(textArea);
+  return success;
+}
+async function copyTextToClipboard(text) {
+  let success = false;
+  if (!navigator.clipboard) {
+    success = fallbackCopyTextToClipboard(text);
+  } else {
+    success = await navigator.clipboard.writeText(text).then(
+      function done() {
+        return true;
+      },
+      function error(err) {
+        console.error("Async: Could not copy text: ", err);
+        return false;
+      }
+    );
+  }
+  return success;
+}
+exports.copyTextToClipboard = copyTextToClipboard;

package/reactjs/components/CopyButton/utils/copyToClipboard.mjs

@@ -0,0 +1,37 @@
+function fallbackCopyTextToClipboard(text) {
+  let success = false;
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.style.position = "fixed";
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    success = true;
+  } catch (err) {
+    console.error("Fallback: Oops, unable to copy", err);
+  }
+  document.body.removeChild(textArea);
+  return success;
+}
+async function copyTextToClipboard(text) {
+  let success = false;
+  if (!navigator.clipboard) {
+    success = fallbackCopyTextToClipboard(text);
+  } else {
+    success = await navigator.clipboard.writeText(text).then(
+      function done() {
+        return true;
+      },
+      function error(err) {
+        console.error("Async: Could not copy text: ", err);
+        return false;
+      }
+    );
+  }
+  return success;
+}
+export {
+  copyTextToClipboard
+};

package/reactjs/components/CopyButton/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './copyToClipboard';

package/reactjs/components/CopyButton/utils/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_CopyButton_utils_copyToClipboard = require("./copyToClipboard.js");
+exports.copyTextToClipboard = reactjs_components_CopyButton_utils_copyToClipboard.copyTextToClipboard;

package/reactjs/components/CopyButton/utils/index.mjs

@@ -0,0 +1,4 @@
+import { copyTextToClipboard } from "./copyToClipboard.mjs";
+export {
+  copyTextToClipboard
+};

package/reactjs/components/DisplayAmount/DisplayAmount.d.ts

@@ -0,0 +1,21 @@
+import { Placement } from 'react-joyride';
+import { HTMLProps } from 'react';
+
+export interface DisplayAmountProps extends HTMLProps<HTMLSpanElement> {
+    sufix?: string;
+    prefix?: string;
+    digits?: number;
+    decimals?: number;
+    className?: string;
+    amount: string;
+    shouldAnimate?: boolean;
+    shouldTruncate?: boolean;
+    shouldBePrecised?: boolean;
+    tooltipThreshold?: number;
+    shouldShowTooltip?: boolean;
+    style?: React.CSSProperties;
+    tooltipPlacement?: Placement;
+    showLastNonZeroDecimal?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export declare const DisplayAmount: ({ amount, decimals, sufix, prefix, className, tooltipThreshold, shouldAnimate, shouldTruncate, shouldBePrecised, tooltipPlacement, showLastNonZeroDecimal, digits, shouldShowTooltip, ...rest }: DisplayAmountProps) => import("react/jsx-runtime").JSX.Element;

package/reactjs/components/DisplayAmount/DisplayAmount.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const bignumber = require("../../../bignumber-B8vjg9qn.js");
+const isString = require("lodash/isString");
+const reactjs_components_DisplayAmount_components_AnimateNumber_AnimateNumber = require("./components/AnimateNumber/AnimateNumber.js");
+const reactjs_components_DisplayAmount_components_PrecisedAmount_PrecisedAmount = require("./components/PrecisedAmount/PrecisedAmount.js");
+const reactjs_components_DisplayAmount_utils_truncateAmount = require("./utils/truncateAmount.js");
+const reactjs_utils_formatAmount = require("../../utils/formatAmount.js");
+const reactjs_utils_getCleanStringAmount = require("../../utils/getCleanStringAmount.js");
+const reactjs_utils_isStringFloat = require("../../utils/isStringFloat.js");
+const reactjs_utils_mxClsx = require("../../utils/mxClsx.js");
+const reactjs_utils_roundAmount = require("../../utils/roundAmount.js");
+const reactjs_components_base_MxTooltip_MxTooltip = require("../base/MxTooltip/MxTooltip.js");
+const DisplayAmount = ({
+  amount,
+  decimals,
+  sufix = "",
+  prefix = "",
+  className = "",
+  tooltipThreshold = 0,
+  shouldAnimate = false,
+  shouldTruncate = false,
+  shouldBePrecised = true,
+  tooltipPlacement = "top",
+  showLastNonZeroDecimal = true,
+  digits = 4,
+  shouldShowTooltip = true,
+  ...rest
+}) => {
+  const stringAmount = isString(amount) ? reactjs_utils_getCleanStringAmount.getCleanStringAmount(amount).amountWithoutCommas : String(amount);
+  const isValidStringAmount = reactjs_utils_isStringFloat.isStringFloat(stringAmount);
+  const isZero = new bignumber.BigNumber(
+    isValidStringAmount ? stringAmount : "0"
+  ).isEqualTo(0);
+  if (!isValidStringAmount || isZero) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, className: reactjs_utils_mxClsx.mxClsx(className), children: [
+      prefix,
+      amount,
+      sufix
+    ] });
+  }
+  const formattedAmount = decimals ? reactjs_utils_formatAmount.formatAmount({
+    digits,
+    decimals,
+    addCommas: true,
+    amount: stringAmount,
+    showLastNonZeroDecimal
+  }) : reactjs_utils_roundAmount.roundAmount(stringAmount, digits, true);
+  const bnAmount = new bignumber.BigNumber(formattedAmount);
+  const bnTooltipThreshold = new bignumber.BigNumber(tooltipThreshold);
+  const tooltipThresholdReached = bnAmount.isLessThan(bnTooltipThreshold);
+  if (shouldBePrecised && new bignumber.BigNumber(formattedAmount).isLessThan(1)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_DisplayAmount_components_PrecisedAmount_PrecisedAmount.PrecisedAmount,
+      {
+        ...rest,
+        sufix,
+        prefix,
+        digits,
+        className,
+        amount: formattedAmount,
+        shouldShowTooltip
+      }
+    );
+  }
+  if (tooltipThresholdReached) {
+    const prefixWhenTooltip = prefix.includes("<") ? prefix : "< ";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+      {
+        placement: tooltipPlacement,
+        buttonText: /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, className: reactjs_utils_mxClsx.mxClsx("liq-max-w-fit", className), children: [
+          prefixWhenTooltip,
+          tooltipThreshold,
+          sufix
+        ] }),
+        hideTooltip: !shouldShowTooltip,
+        children: formattedAmount
+      }
+    );
+  }
+  const truncatedAmount = shouldTruncate ? reactjs_components_DisplayAmount_utils_truncateAmount.truncateAmount(formattedAmount) : formattedAmount;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, className: reactjs_utils_mxClsx.mxClsx(className), children: [
+    prefix,
+    shouldAnimate && !shouldTruncate ? /* @__PURE__ */ jsxRuntime.jsx(reactjs_components_DisplayAmount_components_AnimateNumber_AnimateNumber.AnimateNumber, { ...rest, amount: formattedAmount }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: truncatedAmount }),
+    sufix
+  ] });
+};
+exports.DisplayAmount = DisplayAmount;

package/reactjs/components/DisplayAmount/DisplayAmount.mjs

@@ -0,0 +1,90 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { B as BigNumber } from "../../../bignumber-CKZkoo0g.mjs";
+import isString from "lodash/isString";
+import { AnimateNumber } from "./components/AnimateNumber/AnimateNumber.mjs";
+import { PrecisedAmount } from "./components/PrecisedAmount/PrecisedAmount.mjs";
+import { truncateAmount } from "./utils/truncateAmount.mjs";
+import { formatAmount } from "../../utils/formatAmount.mjs";
+import { getCleanStringAmount } from "../../utils/getCleanStringAmount.mjs";
+import { isStringFloat } from "../../utils/isStringFloat.mjs";
+import { mxClsx } from "../../utils/mxClsx.mjs";
+import { roundAmount } from "../../utils/roundAmount.mjs";
+import { MxTooltip } from "../base/MxTooltip/MxTooltip.mjs";
+const DisplayAmount = ({
+  amount,
+  decimals,
+  sufix = "",
+  prefix = "",
+  className = "",
+  tooltipThreshold = 0,
+  shouldAnimate = false,
+  shouldTruncate = false,
+  shouldBePrecised = true,
+  tooltipPlacement = "top",
+  showLastNonZeroDecimal = true,
+  digits = 4,
+  shouldShowTooltip = true,
+  ...rest
+}) => {
+  const stringAmount = isString(amount) ? getCleanStringAmount(amount).amountWithoutCommas : String(amount);
+  const isValidStringAmount = isStringFloat(stringAmount);
+  const isZero = new BigNumber(
+    isValidStringAmount ? stringAmount : "0"
+  ).isEqualTo(0);
+  if (!isValidStringAmount || isZero) {
+    return /* @__PURE__ */ jsxs("span", { ...rest, className: mxClsx(className), children: [
+      prefix,
+      amount,
+      sufix
+    ] });
+  }
+  const formattedAmount = decimals ? formatAmount({
+    digits,
+    decimals,
+    addCommas: true,
+    amount: stringAmount,
+    showLastNonZeroDecimal
+  }) : roundAmount(stringAmount, digits, true);
+  const bnAmount = new BigNumber(formattedAmount);
+  const bnTooltipThreshold = new BigNumber(tooltipThreshold);
+  const tooltipThresholdReached = bnAmount.isLessThan(bnTooltipThreshold);
+  if (shouldBePrecised && new BigNumber(formattedAmount).isLessThan(1)) {
+    return /* @__PURE__ */ jsx(
+      PrecisedAmount,
+      {
+        ...rest,
+        sufix,
+        prefix,
+        digits,
+        className,
+        amount: formattedAmount,
+        shouldShowTooltip
+      }
+    );
+  }
+  if (tooltipThresholdReached) {
+    const prefixWhenTooltip = prefix.includes("<") ? prefix : "< ";
+    return /* @__PURE__ */ jsx(
+      MxTooltip,
+      {
+        placement: tooltipPlacement,
+        buttonText: /* @__PURE__ */ jsxs("span", { ...rest, className: mxClsx("liq-max-w-fit", className), children: [
+          prefixWhenTooltip,
+          tooltipThreshold,
+          sufix
+        ] }),
+        hideTooltip: !shouldShowTooltip,
+        children: formattedAmount
+      }
+    );
+  }
+  const truncatedAmount = shouldTruncate ? truncateAmount(formattedAmount) : formattedAmount;
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: mxClsx(className), children: [
+    prefix,
+    shouldAnimate && !shouldTruncate ? /* @__PURE__ */ jsx(AnimateNumber, { ...rest, amount: formattedAmount }) : /* @__PURE__ */ jsx(Fragment, { children: truncatedAmount }),
+    sufix
+  ] });
+};
+export {
+  DisplayAmount
+};

package/reactjs/components/DisplayAmount/components/AnimateNumber/AnimateNumber.d.ts

@@ -0,0 +1,7 @@
+interface AnimateNumberProps {
+    amount: string;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export declare const AnimateNumber: ({ amount, onClick, ...rest }: AnimateNumberProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/reactjs/components/DisplayAmount/components/AnimateNumber/AnimateNumber.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AnimatedNumber = require("animated-number-react");
+const require$$0 = require("react");
+const reactjs_utils_getCleanStringAmount = require("../../../../utils/getCleanStringAmount.js");
+const reactjs_utils_roundAmount = require("../../../../utils/roundAmount.js");
+const AnimateNumber = ({
+  amount,
+  onClick,
+  ...rest
+}) => {
+  const [digits, setDigits] = require$$0.useState(0);
+  const [updateCount, setUpdateCount] = require$$0.useState(0);
+  const [valueToAnimate, setValueToAnimate] = require$$0.useState();
+  require$$0.useEffect(() => {
+    const { amountWithoutCommas, parts } = reactjs_utils_getCleanStringAmount.getCleanStringAmount(amount);
+    setUpdateCount((existing) => existing + 1);
+    setDigits(parts.length > 1 ? parts[1].length : 0);
+    const parsedAmount = parseFloat(amountWithoutCommas);
+    const isScientificNotation = parsedAmount.toString().includes("e");
+    setValueToAnimate(isScientificNotation ? void 0 : parsedAmount);
+  }, [amount]);
+  const formatValue = (val) => reactjs_utils_roundAmount.roundAmount(`${val}`, digits, true);
+  if (!valueToAnimate) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: amount });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedNumber,
+    {
+      value: valueToAnimate,
+      duration: updateCount > 1 ? 300 : 0,
+      formatValue,
+      onClick,
+      ...rest
+    }
+  );
+};
+exports.AnimateNumber = AnimateNumber;

package/reactjs/components/DisplayAmount/components/AnimateNumber/AnimateNumber.mjs

@@ -0,0 +1,39 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import AnimatedNumber from "animated-number-react";
+import { useState, useEffect } from "react";
+import { getCleanStringAmount } from "../../../../utils/getCleanStringAmount.mjs";
+import { roundAmount } from "../../../../utils/roundAmount.mjs";
+const AnimateNumber = ({
+  amount,
+  onClick,
+  ...rest
+}) => {
+  const [digits, setDigits] = useState(0);
+  const [updateCount, setUpdateCount] = useState(0);
+  const [valueToAnimate, setValueToAnimate] = useState();
+  useEffect(() => {
+    const { amountWithoutCommas, parts } = getCleanStringAmount(amount);
+    setUpdateCount((existing) => existing + 1);
+    setDigits(parts.length > 1 ? parts[1].length : 0);
+    const parsedAmount = parseFloat(amountWithoutCommas);
+    const isScientificNotation = parsedAmount.toString().includes("e");
+    setValueToAnimate(isScientificNotation ? void 0 : parsedAmount);
+  }, [amount]);
+  const formatValue = (val) => roundAmount(`${val}`, digits, true);
+  if (!valueToAnimate) {
+    return /* @__PURE__ */ jsx(Fragment, { children: amount });
+  }
+  return /* @__PURE__ */ jsx(
+    AnimatedNumber,
+    {
+      value: valueToAnimate,
+      duration: updateCount > 1 ? 300 : 0,
+      formatValue,
+      onClick,
+      ...rest
+    }
+  );
+};
+export {
+  AnimateNumber
+};

package/reactjs/components/DisplayAmount/components/AnimateNumber/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";

package/reactjs/components/DisplayAmount/components/AnimateNumber/index.mjs

@@ -0,0 +1 @@
+

package/reactjs/components/DisplayAmount/components/PrecisedAmount/PrecisedAmount.d.ts

@@ -0,0 +1,14 @@
+import { Placement } from 'react-joyride';
+
+interface PrecisedAmountProps {
+    amount: string;
+    digits: number;
+    prefix: string;
+    sufix: string;
+    className?: string;
+    shouldShowTooltip?: boolean;
+    tooltipPlacement?: Placement;
+}
+export declare const MAX_DISPLAY_ZERO_DECIMALS = 5;
+export declare const PrecisedAmount: ({ amount, digits, className, prefix, sufix, tooltipPlacement, shouldShowTooltip, ...rest }: PrecisedAmountProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/reactjs/components/DisplayAmount/components/PrecisedAmount/PrecisedAmount.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactjs_utils_mxClsx = require("../../../../utils/mxClsx.js");
+const reactjs_components_base_MxTooltip_MxTooltip = require("../../../base/MxTooltip/MxTooltip.js");
+const MAX_DISPLAY_ZERO_DECIMALS = 5;
+const PrecisedAmount = ({
+  amount,
+  digits,
+  className,
+  prefix,
+  sufix,
+  tooltipPlacement,
+  shouldShowTooltip = true,
+  ...rest
+}) => {
+  var _a, _b;
+  const valueParts = (_a = String(amount)) == null ? void 0 : _a.split(".");
+  const decimalArray = ((_b = valueParts[1]) == null ? void 0 : _b.split("")) ?? [];
+  const areAllDigitsZeroes = decimalArray == null ? void 0 : decimalArray.every((digit) => digit === "0");
+  const firstNonZeroIndex = decimalArray == null ? void 0 : decimalArray.findIndex((digit) => digit !== "0");
+  const nonZeroDecimalsArr = [];
+  for (let i = firstNonZeroIndex; i <= (decimalArray == null ? void 0 : decimalArray.length) - 1; i++) {
+    if (nonZeroDecimalsArr.length < Math.max(digits, 2)) {
+      nonZeroDecimalsArr.push(decimalArray[i]);
+    }
+  }
+  if (firstNonZeroIndex > MAX_DISPLAY_ZERO_DECIMALS) {
+    const nonZeroDecimals = nonZeroDecimalsArr == null ? void 0 : nonZeroDecimalsArr.join("");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactjs_components_base_MxTooltip_MxTooltip.MxTooltip,
+      {
+        placement: tooltipPlacement,
+        buttonText: /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, className: reactjs_utils_mxClsx.mxClsx(className), children: [
+          prefix,
+          valueParts[0],
+          ".0",
+          /* @__PURE__ */ jsxRuntime.jsx("sub", { className: reactjs_utils_mxClsx.mxClsx(className, "liq-text-[60%]"), children: firstNonZeroIndex - 2 }),
+          "0",
+          nonZeroDecimals,
+          sufix
+        ] }),
+        containerClassName: "leading-none",
+        hideTooltip: !shouldShowTooltip,
+        children: amount
+      }
+    );
+  }
+  const hasDecimals = valueParts[1] && !areAllDigitsZeroes;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...rest, className: reactjs_utils_mxClsx.mxClsx(className), children: [
+    prefix,
+    valueParts[0],
+    hasDecimals && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      ".",
+      valueParts[1]
+    ] }),
+    sufix
+  ] });
+};
+exports.MAX_DISPLAY_ZERO_DECIMALS = MAX_DISPLAY_ZERO_DECIMALS;
+exports.PrecisedAmount = PrecisedAmount;

package/reactjs/components/DisplayAmount/components/PrecisedAmount/PrecisedAmount.mjs

@@ -0,0 +1,61 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mxClsx } from "../../../../utils/mxClsx.mjs";
+import { MxTooltip } from "../../../base/MxTooltip/MxTooltip.mjs";
+const MAX_DISPLAY_ZERO_DECIMALS = 5;
+const PrecisedAmount = ({
+  amount,
+  digits,
+  className,
+  prefix,
+  sufix,
+  tooltipPlacement,
+  shouldShowTooltip = true,
+  ...rest
+}) => {
+  var _a, _b;
+  const valueParts = (_a = String(amount)) == null ? void 0 : _a.split(".");
+  const decimalArray = ((_b = valueParts[1]) == null ? void 0 : _b.split("")) ?? [];
+  const areAllDigitsZeroes = decimalArray == null ? void 0 : decimalArray.every((digit) => digit === "0");
+  const firstNonZeroIndex = decimalArray == null ? void 0 : decimalArray.findIndex((digit) => digit !== "0");
+  const nonZeroDecimalsArr = [];
+  for (let i = firstNonZeroIndex; i <= (decimalArray == null ? void 0 : decimalArray.length) - 1; i++) {
+    if (nonZeroDecimalsArr.length < Math.max(digits, 2)) {
+      nonZeroDecimalsArr.push(decimalArray[i]);
+    }
+  }
+  if (firstNonZeroIndex > MAX_DISPLAY_ZERO_DECIMALS) {
+    const nonZeroDecimals = nonZeroDecimalsArr == null ? void 0 : nonZeroDecimalsArr.join("");
+    return /* @__PURE__ */ jsx(
+      MxTooltip,
+      {
+        placement: tooltipPlacement,
+        buttonText: /* @__PURE__ */ jsxs("span", { ...rest, className: mxClsx(className), children: [
+          prefix,
+          valueParts[0],
+          ".0",
+          /* @__PURE__ */ jsx("sub", { className: mxClsx(className, "liq-text-[60%]"), children: firstNonZeroIndex - 2 }),
+          "0",
+          nonZeroDecimals,
+          sufix
+        ] }),
+        containerClassName: "leading-none",
+        hideTooltip: !shouldShowTooltip,
+        children: amount
+      }
+    );
+  }
+  const hasDecimals = valueParts[1] && !areAllDigitsZeroes;
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: mxClsx(className), children: [
+    prefix,
+    valueParts[0],
+    hasDecimals && /* @__PURE__ */ jsxs(Fragment, { children: [
+      ".",
+      valueParts[1]
+    ] }),
+    sufix
+  ] });
+};
+export {
+  MAX_DISPLAY_ZERO_DECIMALS,
+  PrecisedAmount
+};

package/reactjs/components/DisplayAmount/components/index.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";

package/reactjs/components/DisplayAmount/components/index.mjs

@@ -0,0 +1 @@
+

package/reactjs/components/DisplayAmount/index.d.ts

@@ -0,0 +1 @@
+export * from './DisplayAmount';

package/reactjs/components/DisplayAmount/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactjs_components_DisplayAmount_DisplayAmount = require("./DisplayAmount.js");
+exports.DisplayAmount = reactjs_components_DisplayAmount_DisplayAmount.DisplayAmount;

package/reactjs/components/DisplayAmount/index.mjs

@@ -0,0 +1,4 @@
+import { DisplayAmount } from "./DisplayAmount.mjs";
+export {
+  DisplayAmount
+};