Add block enter/leave animation
This commit is contained in:
parent
aba239bf8c
commit
3b6992bb6d
|
@ -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": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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) => (
|
||||
<BlockRecord key={b.hash} block={b} />
|
||||
<div className="grid grid-cols-8 px-3 py-3 animate-pulse items-center">
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue