From 5bab1f383bae4a1b4d86df7de90b9813b8ecf34f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 29 Jul 2021 23:32:29 -0300
Subject: [PATCH] Display age column

---
 src/components/TimestampAge.tsx | 7 +++++--
 src/special/BlockRecord.tsx     | 4 ++++
 src/special/Blocks.tsx          | 4 ++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/TimestampAge.tsx b/src/components/TimestampAge.tsx
index 7849c14..20f4784 100644
--- a/src/components/TimestampAge.tsx
+++ b/src/components/TimestampAge.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 
 type TimestampAgeProps = {
+  now?: number | undefined;
   timestamp: number;
 };
 
-const TimestampAge: React.FC<TimestampAgeProps> = ({ timestamp }) => {
-  const now = Date.now() / 1000;
+const TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
+  if (now === undefined) {
+    now = Date.now() / 1000;
+  }
   let diff = now - timestamp;
 
   let desc = "";
diff --git a/src/special/BlockRecord.tsx b/src/special/BlockRecord.tsx
index 6263a8e..22d3943 100644
--- a/src/special/BlockRecord.tsx
+++ b/src/special/BlockRecord.tsx
@@ -1,6 +1,7 @@
 import { ethers } from "ethers";
 import React from "react";
 import BlockLink from "../components/BlockLink";
+import TimestampAge from "../components/TimestampAge";
 import { ExtendedBlock } from "../useErigonHooks";
 
 const ELASTICITY_MULTIPLIER = 2;
@@ -48,6 +49,9 @@ const BlockRecord: React.FC<BlockRecordProps> = ({ block }) => {
         )}{" "}
         Gwei
       </div>
+      <div className="text-right">
+        <TimestampAge timestamp={block.timestamp} />
+      </div>
     </div>
   );
 };
diff --git a/src/special/Blocks.tsx b/src/special/Blocks.tsx
index 575845f..0fd4525 100644
--- a/src/special/Blocks.tsx
+++ b/src/special/Blocks.tsx
@@ -69,6 +69,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
             </span>
             <span>Burnt fees</span>
           </div>
+          <div className="text-right">Age</div>
         </div>
         <div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
           <div>
@@ -89,6 +90,9 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
           <div className="justify-self-end">
             <div className="w-36 h-4 bg-gray-200 rounded-md"></div>
           </div>
+          <div className="justify-self-end">
+            <div className="w-36 h-4 bg-gray-200 rounded-md"></div>
+          </div>
         </div>
         {blocks.map((b, i) => (
           <Transition