Fix buggy order depth tables

jmerle · Apr 2, 2024 · 5434d07 · 5434d07
1 parent dde43d7
commit 5434d07
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/pages/visualizer/OrderDepthTable.tsx b/src/pages/visualizer/OrderDepthTable.tsx
@@ -23,11 +23,11 @@ export function OrderDepthTable({ orderDepth }: OrderDepthTableProps): ReactNode
     const price = askPrices[i];
 
     if (i > 0 && askPrices[i - 1] - price > 1) {
-      rows.push(<OrderDepthTableSpreadRow key={`${price}-spread`} spread={askPrices[i - 1] - price} />);
+      rows.push(<OrderDepthTableSpreadRow key={`${price}-ask-spread`} spread={askPrices[i - 1] - price} />);
     }
 
     rows.push(
-      <Table.Tr key={price}>
+      <Table.Tr key={`${price}-ask`}>
         <Table.Td></Table.Td>
         <Table.Td style={{ textAlign: 'center' }}>{formatNumber(price)}</Table.Td>
         <Table.Td style={{ backgroundColor: getAskColor(0.1) }}>
@@ -37,19 +37,19 @@ export function OrderDepthTable({ orderDepth }: OrderDepthTableProps): ReactNode
     );
   }
 
-  if (askPrices.length > 0 && bidPrices.length > 0) {
+  if (askPrices.length > 0 && bidPrices.length > 0 && askPrices[askPrices.length - 1] !== bidPrices[0]) {
     rows.push(<OrderDepthTableSpreadRow key="spread" spread={askPrices[askPrices.length - 1] - bidPrices[0]} />);
   }
 
   for (let i = 0; i < bidPrices.length; i++) {
     const price = bidPrices[i];
 
     if (i > 0 && bidPrices[i - 1] - price > 1) {
-      rows.push(<OrderDepthTableSpreadRow key={`${price}-spread`} spread={bidPrices[i - 1] - price} />);
+      rows.push(<OrderDepthTableSpreadRow key={`${price}-bid-spread`} spread={bidPrices[i - 1] - price} />);
     }
 
     rows.push(
-      <Table.Tr key={price}>
+      <Table.Tr key={`${price}-bid`}>
         <Table.Td style={{ backgroundColor: getBidColor(0.1), textAlign: 'right' }}>
           {formatNumber(orderDepth.buyOrders[price])}
         </Table.Td>