use tablehead in tableheaders

bleu · Jul 12, 2024 · d0820e2 · d0820e2
1 parent 2556796
commit d0820e2
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 48 deletions.
diff --git a/src/components/DraftOrdersTab.tsx b/src/components/DraftOrdersTab.tsx
@@ -7,6 +7,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableHead,
   TableHeader,
   TableRow,
 } from "@bleu/ui";
@@ -25,7 +26,7 @@ export function DraftOrdersTab() {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
   const selectedOrders = draftOrders.filter((order) =>
-    selectedIds.includes(order.id),
+    selectedIds.includes(order.id)
   );
 
   return (
@@ -38,13 +39,15 @@ export function DraftOrdersTab() {
       <div className="flex flex-col gap-2">
         <Table className="w-full rounded-lg">
           <TableHeader className="bg-background">
-            <TableCell className="rounded-tl-md">
-              <span className="sr-only">Select</span>
-            </TableCell>
-            <TableCell>Order</TableCell>
-            <TableCell>Trigger price</TableCell>
-            <TableCell>Limit price</TableCell>
-            <TableCell className="rounded-tr-md">Current price</TableCell>
+            <TableRow>
+              <TableHead className="rounded-tl-md">
+                <span className="sr-only">Select</span>
+              </TableHead>
+              <TableHead>Order</TableHead>
+              <TableHead>Trigger price</TableHead>
+              <TableHead>Limit price</TableHead>
+              <TableHead className="rounded-tr-md">Current price</TableHead>
+            </TableRow>
           </TableHeader>
           <TableBody>
             {draftOrders.length ? (
@@ -59,7 +62,7 @@ export function DraftOrdersTab() {
                         return;
                       }
                       setSelectedIds(
-                        selectedIds.filter((id) => id !== order.id),
+                        selectedIds.filter((id) => id !== order.id)
                       );
                     }}
                   />
@@ -120,7 +123,7 @@ export function DraftOrderRow({
   const { useTokenPairPrice } = useTokens();
   const { data: marketPrice } = useTokenPairPrice(
     order.tokenSell,
-    order.tokenBuy,
+    order.tokenBuy
   );
 
   return (

diff --git a/src/components/HistoryOrdersTab.tsx b/src/components/HistoryOrdersTab.tsx
@@ -8,6 +8,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableHead,
   TableHeader,
   TableRow,
 } from "@bleu/ui";
@@ -27,14 +28,16 @@ export function HistoryOrdersTab() {
   return (
     <Table className="w-full rounded-lg">
       <TableHeader className="bg-background">
-        <TableCell className="rounded-tl-md">Created</TableCell>
-        <TableCell>Order</TableCell>
-        <TableCell>Trigger price</TableCell>
-        <TableCell>Filled</TableCell>
-        <TableCell>Status</TableCell>
-        <TableCell className="rounded-tr-md">
-          <span className="sr-only">Details</span>
-        </TableCell>
+        <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>
       </TableHeader>
       <TableBody>
         {historyOrders.length ? (
@@ -76,18 +79,18 @@ export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
   const amountSell = Number(
     formatUnits(
       order.stopLossData?.tokenAmountIn,
-      order.stopLossData.tokenIn.decimals,
-    ),
+      order.stopLossData.tokenIn.decimals
+    )
   );
   const amountBuy = Number(
     formatUnits(
       order.stopLossData?.tokenAmountOut,
-      order.stopLossData.tokenOut.decimals,
-    ),
+      order.stopLossData.tokenOut.decimals
+    )
   );
 
   const orderDateTime = epochToDate(
-    Number(order.blockTimestamp),
+    Number(order.blockTimestamp)
   ).toLocaleString();
 
   return (

diff --git a/src/components/OpenOrdersTab.tsx b/src/components/OpenOrdersTab.tsx
@@ -8,6 +8,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableHead,
   TableHeader,
   TableRow,
 } from "@bleu/ui";
@@ -52,18 +53,20 @@ export function OpenOrdersTab() {
     <div className="flex flex-col gap-2">
       <Table className="w-full rounded-lg">
         <TableHeader className="bg-background">
-          <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>Status</TableCell>
-          <TableCell className="rounded-tr-md">
-            <span className="sr-only">Details</span>
-          </TableCell>{" "}
+          <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>
         </TableHeader>
         <TableBody>
           {openOrders.length ? (
@@ -129,7 +132,7 @@ export function OpenOrderRow({
 
   const { data: marketPrice } = useTokenPairPrice(
     order.stopLossData?.tokenIn as IToken,
-    order.stopLossData?.tokenOut as IToken,
+    order.stopLossData?.tokenOut as IToken
   );
 
   const priceUnity =
@@ -142,18 +145,18 @@ export function OpenOrderRow({
   const amountSell = Number(
     formatUnits(
       order.stopLossData?.tokenAmountIn,
-      order.stopLossData.tokenIn.decimals,
-    ),
+      order.stopLossData.tokenIn.decimals
+    )
   );
   const amountBuy = Number(
     formatUnits(
       order.stopLossData?.tokenAmountOut,
-      order.stopLossData.tokenOut.decimals,
-    ),
+      order.stopLossData.tokenOut.decimals
+    )
   );
 
   const orderDateTime = epochToDate(
-    Number(order.blockTimestamp),
+    Number(order.blockTimestamp)
   ).toLocaleString();
 
   return (

diff --git a/src/components/RootLayout.tsx b/src/components/RootLayout.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Toaster } from "@bleu/ui";
 import SafeProvider from "@safe-global/safe-apps-react-sdk";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

diff --git a/src/contexts/tokensContext.tsx b/src/contexts/tokensContext.tsx
@@ -27,7 +27,7 @@ interface ITokensContext {
   useTokenPrice: (token: IToken) => { data?: number; error: any };
   useTokenPairPrice: (
     tokenSell: IToken,
-    tokenBuy: IToken,
+    tokenBuy: IToken
   ) => {
     data?: number;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36,12 +36,12 @@ interface ITokensContext {
   getOrFetchTokenPrice: (token?: IToken) => Promise<number | undefined>;
   getTokenPairPrice: (
     tokenSell?: IToken,
-    tokenBuy?: IToken,
+    tokenBuy?: IToken
   ) => Promise<number | undefined>;
 }
 
 export const TokensContext = React.createContext<ITokensContext>(
-  {} as ITokensContext,
+  {} as ITokensContext
 );
 
 function fetchFromLocalStorage<T>(key: string): T | null {
@@ -74,7 +74,7 @@ export const TokensContextProvider = ({
   function getTokenList() {
     return [
       ...(cowTokenList.filter(
-        (token) => token.chainId === chainId,
+        (token) => token.chainId === chainId
       ) as IToken[]),
       ...importedTokenList,
     ];
@@ -128,7 +128,7 @@ export const TokensContextProvider = ({
       () => getTokenPairPrice(tokenSell, tokenBuy),
       {
         refreshInterval: TOKEN_PRICE_CACHE_DURATION,
-      },
+      }
     );
   };
 
@@ -140,15 +140,15 @@ export const TokensContextProvider = ({
     setImportedTokenList(newImportedTokenList);
     localStorage.setItem(
       "importedTokens",
-      JSON.stringify(newImportedTokenList),
+      JSON.stringify(newImportedTokenList)
     );
   }
 
   useEffect(() => {
     const importedTokens =
       fetchFromLocalStorage<ITokenWithChainId[]>("importedTokens");
     setImportedTokenList(
-      importedTokens?.filter((token) => token.chainId === chainId) || [],
+      importedTokens?.filter((token) => token.chainId === chainId) || []
     );
   }, [chainId]);