Integrate frontend with new stoploss contract

package.json

@@ -69,6 +69,7 @@
     "cmdk": "^0.2.1",
     "embla-carousel-react": "8.1.7",
     "gql": "^1.1.2",
+    "gql.tada": "^1.8.2",
     "graphql-codegen-plugin-typescript-swr": "^0.8.5",
     "graphql-request": "6.1.0",
     "graphql-tag": "^2.12.6",

src/app/[chainId]/[safeAddress]/[orderId]/page.tsx

@@ -12,6 +12,9 @@ export default function OrderPage({
     orderId: string;
   };
 }) {
+  if (params.chainId != 11155111) {
+    throw new Error("Invalid chainId");
+  }
   return (
     <OrderDetails
       orderId={params.orderId}

src/app/[chainId]/[safeAddress]/page.tsx

@@ -2,7 +2,18 @@ import { ConsolidatedOrdersTable } from "#/components/ConsolidatedOrdersTable";
 import { SwapCard } from "#/components/swap-card/SwapCard";
 import { TxPendingDialog } from "#/components/TxPendingDialog";
 
-export default function Page() {
+export default function Page({
+  params,
+}: {
+  params: {
+    chainId: number;
+    safeAddress: string;
+  };
+}) {
+  // TODO: COW-237
+  if (params.chainId != 11155111) {
+    throw new Error("Invalid chainId");
+  }
   return (
     <>
       <TxPendingDialog />

src/components/ConsolidatedOrdersTable/columns.tsx

@@ -27,7 +27,7 @@ interface TokenPair {
   tokenB: Omit<IToken, "__typename">;
 }
 
-const isStopLossOrder = (
+const isPostedOrder = (
   order: ConsolidatedOrderType,
 ): order is StopLossOrderType => {
   return "stopLossData" in order && order.stopLossData !== null;
@@ -38,21 +38,26 @@ const isDraftOrder = (order: ConsolidatedOrderType): order is DraftOrder => {
 };
 
 export function getOrderDescription(order: ConsolidatedOrderType): string {
-  if (isStopLossOrder(order) && order.stopLossData) {
-    const { isSellOrder, tokenAmountIn, tokenIn, tokenAmountOut, tokenOut } =
-      order.stopLossData;
-    return `${isSellOrder ? "Sell" : "Buy"} ${formatUnits(tokenAmountIn, tokenIn.decimals)} ${tokenIn.symbol} for ${formatUnits(tokenAmountOut, tokenOut.decimals)} ${tokenOut.symbol}`;
+  if (isPostedOrder(order) && order.stopLossData) {
+    const {
+      isSellOrder,
+      tokenSellAmount,
+      tokenSell,
+      tokenBuyAmount,
+      tokenBuy,
+    } = order.stopLossData;
+    return `${isSellOrder ? "Sell" : "Buy"} ${formatUnits(tokenSellAmount as bigint, tokenSell.decimals)} ${tokenSell.symbol} for ${formatUnits(tokenBuyAmount as bigint, tokenBuy.decimals)} ${tokenBuy.symbol}`;
   } else if (isDraftOrder(order)) {
     return `${order.isSellOrder ? "Sell" : "Buy"} ${order.amountSell} ${order.tokenSell.symbol} for ${order.amountBuy} ${order.tokenBuy.symbol}`;
   }
   return "Invalid order";
 }
 
 const getTokenPair = (order: ConsolidatedOrderType): TokenPair | null => {
-  if (isStopLossOrder(order) && order.stopLossData) {
+  if (isPostedOrder(order) && order.stopLossData) {
     return {
-      tokenA: order.stopLossData.tokenOut,
-      tokenB: order.stopLossData.tokenIn,
+      tokenA: order.stopLossData.tokenBuy,
+      tokenB: order.stopLossData.tokenSell,
     } as TokenPair;
   }
   if (isDraftOrder(order)) {
@@ -78,28 +83,24 @@ const usePrice = (
     return marketPrice ?? null;
   }
 
-  if (
-    priceKey === "limitPrice" &&
-    isStopLossOrder(order) &&
-    order.stopLossData
-  ) {
+  if (priceKey === "limitPrice" && isPostedOrder(order) && order.stopLossData) {
     const amountSell = formatUnits(
-      order.stopLossData.tokenAmountIn,
-      order.stopLossData.tokenIn.decimals,
+      order.stopLossData.tokenSellAmount as bigint,
+      order.stopLossData.tokenSell.decimals,
     );
     const amountBuy = formatUnits(
-      order.stopLossData.tokenAmountOut,
-      order.stopLossData.tokenOut.decimals,
+      order.stopLossData.tokenBuyAmount as bigint,
+      order.stopLossData.tokenBuy.decimals,
     );
     return Number(amountBuy) / Number(amountSell);
   }
 
   if (
-    isStopLossOrder(order) &&
+    isPostedOrder(order) &&
     order.stopLossData &&
     priceKey === "strikePrice"
   ) {
-    return Number(formatUnits(order.stopLossData.strike, 18));
+    return Number(formatUnits(order.stopLossData.strike as bigint, 18));
   }
 
   if (isDraftOrder(order) && priceKey in order) {
@@ -264,7 +265,7 @@ export function getColumns(): ColumnDef<ConsolidatedOrderType>[] {
     {
       id: "details",
       cell: ({ row }) => {
-        if (isStopLossOrder(row.original) && "id" in row.original) {
+        if (isPostedOrder(row.original) && "id" in row.original) {
           const { safeAddress, chainId } = useSafeApp();
           return (
             <TooltipProvider>

src/components/ConsolidatedOrdersTable/index.tsx

@@ -9,7 +9,7 @@ import { DataTableFilterField, useDataTable } from "#/hooks/useDataTable";
 import { useDraftOrders } from "#/hooks/useDraftOrders";
 import { useOrderList } from "#/hooks/useOrderList";
 import { useTxManager } from "#/hooks/useTxManager";
-import { DraftOrder, StopLossOrderType } from "#/lib/types";
+import { DraftOrder, OrderStatus, StopLossOrderType } from "#/lib/types";
 
 import { DataTableToolbar } from "../data-table/data-table-toolbar";
 import { Spinner } from "../ui/spinner";
@@ -27,7 +27,9 @@ export function ConsolidatedOrdersTable() {
 
   const allOrders: ConsolidatedOrderType[] = useMemo(
     () => [
-      ...draftOrders.map((order) => ({ ...order, status: "draft" }) as const),
+      ...draftOrders.map(
+        (order) => ({ ...order, status: OrderStatus.DRAFT }) as const,
+      ),
       ...orders,
     ],
     [draftOrders, orders],
@@ -44,11 +46,33 @@ export function ConsolidatedOrdersTable() {
       label: "Status",
       value: "status",
       options: [
-        { label: "Draft", value: "draft" },
-        { label: "Open", value: "open" },
-        { label: "Filled", value: "filled" },
-        { label: "Partially filled", value: "partiallyFilled" },
-        { label: "Cancelled", value: "cancelled" },
+        { label: "Draft", value: OrderStatus.DRAFT },
+        {
+          label: "Open",
+          value: OrderStatus.OPEN || OrderStatus.PARTIALLY_FILLED,
+        },
+        {
+          label: "Filled",
+          value:
+            OrderStatus.FULFILLED || OrderStatus.PARTIALLY_FILLED_AND_EXPIRED,
+        },
+        {
+          label: "Partially filled",
+          value:
+            OrderStatus.PARTIALLY_FILLED ||
+            OrderStatus.PARTIALLY_FILLED_AND_CANCELLED ||
+            OrderStatus.PARTIALLY_FILLED_AND_EXPIRED,
+        },
+        {
+          label: "Cancelled",
+          value:
+            OrderStatus.CANCELLED || OrderStatus.PARTIALLY_FILLED_AND_CANCELLED,
+        },
+        {
+          label: "Expired",
+          value:
+            OrderStatus.EXPIRED || OrderStatus.PARTIALLY_FILLED_AND_EXPIRED,
+        },
       ],
     },
   ];
@@ -58,7 +82,11 @@ export function ConsolidatedOrdersTable() {
     columns,
     filterFields,
     enableRowSelection: (row) =>
-      row.original.status !== "filled" && row.original.status !== "cancelled",
+      [
+        OrderStatus.DRAFT,
+        OrderStatus.OPEN,
+        OrderStatus.PARTIALLY_FILLED,
+      ].includes(row.original.status),
   });
 
   return (

src/components/ConsolidatedOrdersTable/toolbar-actions.tsx

@@ -16,7 +16,7 @@ import { useDraftOrders } from "#/hooks/useDraftOrders";
 import { useTxManager } from "#/hooks/useTxManager";
 import { useUIStore } from "#/hooks/useUIState";
 import { OrderCancelArgs, TRANSACTION_TYPES } from "#/lib/transactionFactory";
-import { DraftOrder, StopLossOrderType } from "#/lib/types";
+import { DraftOrder, OrderStatus, StopLossOrderType } from "#/lib/types";
 
 import { type ConsolidatedOrderType } from "../ConsolidatedOrdersTable";
 import { ReviewOrdersDialog } from "../ReviewOrdersDialog";
@@ -50,10 +50,12 @@ export function ConsolidatedOrdersTableToolbarActions({
     .getFilteredSelectedRowModel()
     .rows.map((row) => row.original);
   const selectedDraftOrders = selectedOrders.filter(
-    (order) => order.status === "draft",
+    (order) => order.status === OrderStatus.DRAFT,
   ) as DraftOrder[];
   const selectedOpenOrders = selectedOrders.filter(
-    (order) => order.status === "open",
+    (order) =>
+      order.status === OrderStatus.OPEN ||
+      order.status === OrderStatus.PARTIALLY_FILLED,
   ) as StopLossOrderType[];
 
   const onCancelOrders = () => {
@@ -148,7 +150,13 @@ export function RemoveDraftOrdersDialog({
           showTooltip={disabled}
           tooltipText={DRAFT_ORDER_ACTIONS_DISABLED_TOOLTIP}
         >
-          <Button size="sm" variant="outline" type="button" disabled={disabled}>
+          <Button
+            size="sm"
+            variant="outline"
+            type="button"
+            disabled={disabled}
+            onClick={() => setOpen(true)}
+          >
             Delete {selectedIds.length > 0 ? `${selectedIds.length} ` : ""}
             Draft {selectedIds.length > 1 ? "Orders" : "Order"}{" "}
           </Button>