format gas text and txns' data table sorting

ten-protocol · Jun 27, 2024 · f4e542f · f4e542f
1 parent 9f71d50
commit f4e542f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx b/tools/tenscan/frontend/src/components/modules/batches/batch-height-details.tsx
@@ -85,11 +85,19 @@ export function BatchHeightDetailsComponent({
         />
         <KeyValueItem
           label="Gas Limit"
-          value={formatNumber(batchDetails?.header?.gasLimit)}
+          value={
+            <Badge variant={"outline"}>
+              {formatNumber(batchDetails?.header?.gasLimit)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Gas Used"
-          value={formatNumber(batchDetails?.header?.gasUsed)}
+          value={
+            <Badge variant={"outline"}>
+              {formatNumber(batchDetails?.header?.gasUsed)}
+            </Badge>
+          }
         />
         <KeyValueItem
           label="Base Fee Per Gas"

diff --git a/tools/tenscan/frontend/src/components/modules/batches/columns.tsx b/tools/tenscan/frontend/src/components/modules/batches/columns.tsx
@@ -6,7 +6,6 @@ import { DataTableColumnHeader } from "../common/data-table/data-table-column-he
 import TruncatedAddress from "../common/truncated-address";
 import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 import { Batch } from "@/src/types/interfaces/BatchInterfaces";
-import { EyeOpenIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { Badge } from "../../ui/badge";
 
@@ -80,7 +79,9 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {formatNumber(row.original?.header?.gasUsed) || "N/A"}
+            <Badge variant={"outline"}>
+              {formatNumber(row.original?.header?.gasUsed) || "N/A"}
+            </Badge>
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx
@@ -23,7 +23,7 @@ export const columns: ColumnDef<Block>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(blockHeader?.number)}
+            #{Number(blockHeader?.number)}
           </span>
         </div>
       );
@@ -102,7 +102,9 @@ export const columns: ColumnDef<Block>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {formatNumber(blockHeader?.gasLimit)}
+            <Badge variant={"outline"}>
+              {formatNumber(blockHeader?.gasLimit)}
+            </Badge>
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx
@@ -25,7 +25,9 @@ export const columns: ColumnDef<Transaction>[] = [
         </div>
       );
     },
-    enableSorting: false,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
     enableHiding: false,
   },
 
@@ -43,7 +45,9 @@ export const columns: ColumnDef<Transaction>[] = [
         </div>
       );
     },
-    enableSorting: false,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
     enableHiding: false,
   },