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

Add chart toggle button

This commit is contained in:
Willian Mitsuda 2021-08-04 16:05:22 -03:00
parent f9e3f71115
commit d6fed2fa4b
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/special/london/Blocks.tsx
View File

@ -39,7 +39,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const [blocks, setBlocks] = useState<ExtendedBlock[]>([]); const [blocks, setBlocks] = useState<ExtendedBlock[]>([]);
const [now, setNow] = useState<number>(Date.now()); const [now, setNow] = useState<number>(Date.now());
const [toggleChart, setToggleChart] = useState<boolean>(false); const [toggleChart, setToggleChart] = useState<boolean>(true);
const addBlock = useCallback( const addBlock = useCallback(
async (blockNumber: number) => { async (blockNumber: number) => {
@ -106,6 +106,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
return ( return (
<div className="w-full mb-auto"> <div className="w-full mb-auto">
<div className="px-9 pt-3 pb-12 divide-y-2"> <div className="px-9 pt-3 pb-12 divide-y-2">
<div className="relative">
<div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 "> <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
<span> <span>
<FontAwesomeIcon icon={faBurn} /> <FontAwesomeIcon icon={faBurn} />
@ -115,6 +116,12 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
<FontAwesomeIcon icon={faBurn} /> <FontAwesomeIcon icon={faBurn} />
</span> </span>
</div> </div>
<div className="absolute right-0 top-0 border rounded shadow-md px-2 py-1 text-sm text-link-blue hover:bg-gray-50 hover:text-link-blue-hover">
<button onClick={() => setToggleChart(!toggleChart)}>
{toggleChart ? "Gas usage" : "Burnt fees"}
</button>
</div>
</div>
<div> <div>
<Line data={data} height={100} options={chartOptions} /> <Line data={data} height={100} options={chartOptions} />
</div> </div>