fix(STK-216): Wrong AVG bought token price on executed orders table (#…

…141)

* fix(STK-216): update the way we compute the executed order avg price

packages/app/components/stack-modal/StackOrdersTable.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
+
 import Link from "next/link";
-import { cowExplorerUrl } from "@/models/cow-order";
-import { orderPairSymbolsText } from "@/models/order";
-import { StackOrder, StackOrderProps } from "@/models/stack-order";
+import { Order as CowOrder } from "@cowprotocol/cow-sdk";
+
+import { addressShortner, convertedAmount, formatDate } from "@/utils";
 import {
   BodyText,
   Icon,
@@ -14,10 +15,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/ui";
-import { formatDate } from "@/utils/datetime";
-import { convertedAmount } from "@/utils/numbers";
-import { addressShortner } from "@/utils/token";
-import { Order as CowOrder } from "@cowprotocol/cow-sdk";
+import {
+  cowExplorerUrl,
+  orderPairSymbolsText,
+  StackOrder,
+  StackOrderProps,
+} from "@/models";
+import { useNetworkContext } from "@/contexts";
 
 const INITIAL_NUMBER_OF_COW_ORDERS = 8;
 const MORE_ORDERS_NUMBER = 4;
@@ -86,63 +90,65 @@ const TableCowBody = ({
   stackOrder: StackOrder;
   cowOrders: CowOrder[];
 }) => {
-  const chainId = 100; // @todo use context or useNetwork hook
-  const averagePrice = (cowOrder: CowOrder) =>
-    (
-      Number(cowOrder.executedSellAmount) / Number(cowOrder.executedBuyAmount)
-    ).toFixed(4);
+  const { chainId } = useNetworkContext();
 
   return (
     <TableBody>
-      {cowOrders.map((cowOrder) => (
-        <TableRow key={cowOrder.uid}>
-          <TableCell className="py-2 md:table-cell">
-            <BodyText
-              size={1}
-              className="text-primary-700 hover:underline hover:underline-offset-2"
-            >
-              <Link
-                target="_blank"
-                href={cowExplorerUrl(chainId, cowOrder.uid)}
+      {cowOrders.map((cowOrder) => {
+        const executedBuyAmount = convertedAmount(
+          cowOrder.executedBuyAmount,
+          stackOrder.buyToken.decimals
+        );
+        const executedSellAmount = convertedAmount(
+          cowOrder.executedSellAmount,
+          stackOrder.sellToken.decimals
+        );
+        const averagePrice = executedSellAmount / executedBuyAmount;
+
+        return (
+          <TableRow key={cowOrder.uid}>
+            <TableCell className="py-2 md:table-cell">
+              <BodyText
+                size={1}
+                className="text-primary-700 hover:underline hover:underline-offset-2"
               >
-                {addressShortner(cowOrder.uid)}
-              </Link>
-            </BodyText>
-          </TableCell>
-          <TableCell className="py-2">
-            <BodyText className="text-em-med" size={1}>
-              {formatDate(cowOrder.creationDate)}
-            </BodyText>
-          </TableCell>
-          <TableCell className="py-2 text-right ">
-            <BodyText className="text-em-med" size={1}>
-              {convertedAmount(
-                cowOrder.executedSellAmount,
-                stackOrder.sellToken.decimals
-              ).toFixed(4)}
-            </BodyText>
-          </TableCell>
-          <TableCell className="py-2 text-right ">
-            <BodyText className="text-em-med" size={1}>
-              {convertedAmount(
-                cowOrder.executedBuyAmount,
-                stackOrder.buyToken.decimals
-              ).toFixed(4)}
-            </BodyText>
-          </TableCell>
-          <TableCell className="hidden py-2 text-right md:table-cell">
-            {cowOrder.status === "fulfilled" ? (
+                <Link
+                  target="_blank"
+                  href={cowExplorerUrl(chainId, cowOrder.uid)}
+                >
+                  {addressShortner(cowOrder.uid)}
+                </Link>
+              </BodyText>
+            </TableCell>
+            <TableCell className="py-2">
               <BodyText className="text-em-med" size={1}>
-                {averagePrice(cowOrder)}
+                {formatDate(cowOrder.creationDate)}
               </BodyText>
-            ) : (
-              <BodyText className="text-gray-400 animate-pulse" size={1}>
-                fulfilling
+            </TableCell>
+            <TableCell className="py-2 text-right ">
+              <BodyText className="text-em-med" size={1}>
+                {executedSellAmount.toFixed(4)}
               </BodyText>
-            )}
-          </TableCell>
-        </TableRow>
-      ))}
+            </TableCell>
+            <TableCell className="py-2 text-right ">
+              <BodyText className="text-em-med" size={1}>
+                {executedBuyAmount.toFixed(4)}
+              </BodyText>
+            </TableCell>
+            <TableCell className="hidden py-2 text-right md:table-cell">
+              {cowOrder.status === "fulfilled" ? (
+                <BodyText className="text-em-med" size={1}>
+                  {averagePrice.toFixed(4)}
+                </BodyText>
+              ) : (
+                <BodyText className="text-gray-400 animate-pulse" size={1}>
+                  in progress
+                </BodyText>
+              )}
+            </TableCell>
+          </TableRow>
+        );
+      })}
     </TableBody>
   );
 };