Display age column

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 TimestampAge: React.FC<TimestampAgeProps> = ({ now, timestamp }) => {
-  const now = Date.now() / 1000;
+  if (now === undefined) {
+    now = Date.now() / 1000;
+  }
   let diff = now - timestamp;
 
   let desc = "";

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

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