Add easy-peasy as sate management

config/config.ts_TEMPLATE

@@ -1,4 +1,7 @@
 interface Config {
+  // Whether to load real data or fake
+  mode: "real" | "fake";
+
   // Configuration related to the API server
   server: {
     // The server host or listening IP
@@ -49,6 +52,8 @@ interface Config {
 }
 
 const config: Config = {
+  mode: "real",
+
   server: {
     host: "127.0.0.1",
     port: 8080,

frontend/app.tsx

@@ -1,4 +1,19 @@
-import React, { ComponentType } from "https://esm.sh/react@17.0.2";
+import React, { ComponentType, useEffect } from "https://esm.sh/react@17.0.2";
+import { StoreProvider } from "https://esm.sh/easy-peasy";
+
+import store, { useStoreActions } from "./state/index.ts";
+
+function StoreStarter({ Page, pageProps }: { Page: ComponentType<any>; pageProps: any }) {
+  const getBlocks = useStoreActions((store) => store.getBlocks);
+
+  useEffect(() => {
+    (async () => {
+      await getBlocks();
+    })();
+  });
+
+  return <Page {...pageProps} />;
+}
 
 export default function App({ Page, pageProps }: { Page: ComponentType<any>; pageProps: any }) {
   return (
@@ -24,7 +39,9 @@ export default function App({ Page, pageProps }: { Page: ComponentType<any>; pag
           ></path>
         </svg>
       </a>
-      <Page {...pageProps} />
+      <StoreProvider store={store}>
+        <StoreStarter Page={Page} pageProps={pageProps} />
+      </StoreProvider>
     </main>
   );
 }

frontend/components/SiteTitle.tsx

@@ -0,0 +1,16 @@
+import React from "https://esm.sh/react@17.0.2";
+import styled from "https://esm.sh/styled-components";
+
+import config from "../back/config/config.ts";
+
+const Title = styled.h1`
+  margin-top: 40px;
+  font-size: 42px;
+  text-align: center;
+  color: #d97b08;
+  text-shadow: #000 3px 3px 0px;
+`;
+
+const TitleComponent = () => <Title>{config.fork.name} activation</Title>;
+
+export default TitleComponent;

frontend/pages/index.tsx

@@ -8,14 +8,8 @@ import { Container } from "../components/Container.ts";
 import { Content } from "../components/Content.ts";
 import { BlockContainer, Block } from "../components/Block.tsx";
 import { Donation } from "../components/Donation.tsx";
-
+import SiteTitle from "../components/SiteTitle.tsx";
-const Title = styled.h1`
+import { useStoreState } from "../state/index.ts";
-  margin-top: 40px;
-  font-size: 42px;
-  text-align: center;
-  color: #d97b08;
-  text-shadow: #000 3px 3px 0px;
-`;
 
 const DescriptionBlock = styled.div`
   max-width: 600px;
@@ -55,20 +49,7 @@ const BootstrappingInProgress = styled.p`
 `;
 
 export default function Blocks() {
-  const [blocks, setBlocks] = useState<IBlock[] | undefined>(undefined);
+  const blocks = useStoreState((store) => store.blocks);
-
-  useEffect(() => {
-    (async () => {
-      const result = await fetch("/blocks");
-      const json = (await result.json()) as IBlock[];
-      console.log(json);
-      setBlocks(json);
-    })();
-  }, []);
-
-  if (blocks === undefined) {
-    return <></>;
-  }
 
   const forkName = config.fork.name;
 
@@ -88,7 +69,7 @@ export default function Blocks() {
         <title>{forkName} activation</title>
       </head>
       <Content>
-        <Title>{forkName} activation</Title>
+        <SiteTitle />
         <DescriptionBlock>
           {config.fork.info.map((text, index) => (
             <Text key={index}>{text}</Text>

frontend/state/index.ts

@@ -0,0 +1,54 @@
+import { action, Action, createStore, createTypedHooks, thunk, Thunk } from "https://esm.sh/easy-peasy";
+
+import { IBlock } from "../back/blocks/index.ts";
+import config from "../back/config/config.ts";
+
+export interface IStoreModel {
+  getBlocks: Thunk<IStoreModel>;
+  setBlocks: Action<IStoreModel, IBlock[]>;
+  blocks: IBlock[];
+}
+
+export const model: IStoreModel = {
+  getBlocks: thunk(async (actions) => {
+    if (config.mode === "real") {
+      const result = await fetch("/blocks");
+      const json = (await result.json()) as IBlock[];
+      console.log(json);
+      actions.setBlocks(json);
+    } else {
+      const start = 0;
+      const end = 1800;
+      const blocks: IBlock[] = [];
+      for (let i = start; i < 2016; i++) {
+        if (i < end) {
+          blocks.push({
+            height: i,
+            signals: Math.floor(Math.random() * 100 + 1) > 35,
+            coinbase: undefined,
+            miner: undefined,
+          });
+        } else {
+          blocks.push({
+            height: i,
+            signals: undefined,
+            coinbase: undefined,
+            miner: undefined,
+          });
+        }
+      }
+      actions.setBlocks(blocks);
+    }
+  }),
+
+  setBlocks: action((state, payload) => {
+    state.blocks = payload;
+  }),
+
+  blocks: [],
+};
+
+const { useStoreActions, useStoreState } = createTypedHooks<IStoreModel>();
+export { useStoreActions, useStoreState };
+
+export default createStore(model);