misc

src/components/Footer.tsx

@@ -7,13 +7,8 @@ export function Footer() {
   const consoleLines = useStore((s) => s.consoleLines);
 
   return (
-    <footer
-      tabIndex={0}
-      className="collapse collapse-arrow bg-base-200 text-base-content/30 border-t border-base-300 rounded-none"
-    >
-      <input type="checkbox" />
-      <div className="collapse-title flex w-full items-center">
-        <IconCommandLine />
+    <div>
+      <div className="bg-base-200 text-base-content/30 border-t border-base-300 rounded-none flex w-full items-center py-2">
         <div className="mx-auto flex gap-x-4 text-sm">
           <span>ZKNetwork Client</span>
           <span>|</span>
@@ -22,13 +17,19 @@ export function Footer() {
           <span>Platform: {platformArch}</span>
         </div>
       </div>
-      <div className="collapse-content border-t border-base-300 px-4">
-        <div className="flex h-36 flex-col-reverse overflow-y-scroll text-xs sm:text-xs md:text-sm lg:text-base text-base-content/50">
-          {consoleLines.map((v, i) => (
-            <span key={i}>{v}</span>
-          ))}
+      <div className="collapse collapse-arrow bg-base-200 text-base-content/30 border-t border-base-300 rounded-none">
+        <input type="checkbox" />
+        <div className="collapse-title flex w-full items-center">
+          <IconCommandLine />
+        </div>
+        <div className="collapse-content border-t border-base-300 px-4">
+          <div className="flex h-36 flex-col-reverse overflow-y-scroll text-xs sm:text-xs md:text-sm lg:text-base text-base-content/50">
+            {consoleLines.map((v, i) => (
+              <span key={i}>{v}</span>
+            ))}
+          </div>
         </div>
       </div>
-    </footer>
+    </div>
   );
 }

src/pages/Networks.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import * as log from "@tauri-apps/plugin-log";
 import * as path from "@tauri-apps/api/path";
 import { exists, mkdir } from "@tauri-apps/plugin-fs";
@@ -14,7 +14,6 @@ import {
 } from "../utils";
 
 export function Networks() {
-  const isStoppingRef = useRef(false);
   const [dlProgress, setDlProgress] = useState(0);
   const [networkId, setNetworkId] = useState("");
 
@@ -31,6 +30,7 @@ export function Networks() {
   const consoleAddLine = useStore((s) => s.consoleAddLine);
   const setClientPid = useStore((s) => s.setClientPid);
   const setIsConnected = useStore((s) => s.setIsConnected);
+  const setIsStopping = useStore((s) => s.setIsStopping);
   const setMessage = useStore((s) => s.setMessage);
   const setNetworkConnected = useStore((s) => s.setNetworkConnected);
   const setNetworks = useStore((s) => s.setNetworks);
@@ -53,7 +53,7 @@ export function Networks() {
 
   async function disconnect() {
     try {
-      isStoppingRef.current = true;
+      setIsStopping(true);
       await clientStop();
       setMessage("info", "Disconnected from Network");
     } catch (error: any) {
@@ -163,14 +163,15 @@ export function Networks() {
 
     command.on("close", (data) => {
       log.debug(`closed: ${cmd} code=${data.code} signal=${data.signal}`);
-      if (!isStoppingRef.current) {
+      const isStopping = useStore.getState().isStopping;
+      if (isStopping !== true) {
         setMessage("error", "Error: Network connection failed.");
         consoleAddLine(`Network connection failed: ${networkId}`);
       }
-      isStoppingRef.current = false;
       consoleAddLine(`Disconnected from network: ${networkId}`);
       setClientPid(0);
       setIsConnected(false);
+      setIsStopping(false);
       setNetworkConnected("");
     });
 

src/store/index.ts

@@ -12,6 +12,7 @@ export const useStore = create(
       consoleLines: [] as string[],
       consoleLinesLimit: 100,
       isConnected: false,
+      isStopping: false,
       isPlatformSupported: false,
       message: "",
       messageType: "",
@@ -30,6 +31,7 @@ export const useStore = create(
       setAppVersion: (appVersion: string) => set({ appVersion }),
       setClientPid: (clientPid: number) => set({ clientPid }),
       setIsConnected: (isConnected: boolean) => set({ isConnected }),
+      setIsStopping: (isStopping: boolean) => set({ isStopping }),
       setIsPlatformSupported: (isPlatformSupported: boolean) =>
         set({ isPlatformSupported }),
       setMessage: (