From 3d12b047d053fbd943049f1d014a434646b8fd7f Mon Sep 17 00:00:00 2001
From: Josef <vacekj@outlook.com>
Date: Tue, 10 Dec 2024 12:53:17 +0100
Subject: [PATCH] fix: routebook visual updates (#187)

* fix: padding in route book

* refactor: update skeleton loading rows and format price/number functions in trade components

- Replaced static loading placeholders with a reusable Skeleton component for better consistency in the RouteBook.
- Adjusted table header padding for improved alignment.
- Introduced formatPrice and formatNumber functions to standardize price and number formatting across TradeRow and RouteBook components.
- Updated TradeRow to utilize new formatting functions for displaying prices, amounts, and totals.

* feat: almost there

* fix: no more tables, grid is king

* fix: lints

* fix: lints
---
 src/pages/trade/ui/route-book.tsx | 130 ++++++++++++++++++------------
 src/pages/trade/ui/route-tabs.tsx |   2 +-
 src/pages/trade/ui/trade-row.tsx  |  51 +++++++-----
 3 files changed, 109 insertions(+), 74 deletions(-)

diff --git a/src/pages/trade/ui/route-book.tsx b/src/pages/trade/ui/route-book.tsx
index 77112bb3..69efef25 100644
--- a/src/pages/trade/ui/route-book.tsx
+++ b/src/pages/trade/ui/route-book.tsx
@@ -5,37 +5,49 @@ import { RouteBookResponse, Trace } from '@/shared/api/server/book/types';
 import { usePathSymbols } from '@/pages/trade/model/use-path.ts';
 import { calculateSpread } from '@/pages/trade/model/trace.ts';
 import { TradeRow } from '@/pages/trade/ui/trade-row.tsx';
+import { Skeleton } from '@/shared/ui/skeleton';
 
 const SkeletonRow = (props: { isSpread: boolean }) =>
   props.isSpread ? (
-    <tr>
-      <td colSpan={4} className='border-y border-l-other-solidStroke'>
-        <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
-          <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-
-          <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-
-          <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-
-          <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
+    <div className='border-y border-l-other-solidStroke'>
+      <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
+        <div className='w-[78px] h-[16px]'>
+          <Skeleton />
+        </div>
+        <div className='w-[54px] h-[16px]'>
+          <Skeleton />
+        </div>
+        <div className='w-[69px] h-[16px]'>
+          <Skeleton />
+        </div>
+        <div className='w-[39px] h-[16px]'>
+          <Skeleton />
         </div>
-      </td>
-    </tr>
+      </div>
+    </div>
   ) : (
-    <tr className={`group relative h-[33px] border-b border-b-other-tonalStroke`}>
-      <td>
-        <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-      </td>
-      <td className='relative text-xs text-right text-white'>
-        <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-      </td>
-      <td className='relative text-xs text-right text-white'>
-        <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-      </td>
-      <td className='relative text-xs text-right'>
-        <div className='w-full h-[22px] bg-neutral-800 rounded animate-pulse ml-auto'></div>
-      </td>
-    </tr>
+    <div className='group relative h-[33px] border-b border-b-other-tonalStroke grid grid-cols-[1fr_1fr_1fr_1fr] items-center'>
+      <div className='pl-4'>
+        <div className='w-[56px] h-[16px]'>
+          <Skeleton />
+        </div>
+      </div>
+      <div className='relative text-xs text-right pl-4'>
+        <div className='w-[56px] h-[16px] ml-auto'>
+          <Skeleton />
+        </div>
+      </div>
+      <div className='relative text-xs text-right pl-4'>
+        <div className='w-[56px] h-[16px] ml-auto'>
+          <Skeleton />
+        </div>
+      </div>
+      <div className='relative text-xs text-right pl-4'>
+        <div className='w-[24px] h-[16px] ml-auto'>
+          <Skeleton />
+        </div>
+      </div>
+    </div>
   );
 
 const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse }) => {
@@ -46,17 +58,17 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
   const buyRelativeSizes = calculateRelativeSizes(multiHops?.buy ?? []);
 
   return (
-    <table className='w-full'>
-      <thead>
-        <tr className='text-xs text-gray-400'>
-          <th className='py-2 font-normal text-left'>Price({pair.quoteSymbol})</th>
-          <th className='py-2 font-normal text-right'>Amount({pair.baseSymbol})</th>
-          <th className='py-2 font-normal text-right'>Total</th>
-          <th className='py-2 font-normal text-right'>Route</th>
-        </tr>
-      </thead>
-
-      <tbody className='relative'>
+    <div className='w-full'>
+      {/* Header */}
+      <div className='grid grid-cols-[1fr_1fr_1fr_1fr] h-[33px] mt-1 text-xs text-gray-400 px-4'>
+        <div className='py-2 font-normal text-left'>Price({pair.quoteSymbol})</div>
+        <div className='py-2 font-normal text-right'>Amount({pair.baseSymbol})</div>
+        <div className='py-2 font-normal text-right'>Total</div>
+        <div className='py-2 font-normal text-right'>Route</div>
+      </div>
+
+      {/* Body */}
+      <div className='relative'>
         {multiHops ? (
           <>
             {multiHops.sell.map((trace, idx) => (
@@ -84,8 +96,8 @@ const RouteBookData = observer(({ bookData }: { bookData?: RouteBookResponse })
             .fill(1)
             .map((_, i) => <SkeletonRow isSpread={i === 8} key={i} />)
         )}
-      </tbody>
-    </table>
+      </div>
+    </div>
   );
 });
 
@@ -99,27 +111,41 @@ export const RouteBook = observer(() => {
   return <RouteBookData bookData={data} />;
 });
 
+function formatPrice(price: string): string {
+  const num = parseFloat(price);
+  const [whole] = num.toString().split('.');
+  const totalDigits = 7;
+  const availableDecimals = Math.max(0, totalDigits - (whole?.length ?? 0));
+  return num.toFixed(availableDecimals);
+}
+
+function formatNumber(value: string): string {
+  const num = parseFloat(value);
+  const [whole] = num.toString().split('.');
+  const totalDigits = 6;
+  const availableDecimals = Math.max(0, totalDigits - (whole?.length ?? 0));
+  return num.toFixed(availableDecimals);
+}
+
 const SpreadRow = ({ sellOrders, buyOrders }: { sellOrders: Trace[]; buyOrders: Trace[] }) => {
   const spreadInfo = calculateSpread(sellOrders, buyOrders);
   const pair = usePathSymbols();
 
   if (!spreadInfo) {
-    return;
+    return null;
   }
 
   return (
-    <tr>
-      <td colSpan={4} className='border-y border-y-other-solidStroke'>
-        <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
-          <span className='text-green-400'>{parseFloat(spreadInfo.midPrice)}</span>
-          <span className='text-gray-400'>Spread:</span>
-          <span className='text-white'>
-            {parseFloat(spreadInfo.amount)} {pair.quoteSymbol}
-          </span>
-          <span className='text-gray-400'>({spreadInfo.percentage}%)</span>
-        </div>
-      </td>
-    </tr>
+    <div className='border-b border-y-other-solidStroke'>
+      <div className='flex items-center justify-center gap-2 px-3 py-3 text-xs'>
+        <span className='text-green-400'>{formatPrice(spreadInfo.midPrice)}</span>
+        <span className='text-gray-400'>Spread:</span>
+        <span className='text-white'>
+          {formatNumber(spreadInfo.amount)} {pair.quoteSymbol}
+        </span>
+        <span className='text-gray-400'>({parseFloat(spreadInfo.percentage).toFixed(2)}%)</span>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/trade/ui/route-tabs.tsx b/src/pages/trade/ui/route-tabs.tsx
index c307b54e..b879ca77 100644
--- a/src/pages/trade/ui/route-tabs.tsx
+++ b/src/pages/trade/ui/route-tabs.tsx
@@ -15,7 +15,7 @@ export const RouteTabs = () => {
   const [tab, setTab] = useState<RouteTabsType>(RouteTabsType.Book);
 
   return (
-    <div ref={parent} className='flex flex-col gap-2 h-full overflow-hidden'>
+    <div ref={parent} className='flex flex-col h-full'>
       <div className='flex justify-between gap-2 px-4 lg:pt-2 border-b border-b-other-solidStroke'>
         <Density medium>
           <Tabs
diff --git a/src/pages/trade/ui/trade-row.tsx b/src/pages/trade/ui/trade-row.tsx
index afb37c30..432fac7c 100644
--- a/src/pages/trade/ui/trade-row.tsx
+++ b/src/pages/trade/ui/trade-row.tsx
@@ -3,11 +3,22 @@ import { getSymbolFromValueView } from '@penumbra-zone/getters/value-view';
 import React from 'react';
 import { ChevronRight } from 'lucide-react';
 
-function padPrice(price: string): string {
-  const [whole, decimal = ''] = price.split('.');
-  const maxDigits = 8; // Maximum decimals commonly used for crypto prices
-  const paddedDecimal = decimal.padEnd(maxDigits, '0');
-  return `${whole}.${paddedDecimal}`;
+function formatPrice(price: string): string {
+  const num = parseFloat(price);
+  const parts = num.toString().split('.');
+  const whole = parts[0] ?? '0';
+  const totalDigits = 7;
+  const availableDecimals = Math.max(0, totalDigits - whole.length);
+  return num.toFixed(availableDecimals);
+}
+
+function formatNumber(value: string): string {
+  const num = parseFloat(value);
+  const parts = num.toString().split('.');
+  const whole = parts[0] ?? '0';
+  const totalDigits = 6;
+  const availableDecimals = Math.max(0, totalDigits - whole.length);
+  return num.toFixed(availableDecimals);
 }
 
 const SELL_BG_COLOR = 'rgba(175, 38, 38, 0.24)';
@@ -21,29 +32,28 @@ export const TradeRow = ({
   relativeSize: number;
 }) => {
   const bgColor = isSell ? SELL_BG_COLOR : 'rgba(28, 121, 63, 0.24)';
-  const paddedPrice = padPrice(trace.price);
 
   return (
-    <tr
-      className='h-[33px] border-b border-border-faded group'
+    <div
+      className='px-4 group relative h-[33px] border-b border-border-faded text-xs grid grid-cols-[1fr_1fr_1fr_1fr] items-center'
       style={{
         backgroundImage: `linear-gradient(to right, ${bgColor} ${relativeSize}%, transparent ${relativeSize}%)`,
       }}
     >
-      <td className={`${isSell ? 'text-red-400' : 'text-green-400'} text-xs`}>{paddedPrice}</td>
-      <td className='text-xs text-right text-white'>{trace.amount}</td>
-      <td className='text-xs text-right text-white'>{trace.total}</td>
-      <td className='text-xs text-right'>
+      <div className={isSell ? 'text-red-400' : 'text-green-400'}>{formatPrice(trace.price)}</div>
+      <div className='text-right text-white'>{formatNumber(trace.amount)}</div>
+      <div className='text-right text-white'>{formatNumber(trace.total)}</div>
+      <div className='text-right'>
         <HopCount count={trace.hops.length} />
-      </td>
+      </div>
 
-      {/* Overlay row that appears on hover */}
-      {/* eslint-disable-next-line react/no-unknown-property -- JSX style is valid in nextjs */}
+      {/* Overlay that appears on hover */}
+      {/* eslint-disable-next-line react/no-unknown-property -- jsx is, in fact, a property */}
       <style jsx>{`
-        tr:hover td {
+        .group:hover > div:not(:last-child) {
           visibility: hidden;
         }
-        tr:hover::after {
+        .group:hover::after {
           content: '';
           position: absolute;
           left: 0;
@@ -54,14 +64,13 @@ export const TradeRow = ({
       `}</style>
 
       {/* Route display that shows on hover */}
-      <td
+      <div
         className='hidden group-hover:flex justify-center absolute left-0 right-0 px-4 select-none z-30'
-        colSpan={4}
         style={{ visibility: 'visible' }}
       >
         <RouteDisplay tokens={trace.hops.map(valueView => getSymbolFromValueView(valueView))} />
-      </td>
-    </tr>
+      </div>
+    </div>
   );
 };