From 77bbb43eb55c05a1427f5ad7610ea12dd135e9c1 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Thu, 1 Jan 2026 03:24:19 -0800
Subject: [PATCH] fix(electron): sync network status display with Settings in
 real-time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, the network badge (testnet/mainnet) in Layout sidebar only
loaded once on mount and didn't update when user changed network in
Settings page.

Changes:
- Layout.tsx: Read network from localStorage first (consistent with
  transaction.ts), then fallback to Electron API
- Layout.tsx: Listen for 'storage' event (cross-tab) and custom
  'kava-network-change' event (same-tab) to update display
- Settings.tsx: Dispatch custom event when switching networks so
  Layout can update immediately

Android app doesn't have this issue - it uses StateFlow which
automatically triggers re-renders when settings change.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/Layout.tsx                 | 38 +++++++++++++++++--
 .../service-party-app/src/pages/Settings.tsx  |  4 ++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/backend/mpc-system/services/service-party-app/src/components/Layout.tsx b/backend/mpc-system/services/service-party-app/src/components/Layout.tsx
index c4cd729a..814d41fb 100644
--- a/backend/mpc-system/services/service-party-app/src/components/Layout.tsx
+++ b/backend/mpc-system/services/service-party-app/src/components/Layout.tsx
@@ -26,9 +26,41 @@ export default function Layout({ children }: LayoutProps) {
   useEffect(() => {
     checkAllServices();
     // 获取当前 Kava 网络
-    window.electronAPI?.kava.getNetwork().then(result => {
-      setKavaNetwork(result.network);
-    });
+    const loadNetwork = () => {
+      // 优先从 localStorage 读取（与 transaction.ts 保持一致）
+      const storedNetwork = localStorage.getItem('kava_network') as 'mainnet' | 'testnet' | null;
+      if (storedNetwork) {
+        setKavaNetwork(storedNetwork);
+      } else {
+        // 后备：从 Electron API 读取
+        window.electronAPI?.kava.getNetwork().then(result => {
+          setKavaNetwork(result.network);
+        });
+      }
+    };
+
+    loadNetwork();
+
+    // 监听 localStorage 变化（当其他标签页切换网络时触发）
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === 'kava_network' && e.newValue) {
+        setKavaNetwork(e.newValue as 'mainnet' | 'testnet');
+      }
+    };
+
+    // 监听同一窗口的自定义事件（Settings 页面切换网络时触发）
+    const handleCustomNetworkChange = (e: Event) => {
+      const customEvent = e as CustomEvent<{ network: 'mainnet' | 'testnet' }>;
+      setKavaNetwork(customEvent.detail.network);
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener('kava-network-change', handleCustomNetworkChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('kava-network-change', handleCustomNetworkChange);
+    };
   }, [checkAllServices]);
 
   const handleRefresh = async () => {
diff --git a/backend/mpc-system/services/service-party-app/src/pages/Settings.tsx b/backend/mpc-system/services/service-party-app/src/pages/Settings.tsx
index 9ee97ccc..5b68bd08 100644
--- a/backend/mpc-system/services/service-party-app/src/pages/Settings.tsx
+++ b/backend/mpc-system/services/service-party-app/src/pages/Settings.tsx
@@ -187,6 +187,8 @@ export default function Settings() {
                       setKavaNetwork('testnet');
                       // 同步到 localStorage 供前端工具函数使用
                       localStorage.setItem('kava_network', 'testnet');
+                      // 触发自定义事件通知 Layout 更新网络状态显示
+                      window.dispatchEvent(new CustomEvent('kava-network-change', { detail: { network: 'testnet' } }));
                       setMessage({ type: 'success', text: '已切换到 Kava 测试网' });
                     }
                   }}
@@ -201,6 +203,8 @@ export default function Settings() {
                       setKavaNetwork('mainnet');
                       // 同步到 localStorage 供前端工具函数使用
                       localStorage.setItem('kava_network', 'mainnet');
+                      // 触发自定义事件通知 Layout 更新网络状态显示
+                      window.dispatchEvent(new CustomEvent('kava-network-change', { detail: { network: 'mainnet' } }));
                       setMessage({ type: 'success', text: '已切换到 Kava 主网' });
                     }
                   }}