Add an easier to read NominalPriceDisplay re-usable component to vi…

…sually mute non-significant figures

Fix imports everywhere it was used

src/typescript/frontend/src/app/stats/TableData.tsx

@@ -8,6 +8,7 @@ import { ROUTES } from "router/routes";
 import { EXTERNAL_LINK_PROPS } from "components/link/const";
 import { type DatabaseModels } from "@sdk/indexer-v2/types";
 import { PriceDelta } from "components/price-feed/inner";
+import { NominalPriceDisplay } from "components/misc/NominalPriceDisplay";
 
 export enum Column {
   Price,
@@ -19,18 +20,6 @@ export enum Column {
   MarketCap,
 }
 
-const NominalPriceDisplay = ({ price }: { price: number }) => {
-  const fixed = price.toFixed(8);
-  const firstSigFigOnwards = fixed.match(/[1-9].*/)?.at(0) ?? "";
-  const beforeSigFig = fixed.slice(0, fixed.length - firstSigFigOnwards.length);
-  return (
-    <>
-      <span className="text-dark-gray">{beforeSigFig}</span>
-      <span className="text-lighter-gray">{firstSigFigOnwards}</span>
-    </>
-  );
-};
-
 export const TableData = <T extends DatabaseModels["price_feed"] | DatabaseModels["market_state"]>({
   data = [] as T[],
   k,
@@ -86,14 +75,14 @@ export const TableData = <T extends DatabaseModels["price_feed"] | DatabaseModel
       </td>
       <td>{row.market.marketID.toString()}</td>
       <td className={getCN(Column.Price)}>
-        <NominalPriceDisplay price={cells.price(row)} />
+        <NominalPriceDisplay priceQ64={cells.price(row)} />
       </td>
       <td className={getCN(Column.AllTimeVolume)}>{cells.allTimeVolume(row)}</td>
       <td className={getCN(Column.DailyVolume)}>{cells.dailyVolume(row)}</td>
       <td className={getCN(Column.Tvl)}>{cells.tvl(row)}</td>
       <td className={getCN(Column.LastAvgExecutionPrice)}>
         <ExplorerLink className="hover:underline" value={row.transaction.version} type="txn">
-          <NominalPriceDisplay price={cells.lastAvgPrice(row)} />
+          <NominalPriceDisplay priceQ64={cells.lastAvgPrice(row)} />
         </ExplorerLink>
       </td>
       <td className={getCN(Column.MarketCap)}>{cells.marketCap(row)}</td>

src/typescript/frontend/src/components/misc/NominalPriceDisplay.tsx

@@ -0,0 +1,41 @@
+import { type AnyNumber } from "@sdk/emojicoin_dot_fun/types";
+import { toNominalPrice } from "@sdk/utils";
+import { cn } from "lib/utils/class-name";
+import React, { type HTMLAttributes } from "react";
+
+type PriceColors = "neutral" | "buy" | "sell";
+export const PriceColors: { [key in PriceColors]: string } = {
+  neutral: "text-lighter-gray",
+  buy: "text-green",
+  sell: "text-pink",
+};
+
+interface NominalPriceDisplayProps extends HTMLAttributes<HTMLSpanElement> {
+  priceQ64: AnyNumber;
+  decimals?: number;
+  colorFor?: PriceColors;
+}
+
+/**
+ * Splits a Q64 price into two parts, the significant figures, and the insignificant figures.
+ *
+ * Visually mutes the insignificant figures and highlights the significant ones.
+ */
+export const NominalPriceDisplay = ({
+  priceQ64,
+  decimals = 9,
+  colorFor = "neutral",
+  className,
+}: NominalPriceDisplayProps) => {
+  const price = toNominalPrice(priceQ64);
+  const fixed = price.toFixed(decimals);
+  const firstSigFigOnwards = fixed.match(/[1-9].*/)?.at(0) ?? "";
+  const beforeSigFig = fixed.slice(0, fixed.length - firstSigFigOnwards.length);
+  const color = PriceColors[colorFor];
+  return (
+    <>
+      <span className={cn(color, "brightness-[0.4]", className)}>{beforeSigFig}</span>
+      <span className={cn(color, "brightness-125", className)}>{firstSigFigOnwards}</span>
+    </>
+  );
+};

src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/index.tsx

@@ -22,7 +22,7 @@ const toTableItem = ({
     apt: swap.quoteVolume,
     emoji: swap.baseVolume,
     date: new Date(Number(transaction.time / 1000n)),
-    type: swap.isSell ? "sell" : "buy",
+    type: swap.isSell ? ("sell" as const) : ("buy" as const),
     priceQ64: swap.avgExecutionPriceQ64,
     swapper: swap.swapper,
     version: transaction.version,

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 { toNominalPrice } from "@sdk/utils/nominal-price";
 import { ExplorerLink } from "components/explorer-link/ExplorerLink";
 import { darkColors } from "theme";
 import { formatDisplayName } from "@sdk/utils";
@@ -12,6 +11,7 @@ import { emoji } from "utils";
 import { Emoji } from "utils/emoji";
 import { useNameResolver } from "@hooks/use-name-resolver";
 import { FormattedNumber } from "components/FormattedNumber";
+import { NominalPriceDisplay } from "components/misc/NominalPriceDisplay";
 
 type TableRowTextItemProps = {
   className: string;
@@ -120,11 +120,11 @@ 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}
       >
-        <FormattedNumber
-          value={toNominalPrice(item.priceQ64)}
+        <NominalPriceDisplay
+          priceQ64={item.priceQ64}
+          decimals={8}
+          colorFor={item.type}
           className="ellipses"
-          decimals={9}
-          style="fixed"
         />
       </TableRowTextItem>
       <td className={`group/explorer w-[22%] md:w-[18%] border-r-[1px] z-[2] ${Height}`}>

src/typescript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/types.ts

@@ -6,7 +6,7 @@ export type TableRowDesktopProps = {
     rankName: string;
     apt: bigint;
     emoji: bigint;
-    type: string;
+    type: "buy" | "sell";
     priceQ64: bigint;
     date: Date;
     version: AnyNumberString;

src/typescript/frontend/src/components/price-feed/inner.tsx

@@ -9,18 +9,22 @@ 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";
+import { PriceColors } from "components/misc/NominalPriceDisplay";
 
 export const PriceDelta = ({ delta, className = "" }: { delta: number; className?: string }) => {
   const { prefix, suffix } = useMemo(
     () => ({
-      prefix: delta >= 0 ? "+" : "-",
+      prefix: delta === 0 ? "" : delta > 0 ? "+" : "-",
       suffix: "%",
     }),
     [delta]
   );
 
+  const color =
+    delta === 0 ? PriceColors["neutral"] : delta >= 0 ? PriceColors["buy"] : PriceColors["sell"];
+
   return (
-    <span className={cn(`${delta >= 0 ? "text-green" : "text-pink"}`, className)}>
+    <span className={cn(color, className)}>
       <FormattedNumber value={Math.abs(delta)} suffix={suffix} prefix={prefix} scramble />
     </span>
   );