fix: #265: route book styles (#270)

* refactor: #265: split route book into multiple files and improve styles

* feat: improve text styles for route book

Author: VanishMax

src/pages/trade/ui/route-book.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { BlockchainError } from '@/shared/ui/blockchain-error';
+import { usePathSymbols } from '../../model/use-path';
+import { useBook } from '../../api/book';
+import { calculateRelativeSizes } from './utils';
+import { RouteBookLoadingRow } from './loading-row';
+import { TradeRow } from './trade-row';
+import { SpreadRow } from './spread-row';
+import { RouteBookHeader } from './header-row';
+
+export const RouteBook = observer(() => {
+  const { data, isLoading, error: bookErr } = useBook();
+
+  const multiHops = data?.multiHops;
+  const pair = usePathSymbols();
+
+  const sellRelativeSizes = calculateRelativeSizes(multiHops?.sell ?? []);
+  const buyRelativeSizes = calculateRelativeSizes(multiHops?.buy ?? []);
+
+  if (bookErr) {
+    return (
+      <div className='flex items-center justify-center p-4 min-h-[600px]'>
+        <BlockchainError
+          message='An error occurred while loading data from the blockchain'
+          direction='column'
+        />
+      </div>
+    );
+  }
+
+  if (isLoading || !multiHops) {
+    return (
+      <div className='mt-2 w-full grid grid-cols-[1fr_1fr_1fr_1fr] gap-x-2 auto-rows-[32px]'>
+        <RouteBookHeader quote={pair.quoteSymbol} base={pair.baseSymbol} />
+        {Array(17)
+          .fill(1)
+          .map((_, i) => (
+            <RouteBookLoadingRow isSpread={i === 8} key={i} />
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className='mt-2 w-full grid grid-cols-[1fr_1fr_1fr_1fr] gap-x-2 auto-rows-[32px] items-center'>
+      <RouteBookHeader quote={pair.quoteSymbol} base={pair.baseSymbol} />
+
+      {multiHops.sell.map((trace, idx) => (
+        <TradeRow
+          key={`${trace.price}-${trace.total}-${idx}`}
+          trace={trace}
+          isSell={true}
+          relativeSize={sellRelativeSizes.get(trace.total) ?? 0}
+        />
+      ))}
+
+      <SpreadRow sellOrders={multiHops.sell} buyOrders={multiHops.buy} />
+
+      {multiHops.buy.map((trace, idx) => (
+        <TradeRow
+          key={`${trace.price}-${trace.total}-${idx}`}
+          trace={trace}
+          isSell={false}
+          relativeSize={buyRelativeSizes.get(trace.total) ?? 0}
+        />
+      ))}
+    </div>
+  );
+});

src/pages/trade/ui/route-book/book.tsx

@@ -0,0 +1,25 @@
+import { Text } from '@penumbra-zone/ui/Text';
+
+export interface OrderBookHeaderProps {
+  base: string;
+  quote: string;
+}
+
+export const RouteBookHeader = ({ base, quote }: OrderBookHeaderProps) => {
+  return (
+    <div className='grid grid-cols-subgrid col-span-4 text-xs text-text-secondary px-4 border-b border-b-other-tonalStroke'>
+      <div className='py-2 text-left'>
+        <Text tableItemSmall>Price({quote})</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Amount({base})</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Total</Text>
+      </div>
+      <div className='py-2 text-right'>
+        <Text tableItemSmall>Route</Text>
+      </div>
+    </div>
+  );
+};

src/pages/trade/ui/route-book/header-row.tsx

@@ -0,0 +1 @@
+export { RouteBook } from './book';

src/pages/trade/ui/route-book/index.ts

@@ -0,0 +1,38 @@
+import { Skeleton } from '@/shared/ui/skeleton';
+
+export interface RouteBookLoadingRowProps {
+  isSpread: boolean;
+}
+
+export const RouteBookLoadingRow = ({ isSpread }: RouteBookLoadingRowProps) =>
+  isSpread ? (
+    <div className='col-span-4 flex items-center justify-center gap-2 px-3 py-3 text-xs border-b border-b-other-tonalStroke'>
+      <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>
+    </div>
+  ) : (
+    <div className='grid grid-cols-subgrid col-span-4 items-center group relative border-b border-b-other-tonalStroke px-4'>
+      <div className='w-[56px] h-[16px]'>
+        <Skeleton />
+      </div>
+      <div className='w-[56px] h-[16px] ml-auto'>
+        <Skeleton />
+      </div>
+      <div className='w-[56px] h-[16px] ml-auto'>
+        <Skeleton />
+      </div>
+      <div className='w-[24px] h-[16px] ml-auto'>
+        <Skeleton />
+      </div>
+    </div>
+  );

src/pages/trade/ui/route-book/loading-row.tsx

@@ -0,0 +1,37 @@
+import { Text } from '@penumbra-zone/ui/Text';
+import type { Trace } from '@/shared/api/server/book/types';
+import { calculateSpread } from '../../model/trace';
+import { usePathSymbols } from '../../model/use-path';
+import { formatNumber } from './utils';
+
+export const SpreadRow = ({
+  sellOrders,
+  buyOrders,
+}: {
+  sellOrders: Trace[];
+  buyOrders: Trace[];
+}) => {
+  const spreadInfo = calculateSpread(sellOrders, buyOrders);
+  const pair = usePathSymbols();
+
+  if (!spreadInfo) {
+    return null;
+  }
+
+  return (
+    <div className='col-span-4 flex items-center h-full justify-center gap-2 px-3 py-3 text-xs border-b border-b-other-tonalStroke'>
+      <Text detailTechnical color='success.light'>
+        {formatNumber(spreadInfo.midPrice, 7)}
+      </Text>
+      <Text detailTechnical color='text.secondary'>
+        Spread:
+      </Text>
+      <Text detailTechnical color='text.primary'>
+        {formatNumber(spreadInfo.amount, 6)} {pair.quoteSymbol}
+      </Text>
+      <Text detailTechnical color='text.secondary'>
+        ({parseFloat(spreadInfo.percentage).toFixed(2)}%)
+      </Text>
+    </div>
+  );
+};