From e6083e5cd58434a71e20da0b41cbaaf4b666acd0 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:20:49 -0300
Subject: [PATCH 1/3] Move nav bar up

---
 src/Block.tsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index c1578a8..b776b4c 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -107,18 +107,13 @@ const Block: React.FC = () => {
   return (
     <StandardFrame>
       <StandardSubtitle>
-        Block{" "}
-        <span className="text-base text-gray-500">
-          #{params.blockNumberOrHash}
-        </span>
-      </StandardSubtitle>
-      {block && (
-        <ContentFrame>
-          <InfoRow title="Block Height">
-            <div className="flex space-x-1 items-baseline">
-              <span className="font-bold mr-1">
-                {ethers.utils.commify(block.number)}
-              </span>
+        <div className="flex space-x-1 items-baseline">
+          <span>Block</span>
+          <span className="text-base text-gray-500">
+            #{params.blockNumberOrHash}
+          </span>
+          {block && (
+            <div className="pl-2 self-center flex space-x-1">
               <NavButton
                 blockNum={block.number - 1}
                 disabled={block.number === 0}
@@ -145,6 +140,15 @@ const Block: React.FC = () => {
                 <FontAwesomeIcon icon={faChevronRight} />
               </NavButton>
             </div>
+          )}
+        </div>
+      </StandardSubtitle>
+      {block && (
+        <ContentFrame>
+          <InfoRow title="Block Height">
+            <span className="font-bold">
+              {ethers.utils.commify(block.number)}
+            </span>
           </InfoRow>
           <InfoRow title="Timestamp">
             <Timestamp value={block.timestamp} />

From 6c763b481751b5cbc3d1b4c1b81ad030bdf15071 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:46:21 -0300
Subject: [PATCH 2/3] Extract and apply block navigation to block txs page

---
 src/Block.tsx                           | 41 ++++----------------
 src/BlockTransactionHeader.tsx          | 35 ++++++++++++-----
 src/Home.tsx                            |  3 +-
 src/block/NavBlock.tsx                  | 51 +++++++++++++++++++++++++
 src/{components => block}/NavButton.tsx |  6 ++-
 src/components/BlockLink.tsx            |  3 +-
 src/url.ts                              |  8 ++++
 7 files changed, 101 insertions(+), 46 deletions(-)
 create mode 100644 src/block/NavBlock.tsx
 rename src/{components => block}/NavButton.tsx (76%)

diff --git a/src/Block.tsx b/src/Block.tsx
index b776b4c..87da28d 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,15 +1,10 @@
 import React, { useEffect, useState, useMemo, useContext } from "react";
 import { useParams, NavLink } from "react-router-dom";
 import { ethers, BigNumber } from "ethers";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faChevronLeft,
-  faChevronRight,
-} from "@fortawesome/free-solid-svg-icons";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
+import NavBlock from "./block/NavBlock";
 import ContentFrame from "./ContentFrame";
-import NavButton from "./components/NavButton";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
@@ -18,6 +13,7 @@ import TransactionValue from "./components/TransactionValue";
 import HexValue from "./components/HexValue";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlockNumber } from "./useLatestBlock";
+import { blockTxsURL } from "./url";
 
 type BlockParams = {
   blockNumberOrHash: string;
@@ -113,33 +109,10 @@ const Block: React.FC = () => {
             #{params.blockNumberOrHash}
           </span>
           {block && (
-            <div className="pl-2 self-center flex space-x-1">
-              <NavButton
-                blockNum={block.number - 1}
-                disabled={block.number === 0}
-              >
-                <FontAwesomeIcon icon={faChevronLeft} />
-              </NavButton>
-              <NavButton
-                blockNum={block.number + 1}
-                disabled={
-                  latestBlockNumber === undefined ||
-                  block.number >= latestBlockNumber
-                }
-              >
-                <FontAwesomeIcon icon={faChevronRight} />
-              </NavButton>
-              <NavButton
-                blockNum={latestBlockNumber!}
-                disabled={
-                  latestBlockNumber === undefined ||
-                  block.number >= latestBlockNumber
-                }
-              >
-                <FontAwesomeIcon icon={faChevronRight} />
-                <FontAwesomeIcon icon={faChevronRight} />
-              </NavButton>
-            </div>
+            <NavBlock
+              blockNumber={block.number}
+              latestBlockNumber={latestBlockNumber}
+            />
           )}
         </div>
       </StandardSubtitle>
@@ -156,7 +129,7 @@ const Block: React.FC = () => {
           <InfoRow title="Transactions">
             <NavLink
               className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs"
-              to={`/block/${block.number}/txs`}
+              to={blockTxsURL(block.number)}
             >
               {block.transactions.length} transactions
             </NavLink>{" "}
diff --git a/src/BlockTransactionHeader.tsx b/src/BlockTransactionHeader.tsx
index 65a8288..e3f22fc 100644
--- a/src/BlockTransactionHeader.tsx
+++ b/src/BlockTransactionHeader.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
 import { ethers } from "ethers";
 import StandardSubtitle from "./StandardSubtitle";
 import BlockLink from "./components/BlockLink";
+import NavBlock from "./block/NavBlock";
+import { RuntimeContext } from "./useRuntime";
+import { useLatestBlockNumber } from "./useLatestBlock";
+import { blockTxsURL } from "./url";
 
 type BlockTransactionHeaderProps = {
   blockTag: ethers.providers.BlockTag;
@@ -9,13 +13,26 @@ type BlockTransactionHeaderProps = {
 
 const BlockTransactionHeader: React.FC<BlockTransactionHeaderProps> = ({
   blockTag,
-}) => (
-  <>
-    <StandardSubtitle>Transactions</StandardSubtitle>
-    <div className="pb-2 text-sm text-gray-500">
-      For Block <BlockLink blockTag={blockTag} />
-    </div>
-  </>
-);
+}) => {
+  const { provider } = useContext(RuntimeContext);
+  const latestBlockNumber = useLatestBlockNumber(provider);
+
+  return (
+    <StandardSubtitle>
+      <div className="flex space-x-1 items-baseline">
+        <span>Transactions</span>
+        <div className="flex space-x-1 text-sm text-gray-500">
+          <span>For Block</span>
+          <BlockLink blockTag={blockTag} />
+          <NavBlock
+            blockNumber={blockTag as number}
+            latestBlockNumber={latestBlockNumber}
+            urlBuilder={blockTxsURL}
+          />
+        </div>
+      </div>
+    </StandardSubtitle>
+  );
+};
 
 export default React.memo(BlockTransactionHeader);
diff --git a/src/Home.tsx b/src/Home.tsx
index 7d74fcd..d4f3afa 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -5,6 +5,7 @@ import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
 import { RuntimeContext } from "./useRuntime";
 import { useLatestBlock } from "./useLatestBlock";
+import { blockURL } from "./url";
 
 const Home: React.FC = () => {
   const { provider } = useContext(RuntimeContext);
@@ -56,7 +57,7 @@ const Home: React.FC = () => {
         {latestBlock && (
           <NavLink
             className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
-            to={`/block/${latestBlock.number}`}
+            to={blockURL(latestBlock.number)}
           >
             <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
diff --git a/src/block/NavBlock.tsx b/src/block/NavBlock.tsx
new file mode 100644
index 0000000..32a1dee
--- /dev/null
+++ b/src/block/NavBlock.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import NavButton from "./NavButton";
+
+type NavBlockProps = {
+  blockNumber: number;
+  latestBlockNumber: number | undefined;
+  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
+};
+
+const NavBlock: React.FC<NavBlockProps> = ({
+  blockNumber,
+  latestBlockNumber,
+  urlBuilder,
+}) => (
+  <div className="pl-2 self-center flex space-x-1">
+    <NavButton
+      blockNum={blockNumber - 1}
+      disabled={blockNumber === 0}
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronLeft} />
+    </NavButton>
+    <NavButton
+      blockNum={blockNumber + 1}
+      disabled={
+        latestBlockNumber === undefined || blockNumber >= latestBlockNumber
+      }
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronRight} />
+    </NavButton>
+    <NavButton
+      blockNum={latestBlockNumber!}
+      disabled={
+        latestBlockNumber === undefined || blockNumber >= latestBlockNumber
+      }
+      urlBuilder={urlBuilder}
+    >
+      <FontAwesomeIcon icon={faChevronRight} />
+      <FontAwesomeIcon icon={faChevronRight} />
+    </NavButton>
+  </div>
+);
+
+export default React.memo(NavBlock);
diff --git a/src/components/NavButton.tsx b/src/block/NavButton.tsx
similarity index 76%
rename from src/components/NavButton.tsx
rename to src/block/NavButton.tsx
index a9c1a9d..edc85c4 100644
--- a/src/components/NavButton.tsx
+++ b/src/block/NavButton.tsx
@@ -1,13 +1,17 @@
+import { ethers } from "ethers";
 import { NavLink } from "react-router-dom";
+import { blockURL } from "../url";
 
 type NavButtonProps = {
   blockNum: number;
   disabled?: boolean;
+  urlBuilder?: (blockNumber: ethers.providers.BlockTag) => string;
 };
 
 const NavButton: React.FC<NavButtonProps> = ({
   blockNum,
   disabled,
+  urlBuilder,
   children,
 }) => {
   if (disabled) {
@@ -21,7 +25,7 @@ const NavButton: React.FC<NavButtonProps> = ({
   return (
     <NavLink
       className="transition-colors bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white disabled:bg-link-blue disabled:text-gray-400 disabled:cursor-default rounded px-2 py-1 text-xs"
-      to={`/block/${blockNum}`}
+      to={urlBuilder ? urlBuilder(blockNum) : blockURL(blockNum)}
     >
       {children}
     </NavLink>
diff --git a/src/components/BlockLink.tsx b/src/components/BlockLink.tsx
index f9a8866..155553f 100644
--- a/src/components/BlockLink.tsx
+++ b/src/components/BlockLink.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { ethers } from "ethers";
+import { blockURL } from "../url";
 
 type BlockLinkProps = {
   blockTag: ethers.providers.BlockTag;
@@ -18,7 +19,7 @@ const BlockLink: React.FC<BlockLinkProps> = ({ blockTag }) => {
       className={`text-link-blue hover:text-link-blue-hover ${
         isNum ? "font-blocknum" : "font-hash"
       }`}
-      to={`/block/${blockTag}`}
+      to={blockURL(blockTag)}
     >
       {text}
     </NavLink>
diff --git a/src/url.ts b/src/url.ts
index 0586dbe..3807d69 100644
--- a/src/url.ts
+++ b/src/url.ts
@@ -1,3 +1,5 @@
+import { ethers } from "ethers";
+
 export const fourBytesURL = (
   assetsURLPrefix: string,
   fourBytes: string
@@ -7,3 +9,9 @@ export const tokenLogoURL = (
   assetsURLPrefix: string,
   address: string
 ): string => `${assetsURLPrefix}/assets/${address}/logo.png`;
+
+export const blockURL = (blockNum: ethers.providers.BlockTag) =>
+  `/block/${blockNum}`;
+
+export const blockTxsURL = (blockNum: ethers.providers.BlockTag) =>
+  `/block/${blockNum}/txs`;

From 30597fc4ba387c70347155a060c948d178633f67 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 23 Jul 2021 19:48:34 -0300
Subject: [PATCH 3/3] Move refactoring

---
 src/BlockTransactions.tsx                   |  4 ++--
 src/{ => block}/BlockTransactionHeader.tsx  | 12 +++++------
 src/{ => block}/BlockTransactionResults.tsx | 22 ++++++++++-----------
 3 files changed, 19 insertions(+), 19 deletions(-)
 rename src/{ => block}/BlockTransactionHeader.tsx (76%)
 rename src/{ => block}/BlockTransactionResults.tsx (76%)

diff --git a/src/BlockTransactions.tsx b/src/BlockTransactions.tsx
index b427415..30d39c0 100644
--- a/src/BlockTransactions.tsx
+++ b/src/BlockTransactions.tsx
@@ -3,8 +3,8 @@ import { useParams, useLocation } from "react-router";
 import { ethers } from "ethers";
 import queryString from "query-string";
 import StandardFrame from "./StandardFrame";
-import BlockTransactionHeader from "./BlockTransactionHeader";
-import BlockTransactionResults from "./BlockTransactionResults";
+import BlockTransactionHeader from "./block/BlockTransactionHeader";
+import BlockTransactionResults from "./block/BlockTransactionResults";
 import {
   InternalOperation,
   OperationType,
diff --git a/src/BlockTransactionHeader.tsx b/src/block/BlockTransactionHeader.tsx
similarity index 76%
rename from src/BlockTransactionHeader.tsx
rename to src/block/BlockTransactionHeader.tsx
index e3f22fc..a15c463 100644
--- a/src/BlockTransactionHeader.tsx
+++ b/src/block/BlockTransactionHeader.tsx
@@ -1,11 +1,11 @@
 import React, { useContext } from "react";
 import { ethers } from "ethers";
-import StandardSubtitle from "./StandardSubtitle";
-import BlockLink from "./components/BlockLink";
-import NavBlock from "./block/NavBlock";
-import { RuntimeContext } from "./useRuntime";
-import { useLatestBlockNumber } from "./useLatestBlock";
-import { blockTxsURL } from "./url";
+import StandardSubtitle from "../StandardSubtitle";
+import BlockLink from "../components/BlockLink";
+import NavBlock from "./NavBlock";
+import { RuntimeContext } from "../useRuntime";
+import { useLatestBlockNumber } from "../useLatestBlock";
+import { blockTxsURL } from "../url";
 
 type BlockTransactionHeaderProps = {
   blockTag: ethers.providers.BlockTag;
diff --git a/src/BlockTransactionResults.tsx b/src/block/BlockTransactionResults.tsx
similarity index 76%
rename from src/BlockTransactionResults.tsx
rename to src/block/BlockTransactionResults.tsx
index 74e2783..5937199 100644
--- a/src/BlockTransactionResults.tsx
+++ b/src/block/BlockTransactionResults.tsx
@@ -1,15 +1,15 @@
 import React, { useContext } from "react";
-import ContentFrame from "./ContentFrame";
-import PageControl from "./search/PageControl";
-import ResultHeader from "./search/ResultHeader";
-import PendingResults from "./search/PendingResults";
-import TransactionItem from "./search/TransactionItem";
-import { useFeeToggler } from "./search/useFeeToggler";
-import { RuntimeContext } from "./useRuntime";
-import { SelectionContext, useSelection } from "./useSelection";
-import { useENSCache } from "./useReverseCache";
-import { ProcessedTransaction } from "./types";
-import { PAGE_SIZE } from "./params";
+import ContentFrame from "../ContentFrame";
+import PageControl from "../search/PageControl";
+import ResultHeader from "../search/ResultHeader";
+import PendingResults from "../search/PendingResults";
+import TransactionItem from "../search/TransactionItem";
+import { useFeeToggler } from "../search/useFeeToggler";
+import { RuntimeContext } from "../useRuntime";
+import { SelectionContext, useSelection } from "../useSelection";
+import { useENSCache } from "../useReverseCache";
+import { ProcessedTransaction } from "../types";
+import { PAGE_SIZE } from "../params";
 
 type BlockTransactionResultsProps = {
   page?: ProcessedTransaction[];