use simple method for pool

frontend/src/app.tsx

@@ -1,6 +1,5 @@
 import { Route, Switch } from "wouter";
 import { Home } from "./pages/home";
-import { MemPool } from "./pages/mempool";
 import { ChainProvider } from "./context/chain";
 import { useAtomValue } from "jotai";
 import { ChainTheme, chainThemeAtom } from "./states/atoms";
@@ -20,9 +19,6 @@ const App = () => {
                 <Switch>
                     <Route path="/" component={Home} />
                 </Switch>
-                <Switch>
-                    <Route path="/mempool" component={MemPool} />
-                </Switch>
             </main>
         </ChainProvider>
     );

frontend/src/components/pool/committed-line.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef } from "preact/hooks";
+import Matter from "matter-js";
+import {
+    Transaction,
+    TransactionType,
+    TransactionTypeEnum,
+} from "../../service/type";
+import { FunctionalComponent } from "preact";
+import { transactionSquareSize } from "../elevator/util";
+
+export interface CommittedLineProps {
+    title: string;
+    txs: Transaction[];
+}
+
+export const CommittedLine: FunctionalComponent<CommittedLineProps> = ({
+    title,
+    txs,
+}) => {
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const engineRef = useRef(null);
+
+    function createTxBox(tx: Transaction) {
+        const size = transactionSquareSize(tx.size);
+        const color =
+            tx.type != null
+                ? TransactionType.toBgColor(+tx.type as TransactionTypeEnum)
+                : "black";
+        const box = Matter.Bodies.rectangle(400, 80, size, size, {
+            render: {
+                fillStyle: color,
+                strokeStyle: "black",
+                lineWidth: 3,
+            },
+        });
+        box.label = tx.tx_hash;
+        return box;
+    }
+
+    function createScene() {
+        const width = 800;
+        const height = 200;
+
+        let Engine = Matter.Engine;
+        let Render = Matter.Render;
+        let Runner = Matter.Runner;
+
+        let engine = Engine.create({});
+        engineRef.current = engine;
+
+        let render = Render.create({
+            element: containerRef.current,
+            engine: engine,
+            canvas: canvasRef.current,
+            options: {
+                background: "transparent",
+                width: width,
+                height: height,
+                wireframes: false,
+            },
+        });
+
+        // create two boxes and a ground
+        const txBoxes = txs.map((tx, i) => createTxBox(tx));
+
+        Matter.Composite.add(engine.world, [...txBoxes]);
+
+        // run the renderer
+        Render.run(render);
+
+        // create runner
+        var runner = Runner.create();
+
+        // run the engine
+        Runner.run(runner, engine);
+    }
+
+    useEffect(() => {
+        createScene();
+    }, [txs[0]?.proposed_at_block_number]);
+
+    return (
+        <div>
+            <div
+                className={`relative flex justify-center items-center overflow-hidden min-h-[450px]`}
+            >
+                <div ref={containerRef}>
+                    <div
+                        className={`absolute top-20 left-0 w-full h-full z-0 pointer-events-none`}
+                    >
+                        <img src="/assets/svg/pool-ground.svg" alt="" />
+                    </div>
+                    <canvas className={`z-2 relative`} ref={canvasRef} />
+                </div>
+            </div>
+        </div>
+    );
+};

frontend/src/components/pool/committing-line.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useRef } from "preact/hooks";
 import Matter from "matter-js";
-import { Transaction } from "../../service/type";
+import {
+    Transaction,
+    TransactionType,
+    TransactionTypeEnum,
+} from "../../service/type";
 import { FunctionalComponent } from "preact";
+import { transactionSquareSize } from "../elevator/util";
 
 export interface LineProps {
     title: string;
@@ -14,11 +19,25 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
 }) => {
     const containerRef = useRef(null);
     const canvasRef = useRef(null);
-
     const engineRef = useRef(null);
-
-    // 用 ref 保存上一次的 txs 数组
-    const prevTxsRef = useRef<Transaction[]>([]);
+    const prevTxs = useRef<Transaction[]>([]);
+
+    function createTxBox(tx: Transaction) {
+        const size = transactionSquareSize(tx.size);
+        const color =
+            tx.type != null
+                ? TransactionType.toBgColor(+tx.type as TransactionTypeEnum)
+                : "black";
+        const box = Matter.Bodies.rectangle(20, 80, size, size, {
+            render: {
+                fillStyle: color,
+                strokeStyle: "black",
+                lineWidth: 3,
+            },
+        });
+        box.label = tx.tx_hash;
+        return box;
+    }
 
     function createScene() {
         const width = 800;
@@ -43,6 +62,9 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
             },
         });
 
+        // create two boxes and a ground
+        const txBoxes = txs.map((tx, i) => createTxBox(tx));
+
         // 添加示例物体
         const wall1 = Matter.Bodies.rectangle(width, 0, 1, height * 2, {
             isStatic: true,
@@ -65,7 +87,7 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
             },
         });
 
-        Matter.Composite.add(engine.world, [ground, wall1, wall2]);
+        Matter.Composite.add(engine.world, [...txBoxes, ground, wall1, wall2]);
 
         // run the renderer
         Render.run(render);
@@ -79,8 +101,33 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
 
     useEffect(() => {
         createScene();
+
+        // 初始化时设置初始值
+        prevTxs.current = txs;
     }, []);
 
+    // 新增 useEffect 用于跟踪 txs 变化
+    useEffect(() => {
+        if (!engineRef.current) return;
+
+        // 通过哈希比较找出差异
+        const currentHashes = new Set(txs.map((tx) => tx.tx_hash));
+        const prevHashes = new Set(prevTxs.current.map((tx) => tx.tx_hash));
+
+        // 找出新增交易
+        const added = txs.filter((tx) => !prevHashes.has(tx.tx_hash));
+        // 找出移除交易
+        const removed = prevTxs.current.filter(
+            (tx) => !currentHashes.has(tx.tx_hash),
+        );
+
+        // 调用更新方法
+        update(added, removed);
+
+        // 更新前一次记录
+        prevTxs.current = txs;
+    }, [txs]); // 依赖 txs 的变化
+
     const update = (addTxs: Transaction[], delTxs: Transaction[]) => {
         delTxs.forEach((tx) => {
             const body = Matter.Composite.allBodies(
@@ -89,48 +136,10 @@ export const CommittingLine: FunctionalComponent<LineProps> = ({
             if (body) Matter.Composite.remove(engineRef.current.world, body);
         });
 
-        const boxes = addTxs.map((tx, i) => {
-            const box = Matter.Bodies.rectangle(20, 20, 40, 40, {
-                label: tx.tx_hash,
-                render: { fillStyle: "gray" },
-            });
-            return box;
-        });
+        const boxes = addTxs.map((tx, i) => createTxBox(tx));
         Matter.Composite.add(engineRef.current.world, boxes);
     };
 
-    useEffect(() => {
-        // 获取新旧交易数组
-        const prevTxs = prevTxsRef.current;
-        const currentTxs = txs;
-
-        // 创建哈希集合用于快速查找
-        const prevHashes = new Set(prevTxs.map((tx) => tx.tx_hash));
-        const currentHashes = new Set(currentTxs.map((tx) => tx.tx_hash));
-
-        // 计算差异
-        const addedTxs = currentTxs.filter((tx) => !prevHashes.has(tx.tx_hash));
-        const removedTxs = prevTxs.filter(
-            (tx) => !currentHashes.has(tx.tx_hash),
-        );
-
-        // 处理新增交易（示例：打印到控制台）
-        if (addedTxs.length) {
-            console.log("🚀 新增交易:", addedTxs);
-            // 这里可以触发动画、更新状态等操作
-        }
-
-        // 处理移除交易（示例：打印到控制台）
-        if (removedTxs.length) {
-            console.log("🗑️ 移除交易:", removedTxs);
-            // 这里可以触发动画、更新状态等操作
-        }
-        update(addedTxs, removedTxs);
-
-        // 更新历史记录（注意：深拷贝仅在必要时使用）
-        prevTxsRef.current = currentTxs;
-    }, [txs]); // 依赖项确保 txs 变化时触发
-
     return (
         <div>
             <div