From c5d5d3b5836d0bde28080d325278e547b0fbf1c3 Mon Sep 17 00:00:00 2001
From: Richard Watts <108257153+rrw-zilliqa@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:43:14 +0000
Subject: [PATCH] (feat) Multi-column display for block list; ability to
 display proposer (#66)

---
 src/execution/BlockList.tsx                |  7 +++++-
 src/search/BlockItem.tsx                   | 26 +++++++++++++++++++---
 src/search/BlockResultHeader.tsx           | 18 +++++++++++++--
 src/search/useMultiColumnDisplayToggler.ts | 22 ++++++++++++++++++
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 src/search/useMultiColumnDisplayToggler.ts

diff --git a/src/execution/BlockList.tsx b/src/execution/BlockList.tsx
index 4b905270..50f8cef5 100644
--- a/src/execution/BlockList.tsx
+++ b/src/execution/BlockList.tsx
@@ -14,6 +14,7 @@ import {
   useEmptyBlocksToggler,
 } from "../search/useEmptyBlocksToggler";
 import { useFeeToggler } from "../search/useFeeToggler";
+import { useMultiColumnDisplayToggler } from "../search/useMultiColumnDisplayToggler";
 import StandardSelectionBoundary from "../selection/StandardSelectionBoundary";
 import { useRecentBlocks } from "../useErigonHooks";
 import { useLatestBlockNumber } from "../useLatestBlock";
@@ -26,6 +27,8 @@ const BlockList: React.FC = () => {
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
   const [emptyBlocksDisplay, emptyBlocksDisplayToggler] =
     useEmptyBlocksToggler();
+  const [multiColumnDisplay, multiColumnDisplayToggler] =
+    useMultiColumnDisplayToggler();
 
   const [searchParams] = useSearchParams();
   let pageNumber = 1;
@@ -35,7 +38,6 @@ const BlockList: React.FC = () => {
       pageNumber = parseInt(p);
     } catch (err) {}
   }
-
   const { data, isLoading } = useRecentBlocks(
     provider,
     latestBlockNum,
@@ -60,6 +62,8 @@ const BlockList: React.FC = () => {
           feeDisplayToggler={feeDisplayToggler}
           emptyBlocksDisplay={emptyBlocksDisplay}
           emptyBlocksDisplayToggler={emptyBlocksDisplayToggler}
+          multiColumnDisplay={multiColumnDisplay}
+          multiColumnDisplayToggler={multiColumnDisplayToggler}
         />
         {data ? (
           <StandardSelectionBoundary>
@@ -72,6 +76,7 @@ const BlockList: React.FC = () => {
                     key={block.number}
                     block={block}
                     feeDisplay={feeDisplay}
+                    multiColumnDisplay={multiColumnDisplay}
                   />
                 ) : undefined,
               )
diff --git a/src/search/BlockItem.tsx b/src/search/BlockItem.tsx
index c59e8c65..234fe2f3 100644
--- a/src/search/BlockItem.tsx
+++ b/src/search/BlockItem.tsx
@@ -5,6 +5,7 @@ import HexValue from "../components/HexValue";
 import Timestamp from "../components/Timestamp";
 import { formatValue } from "../components/formatter";
 import BlockReward from "../execution/components/BlockReward";
+import { MultiColumnDisplay } from "../search/useMultiColumnDisplayToggler";
 import { blockTxsURL } from "../url";
 import { ExtendedBlock } from "../useErigonHooks";
 import TransactionItemFiatFee from "./TransactionItemFiatFee";
@@ -13,12 +14,17 @@ import { FeeDisplay } from "./useFeeToggler";
 type BlockItemProps = {
   block: ExtendedBlock;
   feeDisplay: FeeDisplay;
+  multiColumnDisplay: MultiColumnDisplay;
 };
 
-const BlockItem: React.FC<BlockItemProps> = ({ block, feeDisplay }) => {
+const BlockItem: React.FC<BlockItemProps> = ({
+  block,
+  feeDisplay,
+  multiColumnDisplay,
+}) => {
   return (
     <div
-      className="grid grid-cols-9 items-baseline gap-x-1 border-t border-gray-200 text-sm 
+      className="grid grid-cols-10 items-baseline gap-x-1 border-t border-gray-200 text-sm 
     hover:bg-skin-table-hover px-2 py-3"
     >
       <span>
@@ -32,9 +38,23 @@ const BlockItem: React.FC<BlockItemProps> = ({ block, feeDisplay }) => {
           {block.transactionCount} transactions
         </NavLink>
       </span>
-      <span className="col-span-4">
+      <span className="col-span-3">
         <HexValue value={block.hash ?? "null"} />
       </span>
+      <span className="col-span-2">
+        {multiColumnDisplay == MultiColumnDisplay.SHOW_PROPOSER && (
+          <div>
+            {" "}
+            <HexValue value={block.miner ?? "none"} />
+          </div>
+        )}
+        {multiColumnDisplay == MultiColumnDisplay.SHOW_PARENT && (
+          <div>
+            {" "}
+            <HexValue value={block.parentHash ?? "none"} />
+          </div>
+        )}
+      </span>
       <span className="truncate font-balance text-xs text-gray-500">
         {feeDisplay === FeeDisplay.TX_FEE && formatValue(block.feeReward, 18)}
         {feeDisplay === FeeDisplay.TX_FEE_USD && (
diff --git a/src/search/BlockResultHeader.tsx b/src/search/BlockResultHeader.tsx
index bcdd1b22..7f9629a3 100644
--- a/src/search/BlockResultHeader.tsx
+++ b/src/search/BlockResultHeader.tsx
@@ -1,12 +1,15 @@
 import React from "react";
 import { EmptyBlocksDisplay } from "./useEmptyBlocksToggler";
 import { FeeDisplay } from "./useFeeToggler";
+import { MultiColumnDisplay } from "./useMultiColumnDisplayToggler";
 
 export type ResultHeaderProps = {
   feeDisplay: FeeDisplay;
   emptyBlocksDisplay: EmptyBlocksDisplay;
   feeDisplayToggler: () => void;
   emptyBlocksDisplayToggler: () => void;
+  multiColumnDisplay: MultiColumnDisplay;
+  multiColumnDisplayToggler: () => void;
 };
 
 const BlockResultHeader: React.FC<ResultHeaderProps> = ({
@@ -14,8 +17,10 @@ const BlockResultHeader: React.FC<ResultHeaderProps> = ({
   feeDisplayToggler,
   emptyBlocksDisplay,
   emptyBlocksDisplayToggler,
+  multiColumnDisplay,
+  multiColumnDisplayToggler,
 }) => (
-  <div className="grid grid-cols-9 gap-x-1 border-t border-b border-gray-200 bg-gray-100 px-2 py-2 text-sm font-bold text-gray-500">
+  <div className="grid grid-cols-10 gap-x-1 border-t border-b border-gray-200 bg-gray-100 px-2 py-2 text-sm font-bold text-gray-500">
     <div>Height</div>
     <div>
       <button
@@ -28,7 +33,16 @@ const BlockResultHeader: React.FC<ResultHeaderProps> = ({
           "Txns [non-empty-blks]"}
       </button>
     </div>
-    <div className="col-span-4">Block Hash</div>
+    <div className="col-span-3">Block Hash</div>
+    <div className="col-span-2">
+      <button
+        className="text-link-blue hover:text-link-blue-hover"
+        onClick={multiColumnDisplayToggler}
+      >
+        {multiColumnDisplay == MultiColumnDisplay.SHOW_PARENT && "Parent"}
+        {multiColumnDisplay == MultiColumnDisplay.SHOW_PROPOSER && "Proposer"}
+      </button>
+    </div>
     <div>
       <button
         className="text-link-blue hover:text-link-blue-hover"
diff --git a/src/search/useMultiColumnDisplayToggler.ts b/src/search/useMultiColumnDisplayToggler.ts
new file mode 100644
index 00000000..a2f83e17
--- /dev/null
+++ b/src/search/useMultiColumnDisplayToggler.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export enum MultiColumnDisplay {
+  SHOW_PARENT = 0,
+  SHOW_PROPOSER = 1,
+}
+
+export const useMultiColumnDisplayToggler = (): [
+  MultiColumnDisplay,
+  () => void,
+] => {
+  const [multiColumnDisplay, setMultiColumnDisplay] =
+    useState<MultiColumnDisplay>(MultiColumnDisplay.SHOW_PARENT);
+  const multiColumnDisplayToggler = () => {
+    if (multiColumnDisplay === MultiColumnDisplay.SHOW_PARENT) {
+      setMultiColumnDisplay(MultiColumnDisplay.SHOW_PROPOSER);
+    } else {
+      setMultiColumnDisplay(MultiColumnDisplay.SHOW_PARENT);
+    }
+  };
+  return [multiColumnDisplay, multiColumnDisplayToggler];
+};