From fc5dc095c8e2c8f7eb721dba7734d8c7188b52a6 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 4 Aug 2021 02:09:08 -0300
Subject: [PATCH] Add blip animation to basefee delta

---
 src/special/london/Blip.tsx     | 33 +++++++++++++++++++++++++++++++++
 src/special/london/BlockRow.tsx | 15 +++++++++++----
 src/special/london/Blocks.tsx   | 14 +++++++++++---
 3 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 src/special/london/Blip.tsx

diff --git a/src/special/london/Blip.tsx b/src/special/london/Blip.tsx
new file mode 100644
index 0000000..4a6d489
--- /dev/null
+++ b/src/special/london/Blip.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Transition } from "@headlessui/react";
+
+type BlipProps = {
+  value: number;
+};
+
+const Blip: React.FC<BlipProps> = ({ value }) => {
+  const [show, setShow] = useState<boolean>(true);
+
+  return (
+    <Transition
+      show
+      appear
+      enter="transition transform ease-in duration-1000 translate-x-full pl-3"
+      enterFrom="opacity-100 translate-y-0"
+      enterTo="opacity-0 -translate-y-5"
+      afterEnter={() => setShow(false)}
+    >
+      {show && value !== 0 && (
+        <div
+          className={`absolute bottom-0 font-bold ${
+            value > 0 ? "text-green-500" : "text-red-500"
+          } text-3xl`}
+        >
+          {value > 0 ? `+${value}` : `-${value}`}
+        </div>
+      )}
+    </Transition>
+  );
+};
+
+export default React.memo(Blip);
diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx
index 6331cdb..83efb0f 100644
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -1,17 +1,19 @@
-import { ethers } from "ethers";
 import React from "react";
+import { ethers } from "ethers";
 import BlockLink from "../../components/BlockLink";
 import TimestampAge from "../../components/TimestampAge";
 import { ExtendedBlock } from "../../useErigonHooks";
+import Blip from "./Blip";
 
 const ELASTICITY_MULTIPLIER = 2;
 
 type BlockRowProps = {
   now: number;
   block: ExtendedBlock;
+  baseFeeDelta: number;
 };
 
-const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
+const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
   const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
   const burntFees =
     block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@@ -19,7 +21,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
   const totalReward = block.blockReward.add(netFeeReward ?? 0);
 
   return (
-    <div className="grid grid-cols-8 px-3 py-2 hover:bg-gray-100">
+    <div className="grid grid-cols-8 gap-x-2 px-3 py-2 hover:bg-gray-100">
       <div>
         <BlockLink blockTag={block.number} />
       </div>
@@ -37,7 +39,12 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
       <div className="text-right text-gray-400">
         {ethers.utils.commify(gasTarget.toString())}
       </div>
-      <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
+      <div className="text-right">
+        <div className="relative">
+          <span>{block.baseFeePerGas?.toString()} wei</span>
+          <Blip value={baseFeeDelta} />
+        </div>
+      </div>
       <div className="text-right col-span-2">
         {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
       </div>
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index 63dec7b..570703b 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -106,7 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
         <div>
           <Line data={data} height={100} options={options} />
         </div>
-        <div className="mt-5 grid grid-cols-8 px-3 py-2">
+        <div className="mt-5 grid grid-cols-8 gap-x-2 px-3 py-2">
           <div className="flex space-x-1 items-baseline">
             <span className="text-gray-500">
               <FontAwesomeIcon icon={faCube} />
@@ -140,7 +140,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             <span>Age</span>
           </div>
         </div>
-        {blocks.map((b, i) => (
+        {blocks.map((b, i, all) => (
           <Transition
             key={b.hash}
             show={i < MAX_BLOCK_HISTORY}
@@ -152,7 +152,15 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-10"
           >
-            <BlockRow now={now} block={b} />
+            <BlockRow
+              now={now}
+              block={b}
+              baseFeeDelta={
+                i < all.length - 1
+                  ? b.baseFeePerGas!.sub(all[i + 1].baseFeePerGas!).toNumber()
+                  : 0
+              }
+            />
           </Transition>
         ))}
       </div>