From 8ff3aa2544ef5c1b273eeaa980af3ff5795a5de8 Mon Sep 17 00:00:00 2001
From: Adeyemiadigun <adeyemiadigun12@gmail.com>
Date: Sat, 26 Sep 2026 11:37:39 +0100
Subject: [PATCH] fix(#586): gate advanced features behind advancedMode toggle

- hooks/useSettings: expose advancedMode (default false) + same-tab
  notifySettingsUpdated() so mounted components re-read on toggle
- settings page: notify subscribers on save; document what the toggle reveals
- StreamCard: show raw stroops/s rate in advanced mode
- stream detail: raw stroop amounts inline + Advanced details card with
  stream/token/factory contract addresses and raw unix timestamps
- compare page: raw stroop rate + token contract rows in advanced mode
- navbar: Compare link only in advanced mode (route stays directly reachable)
---
 app/settings/page.tsx            |  24 +++++--
 app/stream/[id]/page.tsx         | 106 ++++++++++++++++++++++++++++++-
 app/streams/compare/page.tsx     |  35 ++++++++++
 components/Navbar.tsx            |  12 +++-
 components/stream/StreamCard.tsx |  23 +++++--
 hooks/useSettings.ts             |  37 +++++++++--
 6 files changed, 221 insertions(+), 16 deletions(-)

diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 3e148c2..84e81d3 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -9,6 +9,7 @@ import {
   type TimeFormat,
   type RefreshIntervalSeconds,
   REFRESH_INTERVAL_OPTIONS,
+  notifySettingsUpdated,
 } from "@/hooks/useSettings";
 
 type Currency = "USD" | "EUR" | "XLM";
@@ -90,6 +91,9 @@ export default function SettingsPage() {
 
     try {
       localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+      // Wake up mounted useSettings() subscribers in this tab — the
+      // `storage` event only fires in *other* tabs (#586).
+      notifySettingsUpdated();
     } catch {
       // Storage can be unavailable in private browsing or embedded webviews.
     }
@@ -298,15 +302,27 @@ export default function SettingsPage() {
               className="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-black dark:text-white focus:ring-black dark:focus:ring-white"
             />
           </label>
-          <label className="flex flex-row items-center justify-between cursor-pointer">
-            <span className="text-sm">Advanced Mode</span>
+          <div className="flex flex-row items-start justify-between gap-3">
+            <div>
+              <label
+                htmlFor="advanced-mode-toggle"
+                className="text-sm cursor-pointer"
+              >
+                Advanced Mode
+              </label>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                Shows raw stroop amounts, full contract addresses, and the
+                stream compare link in the navigation.
+              </p>
+            </div>
             <input
+              id="advanced-mode-toggle"
               type="checkbox"
               checked={settings.advancedMode}
               onChange={(e) => updateSetting("advancedMode", e.target.checked)}
-              className="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-black dark:text-white focus:ring-black dark:focus:ring-white"
+              className="w-5 h-5 mt-0.5 shrink-0 rounded border-gray-300 dark:border-gray-600 text-black dark:text-white focus:ring-black dark:focus:ring-white cursor-pointer"
             />
-          </label>
+          </div>
         </div>
       </section>
 
diff --git a/app/stream/[id]/page.tsx b/app/stream/[id]/page.tsx
index 2c9a11e..ff85756 100644
--- a/app/stream/[id]/page.tsx
+++ b/app/stream/[id]/page.tsx
@@ -26,6 +26,7 @@ import {
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { fromStroops, formatTimestamp, truncateAddress } from "@/lib/format";
 import { tokenByAddress } from "@/lib/tokens";
+import { tryGetFactoryContractId } from "@/lib/env";
 import { useSettings, MIN_REFRESH_INTERVAL_S } from "@/hooks/useSettings";
 
 // ── Types ────────────────────────────────────────────────────────────────────
@@ -55,7 +56,7 @@ export default function StreamPage() {
   // NetworkTroubleBanner — defer to it rather than printing a raw
   // "circuit breaker open" string here.
   const { status: networkStatus } = useNetworkStatus();
-  const { autoRefreshInterval } = useSettings();
+  const { autoRefreshInterval, advancedMode } = useSettings();
   const mounted = useRef(true);
   const loadSeq = useRef(0);
 
@@ -430,7 +431,17 @@ export default function StreamPage() {
               <td className="py-2.5 text-gray-400 dark:text-gray-500 w-40">
                 Rate
               </td>
-              <td className="py-2.5 font-mono text-black dark:text-white text-right">{`${fromStroops(info.ratePerSecond)} / sec`}</td>
+              <td className="py-2.5 font-mono text-black dark:text-white text-right">
+                {`${fromStroops(info.ratePerSecond)} / sec`}
+                {advancedMode && (
+                  <span
+                    className="block text-[11px] text-gray-400 dark:text-gray-500"
+                    title={`${info.ratePerSecond.toString()} stroops per second`}
+                  >
+                    {info.ratePerSecond.toString()} stroops/s
+                  </span>
+                )}
+              </td>
             </tr>
             <tr>
               <td className="py-2.5 text-gray-400 dark:text-gray-500 w-40">
@@ -438,6 +449,11 @@ export default function StreamPage() {
               </td>
               <td className="py-2.5 font-mono text-black dark:text-white text-right">
                 {fromStroops(totalDeposited)}
+                {advancedMode && (
+                  <span className="block text-[11px] text-gray-400 dark:text-gray-500">
+                    {totalDeposited.toString()} stroops
+                  </span>
+                )}
               </td>
             </tr>
             <tr>
@@ -446,6 +462,11 @@ export default function StreamPage() {
               </td>
               <td className="py-2.5 font-mono text-black dark:text-white text-right">
                 {fromStroops(info.withdrawn)}
+                {advancedMode && (
+                  <span className="block text-[11px] text-gray-400 dark:text-gray-500">
+                    {info.withdrawn.toString()} stroops
+                  </span>
+                )}
               </td>
             </tr>
             <tr>
@@ -478,6 +499,87 @@ export default function StreamPage() {
         </table>
       </Card>
 
+      {/* Advanced details — only when advanced mode is enabled (#586).
+          Surfaces raw stroop values and full contract addresses inline so
+          power users can verify on-chain state without leaving the page. */}
+      {advancedMode && (
+        <Card className="mb-6">
+          <h2 className="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+            Advanced details
+          </h2>
+          <dl className="space-y-2.5 text-sm">
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Stream contract
+              </dt>
+              <dd className="text-right break-all font-mono text-xs text-black dark:text-white">
+                <CopyableAddress address={streamAddress} />
+              </dd>
+            </div>
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Token contract
+              </dt>
+              <dd className="text-right break-all font-mono text-xs text-black dark:text-white">
+                <CopyableAddress address={info.token} />
+              </dd>
+            </div>
+            {tryGetFactoryContractId() && (
+              <div className="flex items-start justify-between gap-3">
+                <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                  Factory contract
+                </dt>
+                <dd className="text-right break-all font-mono text-xs text-black dark:text-white">
+                  <CopyableAddress
+                    address={tryGetFactoryContractId() as string}
+                  />
+                </dd>
+              </div>
+            )}
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Rate (stroops/s)
+              </dt>
+              <dd className="text-right font-mono text-xs text-black dark:text-white break-all">
+                {info.ratePerSecond.toString()}
+              </dd>
+            </div>
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Withdrawable (stroops)
+              </dt>
+              <dd className="text-right font-mono text-xs text-black dark:text-white break-all">
+                {withdrawable.toString()}
+              </dd>
+            </div>
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Withdrawn (stroops)
+              </dt>
+              <dd className="text-right font-mono text-xs text-black dark:text-white break-all">
+                {info.withdrawn.toString()}
+              </dd>
+            </div>
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                Start (unix)
+              </dt>
+              <dd className="text-right font-mono text-xs text-black dark:text-white">
+                {info.startTime}
+              </dd>
+            </div>
+            <div className="flex items-start justify-between gap-3">
+              <dt className="text-gray-400 dark:text-gray-500 shrink-0">
+                End (unix)
+              </dt>
+              <dd className="text-right font-mono text-xs text-black dark:text-white">
+                {info.endTime}
+              </dd>
+            </div>
+          </dl>
+        </Card>
+      )}
+
       {/* Actions */}
       {(isSender || isRecipient) && (
         <div className="print:hidden">
diff --git a/app/streams/compare/page.tsx b/app/streams/compare/page.tsx
index 3a27c30..71068d6 100644
--- a/app/streams/compare/page.tsx
+++ b/app/streams/compare/page.tsx
@@ -8,6 +8,7 @@ import { ArrowLeft }                     from 'lucide-react';
 import { Badge }             from '@/components/ui/Badge';
 import { StreamProgressBar } from '@/components/stream/StreamProgressBar';
 import { useWallet }         from '@/contexts/WalletContext';
+import { useSettings } from '@/hooks/useSettings';
 import { getStreamAddress, getStreamInfo, type StreamInfo } from '@/lib/stream';
 import { fromStroops, formatDuration, formatTimestamp, truncateAddress } from '@/lib/format';
 import { tokenByAddress }    from '@/lib/tokens';
@@ -122,6 +123,7 @@ function CompareView() {
   const searchParams          = useSearchParams();
   const idsParam              = searchParams.get('ids');
   const { publicKey, connected } = useWallet();
+  const { advancedMode } = useSettings();
 
   const [columns, setColumns] = useState<Column[]>([]);
   const [loading, setLoading] = useState(false);
@@ -207,6 +209,39 @@ function CompareView() {
                 ))}
               </tr>
             ))}
+            {/* Raw stroop rates + full token contract addresses — advanced mode only (#586) */}
+            {advancedMode && (
+              <>
+                <tr className="border-b last:border-b-0 border-gray-100 dark:border-gray-800/60">
+                  <th scope="row" className="text-left p-3 text-xs font-medium text-gray-400 dark:text-gray-500 whitespace-nowrap align-top">
+                    Rate (stroops/s)
+                  </th>
+                  {columns.map((col) => (
+                    <td key={col.id} className="p-3 align-top font-mono text-xs break-all">
+                      {col.kind === 'error' ? (
+                        <span className="text-gray-300 dark:text-gray-700">—</span>
+                      ) : (
+                        col.info.ratePerSecond.toString()
+                      )}
+                    </td>
+                  ))}
+                </tr>
+                <tr className="border-b last:border-b-0 border-gray-100 dark:border-gray-800/60">
+                  <th scope="row" className="text-left p-3 text-xs font-medium text-gray-400 dark:text-gray-500 whitespace-nowrap align-top">
+                    Token contract
+                  </th>
+                  {columns.map((col) => (
+                    <td key={col.id} className="p-3 align-top font-mono text-xs break-all">
+                      {col.kind === 'error' ? (
+                        <span className="text-gray-300 dark:text-gray-700">—</span>
+                      ) : (
+                        col.info.token
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              </>
+            )}
           </tbody>
         </table>
       </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 687e83b..c3c4e57 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -9,8 +9,9 @@ import { ThemeToggle }      from '@/components/ThemeToggle';
 import { ErrorBoundary }    from '@/components/ErrorBoundary';
 import { NetworkBadge }     from '@/components/NetworkBadge';
 import { useSelectedNetwork } from '@/hooks/useSelectedNetwork';
+import { useSettings } from '@/hooks/useSettings';
 
-const NAV = [
+const BASE_NAV = [
   { href: '/streams',      label: 'Streams'    },
   { href: '/transactions', label: 'History'    },
   { href: '/create',       label: 'Create'     },
@@ -22,6 +23,15 @@ export function Navbar() {
   const path = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
   const network = useSelectedNetwork();
+  const { advancedMode } = useSettings();
+
+  // The side-by-side compare view is an advanced/power-user tool, so it is
+  // only linked in the nav when advanced mode is enabled (#586). The route
+  // itself stays directly reachable via /streams/compare?ids=… so shared
+  // links keep working.
+  const NAV = advancedMode
+    ? [...BASE_NAV, { href: '/streams/compare', label: 'Compare' }]
+    : BASE_NAV;
 
   // Close the mobile menu whenever the route changes (e.g. after a nav tap).
   useEffect(() => {
diff --git a/components/stream/StreamCard.tsx b/components/stream/StreamCard.tsx
index 7d57656..1d1d0e9 100644
--- a/components/stream/StreamCard.tsx
+++ b/components/stream/StreamCard.tsx
@@ -8,6 +8,7 @@ import { StreamProgressBar } from "@/components/stream/StreamProgressBar";
 import { fromStroops } from "@/lib/format";
 import { CopyAddress } from "@/components/ui/CopyAddress";
 import { getStreamNote } from "@/lib/stream-notes-storage";
+import { useSettings } from "@/hooks/useSettings";
 
 interface StreamCardProps {
   id: string;
@@ -39,6 +40,7 @@ export function StreamCard({
   streamAddress,
 }: StreamCardProps) {
   const rateFormatted = fromStroops(ratePerSecond);
+  const { advancedMode } = useSettings();
   const [note, setNote] = useState<string | null>(null);
 
   // Load note from storage
@@ -86,11 +88,22 @@ export function StreamCard({
         </div>
 
         {/* Rate number centered, green text */}
-        <div
-          className="amount text-xs sm:text-sm font-bold text-green-600 dark:text-green-400 truncate text-center px-1"
-          aria-label={`streaming rate: ${rateFormatted} per second`}
-        >
-          {rateFormatted}/s
+        <div className="flex flex-col items-center px-1 min-w-0">
+          <div
+            className="amount text-xs sm:text-sm font-bold text-green-600 dark:text-green-400 truncate text-center"
+            aria-label={`streaming rate: ${rateFormatted} per second`}
+          >
+            {rateFormatted}/s
+          </div>
+          {/* Raw stroop rate — only in advanced mode (#586) */}
+          {advancedMode && (
+            <span
+              className="font-mono text-[10px] text-gray-400 dark:text-gray-500 truncate"
+              title={`${ratePerSecond.toString()} stroops per second`}
+            >
+              {ratePerSecond.toString()} stroops/s
+            </span>
+          )}
         </div>
 
         <div className="shrink-0">
diff --git a/hooks/useSettings.ts b/hooks/useSettings.ts
index 725aa87..f23a5e0 100644
--- a/hooks/useSettings.ts
+++ b/hooks/useSettings.ts
@@ -33,6 +33,13 @@ export interface PublicSettings {
   timeFormat: TimeFormat;
   /** 0 = disabled */
   autoRefreshInterval: RefreshIntervalSeconds;
+  /**
+   * When true, advanced/debugging details are surfaced across the app:
+   * raw stroop amounts, full contract addresses, and the stream compare
+   * view link. Mirrors the `advancedMode` toggle on the settings page
+   * (issue #586).
+   */
+  advancedMode: boolean;
 }
 
 const STORAGE_KEY = "conduit:settings";
@@ -40,6 +47,7 @@ const STORAGE_KEY = "conduit:settings";
 const DEFAULTS: PublicSettings = {
   timeFormat: "absolute",
   autoRefreshInterval: 0,
+  advancedMode: false,
 };
 
 function readFromStorage(): PublicSettings {
@@ -55,6 +63,7 @@ function readFromStorage(): PublicSettings {
       )
         ? (parsed.autoRefreshInterval as RefreshIntervalSeconds)
         : 0,
+      advancedMode: parsed.advancedMode === true,
     };
   } catch {
     return DEFAULTS;
@@ -62,18 +71,38 @@ function readFromStorage(): PublicSettings {
 }
 
 /**
- * Returns current public settings, and re-reads them whenever another tab or
- * the settings page writes to localStorage (via the `storage` event).
+ * Custom event fired on `window` after a same-tab settings write so mounted
+ * components re-read without waiting for a cross-tab `storage` event (which
+ * by spec never fires in the tab that performed the write). See #586.
+ */
+export const SETTINGS_UPDATED_EVENT = "conduit:settings-updated";
+
+/** Notify mounted `useSettings` subscribers to re-read from localStorage. */
+export function notifySettingsUpdated(): void {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new Event(SETTINGS_UPDATED_EVENT));
+  }
+}
+
+/**
+ * Returns current public settings, and re-reads them whenever any tab (via
+ * the `storage` event) or the settings page in this tab (via
+ * {@link notifySettingsUpdated}) writes to localStorage.
  */
 export function useSettings(): PublicSettings {
   const [settings, setSettings] = useState<PublicSettings>(readFromStorage);
 
   useEffect(() => {
+    const refresh = () => setSettings(readFromStorage());
     const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) setSettings(readFromStorage());
+      if (e.key === STORAGE_KEY) refresh();
     };
     window.addEventListener("storage", onStorage);
-    return () => window.removeEventListener("storage", onStorage);
+    window.addEventListener(SETTINGS_UPDATED_EVENT, refresh);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(SETTINGS_UPDATED_EVENT, refresh);
+    };
   }, []);
 
   return settings;