feat: add order depth price indication tracking

duality-labs · May 17, 2024 · d808330 · d808330
1 parent a8a9b41
commit d808330
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/src/pages/Orderbook/Orderbook.tsx b/src/pages/Orderbook/Orderbook.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useMatch } from 'react-router-dom';
 
 import { useDenomFromPathParam } from '../../lib/web3/hooks/useTokens';
@@ -32,6 +32,8 @@ function Orderbook() {
   const { data: tokenA } = useToken(denomA);
   const { data: tokenB } = useToken(denomB);
 
+  const [depthPriceIndication, setDepthPriceIndication] = useState<number>();
+
   return (
     <div className="decontainer flex col gap-3">
       <div className="orderbook-header row">
@@ -60,7 +62,12 @@ function Orderbook() {
                       nav: 'Orderbook',
                       Tab: () =>
                         tokenA && tokenB ? (
-                          <OrderBookList tokenA={tokenA} tokenB={tokenB} />
+                          <OrderBookList
+                            tokenA={tokenA}
+                            tokenB={tokenB}
+                            priceIndication={depthPriceIndication}
+                            setPriceIndication={setDepthPriceIndication}
+                          />
                         ) : null,
                     },
                     {
@@ -74,7 +81,7 @@ function Orderbook() {
                         ) : null,
                     },
                   ];
-                }, [tokenA, tokenB])}
+                }, [depthPriceIndication, tokenA, tokenB])}
               />
             </div>
           </div>

diff --git a/src/pages/Orderbook/OrderbookList.tsx b/src/pages/Orderbook/OrderbookList.tsx
@@ -22,9 +22,12 @@ const spacingTicks = Array.from({ length: shownTickRows }).map(() => undefined);
 export default function OrderBookList({
   tokenA,
   tokenB,
+  setPriceIndication,
 }: {
   tokenA: Token;
   tokenB: Token;
+  priceIndication?: number | undefined;
+  setPriceIndication?: React.Dispatch<React.SetStateAction<number | undefined>>;
 }) {
   const [tokenIdA, tokenIdB] = [getTokenId(tokenA), getTokenId(tokenB)];
   const [tokenId0, tokenId1] = useOrderedTokenPair([tokenIdA, tokenIdB]) || [];
@@ -37,6 +40,13 @@ export default function OrderBookList({
     tokenId1 === tokenIdA && tokenId0 === tokenIdB,
   ];
 
+  const onHighlightPrice = useCallback(
+    (tick: TickInfo | undefined) => {
+      setPriceIndication?.(tick && tick?.price1To0.toNumber());
+    },
+    [setPriceIndication]
+  );
+
   const [, currentPrice] = useRealtimePrice(tokenA, tokenB);
   const resolutionPercent = 0.01; // size of price steps
 
@@ -225,12 +235,16 @@ export default function OrderBookList({
                 token={tokenA}
                 reserveKey={forward ? 'reserve0' : 'reserve1'}
                 priceDecimalPlaces={priceDecimalPlaces}
+                onHighlight={onHighlightPrice}
               />
             );
           })}
         </tbody>
         <tbody className="orderbook-list__table__tick-center">
-          <tr>
+          <tr
+            onMouseEnter={() => setPriceIndication?.(currentPrice || undefined)}
+            onMouseLeave={() => setPriceIndication?.(undefined)}
+          >
             <DiffCell
               colSpan={2}
               className="text-center py-3"
@@ -258,6 +272,7 @@ export default function OrderBookList({
                 token={tokenB}
                 reserveKey={reverse ? 'reserve0' : 'reserve1'}
                 priceDecimalPlaces={priceDecimalPlaces}
+                onHighlight={onHighlightPrice}
               />
             );
           })}
@@ -274,15 +289,20 @@ function OrderbookListRow({
   reserveKey,
   priceDecimalPlaces = 6,
   amountDecimalPlaces = 2,
+  onHighlight,
 }: {
   tick: TickInfo | undefined;
   previousTicks: TickInfo[];
   token: Token;
   reserveKey: 'reserve0' | 'reserve1';
   priceDecimalPlaces?: number;
   amountDecimalPlaces?: number;
+  onHighlight?: (tick: TickInfo | undefined) => void;
 }) {
   const { data: price } = useSimplePrice(token);
+  const onHover = useCallback(() => onHighlight?.(tick), [onHighlight, tick]);
+  const onHoverOut = useCallback(() => onHighlight?.(undefined), [onHighlight]);
+
   // add empty row
   if (!tick) {
     return (
@@ -301,7 +321,11 @@ function OrderbookListRow({
 
   const value = getTokenValue(token, tick[reserveKey], price);
   return (
-    <tr key={tick.tickIndex1To0.toNumber()}>
+    <tr
+      key={tick.tickIndex1To0.toNumber()}
+      onMouseEnter={onHover}
+      onMouseLeave={onHoverOut}
+    >
       <DiffCell className="text-right" diff={diff.toNumber()}>
         {formatAmount(tick.price1To0.toNumber(), {
           minimumFractionDigits: priceDecimalPlaces,