fix(STK-218): Stack orders should show the correct cow order status (#…

…142) * fix(STK-218): fix the way we handle the order status visualization
SwaprHQ · Dec 12, 2023 · 9a311d4 · 9a311d4
1 parent 30d4ed9
commit 9a311d4
Showing 1 changed file with 27 additions and 10 deletions.
diff --git a/packages/app/components/stack-modal/StackOrdersTable.tsx b/packages/app/components/stack-modal/StackOrdersTable.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import Link from "next/link";
-import { Order as CowOrder } from "@cowprotocol/cow-sdk";
+import { Order as CowOrder, OrderStatus } from "@cowprotocol/cow-sdk";
 
 import { addressShortner, convertedAmount, formatDate } from "@/utils";
 import {
@@ -26,6 +26,14 @@ import { useNetworkContext } from "@/contexts";
 const INITIAL_NUMBER_OF_COW_ORDERS = 8;
 const MORE_ORDERS_NUMBER = 4;
 
+enum CowOrderStatus {
+  PRESIGNATURE_PENDING = "presignaturePending",
+  OPEN = "open",
+  FULFILLED = "fulfilled",
+  CANCELLED = "cancelled",
+  EXPIRED = "expired",
+}
+
 export const StackOrdersTable = ({ stackOrder }: StackOrderProps) => {
   const initialCowOrders =
     stackOrder?.cowOrders?.slice(0, INITIAL_NUMBER_OF_COW_ORDERS) ?? [];
@@ -83,6 +91,21 @@ export const StackOrdersTable = ({ stackOrder }: StackOrderProps) => {
   );
 };
 
+const getOrderStatusText = (
+  orderStatus: OrderStatus | CowOrderStatus,
+  price?: number
+) => {
+  switch (orderStatus) {
+    case CowOrderStatus.FULFILLED:
+      return price?.toFixed(4);
+    case CowOrderStatus.CANCELLED:
+    case CowOrderStatus.EXPIRED:
+    case CowOrderStatus.PRESIGNATURE_PENDING:
+      return orderStatus;
+    case CowOrderStatus.OPEN:
+      return "in progress";
+  }
+};
 const TableCowBody = ({
   stackOrder,
   cowOrders,
@@ -136,15 +159,9 @@ const TableCowBody = ({
               </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>
-              )}
+              <BodyText className="capitalize text-em-med" size={1}>
+                {getOrderStatusText(cowOrder.status, averagePrice)}
+              </BodyText>
             </TableCell>
           </TableRow>
         );