Add block enter/leave animation

package-lock.json

@@ -19,6 +19,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/react-fontawesome": "^0.1.14",
+        "@headlessui/react": "^1.4.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
@@ -2106,6 +2107,18 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
+      "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "license": "ISC",
@@ -20444,6 +20457,12 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@headlessui/react": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
+      "integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==",
+      "requires": {}
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "requires": {

package.json

@@ -15,6 +15,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@headlessui/react": "^1.4.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/special/Blocks.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext } from "react";
 import { ethers } from "ethers";
+import { Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBurn, faGasPump } from "@fortawesome/free-solid-svg-icons";
 import BlockRecord from "./BlockRecord";
 import { ExtendedBlock, readBlock } from "../useErigonHooks";
 import { RuntimeContext } from "../useRuntime";
 
-const MAX_BLOCK_HISTORY = 10;
+const MAX_BLOCK_HISTORY = 20;
 
 type BlocksProps = {
   latestBlock: ethers.providers.Block;
@@ -27,7 +28,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
         if (_blocks.length > 0 && latestBlock.number === _blocks[0].number) {
           return _blocks;
         }
-        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY);
+        return [extBlock, ..._blocks].slice(0, MAX_BLOCK_HISTORY + 1);
       });
     };
     _readBlock();
@@ -54,8 +55,40 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock }) => {
           <div className="text-right">Gas target</div>
           <div className="text-right col-span-2">Rewards</div>
         </div>
-        {blocks.map((b) => (
+        <div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
-          <BlockRecord key={b.hash} block={b} />
+          <div>
+            <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
+          </div>
+          <div className="justify-self-end">
+            <div className="w-10 h-4 bg-gray-200 rounded-md"></div>
+          </div>
+          <div className="justify-self-end">
+            <div className="w-20 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 className="justify-self-end">
+            <div className="w-20 h-4 bg-gray-200 rounded-md"></div>
+          </div>
+          <div className="justify-self-end col-span-2">
+            <div className="w-56 h-4 bg-gray-200 rounded-md"></div>
+          </div>
+        </div>
+        {blocks.map((b, i) => (
+          <Transition
+            key={b.hash}
+            show={i < MAX_BLOCK_HISTORY}
+            appear
+            enter="transition transform ease-out duration-500"
+            enterFrom="opacity-0 -translate-y-10"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition transform ease-out duration-1000"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-10"
+          >
+            <BlockRecord block={b} />
+          </Transition>
         ))}
       </div>
     </div>