From ca217162aa593cdc82eae3cd4f836fe1fbef01cf Mon Sep 17 00:00:00 2001
From: Bogdan Crisan <bogdan@crbl.studio>
Date: Wed, 4 Dec 2024 20:51:39 +0100
Subject: [PATCH] [ECO-2482] Use number wrapper to display numbers (#436)

Co-authored-by: Matt <90358481+xbtmatt@users.noreply.github.com>
---
 cfg/cspell-frontend-dictionary.txt            |  1 +
 .../src/components/FormattedNumber.tsx        | 98 +++++++++++++++++++
 .../components/main-info/BondingProgress.tsx  | 20 ++--
 .../components/main-info/MainInfo.tsx         | 13 +--
 .../trade-emojicoin/SwapComponent.tsx         | 31 ++----
 .../components/trade-history/index.tsx        |  8 +-
 .../trade-history/table-row/index.tsx         | 13 ++-
 .../trade-history/table-row/types.ts          |  6 +-
 .../home/components/emoji-table/utils.ts      |  8 +-
 .../home/components/main-card/MainCard.tsx    | 13 +--
 .../home/components/table-card/TableCard.tsx  | 25 ++---
 .../pages/home/components/table-card/types.ts |  4 +-
 .../pools/components/liquidity/index.tsx      | 96 ++++++++++--------
 .../components/table-row-desktop/XprPopup.tsx | 12 +--
 .../components/table-row-desktop/index.tsx    | 28 ++++--
 .../src/components/price-feed/inner.tsx       | 10 +-
 .../frontend/src/lib/utils/decimals.ts        |  4 +-
 17 files changed, 240 insertions(+), 150 deletions(-)
 create mode 100644 src/typescript/frontend/src/components/FormattedNumber.tsx

diff --git a/cfg/cspell-frontend-dictionary.txt b/cfg/cspell-frontend-dictionary.txt
index 28023fad9..d105d041e 100644
--- a/cfg/cspell-frontend-dictionary.txt
+++ b/cfg/cspell-frontend-dictionary.txt
@@ -53,3 +53,4 @@ dockerenv
 testid
 ADBEEF
 bytea
+nominalize
diff --git a/src/typescript/frontend/src/components/FormattedNumber.tsx b/src/typescript/frontend/src/components/FormattedNumber.tsx
new file mode 100644
index 000000000..d7ff246aa
--- /dev/null
+++ b/src/typescript/frontend/src/components/FormattedNumber.tsx
@@ -0,0 +1,98 @@
+import type { AnyNumberString } from "@sdk-types";
+import { useLabelScrambler } from "./pages/home/components/table-card/animation-variants/event-variants";
+import { toNominal } from "lib/utils/decimals";
+import { useEffect, useMemo } from "react";
+
+/**
+ * Sliding precision will show `decimals` decimals when Math.abs(number) is
+ * above 1 and `decimals` significant digits when the number is below 1.
+ *
+ * Fixed will always show `decimals` digits.
+ */
+export type FormattedNumberStyle = "sliding-precision" | "fixed";
+
+const ScrambledNumberLabel = ({
+  value,
+  suffix = "",
+  prefix = "",
+  className = "",
+}: {
+  value: string;
+  suffix?: string;
+  prefix?: string;
+  className?: string;
+}) => {
+  const { ref, replay } = useLabelScrambler(value, suffix, prefix);
+  useEffect(() => {
+    replay();
+  }, [value, replay]);
+  return <span className={className} ref={ref}>{`${prefix}${value}${suffix}`}</span>;
+};
+
+/**
+ * Formats a number, string or bigint and scrambles it if desired.
+ *
+ * @param value the number to format and display
+ * @param decimals the number of decimals to show
+ * @param scramble whether or not to scramble the text upon change
+ * @param suffix the suffix that shouldn't be scrambled, if the value is scrambled
+ * @param prefix the prefix that shouldn't be scrambled, if the value is scrambled
+ * @param className the class name for the span wrapping the value
+ * @param style the formatter style
+ * @see {@link FormattedNumberStyle}
+ * @returns a component for the formatted number
+ */
+export const FormattedNumber = ({
+  value,
+  decimals = 2,
+  scramble = false,
+  nominalize = false,
+  suffix = "",
+  prefix = "",
+  className,
+  style = "sliding-precision",
+}: (
+  | {
+      value: bigint;
+      nominalize: true;
+    }
+  | {
+      value: AnyNumberString;
+      nominalize?: undefined | false;
+    }
+) & {
+  decimals?: number;
+  scramble?: boolean;
+  suffix?: string;
+  prefix?: string;
+  className?: string;
+  style?: FormattedNumberStyle;
+}) => {
+  const displayValue = useMemo(() => {
+    if (nominalize && typeof value !== "bigint") {
+      throw new Error("Input value needs to be a bigint.");
+    }
+    const num = nominalize ? toNominal(value as bigint) : Number(value);
+    const format =
+      style === "fixed" || Math.abs(num) >= 1
+        ? { maximumFractionDigits: decimals }
+        : { maximumSignificantDigits: decimals };
+    const formatter = new Intl.NumberFormat("en-US", format);
+    return formatter.format(num);
+  }, [value, decimals, nominalize, style]);
+
+  return scramble ? (
+    <ScrambledNumberLabel
+      value={displayValue}
+      prefix={prefix}
+      suffix={suffix}
+      className={className}
+    />
+  ) : (
+    <span className={className}>
+      {prefix}
+      {displayValue}
+      {suffix}
+    </span>
+  );
+};
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/BondingProgress.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/BondingProgress.tsx
index 22faa7c04..3e0097f50 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/BondingProgress.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/BondingProgress.tsx
@@ -3,13 +3,13 @@ import React, { useEffect, useState } from "react";
 import { translationFunction } from "context/language-context";
 import { type MainInfoProps } from "../../types";
 import { useEventStore } from "context/event-store-context";
-import { useLabelScrambler } from "components/pages/home/components/table-card/animation-variants/event-variants";
 import { motion } from "framer-motion";
 import { getBondingCurveProgress } from "utils/bonding-curve";
 import Button from "components/button";
 import Link from "next/link";
 import { ROUTES } from "router/routes";
 import { useThemeContext } from "context";
+import { FormattedNumber } from "components/FormattedNumber";
 
 const statsTextClasses = "uppercase ellipses font-forma text-[24px]";
 
@@ -32,22 +32,20 @@ const BondingProgress = ({ data }: MainInfoProps) => {
     }
   }, [stateEvents]);
 
-  const { ref: bondingCurveRef } = useLabelScrambler(`${bondingProgress.toFixed(2)}`, "%");
-
   return (
     <div className="flex flex-col w-fit">
       <div className="flex justify-between gap-[8px] mb-[.2em]">
         <div className={statsTextClasses + " text-light-gray font-pixelar text-[32px]"}>
           {t("Bonding progress:")}
         </div>
-        <div className={statsTextClasses + " text-white"}>
-          <div
-            className="text-ec-blue font-pixelar text-[32px] text-end min-w-[3.5em]"
-            ref={bondingCurveRef}
-          >
-            {bondingProgress.toFixed(2)}%
-          </div>
-        </div>
+        <FormattedNumber
+          value={bondingProgress}
+          className={
+            statsTextClasses + " text-ec-blue font-pixelar text-[32px] text-end min-w-[3.5em]"
+          }
+          suffix="%"
+          scramble
+        />
       </div>
       {bondingProgress >= 100 ? (
         <Link
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx
index cf94bef40..2fd4d88b4 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 
 import { translationFunction } from "context/language-context";
-import { toCoinDecimalString } from "lib/utils/decimals";
 import AptosIconBlack from "components/svg/icons/AptosBlack";
 import { type MainInfoProps } from "../../types";
 import { useEventStore } from "context/event-store-context";
-import { useLabelScrambler } from "components/pages/home/components/table-card/animation-variants/event-variants";
 import { isMarketStateModel } from "@sdk/indexer-v2/types";
 import BondingProgress from "./BondingProgress";
 import { useThemeContext } from "context";
@@ -16,6 +14,7 @@ import { toExplorerLink } from "lib/utils/explorer-link";
 import { emoji } from "utils";
 import { motion } from "framer-motion";
 import { truncateAddress } from "@sdk/utils";
+import { FormattedNumber } from "components/FormattedNumber";
 
 const statsTextClasses = "uppercase ellipses font-forma text-[24px]";
 
@@ -44,10 +43,6 @@ const MainInfo = ({ data }: MainInfoProps) => {
     }
   }, [stateEvents]);
 
-  const { ref: marketCapRef } = useLabelScrambler(toCoinDecimalString(marketCap, 2));
-  const { ref: dailyVolumeRef } = useLabelScrambler(toCoinDecimalString(dailyVolume, 2));
-  const { ref: allTimeVolumeRef } = useLabelScrambler(toCoinDecimalString(allTimeVolume, 2));
-
   const { isMobile } = useMatchBreakpoints();
 
   const explorerLink = toExplorerLink({
@@ -118,7 +113,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("Market Cap:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <div ref={marketCapRef}>{toCoinDecimalString(marketCap, 2)}</div>
+                <FormattedNumber value={marketCap} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>
@@ -129,7 +124,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("24 hour vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <div ref={dailyVolumeRef}>{toCoinDecimalString(dailyVolume, 2)}</div>
+                <FormattedNumber value={dailyVolume} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>
@@ -140,7 +135,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
             <div className={statsTextClasses + " text-light-gray"}>{t("All-time vol:")}</div>
             <div className={statsTextClasses + " text-white"}>
               <div className="flex flex-row justify-center items-center">
-                <div ref={allTimeVolumeRef}>{toCoinDecimalString(allTimeVolume, 2)}</div>
+                <FormattedNumber value={allTimeVolume} nominalize scramble />
                 &nbsp;
                 <AptosIconBlack className="icon-inline mb-[0.3ch]" />
               </div>
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx
index 029003304..15b74c9d0 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx
@@ -7,7 +7,6 @@ import { Column, Row } from "components/layout/components/FlexContainers";
 import { SwapButton } from "./SwapButton";
 import { type SwapComponentProps } from "components/pages/emojicoin/types";
 import { toActualCoinDecimals, toDisplayCoinDecimals } from "lib/utils/decimals";
-import { useScramble } from "use-scramble";
 import { DEFAULT_SWAP_GAS_COST, useGetGasWithDefault } from "lib/hooks/queries/use-simulate-swap";
 import { useEventStore } from "context/event-store-context";
 import { useTooltip } from "@hooks/index";
@@ -26,6 +25,7 @@ import { getMaxSlippageSettings } from "utils/slippage";
 import { Emoji } from "utils/emoji";
 import { EmojiPill } from "components/EmojiPill";
 import { useCalculateSwapPrice } from "lib/hooks/use-calculate-swap-price";
+import { FormattedNumber } from "components/FormattedNumber";
 
 const SimulateInputsWrapper = ({ children }: PropsWithChildren) => (
   <div className="flex flex-col relative gap-[19px]">{children}</div>
@@ -106,30 +106,11 @@ export default function SwapComponent({
     setEmojicoinType(emojicoinType);
   }, [marketAddress, setEmojicoinType]);
 
-  const outputAmountString = toDisplayCoinDecimals({
-    num: isLoading ? previous : outputAmount,
-    decimals: OUTPUT_DISPLAY_DECIMALS,
-  });
-
   const availableAptBalance = useMemo(
     () => (aptBalance - gasCost > 0 ? aptBalance - gasCost : 0n),
     [gasCost, aptBalance]
   );
 
-  const { ref, replay } = useScramble({
-    text: new Intl.NumberFormat().format(Number(outputAmountString)),
-    overdrive: false,
-    overflow: true,
-    speed: isLoading ? 0.4 : 1000,
-    scramble: isLoading ? 5 : 0,
-    range: [48, 58],
-    playOnMount: false,
-  });
-
-  useEffect(() => {
-    replay();
-  }, [isLoading, replay]);
-
   useEffect(() => {
     if (netProceeds === 0n || error) {
       setIsLoading(true);
@@ -138,8 +119,7 @@ export default function SwapComponent({
     setPrevious(netProceeds);
     setOutputAmount(netProceeds);
     setIsLoading(false);
-    replay();
-  }, [netProceeds, replay, isSell, error]);
+  }, [netProceeds, isSell, error]);
 
   const sufficientBalance = useMemo(() => {
     if (!account || (isSell && !emojicoinBalance) || (!isSell && !aptBalance)) return false;
@@ -281,7 +261,12 @@ export default function SwapComponent({
                 style={{ opacity: isLoading ? 0.6 : 1 }}
               >
                 {/* Scrambled swap result output below. */}
-                <div ref={ref}></div>
+                <FormattedNumber
+                  value={isLoading ? previous : outputAmount}
+                  nominalize
+                  scramble
+                  decimals={OUTPUT_DISPLAY_DECIMALS}
+                />
               </div>
             </div>
           </Column>
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx
index be69f0d19..3373de242 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx
@@ -19,13 +19,13 @@ const toTableItem = ({
 }: SwapEventModel & { shouldAnimateAsInsertion?: boolean }) => ({
   item: {
     ...getRankFromEvent(swap),
-    apt: swap.quoteVolume.toString(),
-    emoji: swap.baseVolume.toString(),
+    apt: swap.quoteVolume,
+    emoji: swap.baseVolume,
     date: new Date(Number(transaction.time / 1000n)),
     type: swap.isSell ? "sell" : "buy",
-    priceQ64: swap.avgExecutionPriceQ64.toString(),
+    priceQ64: swap.avgExecutionPriceQ64,
     swapper: swap.swapper,
-    version: transaction.version.toString(),
+    version: transaction.version,
   },
   shouldAnimateAsInsertion,
 });
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
index 656ac451f..47a037620 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
@@ -2,7 +2,6 @@
 
 import React, { useMemo, type PropsWithChildren } from "react";
 import { type TableRowDesktopProps } from "./types";
-import { toCoinDecimalString } from "lib/utils/decimals";
 import { toNominalPrice } from "@sdk/utils/nominal-price";
 import { ExplorerLink } from "components/link/component";
 import { darkColors } from "theme";
@@ -12,6 +11,7 @@ import { motion } from "framer-motion";
 import { emoji } from "utils";
 import { Emoji } from "utils/emoji";
 import { useNameResolver } from "@hooks/use-name-resolver";
+import { FormattedNumber } from "components/FormattedNumber";
 
 type TableRowTextItemProps = {
   className: string;
@@ -99,10 +99,10 @@ const TableRow = ({
       </td>
       <td className={`w-[5%] md:w-[4.7%] ${Height}`}></td>
       <TableRowTextItem className={`w-[22%] md:w-[18%] ${Height}`}>
-        <span className="ellipses">{toCoinDecimalString(item.apt, 3)}</span>
+        <FormattedNumber value={item.apt} className="ellipses" decimals={3} nominalize />
       </TableRowTextItem>
       <TableRowTextItem className={`w-[22%] md:w-[18%] ${Height}`}>
-        <span className="ellipses">{toCoinDecimalString(item.emoji, 3)}</span>
+        <FormattedNumber value={item.emoji} className="ellipses" decimals={3} nominalize />
       </TableRowTextItem>
       <td className={`w-[0%] md:w-[0.3%] ${Height}`}></td>
       <TableRowTextItem
@@ -120,7 +120,12 @@ const TableRow = ({
         className={`w-[22%] md:w-[18%] ${Height} md:ml-[3ch] xl:ml-[0.5ch] xl:mr-[-0.5ch]`}
         color={item.type === "sell" ? darkColors.pink : darkColors.green}
       >
-        {toNominalPrice(item.priceQ64).toFixed(9)}
+        <FormattedNumber
+          value={toNominalPrice(item.priceQ64)}
+          className="ellipses"
+          decimals={9}
+          style="fixed"
+        />
       </TableRowTextItem>
       <td className={`group/explorer w-[22%] md:w-[18%] border-r-[1px] z-[2] ${Height}`}>
         <ExplorerLink className="flex w-full h-full" value={item.version} type="txn">
diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts
index 97272b058..ced7cb0db 100644
--- a/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts
+++ b/src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts
@@ -4,10 +4,10 @@ export type TableRowDesktopProps = {
   item: {
     rankIcon: string;
     rankName: string;
-    apt: string;
-    emoji: string;
+    apt: bigint;
+    emoji: bigint;
     type: string;
-    priceQ64: string;
+    priceQ64: bigint;
     date: Date;
     version: AnyNumberString;
     swapper: string;
diff --git a/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts b/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
index bd3c385b3..6377bc0d6 100644
--- a/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
+++ b/src/typescript/frontend/src/components/pages/home/components/emoji-table/utils.ts
@@ -24,8 +24,8 @@ export const marketDataToProps = (markets: HomePageProps["markets"]): PropsWithT
     symbol: m.market.symbolData.symbol,
     marketID: Number(m.market.marketID),
     emojis: m.market.emojis,
-    staticMarketCap: m.state.instantaneousStats.marketCap.toString(),
-    staticVolume24H: m.dailyVolume.toString(),
+    staticMarketCap: m.state.instantaneousStats.marketCap,
+    staticVolume24H: m.dailyVolume,
   }));
 
 export const stateEventsToProps = (
@@ -47,8 +47,8 @@ export const stateEventsToProps = (
       symbol,
       emojis,
       marketID: Number(marketID),
-      staticMarketCap: marketCap.toString(),
-      staticVolume24H: (volume24H ?? 0).toString(),
+      staticMarketCap: marketCap,
+      staticVolume24H: volume24H ?? 0n,
       trigger: e.market.trigger,
       searchEmojisKey: toSearchEmojisKey(searchEmojis),
     };
diff --git a/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx b/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
index de81020ce..b5d534969 100644
--- a/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/main-card/MainCard.tsx
@@ -3,12 +3,10 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { translationFunction } from "context/language-context";
 import { FlexGap } from "@containers";
-import { toCoinDecimalString } from "lib/utils/decimals";
 import AptosIconBlack from "components/svg/icons/AptosBlack";
 import Image from "next/image";
 import Link from "next/link";
 import { ROUTES } from "router/routes";
-import { useLabelScrambler } from "../table-card/animation-variants/event-variants";
 import planetHome from "../../../../../../public/images/planet-home.png";
 import { emojiNamesToPath } from "utils/pathname-helpers";
 import { type HomePageProps } from "app/home/HomePage";
@@ -19,6 +17,7 @@ import { PriceDelta } from "components/price-feed/inner";
 import { sortByValue } from "lib/utils/sort-events";
 import { AnimatePresence, motion } from "framer-motion";
 import { useInterval } from "react-use";
+import { FormattedNumber } from "components/FormattedNumber";
 
 export interface MainCardProps {
   featuredMarkets: HomePageProps["priceFeed"];
@@ -77,10 +76,6 @@ const MainCard = (props: MainCardProps) => {
   }, []);
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const { ref: marketCapRef } = useLabelScrambler(toCoinDecimalString(marketCap, 2));
-  const { ref: dailyVolumeRef } = useLabelScrambler(toCoinDecimalString(dailyVolume, 2));
-  const { ref: allTimeVolumeRef } = useLabelScrambler(toCoinDecimalString(allTimeVolume, 2));
-
   return (
     <div className="flex flex-col w-full my-[20px] md:my-[70px] max-w-full">
       <div className="flex flex-col md:flex-row w-full max-w-full items-center justify-center">
@@ -151,7 +146,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <div ref={marketCapRef}>{toCoinDecimalString(marketCap, 2)}</div>
+                    <FormattedNumber value={marketCap} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>
@@ -170,7 +165,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <div ref={dailyVolumeRef}>{toCoinDecimalString(dailyVolume, 2)}</div>
+                    <FormattedNumber value={dailyVolume} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>
@@ -187,7 +182,7 @@ const MainCard = (props: MainCardProps) => {
                 </div>
                 <div className="font-forma text-white market-data-text uppercase">
                   <div className="flex flex-row items-center justify-center">
-                    <div ref={allTimeVolumeRef}>{toCoinDecimalString(allTimeVolume, 2)}</div>
+                    <FormattedNumber value={allTimeVolume} scramble nominalize />
                     &nbsp;
                     <AptosIconBlack className={"icon-inline mb-[0.3ch]"} />
                   </div>
diff --git a/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx b/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx
index 2c9e351da..8ede85ae1 100644
--- a/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx
+++ b/src/typescript/frontend/src/components/pages/home/components/table-card/TableCard.tsx
@@ -9,12 +9,10 @@ import { emojisToName } from "lib/utils/emojis-to-name-or-symbol";
 import { useEventStore, useUserSettings } from "context/event-store-context";
 import { motion, type MotionProps, useAnimationControls, useMotionValue } from "framer-motion";
 import { Arrow } from "components/svg";
-import { toCoinDecimalString } from "lib/utils/decimals";
 import {
   borderVariants,
   onlyHoverVariant,
   textVariants,
-  useLabelScrambler,
   glowVariants,
   eventToVariant as toVariant,
 } from "./animation-variants/event-variants";
@@ -29,8 +27,8 @@ import LinkOrAnimationTrigger from "./LinkOrAnimationTrigger";
 import { type SymbolEmojiData } from "@sdk/emoji_data";
 import { Emoji } from "utils/emoji";
 import { SortMarketsBy } from "@sdk/indexer-v2/types/common";
-import Big from "big.js";
 import "./module.css";
+import { FormattedNumber } from "components/FormattedNumber";
 
 const getFontSize = (emojis: SymbolEmojiData[]) =>
   emojis.length <= 2 ? ("pixel-heading-1" as const) : ("pixel-heading-1b" as const);
@@ -62,16 +60,16 @@ const TableCard = ({
     const isBumpOrder = sortBy === SortMarketsBy.BumpOrder;
     const { lastSwapVolume, marketCap } = animationEvent
       ? {
-          lastSwapVolume: Big(animationEvent.lastSwap.quoteVolume.toString()),
+          lastSwapVolume: animationEvent.lastSwap.quoteVolume,
           marketCap: animationEvent.state.instantaneousStats.marketCap,
         }
       : {
-          lastSwapVolume: 0,
+          lastSwapVolume: 0n,
           marketCap: staticMarketCap,
         };
     return {
       isBumpOrder,
-      secondaryMetric: isBumpOrder ? lastSwapVolume : Big(staticVolume24H),
+      secondaryMetric: isBumpOrder ? lastSwapVolume : staticVolume24H,
       marketCap,
     };
   }, [sortBy, animationEvent, staticVolume24H, staticMarketCap]);
@@ -110,15 +108,6 @@ const TableCard = ({
     }
   }, [animationEvent, runAnimationSequence, isBumpOrder]);
 
-  const { ref: marketCapRef } = useLabelScrambler(
-    toCoinDecimalString(marketCap.toString(), 2),
-    " APT"
-  );
-  const { ref: dailyVolumeRef } = useLabelScrambler(
-    toCoinDecimalString(secondaryMetric.toString(), 2),
-    " APT"
-  );
-
   const { curr, prev, variant, displayIndex, layoutDelay } = useMemo(() => {
     const { curr, prev } = calculateGridData({
       index,
@@ -269,9 +258,8 @@ const TableCard = ({
                   variants={animationsOn ? textVariants : {}}
                   className="body-sm uppercase font-forma"
                   style={{ color: "#FFFFFFFF", filter: "brightness(1) contrast(1)" }}
-                  ref={marketCapRef}
                 >
-                  {toCoinDecimalString(marketCap.toString(), 2) + " APT"}
+                  <FormattedNumber value={marketCap} scramble nominalize suffix=" APT" />
                 </motion.div>
               </Column>
               <Column width="50%">
@@ -288,9 +276,8 @@ const TableCard = ({
                   variants={animationsOn ? textVariants : {}}
                   className="body-sm uppercase font-forma"
                   style={{ color: "#FFFFFFFF", filter: "brightness(1) contrast(1)" }}
-                  ref={dailyVolumeRef}
                 >
-                  {toCoinDecimalString(secondaryMetric.toString(), 2) + " APT"}
+                  <FormattedNumber value={secondaryMetric} scramble nominalize suffix=" APT" />
                 </motion.div>
               </Column>
             </Flex>
diff --git a/src/typescript/frontend/src/components/pages/home/components/table-card/types.ts b/src/typescript/frontend/src/components/pages/home/components/table-card/types.ts
index 3ddf78e48..2d1598412 100644
--- a/src/typescript/frontend/src/components/pages/home/components/table-card/types.ts
+++ b/src/typescript/frontend/src/components/pages/home/components/table-card/types.ts
@@ -6,8 +6,8 @@ export type TableCardProps = {
   symbol: string;
   marketID: number;
   emojis: Array<SymbolEmojiData>;
-  staticMarketCap: string;
-  staticVolume24H: string;
+  staticMarketCap: bigint;
+  staticVolume24H: bigint;
   prevIndex?: number;
 };
 
diff --git a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
index 654a24685..2e6fd3818 100644
--- a/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
+++ b/src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import React, { type PropsWithChildren, useEffect, useMemo, useState } from "react";
-import { useThemeContext } from "context";
 import { translationFunction } from "context/language-context";
 import { Flex, Column, FlexGap } from "@containers";
 import { Text, Button, InputNumeric } from "components";
 import { StyledAddLiquidityWrapper } from "./styled";
 import { ProvideLiquidity, RemoveLiquidity } from "@sdk/emojicoin_dot_fun/emojicoin-dot-fun";
-import { toCoinDecimalString } from "lib/utils/decimals";
 import {
   AptosInputLabel,
   EmojiInputLabel,
@@ -24,24 +22,16 @@ import {
 import { Arrows } from "components/svg";
 import type { EntryFunctionTransactionBuilder } from "@sdk/emojicoin_dot_fun/payload-builders";
 import { useSearchParams } from "next/navigation";
-import AnimatedStatusIndicator from "components/pages/launch-emojicoin/animated-emoji-circle";
 import { TypeTag } from "@aptos-labs/ts-sdk";
 import Info from "components/info";
-import { type AnyNumberString } from "@sdk/types/types";
 import { type PoolsData } from "../../ClientPoolsPage";
 import { EmojiPill } from "components/EmojiPill";
+import { FormattedNumber } from "components/FormattedNumber";
 
 type LiquidityProps = {
   market: PoolsData | undefined;
 };
 
-const fmtCoin = (n: AnyNumberString | undefined) => {
-  if (n === undefined) {
-    return n;
-  }
-  return new Intl.NumberFormat().format(Number(toCoinDecimalString(n, 8)));
-};
-
 const InnerWrapper = ({
   children,
   id,
@@ -71,7 +61,6 @@ const inputAndOutputStyles = `
 
 const Liquidity = ({ market }: LiquidityProps) => {
   const { t } = translationFunction();
-  const { theme } = useThemeContext();
 
   const searchParams = useSearchParams();
 
@@ -99,8 +88,6 @@ const Liquidity = ({ market }: LiquidityProps) => {
     searchParams.get("remove") !== null ? "remove" : "add"
   );
 
-  const loadingComponent = useMemo(() => <AnimatedStatusIndicator numEmojis={4} />, []);
-
   const {
     aptos,
     account,
@@ -171,7 +158,12 @@ const Liquidity = ({ market }: LiquidityProps) => {
         <div className={grayLabel}>
           {direction === "add" ? t("You deposit") : t("You get")}
           {balanceLabel}
-          <span className={enoughApt ? "text-green" : "text-error"}>{fmtCoin(aptBalance)}</span>
+          <FormattedNumber
+            value={aptBalance}
+            className={enoughApt ? "text-green" : "text-error"}
+            nominalize
+            decimals={3}
+          />
           {")"}
         </div>
         {direction === "add" ? (
@@ -182,10 +174,11 @@ const Liquidity = ({ market }: LiquidityProps) => {
             decimals={8}
           />
         ) : (
-          <input
+          <FormattedNumber
+            value={BigInt(removeLiquidityResult?.quote_amount ?? 0)}
+            decimals={3}
             className={inputAndOutputStyles + " bg-transparent leading-[32px] text-medium-gray"}
-            disabled={true}
-            value={fmtCoin(removeLiquidityResult?.quote_amount) ?? "..."}
+            nominalize
           />
         )}
       </Column>
@@ -199,23 +192,24 @@ const Liquidity = ({ market }: LiquidityProps) => {
         <div className={grayLabel}>
           {direction === "add" ? "You deposit" : "You get"}
           {balanceLabel}
-          <span className={enoughEmoji ? "text-green" : "text-error"}>
-            {fmtCoin(emojicoinBalance)}
-          </span>
+          <FormattedNumber
+            value={emojicoinBalance}
+            className={enoughEmoji ? "text-green" : "text-error"}
+            nominalize
+            decimals={3}
+          />
           {")"}
         </div>
-        <input
-          className={inputAndOutputStyles + " bg-transparent leading-[32px]"}
-          style={{
-            color: theme.colors.lightGray + "99",
-          }}
-          value={
-            direction === "add"
-              ? (fmtCoin(provideLiquidityResult?.base_amount) ?? "...")
-              : (fmtCoin(removeLiquidityResult?.base_amount) ?? "...")
-          }
-          disabled
-        ></input>
+        <FormattedNumber
+          value={BigInt(
+            (direction === "add"
+              ? provideLiquidityResult?.base_amount
+              : removeLiquidityResult?.base_amount) ?? 0
+          )}
+          decimals={3}
+          className={inputAndOutputStyles + ` bg-transparent leading-[32px] !text-light-gray/[.6]`}
+          nominalize
+        />
       </Column>
       <div>
         <EmojiInputLabel emoji={market ? market.market.symbolData.symbol : "-"} />
@@ -230,16 +224,20 @@ const Liquidity = ({ market }: LiquidityProps) => {
         <div className={grayLabel}>
           {direction === "remove" ? "You deposit" : "You get"}
           {balanceLabel}
-          <span className={enoughEmojiLP ? "text-green" : "text-error"}>
-            {fmtCoin(emojicoinLPBalance)}
-          </span>
+          <FormattedNumber
+            value={emojicoinLPBalance}
+            className={enoughEmojiLP ? "text-green" : "text-error"}
+            nominalize
+            decimals={3}
+          />
           {")"}
         </div>
         {direction === "add" ? (
-          <input
+          <FormattedNumber
+            value={BigInt(provideLiquidityResult?.lp_coin_amount ?? 0)}
+            decimals={3}
             className={inputAndOutputStyles + " bg-transparent leading-[32px] text-medium-gray"}
-            value={fmtCoin(provideLiquidityResult?.lp_coin_amount) ?? "..."}
-            disabled={true}
+            nominalize
           />
         ) : (
           <InputNumeric
@@ -400,7 +398,15 @@ const Liquidity = ({ market }: LiquidityProps) => {
             <AptosInputLabel />
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
-              {market ? (fmtCoin(market.state.cpammRealReserves.quote) ?? loadingComponent) : "-"}
+              {market ? (
+                <FormattedNumber
+                  value={market.state.cpammRealReserves.quote}
+                  nominalize
+                  decimals={3}
+                />
+              ) : (
+                "-"
+              )}
             </Text>
           </Flex>
 
@@ -412,7 +418,15 @@ const Liquidity = ({ market }: LiquidityProps) => {
             <EmojiInputLabel emoji={market ? market.market.symbolData.symbol : "-"} />
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
-              {market ? (fmtCoin(market.state.cpammRealReserves.base) ?? loadingComponent) : "-"}
+              {market ? (
+                <FormattedNumber
+                  value={market.state.cpammRealReserves.base}
+                  nominalize
+                  decimals={3}
+                />
+              ) : (
+                "-"
+              )}
             </Text>
           </Flex>
         </StyledAddLiquidityWrapper>
diff --git a/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/XprPopup.tsx b/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/XprPopup.tsx
index a4d29d55c..8e7a68fb5 100644
--- a/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/XprPopup.tsx
+++ b/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/XprPopup.tsx
@@ -5,27 +5,27 @@ export const XprPopup = ({
   wpr,
   apr,
 }: {
-  dpr: string;
-  wpr: string;
-  apr: string;
+  dpr: JSX.Element;
+  wpr: JSX.Element;
+  apr: JSX.Element;
 }): ReactNode => (
   <>
     <div>
       <div className="flex gap-[0.2rem] justify-between">
         <span>DPR:</span>
-        <span>{dpr}</span>
+        {dpr}
       </div>
     </div>
     <div>
       <div className="flex gap-[0.2rem] justify-between">
         <span>WPR:</span>
-        <span>{wpr}</span>
+        {wpr}
       </div>
     </div>
     <div>
       <div className="flex gap-[0.2rem] justify-between">
         <span>APR:</span>
-        <span>{apr}</span>
+        {apr}
       </div>
     </div>
   </>
diff --git a/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/index.tsx b/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/index.tsx
index ffe10d59f..169040737 100644
--- a/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/index.tsx
+++ b/src/typescript/frontend/src/components/pages/pools/components/pools-table/components/table-row-desktop/index.tsx
@@ -9,6 +9,8 @@ import { Emoji } from "utils/emoji";
 import Link from "next/link";
 import Popup from "components/popup";
 import { emojiNamesToPath } from "utils/pathname-helpers";
+import { FormattedNumber } from "components/FormattedNumber";
+import { emoji } from "utils";
 
 const DAYS_IN_WEEK = 7;
 const DAYS_IN_YEAR = 365;
@@ -18,10 +20,12 @@ export const getXPR = (x: number, tvlPerLpCoinGrowth: number) =>
   ((tvlPerLpCoinGrowth ** x) - 1) * 100;
 
 export const formatXPR = (time: number, bigDailyTvl: number) => {
-  const xpr = getXPR(time, bigDailyTvl);
-  const matchTrailingZeros = /(\.0*|(?<=(\..*))0*)$/;
-  const xprStr = xpr.toFixed(4).replace(matchTrailingZeros, "");
-  return `${xprStr}%`;
+  if (bigDailyTvl === 0) {
+    return <Emoji emojis={emoji("hourglass not done")} />;
+  }
+  const xprIn = getXPR(time, bigDailyTvl);
+
+  return <FormattedNumber value={xprIn} style="fixed" suffix="%" decimals={4} />;
 };
 
 const TableRowDesktop: React.FC<TableRowDesktopProps> = ({ item, selected, onClick }) => {
@@ -57,7 +61,11 @@ const TableRowDesktop: React.FC<TableRowDesktopProps> = ({ item, selected, onCli
             ellipsis
             title={`${toCoinDecimalString(item.state.cumulativeStats.quoteVolume, 2)} APT`}
           >
-            {toCoinDecimalString(item.state.cumulativeStats.quoteVolume, 2)} APT
+            <FormattedNumber
+              value={item.state.cumulativeStats.quoteVolume}
+              suffix=" APT"
+              nominalize
+            />
           </Text>
         </Flex>
       </Td>
@@ -72,7 +80,7 @@ const TableRowDesktop: React.FC<TableRowDesktopProps> = ({ item, selected, onCli
               ellipsis
               title={`${toCoinDecimalString(item.dailyVolume, 2)} APT`}
             >
-              {toCoinDecimalString(item.dailyVolume, 2)} APT
+              <FormattedNumber value={item.dailyVolume} suffix=" APT" nominalize />
             </Text>
           </Flex>
         </Td>
@@ -87,7 +95,11 @@ const TableRowDesktop: React.FC<TableRowDesktopProps> = ({ item, selected, onCli
             ellipsis
             title={`${toCoinDecimalString(item.state.cpammRealReserves.quote * 2n, 2)} APT`}
           >
-            {toCoinDecimalString(item.state.cpammRealReserves.quote * 2n, 2)} APT
+            <FormattedNumber
+              value={item.state.cpammRealReserves.quote * 2n}
+              suffix=" APT"
+              nominalize
+            />
           </Text>
         </Flex>
       </Td>
@@ -103,7 +115,7 @@ const TableRowDesktop: React.FC<TableRowDesktopProps> = ({ item, selected, onCli
                   <span>{"least one day to view its percentage returns."}</span>
                 </div>
               ) : (
-                <XprPopup {...{ dpr, wpr, apr }} />
+                <XprPopup dpr={dpr} wpr={wpr} apr={apr} />
               )
             }
           >
diff --git a/src/typescript/frontend/src/components/price-feed/inner.tsx b/src/typescript/frontend/src/components/price-feed/inner.tsx
index f2d4cf385..1dfd98545 100644
--- a/src/typescript/frontend/src/components/price-feed/inner.tsx
+++ b/src/typescript/frontend/src/components/price-feed/inner.tsx
@@ -3,27 +3,25 @@
 import Link from "next/link";
 import Carousel from "components/carousel";
 import { Emoji } from "utils/emoji";
-import { useLabelScrambler } from "components/pages/home/components/table-card/animation-variants/event-variants";
 import { useMemo } from "react";
 import { cn } from "lib/utils/class-name";
 import useEffectOnce from "react-use/lib/useEffectOnce";
 import { useEventStore } from "context/event-store-context/hooks";
 import { type DatabaseModels } from "@sdk/indexer-v2/types";
+import { FormattedNumber } from "components/FormattedNumber";
 
 export const PriceDelta = ({ delta, className = "" }: { delta: number; className?: string }) => {
-  const { prefix, suffix, text } = useMemo(
+  const { prefix, suffix } = useMemo(
     () => ({
       prefix: delta >= 0 ? "+" : "-",
       suffix: "%",
-      text: Math.abs(delta).toFixed(2),
     }),
     [delta]
   );
-  const { ref } = useLabelScrambler(text, suffix, prefix);
 
   return (
-    <span ref={ref} className={cn(`${delta >= 0 ? "text-green" : "text-pink"}`, className)}>
-      {`${prefix} ${text}${suffix}`}
+    <span className={cn(`${delta >= 0 ? "text-green" : "text-pink"}`, className)}>
+      <FormattedNumber value={Math.abs(delta)} suffix={suffix} prefix={prefix} scramble />
     </span>
   );
 };
diff --git a/src/typescript/frontend/src/lib/utils/decimals.ts b/src/typescript/frontend/src/lib/utils/decimals.ts
index 341f428bc..142cc0845 100644
--- a/src/typescript/frontend/src/lib/utils/decimals.ts
+++ b/src/typescript/frontend/src/lib/utils/decimals.ts
@@ -62,4 +62,6 @@ const toDisplayCoinDecimals = ({
   return res.toString();
 };
 
-export { toDisplayCoinDecimals, toActualCoinDecimals };
+const toNominal = (num: bigint) => new Big(num.toString()).div(10 ** DECIMALS).toNumber();
+
+export { toDisplayCoinDecimals, toActualCoinDecimals, toNominal };