Add formatNumber utility function to display

numbers with commas
ten-protocol · Apr 3, 2024 · d54fa3c · d54fa3c
1 parent ef55e3d
commit d54fa3c
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 37 deletions.
diff --git a/tools/tenscan/frontend/pages/batches/[hash].tsx b/tools/tenscan/frontend/pages/batches/[hash].tsx
@@ -9,6 +9,7 @@ import {
   CardDescription,
 } from "@/src/components/ui/card";
 import { Skeleton } from "@/src/components/ui/skeleton";
+import { formatNumber } from "@/src/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 
@@ -30,9 +31,12 @@ export default function Batch() {
       ) : batchDetails ? (
         <Card className="col-span-3">
           <CardHeader>
-            <CardTitle>Batch #{Number(batchDetails?.Header?.number)}</CardTitle>
+            <CardTitle>
+              Batch #{formatNumber(batchDetails?.Header?.number)}
+            </CardTitle>
             <CardDescription>
-              Overview of the batch #{Number(batchDetails?.Header?.number)}
+              Overview of the batch #
+              {formatNumber(batchDetails?.Header?.number)}
             </CardDescription>
           </CardHeader>
           <CardContent>

diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx
@@ -4,6 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
+import { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -29,7 +30,7 @@ export default function Batches() {
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
             <p className="text-sm text-muted-foreground">
-              {Total} Batches found.
+              {formatNumber(Total)} Batches found.
             </p>
           </div>
         </div>

diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx
@@ -4,6 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
+import { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -30,7 +31,7 @@ export default function Blocks() {
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
             <p className="text-sm text-muted-foreground">
-              {Total} Blocks found.
+              {formatNumber(Total)} Blocks found.
             </p>
           </div>
         </div>

diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx
@@ -4,6 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { Metadata } from "next";
+import { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Transactions",
@@ -30,7 +31,7 @@ export default function Transactions() {
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Transactions</h2>
             <p className="text-sm text-muted-foreground">
-              {Total} Transactions found.
+              {formatNumber(Total)} Transactions found.
             </p>
           </div>
         </div>

diff --git a/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx b/tools/tenscan/frontend/src/components/modules/batches/batch-details.tsx
@@ -1,7 +1,7 @@
 import { Separator } from "@/src/components/ui/separator";
 import TruncatedAddress from "../common/truncated-address";
 import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 import { Badge } from "@/src/components/ui/badge";
 import { BatchDetails } from "@/src/types/interfaces/BatchInterfaces";
 
@@ -15,7 +15,7 @@ export function BatchDetailsComponent({
       <KeyValueList>
         <KeyValueItem
           label="Batch Number"
-          value={"#" + Number(batchDetails?.Header?.number)}
+          value={"#" + formatNumber(batchDetails?.Header?.number)}
         />
         <KeyValueItem
           label="Hash"
@@ -59,11 +59,11 @@ export function BatchDetailsComponent({
         />
         <KeyValueItem
           label="Gas Limit"
-          value={Number(batchDetails?.Header?.gasLimit)}
+          value={formatNumber(batchDetails?.Header?.gasLimit)}
         />
         <KeyValueItem
           label="Gas Used"
-          value={Number(batchDetails?.Header?.gasUsed)}
+          value={formatNumber(batchDetails?.Header?.gasUsed)}
         />
         <KeyValueItem
           label="Base Fee"
@@ -79,7 +79,7 @@ export function BatchDetailsComponent({
         />
         <KeyValueItem
           label="Inbound Cross Chain Height"
-          value={batchDetails?.Header?.inboundCrossChainHeight}
+          value={formatNumber(batchDetails?.Header?.inboundCrossChainHeight)}
         />
         <KeyValueItem
           label="Transfers Tree"
@@ -93,7 +93,7 @@ export function BatchDetailsComponent({
         />
         <KeyValueItem
           label="Base Fee Per Gas"
-          value={Number(batchDetails?.Header?.baseFeePerGas)}
+          value={formatNumber(batchDetails?.Header?.baseFeePerGas)}
           isLastItem
         />
       </KeyValueList>

diff --git a/tools/tenscan/frontend/src/components/modules/batches/columns.tsx b/tools/tenscan/frontend/src/components/modules/batches/columns.tsx
@@ -4,10 +4,11 @@ import { ColumnDef } from "@tanstack/react-table";
 
 import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
 import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+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";
 
 export const columns: ColumnDef<Batch>[] = [
   {
@@ -19,7 +20,7 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(row.getValue("number"))}
+            #{formatNumber(row.getValue("number"))}
           </span>
         </div>
       );
@@ -55,7 +56,9 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(row.getValue("gasUsed"))}
+            <Badge variant={"outline"}>
+              {formatNumber(row.getValue("gasUsed"))}
+            </Badge>
           </span>
         </div>
       );
@@ -72,7 +75,7 @@ export const columns: ColumnDef<Batch>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(row.getValue("gasLimit"))}
+            {formatNumber(row.getValue("gasLimit"))}
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx b/tools/tenscan/frontend/src/components/modules/blocks/columns.tsx
@@ -5,7 +5,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
 import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces";
 import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 import { Badge } from "../../ui/badge";
 import ExternalLink from "../../ui/external-link";
 import { externalLinks } from "@/src/routes";
@@ -22,7 +22,7 @@ export const columns: ColumnDef<Block>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(blockHeader?.number)}
+            {formatNumber(blockHeader?.number)}
           </span>
         </div>
       );
@@ -76,7 +76,9 @@ export const columns: ColumnDef<Block>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            <Badge variant={"outline"}>{Number(blockHeader?.gasUsed)}</Badge>
+            <Badge variant={"outline"}>
+              {formatNumber(blockHeader?.gasUsed)}
+            </Badge>
           </span>
         </div>
       );
@@ -94,7 +96,7 @@ export const columns: ColumnDef<Block>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(blockHeader?.gasLimit)}
+            {formatNumber(blockHeader?.gasLimit)}
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/src/components/ui/select";
+import { formatNumber } from "@/src/lib/utils";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -50,8 +51,8 @@ export function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
+          Page {formatNumber(table.getState().pagination.pageIndex + 1)} of{" "}
+          {formatNumber(table.getPageCount())}
         </div>
         <div className="flex items-center space-x-2">
           <Button

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -26,7 +26,7 @@ import { RecentBlocks } from "./recent-blocks";
 import { useBlocksService } from "@/src/services/useBlocksService";
 import AnalyticsCard from "./analytics-card";
 import Link from "next/link";
-import { cn } from "@/src/lib/utils";
+import { cn, formatNumber } from "@/src/lib/utils";
 import { Badge } from "../../ui/badge";
 import { BlocksIcon } from "lucide-react";
 
@@ -39,15 +39,17 @@ export default function Dashboard() {
   const DASHBOARD_DATA = [
     {
       title: "Ether Price",
-      value: price?.ethereum?.usd ? `$${price.ethereum.usd}` : "N/A",
+      value: price?.ethereum?.usd
+        ? `$${formatNumber(price.ethereum.usd)}`
+        : "N/A",
       // TODO: add change
       // change: "+20.1%",
       icon: RocketIcon,
     },
     {
       title: "Latest L2 Batch",
       value: latestBatch?.item?.number
-        ? Number(latestBatch.item.number)
+        ? formatNumber(latestBatch.item.number)
         : "N/A",
       // TODO: add change
       // change: "+20.1%",
@@ -70,14 +72,16 @@ export default function Dashboard() {
     },
     {
       title: "Transactions",
-      value: transactionCount?.count,
+      value: transactionCount?.count
+        ? formatNumber(transactionCount.count)
+        : "N/A",
       // TODO: add change
       // change: "+20.1%",
       icon: ReaderIcon,
     },
     {
       title: "Contracts",
-      value: contractCount?.count,
+      value: contractCount?.count ? formatNumber(contractCount.count) : "N/A",
       // TODO: add change
       // change: "+20.1%",
       icon: FileTextIcon,

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-batches.tsx
@@ -1,5 +1,5 @@
 import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 import { Batch } from "@/src/types/interfaces/BatchInterfaces";
 import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
 
@@ -13,7 +13,7 @@ export function RecentBatches({ batches }: { batches: any }) {
           </Avatar>
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">
-              #{+batch?.number}
+              #{formatNumber(batch?.number)}
             </p>
             <p className="text-sm text-muted-foreground word-break-all">
               {formatTimeAgo(batch?.timestamp)}

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-blocks.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-blocks.tsx
@@ -1,5 +1,5 @@
 import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
 import { Block } from "@/src/types/interfaces/BlockInterfaces";
 
@@ -13,7 +13,7 @@ export function RecentBlocks({ blocks }: { blocks: any }) {
           </Avatar>
           <div className="ml-4 space-y-1">
             <p className="text-sm font-medium leading-none">
-              #{+block?.blockHeader?.number}
+              #{formatNumber(block?.blockHeader?.number)}
             </p>
             <p className="text-sm text-muted-foreground word-break-all">
               {formatTimeAgo(block?.blockHeader?.timestamp)}

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx
@@ -2,7 +2,7 @@ import TruncatedAddress from "../common/truncated-address";
 import { Avatar, AvatarFallback } from "@/src/components/ui/avatar";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
 import { Badge } from "../../ui/badge";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 
 export function RecentTransactions({ transactions }: { transactions: any }) {
   return (
@@ -15,7 +15,7 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
             </Avatar>
             <div className="ml-4 space-y-1">
               <p className="text-sm font-medium leading-none">
-                #{transaction?.BatchHeight}
+                #{formatNumber(transaction?.BatchHeight)}
               </p>
               <p className="text-sm text-muted-foreground word-break-all">
                 {formatTimeAgo(transaction?.BatchTimestamp)}

diff --git a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
@@ -9,6 +9,7 @@ import { PersonalTransactions } from "@/src/types/interfaces/TransactionInterfac
 import TruncatedAddress from "../common/truncated-address";
 import Link from "next/link";
 import { EyeOpenIcon } from "@radix-ui/react-icons";
+import { formatNumber } from "@/src/lib/utils";
 
 export const columns: ColumnDef<PersonalTransactions>[] = [
   {
@@ -20,7 +21,7 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(row.getValue("blockNumber"))}
+            #{formatNumber(row.getValue("blockNumber"))}
           </span>
         </div>
       );
@@ -59,7 +60,9 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {Number(row.getValue("gasUsed"))}
+            <Badge variant={"secondary"}>
+              {formatNumber(row.getValue("gasUsed"))}
+            </Badge>
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/components/modules/personal/index.tsx b/tools/tenscan/frontend/src/components/modules/personal/index.tsx
@@ -3,6 +3,7 @@ import { columns } from "@/src/components/modules/personal/columns";
 import { DataTable } from "@/src/components/modules/common/data-table/data-table";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { Skeleton } from "@/src/components/ui/skeleton";
+import { formatNumber } from "@/src/lib/utils";
 
 export default function PersonalTransactions() {
   const { personalTxns, setNoPolling, personalTxnsLoading } =
@@ -26,7 +27,7 @@ export default function PersonalTransactions() {
             Personal Transactions
           </h2>
           <p className="text-muted-foreground">
-            {Total} personal transaction(s).
+            {formatNumber(Total)} personal transaction(s).
           </p>
         </div>
       </div>

diff --git a/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx b/tools/tenscan/frontend/src/components/modules/transactions/columns.tsx
@@ -7,7 +7,7 @@ import { statuses } from "./constants";
 import { DataTableColumnHeader } from "../common/data-table/data-table-column-header";
 import { Transaction } from "@/src/types/interfaces/TransactionInterfaces";
 import TruncatedAddress from "../common/truncated-address";
-import { formatTimeAgo } from "@/src/lib/utils";
+import { formatNumber, formatTimeAgo } from "@/src/lib/utils";
 
 export const columns: ColumnDef<Transaction>[] = [
   {
@@ -19,7 +19,7 @@ export const columns: ColumnDef<Transaction>[] = [
       return (
         <div className="flex space-x-2">
           <span className="max-w-[500px] truncate">
-            {row.getValue("BatchHeight")}
+            #{formatNumber(row.getValue("BatchHeight"))}
           </span>
         </div>
       );

diff --git a/tools/tenscan/frontend/src/lib/utils.ts b/tools/tenscan/frontend/src/lib/utils.ts
@@ -20,3 +20,8 @@ export const { ethereum } =
 export const downloadMetaMask = () => {
   window ? window.open("https://metamask.io/download", "_blank") : null;
 };
+
+export const formatNumber = (number: string | number) => {
+  const num = Number(number);
+  return num.toLocaleString();
+};