From 290d5a8b11da190e58df61b0c4fa33ac5fedc555 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 22:33:34 -0300
Subject: [PATCH] Add block navigation buttons

---
 src/Block.tsx                | 28 ++++++++++++++++++++++++----
 src/components/NavButton.tsx | 31 +++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NavButton.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index eaed7bf..44ae998 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -1,10 +1,16 @@
 import React, { useEffect, useState, useMemo } 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 { provider } from "./ethersconfig";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import ContentFrame from "./ContentFrame";
+import NavButton from "./components/NavButton";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
@@ -101,9 +107,23 @@ const Block: React.FC = () => {
       {block && (
         <ContentFrame>
           <InfoRow title="Block Height">
-            <span className="font-bold">
-              {ethers.utils.commify(block.number)}
-            </span>
+            <div className="flex space-x-1 items-baseline">
+              <span className="font-bold mr-1">
+                {ethers.utils.commify(block.number)}
+              </span>
+              <NavButton
+                blockNum={block.number - 1}
+                disabled={block.number === 0}
+              >
+                <FontAwesomeIcon icon={faChevronLeft} />
+              </NavButton>
+              <NavButton
+                blockNum={block.number + 1}
+                disabled={block.number === 0}
+              >
+                <FontAwesomeIcon icon={faChevronRight} />
+              </NavButton>
+            </div>
           </InfoRow>
           <InfoRow title="Timestamp">
             <Timestamp value={block.timestamp} />
@@ -156,7 +176,7 @@ const Block: React.FC = () => {
           </InfoRow>
           <InfoRow title="Ether Price">N/A</InfoRow>
           <InfoRow title="Hash">
-          <HexValue value={block.hash} />
+            <HexValue value={block.hash} />
           </InfoRow>
           <InfoRow title="Parent Hash">
             <BlockLink blockTag={block.parentHash} />
diff --git a/src/components/NavButton.tsx b/src/components/NavButton.tsx
new file mode 100644
index 0000000..a9c1a9d
--- /dev/null
+++ b/src/components/NavButton.tsx
@@ -0,0 +1,31 @@
+import { NavLink } from "react-router-dom";
+
+type NavButtonProps = {
+  blockNum: number;
+  disabled?: boolean;
+};
+
+const NavButton: React.FC<NavButtonProps> = ({
+  blockNum,
+  disabled,
+  children,
+}) => {
+  if (disabled) {
+    return (
+      <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded px-2 py-1 text-xs">
+        {children}
+      </span>
+    );
+  }
+
+  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}`}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+export default NavButton;