Fixed inconsistent column spacing on the homepage (#506)

* fix: Inconsistent column spacing on the homepage * chore: update changeset * refactor: Add className prop to BlobCard, BlobTransactionCard, and BlockCard components * feat: Update CARD_HEIGHT to use responsive class
Blobscan · Aug 30, 2024 · 04ae214 · 04ae214
1 parent a8b94e2
commit 04ae214
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 33 deletions.
diff --git a/.changeset/swift-dots-happen.md b/.changeset/swift-dots-happen.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Fixed inconsistent column spacing on the homepage
diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx
@@ -18,12 +18,14 @@ type BlobCardProps = Partial<{
   >;
   transactions: { rollup: Rollup | null }[];
   compact?: boolean;
+  className?: string;
 }>;
 
 const BlobCard: FC<BlobCardProps> = ({
   blob: { versionedHash, commitment, size, dataStorageReferences, proof } = {},
   transactions,
   compact,
+  className,
 }) => {
   const breakpoint = useBreakpoint();
   const isCompact =
@@ -33,7 +35,7 @@ const BlobCard: FC<BlobCardProps> = ({
     breakpoint === "default";
 
   return (
-    <SurfaceCardBase>
+    <SurfaceCardBase className={className}>
       <div className="flex flex-col gap-1 text-sm">
         {versionedHash ? (
           <div className="flex justify-between gap-2">

diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx
@@ -42,6 +42,7 @@ type BlobTransactionCardProps = Partial<{
     "versionedHash" | "index" | "size"
   >[];
   compact?: boolean;
+  className?: string;
 }>;
 
 const TableCol: FC<{ children: React.ReactNode }> = function ({ children }) {
@@ -69,6 +70,7 @@ const BlobTransactionCard: FC<BlobTransactionCardProps> = function ({
   } = {},
   blobs: blobsOnTx,
   compact,
+  className,
 }) {
   const [opened, setOpened] = useState(false);
   const breakpoint = useBreakpoint();
@@ -83,7 +85,9 @@ const BlobTransactionCard: FC<BlobTransactionCardProps> = function ({
   return (
     <div>
       <SurfaceCardBase
-        className={compact ? "rounded" : "rounded-none rounded-t-md"}
+        className={`${className} ${
+          compact ? "rounded" : "rounded-none rounded-t-md"
+        }`}
       >
         <div className="flex flex-col text-sm">
           {hash ? (

diff --git a/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx
@@ -13,6 +13,7 @@ import { CardField } from "../Card";
 import { SurfaceCardBase } from "./SurfaceCardBase";
 
 type BlockCardProps = {
+  className?: string;
   block: {
     hash: string;
     number: number;
@@ -28,6 +29,7 @@ type BlockCardProps = {
 
 const BlockCard: FC<Partial<BlockCardProps>> = function ({
   block: { blobGasPrice, blobGasUsed, number, timestamp, transactions } = {},
+  className,
 }) {
   const hasOneTx = transactions?.length === 1;
   const blobCount = useMemo(
@@ -40,7 +42,7 @@ const BlockCard: FC<Partial<BlockCardProps>> = function ({
   const hasOneBlob = blobCount === 1;
 
   return (
-    <SurfaceCardBase>
+    <SurfaceCardBase className={className}>
       <div className="flex  justify-between gap-2 text-sm">
         <div className="flex gap-2 md:flex-row">
           {number ? (

diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
@@ -209,19 +209,19 @@ const Home: NextPage = () => {
                   {Array(LATEST_ITEMS_LENGTH)
                     .fill(0)
                     .map((_, i) => (
-                      <div className={CARD_HEIGHT} key={i}>
-                        <BlockCard />
-                      </div>
+                      <BlockCard className={CARD_HEIGHT} key={i} />
                     ))}
                 </div>
               ) : (
                 <SlidableList
                   items={blocks?.map((b) => ({
                     id: b.hash,
                     element: (
-                      <div className={CARD_HEIGHT} key={b.hash}>
-                        <BlockCard block={b} />
-                      </div>
+                      <BlockCard
+                        className={CARD_HEIGHT}
+                        block={b}
+                        key={b.hash}
+                      />
                     ),
                   }))}
                 />
@@ -249,31 +249,33 @@ const Home: NextPage = () => {
                   {Array(LATEST_ITEMS_LENGTH)
                     .fill(0)
                     .map((_, i) => (
-                      <div className={CARD_HEIGHT} key={i}>
-                        <BlobTransactionCard compact />
-                      </div>
+                      <BlobTransactionCard
+                        className={CARD_HEIGHT}
+                        compact
+                        key={i}
+                      />
                     ))}
                 </div>
               ) : (
                 <SlidableList
                   items={transactions.map((tx) => ({
                     id: tx.hash,
                     element: (
-                      <div className={CARD_HEIGHT} key={tx.hash}>
-                        <BlobTransactionCard
-                          transaction={{
-                            from: tx.from,
-                            to: tx.to,
-                            hash: tx.hash,
-                            rollup: tx.rollup,
-                            blockTimestamp: tx.blockTimestamp,
-                            blobGasBaseFee: tx.blobGasBaseFee,
-                            blobGasMaxFee: tx.blobGasMaxFee,
-                          }}
-                          blobs={tx.blobs}
-                          compact
-                        />
-                      </div>
+                      <BlobTransactionCard
+                        className={CARD_HEIGHT}
+                        key={tx.hash}
+                        transaction={{
+                          from: tx.from,
+                          to: tx.to,
+                          hash: tx.hash,
+                          rollup: tx.rollup,
+                          blockTimestamp: tx.blockTimestamp,
+                          blobGasBaseFee: tx.blobGasBaseFee,
+                          blobGasMaxFee: tx.blobGasMaxFee,
+                        }}
+                        blobs={tx.blobs}
+                        compact
+                      />
                     ),
                   }))}
                 />
@@ -300,19 +302,25 @@ const Home: NextPage = () => {
                   {Array(LATEST_ITEMS_LENGTH)
                     .fill(0)
                     .map((_, i) => (
-                      <div className={CARD_HEIGHT} key={i}>
-                        <BlobTransactionCard compact />
-                      </div>
+                      <BlobTransactionCard
+                        className={CARD_HEIGHT}
+                        compact
+                        key={i}
+                      />
                     ))}
                 </div>
               ) : (
                 <SlidableList
                   items={blobs.map((b) => ({
                     id: b.versionedHash,
                     element: (
-                      <div className={CARD_HEIGHT} key={b.versionedHash}>
-                        <BlobCard blob={b} transactions={[b.tx]} compact />
-                      </div>
+                      <BlobCard
+                        blob={b}
+                        transactions={[b.tx]}
+                        compact
+                        key={b.versionedHash}
+                        className={CARD_HEIGHT}
+                      />
                     ),
                   }))}
                 />