Extract and apply block navigation to block txs page

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">
+            <NavBlock
-              <NavButton
+              blockNumber={block.number}
-                blockNum={block.number - 1}
+              latestBlockNumber={latestBlockNumber}
-                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>
           )}
         </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>{" "}

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,
-}) => (
+}) => {
-  <>
+  const { provider } = useContext(RuntimeContext);
-    <StandardSubtitle>Transactions</StandardSubtitle>
+  const latestBlockNumber = useLatestBlockNumber(provider);
-    <div className="pb-2 text-sm text-gray-500">
+
-      For Block <BlockLink blockTag={blockTag} />
+  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);

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} />

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);

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>

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>

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`;