From 56fb9acfea17eb2383b68d91b5d783f13b32c287 Mon Sep 17 00:00:00 2001
From: mansur-codes <muhammadmansur5002@gmail.com>
Date: Wed, 26 Aug 2026 15:27:12 +0100
Subject: [PATCH 1/3] feat(dashboard): add practice vs on-chain mode chip
 (#410)

---
 src/pages/Dashboard.tsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index ecb19b6..6572076 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -23,6 +23,7 @@ import { useRoundStore } from "../store/useRoundStore";
 import type { Round, UserPrediction, UserStats } from "../lib/api-client";
 import { educationApi, statsApi, predictionsApi } from "../lib/api-client";
 import { useWalletStore, selectIsWalletConnected } from "../store/useWalletStore";
+import StatusChip from "../components/hud/StatusChip";
 import { TipCard } from "../components/education/TipCard";
 import type { Tip } from "../types/education";
 import EmptyState from '../components/EmptyState';
@@ -192,6 +193,27 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
   const [inspector, setInspector] = useState<SorobanInspectorSnapshot | null>(null);
   const [isInspectorLoading, setIsInspectorLoading] = useState(false);
   const [roundSoundEnabled, setRoundSoundEnabled] = useState(() => localStorage.getItem("xelma_round_sound") === "1");
+  const [practiceMode, setPracticeMode] = useState(() => localStorage.getItem("xelma_practice_mode") !== "false");
+
+  const prevWalletConnectedRef = useRef(isWalletConnected);
+  useEffect(() => {
+    if (!isWalletConnected) {
+      if (prevWalletConnectedRef.current) {
+        setPracticeMode(true);
+        localStorage.setItem("xelma_practice_mode", "true");
+      }
+    }
+    prevWalletConnectedRef.current = isWalletConnected;
+  }, [isWalletConnected]);
+
+  const effectivePracticeMode = !isWalletConnected || practiceMode;
+
+  const handlePracticeModeToggle = () => {
+    if (!isWalletConnected) return;
+    const nextMode = !practiceMode;
+    setPracticeMode(nextMode);
+    localStorage.setItem("xelma_practice_mode", String(nextMode));
+  };
 
   // Asset tab state from URL query param
   const [searchParams] = useSearchParams();
@@ -383,6 +405,18 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
 
         {!isLoading && (
           <div className="mb-4 flex flex-wrap items-center justify-end gap-3">
+            <button
+              type="button"
+              data-testid="mode-chip"
+              onClick={handlePracticeModeToggle}
+              title={!isWalletConnected ? "Connect wallet to enable on-chain mode" : undefined}
+              className="inline-flex min-h-[40px] items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold transition-colors hover:border-white/20"
+            >
+              <StatusChip
+                label={effectivePracticeMode ? "Practice (vXLM)" : "On-Chain"}
+                status={effectivePracticeMode ? "info" : "active"}
+              />
+            </button>
             <label className="inline-flex min-h-[40px] items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm text-gray-300">
               <input
                 type="checkbox"

From f4d2fe6938b16edf6964cabf8947b63b3c73c2a2 Mon Sep 17 00:00:00 2001
From: mansur-codes <muhammadmansur5002@gmail.com>
Date: Wed, 26 Aug 2026 15:54:32 +0100
Subject: [PATCH 2/3] fix(lint): remove react-hooks/set-state-in-effect
 suppressions

---
 src/components/PredictionHistory.tsx |  5 +++--
 src/components/PriceChart.tsx        | 29 ++++++++++++++--------------
 src/pages/Dashboard.tsx              | 17 +++++++++-------
 src/pages/Learn.tsx                  |  5 +++--
 4 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/PredictionHistory.tsx b/src/components/PredictionHistory.tsx
index 02ec491..f2ab262 100644
--- a/src/components/PredictionHistory.tsx
+++ b/src/components/PredictionHistory.tsx
@@ -82,8 +82,9 @@ export default function PredictionHistory({ userId, optimisticPrediction }: Pred
   }, [history, userId]);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    void loadHistory();
+    Promise.resolve().then(() => {
+      void loadHistory();
+    });
   }, [loadHistory]);
 
   if (!userId) {
diff --git a/src/components/PriceChart.tsx b/src/components/PriceChart.tsx
index 47e40bd..290eaab 100644
--- a/src/components/PriceChart.tsx
+++ b/src/components/PriceChart.tsx
@@ -487,21 +487,22 @@ const PriceChart = ({ height = 300, asset = "XLM", entryPrice, onPriceUpdate }:
 
   // Reload data when asset changes — reset and load mock/API data
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setData([]);
-    setIsLoading(true);
-    setLoadError(null);
-
-    // Use mock data directly for instant visual feedback per asset
-    const mockData = mockPriceData[asset];
-    if (mockData && mockData.length > 0) {
-      setData(mockData);
-      setLastUpdatedAt(new Date());
-      setIsLoading(false);
-    }
+    Promise.resolve().then(() => {
+      setData([]);
+      setIsLoading(true);
+      setLoadError(null);
+
+      // Use mock data directly for instant visual feedback per asset
+      const mockData = mockPriceData[asset];
+      if (mockData && mockData.length > 0) {
+        setData(mockData);
+        setLastUpdatedAt(new Date());
+        setIsLoading(false);
+      }
 
-    // Also attempt to fetch live data from API
-    void loadInitialPrices();
+      // Also attempt to fetch live data from API
+      void loadInitialPrices();
+    });
   }, [asset]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Update chart line color when asset changes
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 6572076..8442b67 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -179,8 +179,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
 
   // Clear the entry marker whenever the active round changes.
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setEntryPrice(null);
+    Promise.resolve().then(() => {
+      setEntryPrice(null);
+    });
   }, [activeRoundId]);
 
   const [stats, setStats] = useState<UserStats | null>(null);
@@ -284,9 +285,10 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
   }, [isWalletConnected, publicKey]);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    void fetchStats();
-    void fetchActivities();
+    Promise.resolve().then(() => {
+      void fetchStats();
+      void fetchActivities();
+    });
   }, [fetchStats, fetchActivities]);
 
   const refreshInspector = useCallback(async () => {
@@ -311,8 +313,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
   }, [isWalletConnected, publicKey]);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    void refreshInspector();
+    Promise.resolve().then(() => {
+      void refreshInspector();
+    });
   }, [refreshInspector]);
 
   const handleRoundSoundToggle = (enabled: boolean) => {
diff --git a/src/pages/Learn.tsx b/src/pages/Learn.tsx
index a55ead6..cc8ab89 100644
--- a/src/pages/Learn.tsx
+++ b/src/pages/Learn.tsx
@@ -52,8 +52,9 @@ const LearnPage = () => {
     }, []);
 
     useEffect(() => {
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        fetchData();
+        Promise.resolve().then(() => {
+            fetchData();
+        });
     }, [fetchData]);
 
     if (loading) {

From 2833308009b8825c87f7bd567a08c63100fd05aa Mon Sep 17 00:00:00 2001
From: mansur-codes <muhammadmansur5002@gmail.com>
Date: Wed, 26 Aug 2026 16:38:47 +0100
Subject: [PATCH 3/3] Defer effect callbacks with Promise microtask

---
 src/components/PredictionHistory.tsx | 16 +++++++++-------
 src/pages/Dashboard.tsx              | 14 ++++++++++----
 src/pages/Learn.tsx                  |  4 +++-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/PredictionHistory.tsx b/src/components/PredictionHistory.tsx
index b8a323b..54eef80 100644
--- a/src/components/PredictionHistory.tsx
+++ b/src/components/PredictionHistory.tsx
@@ -82,7 +82,9 @@ export default function PredictionHistory({ userId, optimisticPrediction }: Pred
   }, [history, userId]);
 
   useEffect(() => {
-    void loadHistory();
+    Promise.resolve().then(() => {
+      void loadHistory();
+    });
   }, [loadHistory]);
 
   if (!userId) {
@@ -174,12 +176,12 @@ export default function PredictionHistory({ userId, optimisticPrediction }: Pred
                   </p>
                   <p className="text-xs text-gray-500 dark:text-gray-400">
                     {(() => {
-  const raw = prediction.createdAt;
-  if (typeof raw !== "string") return "Unknown time";
-  const date = new Date(raw);
-  if (Number.isNaN(date.getTime())) return "Unknown time";
-  return formatRelativeTime(date);
-})()}
+                      const raw = prediction.createdAt;
+                      if (typeof raw !== "string") return "Unknown time";
+                      const date = new Date(raw);
+                      if (Number.isNaN(date.getTime())) return "Unknown time";
+                      return formatRelativeTime(date);
+                    })()}
                   </p>
                 </div>
 
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index aa5c32a..776afc2 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -182,7 +182,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
 
   // Clear the entry marker whenever the active round changes.
   useEffect(() => {
-    setEntryPrice(null);
+    Promise.resolve().then(() => {
+      setEntryPrice(null);
+    });
   }, [activeRoundId]);
 
   const [stats, setStats] = useState<UserStats | null>(null);
@@ -305,8 +307,10 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
   }, [isWalletConnected, publicKey]);
 
   useEffect(() => {
-    void fetchStats();
-    void fetchActivities();
+    Promise.resolve().then(() => {
+      void fetchStats();
+      void fetchActivities();
+    });
   }, [fetchStats, fetchActivities]);
 
   const refreshInspector = useCallback(async () => {
@@ -331,7 +335,9 @@ const activeRoundId = useRoundStore((state) => state.activeRound?.id ?? null);
   }, [isWalletConnected, publicKey]);
 
   useEffect(() => {
-    void refreshInspector();
+    Promise.resolve().then(() => {
+      void refreshInspector();
+    });
   }, [refreshInspector]);
 
   const handleRoundSoundToggle = (enabled: boolean) => {
diff --git a/src/pages/Learn.tsx b/src/pages/Learn.tsx
index 6def81f..3154cf9 100644
--- a/src/pages/Learn.tsx
+++ b/src/pages/Learn.tsx
@@ -52,7 +52,9 @@ const LearnPage = () => {
     }, []);
 
     useEffect(() => {
-        fetchData();
+        Promise.resolve().then(() => {
+          fetchData();
+        });
     }, [fetchData]);
 
     if (loading) {