Keep brightness at 100, just mute the non sig figs

Add q64 prop option
econia-labs · Feb 13, 2025 · e58b139 · e58b139
1 parent 991e362
commit e58b139
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/typescript/frontend/src/app/stats/TableData.tsx b/src/typescript/frontend/src/app/stats/TableData.tsx
@@ -75,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 priceQ64={cells.price(row)} />
+        <NominalPriceDisplay price={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 priceQ64={cells.lastAvgPrice(row)} />
+          <NominalPriceDisplay price={cells.lastAvgPrice(row)} />
         </ExplorerLink>
       </td>
       <td className={getCN(Column.MarketCap)}>{cells.marketCap(row)}</td>

diff --git a/src/typescript/frontend/src/components/misc/NominalPriceDisplay.tsx b/src/typescript/frontend/src/components/misc/NominalPriceDisplay.tsx
@@ -11,7 +11,8 @@ export const PriceColors: { [key in PriceColors]: string } = {
 };
 
 interface NominalPriceDisplayProps extends HTMLAttributes<HTMLSpanElement> {
-  priceQ64: AnyNumber;
+  price: AnyNumber;
+  q64?: boolean;
   decimals?: number;
   colorFor?: PriceColors;
 }
@@ -22,20 +23,21 @@ interface NominalPriceDisplayProps extends HTMLAttributes<HTMLSpanElement> {
  * Visually mutes the insignificant figures and highlights the significant ones.
  */
 export const NominalPriceDisplay = ({
-  priceQ64,
+  price,
+  q64 = false,
   decimals = 9,
   colorFor = "neutral",
   className,
 }: NominalPriceDisplayProps) => {
-  const price = toNominalPrice(priceQ64);
-  const fixed = price.toFixed(decimals);
+  const priceOut = q64 ? toNominalPrice(price) : Number(price);
+  const fixed = priceOut.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>
+      <span className={cn(color, "brightness-[0.35]", className)}>{beforeSigFig}</span>
+      <span className={cn(color, "brightness-100", className)}>{firstSigFigOnwards}</span>
     </>
   );
 };
diff --git a/...ript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx b/...ript/frontend/src/components/pages/emojicoin/components/trade-history/table-row/index.tsx
@@ -121,10 +121,11 @@ const TableRow = ({
         color={item.type === "sell" ? darkColors.pink : darkColors.green}
       >
         <NominalPriceDisplay
-          priceQ64={item.priceQ64}
+          price={item.priceQ64}
           decimals={8}
           colorFor={item.type}
           className="ellipses"
+          q64
         />
       </TableRowTextItem>
       <td className={`group/explorer w-[22%] md:w-[18%] border-r-[1px] z-[2] ${Height}`}>