From d6fed2fa4b8338f762577a6a49caea40efa9e7c6 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 4 Aug 2021 16:05:22 -0300
Subject: [PATCH] Add chart toggle button

---
 src/special/london/Blocks.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index ec65d85..7d580d9 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -39,7 +39,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   const { provider } = useContext(RuntimeContext);
   const [blocks, setBlocks] = useState<ExtendedBlock[]>([]);
   const [now, setNow] = useState<number>(Date.now());
-  const [toggleChart, setToggleChart] = useState<boolean>(false);
+  const [toggleChart, setToggleChart] = useState<boolean>(true);
 
   const addBlock = useCallback(
     async (blockNumber: number) => {
@@ -106,14 +106,21 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
   return (
     <div className="w-full mb-auto">
       <div className="px-9 pt-3 pb-12 divide-y-2">
-        <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
-          <span>
-            <FontAwesomeIcon icon={faBurn} />
-          </span>
-          <span>EIP-1559 is activated. Watch the fees burn.</span>
-          <span>
-            <FontAwesomeIcon icon={faBurn} />
-          </span>
+        <div className="relative">
+          <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
+            <span>
+              <FontAwesomeIcon icon={faBurn} />
+            </span>
+            <span>EIP-1559 is activated. Watch the fees burn.</span>
+            <span>
+              <FontAwesomeIcon icon={faBurn} />
+            </span>
+          </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>
           <Line data={data} height={100} options={chartOptions} />