Pedro/cow 311 copy minor cow feedbacks pt 2 (#55)

* fix ens on receiver * fix decimals on order details tooltips * fix order details blinking and change to table row clickable button * add order cancelation on order details * add schema errors on submit button
bleu · Jul 15, 2024 · 232bae9 · 232bae9
1 parent d0820e2
commit 232bae9
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 109 deletions.
diff --git a/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx b/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx
@@ -1,8 +1,6 @@
-import { notFound } from "next/navigation";
 import { Address } from "viem";
 
 import { OrderDetails } from "#/components/OrderDetails";
-import { getProcessedStopLossOrder } from "#/lib/orderFetcher";
 import { ChainId } from "#/lib/publicClients";
 
 export default async function OrderPage({
@@ -14,22 +12,11 @@ export default async function OrderPage({
     orderId: string;
   };
 }) {
-  const defaultOrder = await getProcessedStopLossOrder({
-    chainId: params.chainId,
-    orderId: params.orderId,
-    address: params.safeAddress,
-  });
-
-  if (defaultOrder) {
-    return (
-      <OrderDetails
-        defaultOrder={defaultOrder}
-        orderId={params.orderId}
-        chainId={params.chainId}
-        address={params.safeAddress}
-      />
-    );
-  }
-
-  notFound();
+  return (
+    <OrderDetails
+      orderId={params.orderId}
+      chainId={params.chainId}
+      address={params.safeAddress}
+    />
+  );
 }
diff --git a/src/components/HistoryOrdersTab.tsx b/src/components/HistoryOrdersTab.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  Button,
   epochToDate,
   formatNumber,
   Spinner,
@@ -12,32 +11,26 @@ import {
   TableHeader,
   TableRow,
 } from "@bleu/ui";
-import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
 import { formatUnits } from "viem";
 
 import { useOrder } from "#/contexts/ordersContext";
 import { StopLossOrderType } from "#/lib/types";
 
-import { LinkComponent } from "./Link";
 import { StatusBadge } from "./StatusBadge";
+import { useRouter } from "next/navigation";
 
 export function HistoryOrdersTab() {
   const { historyOrders, isLoading } = useOrder();
 
   return (
     <Table className="w-full rounded-lg">
       <TableHeader className="bg-background">
-        <TableRow>
-          <TableHead className="rounded-tl-md">Created</TableHead>
-          <TableHead>Order</TableHead>
-          <TableHead>Trigger price</TableHead>
-          <TableHead>Filled</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead className="rounded-tr-md">
-            <span className="sr-only">Details</span>
-          </TableHead>
-        </TableRow>
+        <TableCell className="rounded-tl-md">Created</TableCell>
+        <TableCell>Order</TableCell>
+        <TableCell>Trigger price</TableCell>
+        <TableCell>Filled</TableCell>
+        <TableCell className="rounded-tr-md">Status</TableCell>
       </TableHeader>
       <TableBody>
         {historyOrders.length ? (
@@ -46,7 +39,7 @@ export function HistoryOrdersTab() {
           })
         ) : (
           <TableRow>
-            <TableCell colSpan={6} className="text-center">
+            <TableCell colSpan={5} className="text-center">
               {isLoading ? (
                 <Spinner />
               ) : (
@@ -64,6 +57,7 @@ export function HistoryOrdersTab() {
 
 export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
   const { safe } = useSafeAppsSDK();
+  const router = useRouter();
 
   if (!order.stopLossData) {
     return null;
@@ -94,7 +88,12 @@ export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
   ).toLocaleString();
 
   return (
-    <TableRow className="hover:bg-background text-xs">
+    <TableRow
+      className="hover:bg-background text-xs cursor-pointer"
+      onClick={() =>
+        router.push(`/${safe.chainId}/${safe.safeAddress}/${order?.id}`)
+      }
+    >
       <TableCell>{orderDateTime}</TableCell>
       <TableCell>
         <div className="flex flex-col">
@@ -112,15 +111,6 @@ export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
       <TableCell>
         <StatusBadge status={order.status} />
       </TableCell>
-      <TableCell>
-        <LinkComponent
-          href={`/${safe.chainId}/${safe.safeAddress}/${order?.id}`}
-        >
-          <Button variant="link" className="hover:text-primary/70 p-0">
-            <OpenInNewWindowIcon className="size-5" />
-          </Button>
-        </LinkComponent>
-      </TableCell>
     </TableRow>
   );
 }
diff --git a/src/components/OpenOrdersTab.tsx b/src/components/OpenOrdersTab.tsx
@@ -12,7 +12,6 @@ import {
   TableHeader,
   TableRow,
 } from "@bleu/ui";
-import { OpenInNewWindowIcon } from "@radix-ui/react-icons";
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
 import { useState } from "react";
 import { formatUnits } from "viem";
@@ -25,6 +24,7 @@ import { IToken, StopLossOrderType } from "#/lib/types";
 import { LinkComponent } from "./Link";
 import { Spinner } from "./Spinner";
 import { StatusBadge } from "./StatusBadge";
+import { useRouter } from "next/navigation";
 
 export function OpenOrdersTab() {
   const {
@@ -53,20 +53,15 @@ export function OpenOrdersTab() {
     <div className="flex flex-col gap-2">
       <Table className="w-full rounded-lg">
         <TableHeader className="bg-background">
-          <TableRow>
-            <TableHead className="rounded-tl-md">
-              <span className="sr-only">Select</span>
-            </TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Order</TableHead>
-            <TableHead>Trigger price</TableHead>
-            <TableHead>Current market price</TableHead>
-            <TableHead>Filled</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead className="rounded-tr-md">
-              <span className="sr-only">Details</span>
-            </TableHead>{" "}
-          </TableRow>
+          <TableCell className="rounded-tl-md">
+            <span className="sr-only">Select</span>
+          </TableCell>
+          <TableCell>Created</TableCell>
+          <TableCell>Order</TableCell>
+          <TableCell>Trigger price</TableCell>
+          <TableCell>Current market price</TableCell>
+          <TableCell>Filled</TableCell>
+          <TableCell className="rounded-tr-md">Status</TableCell>
         </TableHeader>
         <TableBody>
           {openOrders.length ? (
@@ -123,6 +118,7 @@ export function OpenOrderRow({
   onSelect: (selected: boolean) => void;
 }) {
   const { safe } = useSafeAppsSDK();
+  const router = useRouter();
 
   const { useTokenPairPrice } = useTokens();
 
@@ -160,8 +156,18 @@ export function OpenOrderRow({
   ).toLocaleString();
 
   return (
-    <TableRow className="hover:bg-background text-xs">
-      <TableCell>
+    <TableRow
+      className="hover:bg-background text-xs cursor-pointer"
+      onClick={() =>
+        router.push(`/${safe.chainId}/${safe.safeAddress}/${order?.id}`)
+      }
+    >
+      <TableCell
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className="cursor-normal"
+      >
         <Checkbox
           onCheckedChange={(checked) => {
             onSelect(checked as boolean);
@@ -190,15 +196,6 @@ export function OpenOrderRow({
       <TableCell>
         <StatusBadge status={order.status} />
       </TableCell>
-      <TableCell>
-        <LinkComponent
-          href={`/${safe.chainId}/${safe.safeAddress}/${order?.id}`}
-        >
-          <Button variant="link" className="hover:text-primary/70 p-0">
-            <OpenInNewWindowIcon className="size-5" />
-          </Button>
-        </LinkComponent>
-      </TableCell>
     </TableRow>
   );
 }