add unsubscribe and fix switching network

frontend/src/components/elevator/index.tsx

@@ -21,11 +21,13 @@ export default function Elevator({ setIsNewBlock }: ElevatorProp) {
     };
 
     // subscribe to new block
-    // todo: need unscribe when component unmount
     const subNewBlock = async () => {
         // 等待连接就绪
         await waitForConnection();
 
+        // unsubscribe first
+        chainService.unSubscribe("newBlock");
+
         chainService.subscribeNewBlock((newBlock) => {
             if (newBlock.blockHeader) {
                 setTipBlock((prev) => {
@@ -43,6 +45,8 @@ export default function Elevator({ setIsNewBlock }: ElevatorProp) {
         });
     };
     useEffect(() => {
+        setTipBlock(undefined);
+
         subNewBlock();
     }, [chainTheme, isConnected]);
 

frontend/src/components/elevator/miner.tsx

@@ -36,7 +36,9 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
             : "/assets/svg/elevator/testnet/miner-wheel.svg";
     const minerApe =
         chainTheme === ChainTheme.mainnet
-            ? "/assets/svg/elevator/mainnet/miner-ape.svg"
+            ? doorClosing
+                ? "/assets/svg/elevator/mainnet/miner-ape.svg"
+                : "/assets/svg/elevator/ape-running.gif"
             : "/assets/svg/elevator/testnet/miner-ape.svg";
 
     return (
@@ -86,7 +88,13 @@ const ElevatorMiner: FunctionComponent<ElevatorUpButtonProps> = ({
 
                     <div className="relative">
                         <div className="absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-text-inverse">
-                            <div>Difficulty {difficultyInEH} EH</div>
+                            <div
+                                className={
+                                    "truncate overflow-hidden whitespace-nowrap"
+                                }
+                            >
+                                Difficulty {difficultyInEH} EH
+                            </div>
                         </div>
                         <img src={minerBaseSvg} alt="Miner Base" />
                     </div>

frontend/src/components/elevator/out-of-service.tsx

@@ -44,7 +44,11 @@ export const ElevatorOutOfServiceUI: FunctionalComponent<
             }
         >
             <div className={"w-1/5 self-end"}>
-                <ElevatorMiner doorClosing={false} />
+                <ElevatorMiner
+                    nonce={"0x0"}
+                    difficultyInEH={0}
+                    doorClosing={false}
+                />
             </div>
 
             <div>

frontend/src/components/pool/index.tsx

@@ -22,6 +22,10 @@ const Pool: FunctionalComponent = () => {
 
     const subNewSnapshot = async () => {
         await waitForConnection();
+
+        // unsubscribe first
+        chainService.unSubscribe("newSnapshot");
+
         chainService.subscribeNewSnapshot((newSnapshot) => {
             const {
                 tipCommittedTransactions,
@@ -59,6 +63,13 @@ const Pool: FunctionalComponent = () => {
     };
 
     useEffect(() => {
+        setTotalTxSizes[0];
+        setTotalTxs[0];
+        setProposedTxs([]);
+        setCommittedTxs([]);
+        setPendingTxs([]);
+        setProposingTxs([]);
+
         subNewSnapshot();
     }, [chainTheme]);
 

frontend/src/context/chain.tsx

@@ -7,7 +7,6 @@ import {
 } from "preact/compat";
 import { ChainService } from "../service/api";
 import { Network } from "../service/type";
-import { WsApiService } from "../service/ws";
 
 interface ChainContextType {
     network: Network;
@@ -35,6 +34,8 @@ export function ChainProvider({
         !chainServiceRef.current ||
         chainServiceRef.current.network !== network
     ) {
+        chainServiceRef.current?.wsClient?.dispose();
+
         chainServiceRef.current = new ChainService(network);
 
         // 创建新的连接 Promise
@@ -43,15 +44,18 @@ export function ChainProvider({
         });
 
         // 监听 WebSocket 连接状态
-        const wsClient = chainServiceRef.current.wsClient as WsApiService;
-        wsClient.connect();
+        chainServiceRef.current.wsClient.connect();
 
-        wsClient.on("open", () => {
+        chainServiceRef.current.wsClient.on("open", () => {
             setIsConnected(true);
             resolveRef.current?.();
         });
-        wsClient.on("close", () => setIsConnected(false));
-        wsClient.on("error", () => setIsConnected(false));
+        chainServiceRef.current.wsClient.on("close", () =>
+            setIsConnected(false),
+        );
+        chainServiceRef.current.wsClient.on("error", () =>
+            setIsConnected(false),
+        );
     }
 
     // 组件卸载时清理
@@ -60,11 +64,11 @@ export function ChainProvider({
             // 如果有需要关闭的连接，在这里添加清理逻辑
             chainServiceRef.current?.wsClient?.dispose(); // 假设 WsApiService 有 close 方法
         };
-    }, [network]);
+    }, []);
 
     // 等待连接的公共方法
     const waitForConnection = async () => {
-        if (isConnected) return;
+        if (isConnected && chainServiceRef.current.wsClient.isConnected) return;
         await connectionPromiseRef.current;
     };
 

frontend/src/service/api.ts

@@ -139,4 +139,9 @@ export class ChainService {
         });
         this.wsClient.send("newBlock", {});
     }
+
+    async unSubscribe(type: "newSnapshot" | "newBlock") {
+        // maybe use more subtle way to unsubscribe
+        this.wsClient.clearDataListener(type);
+    }
 }

frontend/src/service/ws.ts

@@ -25,7 +25,7 @@ export interface WebSocketServiceOptions {
 const API_WS_URL = Config.testnetApiWsUrl;
 
 export class WsApiService {
-    private socket: WebSocket | null = null;
+    socket: WebSocket | null = null;
     private url: string;
     private reconnectInterval: number;
     private reconnectAttempts: number;
@@ -201,17 +201,27 @@ export class WsApiService {
     }
 
     dispose() {
-        if (this.socket) {
-            this.socket.close();
-            this.socket = null;
-        }
         this.messageHandlers.clear();
         this.eventHandlers.error = [];
         this.eventHandlers.close = [];
         this.eventHandlers.open = [];
+
+        this.socket.onopen = null;
+        this.socket.onclose = null;
+        this.socket.onerror = null;
+        this.socket.onmessage = null;
+
+        if (this.socket) {
+            this.socket.close();
+            this.socket = null;
+        }
         this.log("info", "WebSocket service disposed");
     }
 
+    clearDataListener(type: string) {
+        this.messageHandlers.delete(type);
+    }
+
     private log(
         level: "info" | "warn" | "error",
         message: string,

src/api/type.ts

@@ -10,6 +10,7 @@ import type {
 export enum SubMessageType {
     NewSnapshot = "newSnapshot",
     NewBlock = "newBlock",
+    UnSubscribe = "unSubscribe",
 }
 
 export type SubMessageContent = ChainSnapshot | SubBlock | string;