a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add block enter/leave animation

This commit is contained in:
Willian Mitsuda 2021-07-29 15:53:52 -03:00
parent aba239bf8c
commit 3b6992bb6d
3 changed files with 57 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package-lock.json generated
View File

@ -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": {

1
package.json
View File

@ -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",

41
src/special/Blocks.tsx
View File

@ -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>