feat: add category column to blob and transaction tables (#623)

* feat(web): add category column to blob and transaction tables * chore(web): update changeset * fix(web): add 'category' to blob on transaction entity * refactor(web): merge 'category' and 'rollup' columns * fix: update missing test snapshots * feat(web): add rollup icon to start of the rows * feat(web): add rollups in blocks table * chore(web): update api changeset * chore(web): update snapshot * refactor(web): simplify table category conditional statements * refactor(web): remove scale styles for rollups icons in blocks table * fix(web): fix rollups list alignment in blocks table
Blobscan · Dec 2, 2024 · 025484b · 025484b
1 parent 8f4e316
commit 025484b
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 15 deletions.
diff --git a/.changeset/chatty-pears-drum.md b/.changeset/chatty-pears-drum.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/api": minor
+---
+
+Added transaction category column to blob data.
diff --git a/.changeset/pink-pots-melt.md b/.changeset/pink-pots-melt.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added category column to blob, block and transaction tables.
diff --git a/apps/web/src/pages/blobs.tsx b/apps/web/src/pages/blobs.tsx
@@ -7,6 +7,7 @@ import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
 import { Link } from "~/components/Link";
 import { PaginatedTable } from "~/components/PaginatedTable";
+import { RollupIcon } from "~/components/RollupIcon";
 import { Skeleton } from "~/components/Skeleton";
 import { StorageIcon } from "~/components/StorageIcon";
 import { api } from "~/api-client";
@@ -24,6 +25,10 @@ import {
 const BLOBS_TABLE_HEADERS = [
   {
     cells: [
+      {
+        item: "",
+        className: "w-[40px]",
+      },
       {
         item: "Versioned Hash",
         className: "2xl:w-[312px] xl:w-[276px] lg:w-[215px] w-[170px]",
@@ -84,8 +89,17 @@ const Blobs: NextPage = function () {
             txHash,
             blockTimestamp,
             blockNumber,
+            transaction,
           }) => ({
             cells: [
+              {
+                item:
+                  transaction?.category === "rollup" && transaction.rollup ? (
+                    <RollupIcon rollup={transaction.rollup} />
+                  ) : (
+                    <></>
+                  ),
+              },
               {
                 item: (
                   <Copyable

diff --git a/apps/web/src/pages/blocks.tsx b/apps/web/src/pages/blocks.tsx
@@ -8,6 +8,7 @@ import { Filters } from "~/components/Filters";
 import { Header } from "~/components/Header";
 import { Link } from "~/components/Link";
 import { PaginatedTable } from "~/components/PaginatedTable";
+import { RollupIcon } from "~/components/RollupIcon";
 import { Skeleton } from "~/components/Skeleton";
 import { Table } from "~/components/Table";
 import { api } from "~/api-client";
@@ -26,6 +27,10 @@ import {
 export const BLOCKS_TABLE_HEADERS = [
   {
     cells: [
+      {
+        item: "",
+        className: "w-[100px]",
+      },
       {
         item: "Block number",
         className: "2xl:w-[187px] lg:w-[158px] w-[118px]",
@@ -110,6 +115,7 @@ const Blocks: NextPage = function () {
             const headers = [
               {
                 cells: [
+                  { item: "" },
                   {
                     item: "Tx Hash",
                   },
@@ -127,12 +133,22 @@ const Blocks: NextPage = function () {
                 transaction.blobs.map((blob) => ({
                   transactionHash: transaction.hash,
                   blobVersionedHash: blob.versionedHash,
+                  category: transaction.category,
+                  rollup: transaction.rollup,
                 }))
             );
 
             const rows = transactionsCombinedWithInnerBlobs.map(
-              ({ transactionHash, blobVersionedHash }) => ({
+              ({ transactionHash, blobVersionedHash, rollup, category }) => ({
                 cells: [
+                  {
+                    item:
+                      category === "rollup" && rollup ? (
+                        <RollupIcon rollup={rollup} />
+                      ) : (
+                        <></>
+                      ),
+                  },
                   {
                     item: (
                       <Copyable
@@ -174,6 +190,21 @@ const Blocks: NextPage = function () {
 
           return {
             cells: [
+              {
+                item: (
+                  <div className="relative flex">
+                    {transactions.map((tx, i) => {
+                      return tx.rollup ? (
+                        <div key={i} className="-ml-1 first-of-type:ml-0">
+                          <RollupIcon rollup={tx.rollup} />
+                        </div>
+                      ) : (
+                        <></>
+                      );
+                    })}
+                  </div>
+                ),
+              },
               {
                 item: (
                   <Copyable

diff --git a/apps/web/src/pages/txs.tsx b/apps/web/src/pages/txs.tsx
@@ -39,11 +39,13 @@ type Transaction = Pick<
   | "blobGasMaxFee"
   | "block"
   | "blockTimestamp"
+  | "category"
 > & { blobsLength?: number };
 
 export const TRANSACTIONS_TABLE_HEADERS = [
   {
     cells: [
+      { item: "", className: "w-[40px]" },
       {
         item: "Hash",
         className: "w-[150px]",
@@ -64,10 +66,7 @@ export const TRANSACTIONS_TABLE_HEADERS = [
         item: "To",
         className: "w-[148px]",
       },
-      {
-        item: "Rollup",
-        className: "w-[72px]",
-      },
+
       {
         item: "Blob Base Fee",
         className: "w-[172px]",
@@ -128,6 +127,7 @@ const Txs: NextPage = function () {
             to,
             blobs,
             rollup,
+            category,
             blockNumber,
             blobGasBaseFee,
             blobGasMaxFee,
@@ -202,6 +202,14 @@ const Txs: NextPage = function () {
 
           return {
             cells: [
+              {
+                item:
+                  category === "rollup" && rollup ? (
+                    <RollupIcon rollup={rollup} />
+                  ) : (
+                    <></>
+                  ),
+              },
               {
                 item: (
                   <Copyable value={hash} tooltipText="Copy hash">
@@ -244,9 +252,6 @@ const Txs: NextPage = function () {
                   </Copyable>
                 ),
               },
-              {
-                item: rollup ? <RollupIcon rollup={rollup} /> : <></>,
-              },
               {
                 item: (
                   <div className="truncate">

diff --git a/packages/api/src/routers/blob/common/selects.ts b/packages/api/src/routers/blob/common/selects.ts
@@ -27,7 +27,6 @@ export function createBlobSelect(expands: Expands) {
         transaction: {
           select: {
             rollup: true,
-            category: true,
             ...(expands.transaction?.select ?? {}),
           },
         },
@@ -56,6 +55,7 @@ export function createBlobsOnTransactionsSelect(expands: Expands) {
     transaction: {
       select: {
         rollup: true,
+        category: true,
         ...(expands.transaction?.select ?? {}),
       },
     },

diff --git a/packages/api/src/utils/selects.ts b/packages/api/src/utils/selects.ts
@@ -25,4 +25,6 @@ export const blobsOnTransactionsReferencesSelect =
 export const transactionReferenceSelect =
   Prisma.validator<Prisma.TransactionSelect>()({
     hash: true,
+    rollup: true,
+    category: true,
   });