refactor frontend to use websocket

Author: RetricSu

frontend/src/components/elevator/car.tsx

@@ -1,6 +1,6 @@
 import Matter from "matter-js";
 import { useEffect, useRef, useState } from "preact/hooks";
-import { BlockHeader, Transaction } from "../../service/api";
+import { BlockHeader, Transaction } from "../../service/type";
 import {
     boxSizeToMatterSize,
     carBoxCenterPosX,

frontend/src/components/elevator/index.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useState } from "preact/hooks";
-import { ChainService, TipBlockResponse } from "../../service/api";
+import { ChainService } from "../../service/api";
 import ElevatorCar from "./car";
 import ElevatorUpButton from "./up-btn";
 import ElevatorPanel from "./panel";
 import ElevatorHeader from "./header";
 import { useAtomValue } from "jotai";
 import { ChainTheme, chainThemeAtom } from "../../states/atoms";
+import { TipBlockResponse } from "../../service/type";
 
 export default function Elevator() {
     const chainTheme = useAtomValue(chainThemeAtom);
     const [tipBlock, setTipBlock] = useState<TipBlockResponse>(undefined);
     const [doorClosing, setDoorClosing] = useState(false);
 
-    // Update effect to fetch all data
-    const fetch = async () => {
+    // subscribe to new block
+    const subNewBlock = async () => {
         ChainService.subscribeNewBlock((newBlock) => {
             if (newBlock.blockHeader) {
                 setTipBlock((prev) => {
@@ -31,7 +32,9 @@ export default function Elevator() {
         });
     };
     useEffect(() => {
-        fetch();
+        ChainService.wsClient.connect(() => {
+            subNewBlock();
+        });
     }, []);
 
     const bgElevatorFrame =

frontend/src/components/pool/index.tsx

@@ -1,9 +1,8 @@
-import Matter from "matter-js";
 import { FunctionalComponent } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { ChainService, Transaction } from "../../service/api";
-import PoolScene from "./scene";
-import QueueComponent from "./motion";
+import { useEffect, useState } from "preact/hooks";
+import { ChainService } from "../../service/api";
+import QueueComponent from "./queue";
+import { Transaction } from "../../service/type";
 
 type TxStatus = "pending" | "proposing" | "proposed" | "committed" | "none";
 
@@ -14,8 +13,6 @@ interface TxChange {
 }
 
 const Pool: FunctionalComponent = () => {
-    const [blockHeader, setBlockHeader] = useState(undefined);
-
     const [initProposedTxs, setInitProposedTxs] = useState<
         Transaction[] | null
     >(null);
@@ -43,64 +40,62 @@ const Pool: FunctionalComponent = () => {
 
     const [stateChanges, setStateChanges] = useState<TxChange[]>([]); // 存储状态变化信息
 
-    const fetchData = async () => {
-        const [tipBlockTxs, pendingTxs, proposingTxs, proposedTransactions] =
-            await Promise.all([
-                ChainService.getTipBlockTransactions(),
-                ChainService.getPendingTransactions(),
-                ChainService.getProposingTransactions(),
-                ChainService.getProposedTransactions(),
-            ]);
-
-        if (initCommittedTxs == null) {
-            setInitCommittedTxs(tipBlockTxs.committedTransactions);
-        }
-        if (initProposedTxs == null) {
-            setInitProposedTxs(proposedTransactions);
-        }
-        if (initPendingTxs == null) {
-            setInitPendingTxs(pendingTxs);
-        }
-        if (initProposingTxs == null) {
-            setInitProposingTxs(proposingTxs);
-        }
-
-        // 拿到所有tx
-        const newTxs = {
-            pending: pendingTxs,
-            proposing: proposingTxs,
-            proposed: proposedTransactions,
-            committed: tipBlockTxs.committedTransactions,
-        };
+    const subNewSnapshot = async () => {
+        ChainService.subscribeNewSnapshot((newSnapshot) => {
+            const {
+                tipCommittedTransactions,
+                pendingTransactions,
+                proposingTransactions,
+                proposedTransactions,
+            } = newSnapshot;
+
+            if (initCommittedTxs == null) {
+                setInitCommittedTxs(tipCommittedTransactions);
+            }
+            if (initProposedTxs == null) {
+                setInitProposedTxs(proposedTransactions);
+            }
+            if (initPendingTxs == null) {
+                setInitPendingTxs(pendingTransactions);
+            }
+            if (initProposingTxs == null) {
+                setInitProposingTxs(proposingTransactions);
+            }
 
-        // diff 数据
-        if (previousTxs) {
-            const changes = detectStateChanges(previousTxs, newTxs);
-            setStateChanges(changes);
-        }
-
-        // 更新历史记录
-        // 使用函数式更新
-        setPreviousTxs((prev) => {
-            if (prev) {
-                const changes = detectStateChanges(prev, newTxs);
+            // 拿到所有tx
+            const newTxs = {
+                pending: pendingTransactions,
+                proposing: proposingTransactions,
+                proposed: proposedTransactions,
+                committed: tipCommittedTransactions,
+            };
+
+            // diff 数据
+            if (previousTxs) {
+                const changes = detectStateChanges(previousTxs, newTxs);
                 setStateChanges(changes);
             }
-            return newTxs;
-        });
-
-        setPendingTxs(pendingTxs);
 
-        setProposingTxs(proposingTxs);
-        setProposedTxs(proposedTransactions);
-
-        setCommittedTxs(tipBlockTxs.committedTransactions);
-        setBlockHeader(tipBlockTxs.blockHeader);
+            // 更新历史记录
+            // 使用函数式更新
+            setPreviousTxs((prev) => {
+                if (prev) {
+                    const changes = detectStateChanges(prev, newTxs);
+                    setStateChanges(changes);
+                }
+                return newTxs;
+            });
+
+            setPendingTxs(pendingTransactions);
+            setProposingTxs(proposingTransactions);
+            setProposedTxs(proposedTransactions);
+            setCommittedTxs(tipCommittedTransactions);
+        });
     };
 
     useEffect(() => {
-        const task = setInterval(fetchData, 1000);
-        return () => clearInterval(task);
+        ChainService.wsClient.connect();
+        subNewSnapshot();
     }, []);
 
     // 状态变化检测