refactor(web): merge blobs paginated table utils in blobs view (#450)

Blobscan · Jul 30, 2024 · 31eb9cf · 31eb9cf
1 parent 1565d37
commit 31eb9cf
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 122 deletions.
diff --git a/apps/web/src/components/PaginatedTable/helpers/blobs.tsx b/apps/web/src/components/PaginatedTable/helpers/blobs.tsx
diff --git a/apps/web/src/components/PaginatedTable/helpers/index.ts b/apps/web/src/components/PaginatedTable/helpers/index.ts
diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx
@@ -4,15 +4,45 @@ import NextError from "next/error";
 import { useRouter } from "next/router";
 
 import { getPaginationParams } from "~/utils/pagination";
+import { Link } from "~/components/Link";
 import { PaginatedTable } from "~/components/PaginatedTable/PaginatedTable";
-import {
-  blobsTableHeaders,
-  getBlobsTableRows,
-} from "~/components/PaginatedTable/helpers";
+import { StorageIcon } from "~/components/StorageIcon";
 import { api } from "~/api-client";
-import { formatNumber } from "~/utils";
+import {
+  buildBlobRoute,
+  buildBlockRoute,
+  buildTransactionRoute,
+  formatBytes,
+  formatNumber,
+  formatTimestamp,
+  shortenAddress,
+} from "~/utils";
 
 const BLOBS_TABLE_DEFAULT_PAGE_SIZE = 50;
+const BLOBS_TABLE_HEADERS = [
+  {
+    cells: [
+      {
+        item: "Versioned Hash",
+      },
+      {
+        item: "Transaction Hash",
+      },
+      {
+        item: "Block Number",
+      },
+      {
+        item: "Timestamp",
+      },
+      {
+        item: "Size",
+      },
+      {
+        item: "Storage",
+      },
+    ],
+  },
+];
 
 const Blobs: NextPage = function () {
   const router = useRouter();
@@ -24,7 +54,74 @@ const Blobs: NextPage = function () {
   const { data, error, isLoading } = api.blob.getAll.useQuery({ p, ps });
   const { blobs, totalBlobs } = data || {};
 
-  const blobRows = useMemo(() => getBlobsTableRows(blobs), [blobs]);
+  const blobRows = useMemo(() => {
+    return blobs
+      ? blobs.map(
+          ({
+            versionedHash,
+            size,
+            dataStorageReferences,
+            txHash,
+            blockTimestamp,
+            blockNumber,
+          }) => ({
+            cells: [
+              {
+                item: (
+                  <Link href={buildBlobRoute(versionedHash)}>
+                    {shortenAddress(versionedHash, 8)}
+                  </Link>
+                ),
+              },
+              {
+                item: (
+                  <Link href={buildTransactionRoute(txHash)}>
+                    {shortenAddress(txHash, 8)}
+                  </Link>
+                ),
+              },
+              {
+                item: (
+                  <div className="text-contentTertiary-light dark:text-contentTertiary-dark">
+                    <Link href={buildBlockRoute(blockNumber)}>
+                      {blockNumber}
+                    </Link>
+                  </div>
+                ),
+              },
+              {
+                item: (
+                  <div className="whitespace-break-spaces">
+                    {formatTimestamp(blockTimestamp, true)}
+                  </div>
+                ),
+              },
+              {
+                item: (
+                  <div className="flex gap-2 text-xs">
+                    <span>{formatBytes(size)}</span>
+                  </div>
+                ),
+              },
+              {
+                item: (
+                  <div className="flex flex-row gap-1">
+                    {dataStorageReferences.map(({ storage, url }) => (
+                      <StorageIcon
+                        key={storage}
+                        storage={storage}
+                        url={url}
+                        size="md"
+                      />
+                    ))}
+                  </div>
+                ),
+              },
+            ],
+          })
+        )
+      : undefined;
+  }, [blobs]);
 
   if (error) {
     return (
@@ -39,7 +136,7 @@ const Blobs: NextPage = function () {
     <PaginatedTable
       title={`Blobs ${totalBlobs ? `(${formatNumber(totalBlobs)})` : ""}`}
       isLoading={isLoading}
-      headers={blobsTableHeaders}
+      headers={BLOBS_TABLE_HEADERS}
       rows={blobRows}
       totalItems={totalBlobs}
       paginationData={{ pageSize: ps, page: p }}