Merge pull request #21 from peaqnetwork/feat/1201445946987260_blocks-…

…list

feat: blocks list screen

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@polkadot/api": "^6.7.2",
     "@polkadot/util-crypto": "^7.8.2",
+    "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -13,6 +14,7 @@
     "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^6.1.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"

src/App.js

@@ -1,19 +1,25 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Footer from "./components/footer";
 import TopNav from "./components/topnav";
+import Blocks from "./routes/blocks";
 import Home from "./routes/home";
+import NotFound from "./components/not-found";
+import { Provider } from "react-redux";
+import store from "./store/store";
 
 function App() {
   return (
-    <>
+    <Provider store={store}>
       <TopNav />
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />}></Route>
+          <Route path="/blocks" element={<Blocks />}></Route>
+          <Route path="*" element={<NotFound />}></Route>
         </Routes>
       </BrowserRouter>
       <Footer />
-    </>
+    </Provider>
   );
 }
 

src/components/blocks-latest.jsx

@@ -2,10 +2,23 @@ import { useEffect, useState } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import getApi from "../libs/api";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  setLatestBlocks,
+  setExistingBlock,
+} from "../store/slices/latest-blocks-slice";
+import { setCurrentBlockNumber } from "../store/slices/current-block-number-slice";
+import { Link } from "react-router-dom";
 
 export default function BlocksLatest() {
-  const [latestBlocks, setLatestBlocks] = useState([]);
-  const [currentBlockNumber, setCurrentBlockNumber] = useState(0);
+  // const [latestBlocks, setLatestBlocks] = useState([]);
+  // const [currentBlockNumber, setCurrentBlockNumber] = useState(0);
+
+  const currentBlockNumber = useSelector(
+    (state) => state.currentBlockNumber.value
+  );
+  const latestBlocks = useSelector((state) => state.latestBlocks.value);
+  const dispatch = useDispatch();
 
   dayjs.extend(relativeTime);
 
@@ -14,62 +27,81 @@ export default function BlocksLatest() {
 
     const getBlocks = async () => {
       const api = await getApi();
-      const blockInfo = api.rpc.chain.subscribeNewHeads;
-      blockInfo((header) => {
-        const blockNumber = header.number.toNumber();
-        // console.log(blockNumber);
 
-        if (blockNumber > currentBlockNumber) {
-          const hash = header.hash.toHex();
+      unsubscribeAll = await api.rpc.chain.subscribeNewHeads((header) => {
+        // console.log(`Chain is at block: #${header.number}`);
+        const blockNumber = header.number.toNumber();
+        const hash = header.hash.toHex();
 
-          // Get number of extrinsics
-          api.rpc.chain
-            .getBlock(hash)
-            .then((signedBlock) => {
-              const extrinsicsCount = signedBlock.block.extrinsics.length;
-              // console.log(extrinsicsCount);
+        // Get number of extrinsics
+        api.rpc.chain
+          .getBlock(hash)
+          .then((signedBlock) => {
+            const extrinsicsCount = signedBlock.block.extrinsics.length;
+            // console.log(extrinsicsCount);
 
-              // Get number of events
-              api.query.system.events
-                .at(hash)
-                .then((allRecords) => {
-                  signedBlock.block.extrinsics.forEach((method, index) => {
-                    // filter the specific events based on the phase and then the
-                    // index of our extrinsic in the block
-                    const events = allRecords.filter(
-                      ({ phase }) =>
-                        phase.isApplyExtrinsic &&
-                        phase.asApplyExtrinsic.eq(index)
-                    );
-                    const eventsCount = events.length;
+            // Get number of events
+            api.query.system.events
+              .at(hash)
+              .then((allRecords) => {
+                signedBlock.block.extrinsics.forEach((method, index) => {
+                  // filter the specific events based on the phase and then the
+                  // index of our extrinsic in the block
+                  const events = allRecords.filter(
+                    ({ phase }) =>
+                      phase.isApplyExtrinsic && phase.asApplyExtrinsic.eq(index)
+                  );
+                  const eventsCount = events.length;
 
-                    // Set new block data
-                    let newBlocks = latestBlocks.slice(0, 100); // Only keep the last 100 blocks. @TODO Set max number of records in config
+                  // if blocknumber is less than current block number:
+                  // // replace that block with current data.
+                  // // else add new block
 
-                    newBlocks.unshift({
+                  if (blockNumber > currentBlockNumber) {
+                    dispatch(
+                      setLatestBlocks({
+                        blockNumber,
+                        extrinsicsCount,
+                        eventsCount,
+                        time: new Date().toString(),
+                        hash,
+                      })
+                    );
+                    dispatch(setCurrentBlockNumber(blockNumber));
+                  } else {
+                    dispatch(
+                      setExistingBlock({
+                        blockNumber,
+                        extrinsicsCount,
+                        eventsCount,
+                        time: new Date().toString(),
+                        hash,
+                      })
+                    );
+                    console.log(
+                      "previous/repeated block",
                       blockNumber,
+                      "extrinsics",
                       extrinsicsCount,
+                      "events",
                       eventsCount,
-                      time: new Date().toString(),
-                    });
-                    setCurrentBlockNumber(blockNumber);
-                    setLatestBlocks(newBlocks);
-                  });
-                })
-                .catch(console.error);
-            })
-            .catch(console.error);
-        }
-      })
-        .then((unsub) => {
-          unsubscribeAll = unsub;
-        })
-        .catch(console.error);
+                      "extr",
+                      signedBlock.block.extrinsics,
+                      "evnt",
+                      events
+                    );
+                  }
+                });
+              })
+              .catch(console.error);
+          })
+          .catch(console.error);
+      });
     };
     getBlocks();
 
     return () => unsubscribeAll && unsubscribeAll();
-  }, [latestBlocks]);
+  }, []);
 
   return (
     <div className="latest-blocks">
@@ -92,9 +124,9 @@ export default function BlocksLatest() {
 
           <h3 className="ml-3">Latest blocks</h3>
         </div>
-        <a href="/blocks" className="button small">
+        <Link to="/blocks" className="button small">
           All
-        </a>
+        </Link>
       </div>
       <div>
         <table className="table">

src/components/not-found.jsx

@@ -0,0 +1,19 @@
+import { useNavigate } from "react-router-dom";
+
+export default function NotFound() {
+  const navigate = useNavigate();
+
+  const goBack = (e) => {
+    e.preventDefault();
+    navigate(-1);
+  };
+  return (
+    <div className="page">
+      <h1 className="text-dark-white">404. Not Found!</h1>
+      <p className="text-dark-white">Trying to get somewhere?</p>
+      <button className="button not-found-button" onClick={goBack}>
+        Back to safety
+      </button>
+    </div>
+  );
+}