Merge pull request #147 from jabir-dev788/FIX-vero-guardian-dashboard

Add dev-only tool to mock wallet publicKey (reduces reconnect friction)

Author: N-thnI

src/app/layout.tsx

@@ -11,6 +11,7 @@ import { ThemeProvider } from '@/context/ThemeContext';
 import { I18nProvider } from '@/i18n';
 import { NetworkProvider } from '@/context/NetworkContext';
 import { SocketIOProvider } from '@/context/SocketIOContext';
+import DevWalletSwitcher from '@/components/DevWalletSwitcher';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -41,6 +42,8 @@ export default function RootLayout({ children }: RootLayoutProps): ReactElement
                         </ErrorProvider>
                       </SocketIOProvider>
                     </RoleProvider>
+                    {/* DEV-ONLY: renders null in production */}
+                    <DevWalletSwitcher />
                   </WalletProvider>
               </NetworkProvider>
             </ThemeProvider>

src/components/DevWalletSwitcher.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+import { useWallet } from '@/context/WalletContext';
+import { KeyRound, X, ChevronDown, ChevronUp } from 'lucide-react';
+
+/**
+ * DEV-ONLY floating panel that lets you inject an arbitrary Stellar public key
+ * directly into WalletContext — no wallet extension required.
+ *
+ * Both this component AND `WalletContext.setMockPublicKey` independently
+ * check `process.env.NODE_ENV`, ensuring the feature is a guaranteed no-op
+ * in production even if only one guard were to be removed.
+ */
+export default function DevWalletSwitcher() {
+  // Independent production guard (layer 1 of 2).
+  // Returning null *before* any hooks would violate the Rules of Hooks, so we
+  // place the early-return after the hook declarations.
+  const { setMockPublicKey } = useWallet();
+  const [collapsed, setCollapsed] = useState(true);
+  const [inputValue, setInputValue] = useState('');
+  const [dismissed, setDismissed] = useState(false);
+
+  // Layer 1 guard: component renders nothing in production.
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  if (dismissed) return null;
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-[9999] w-72 rounded-xl border border-amber-400/40 bg-slate-900/95 shadow-2xl backdrop-blur-sm"
+      role="complementary"
+      aria-label="Dev wallet switcher"
+    >
+      {/* ── Header bar ─────────────────────────────────────────────────────── */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-slate-700/60">
+        <button
+          type="button"
+          onClick={() => setCollapsed((c) => !c)}
+          className="flex items-center gap-1.5 text-amber-400 text-xs font-semibold tracking-wide uppercase focus:outline-none focus:ring-2 focus:ring-amber-400/60 rounded"
+          aria-expanded={!collapsed}
+          aria-controls="dev-wallet-switcher-body"
+        >
+          <KeyRound className="w-3.5 h-3.5" aria-hidden="true" />
+          Dev Wallet
+          {collapsed
+            ? <ChevronDown className="w-3.5 h-3.5 ml-0.5" aria-hidden="true" />
+            : <ChevronUp className="w-3.5 h-3.5 ml-0.5" aria-hidden="true" />}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          aria-label="Dismiss dev wallet panel"
+          className="text-slate-500 hover:text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-400/60 rounded"
+        >
+          <X className="w-3.5 h-3.5" aria-hidden="true" />
+        </button>
+      </div>
+
+      {/* ── Collapsible body ────────────────────────────────────────────────── */}
+      {!collapsed && (
+        <div
+          id="dev-wallet-switcher-body"
+          className="px-3 py-3 flex flex-col gap-2"
+        >
+          <label
+            htmlFor="dev-wallet-input"
+            className="text-xs text-slate-400 font-medium"
+          >
+            Stellar public key
+          </label>
+          <input
+            id="dev-wallet-input"
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="G..."
+            spellCheck={false}
+            className="w-full rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-xs font-mono text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-amber-400/60 transition-colors"
+          />
+          <button
+            type="button"
+            onClick={() => {
+              if (inputValue.trim()) {
+                setMockPublicKey(inputValue.trim());
+              }
+            }}
+            disabled={!inputValue.trim()}
+            className="flex items-center justify-center gap-2 rounded-lg bg-amber-500 hover:bg-amber-400 disabled:opacity-40 disabled:cursor-not-allowed text-slate-900 text-xs font-semibold px-3 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+          >
+            <KeyRound className="w-3.5 h-3.5" aria-hidden="true" />
+            Apply key
+          </button>
+          <p className="text-[10px] text-slate-500 leading-snug">
+            ⚠ Dev only — this panel and the underlying method are both no-ops in production.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

src/context/WalletContext.tsx

@@ -43,6 +43,11 @@ interface WalletContextType {
   /** Connect with a specific provider; defaults to Freighter when omitted. */
   connect: (providerId?: WalletProviderId) => Promise<void>;
   disconnect: () => void;
+  /**
+   * DEV-ONLY: Manually override the active public key without going through
+   * a real wallet handshake. Always a no-op in production.
+   */
+  setMockPublicKey: (key: string) => void;
 }
 
 const WalletContext = createContext<WalletContextType | undefined>(undefined);
@@ -280,6 +285,17 @@ export function WalletProvider({ children }: { children: ReactNode }) {
     clearWalletState();
   }, [publicKey, activeProvider, clearWalletState, emit]);
 
+  /** DEV-ONLY: override the active public key for local development convenience. */
+  const setMockPublicKey = useCallback(
+    (key: string) => {
+      if (process.env.NODE_ENV === 'production') {
+        return;
+      }
+      applyVerifiedPublicKey(key, DEFAULT_WALLET_PROVIDER_ID);
+    },
+    [applyVerifiedPublicKey]
+  );
+
   useEffect(() => {
     const unsubscribe = sessionManager.subscribe(() => {
       disconnect();
@@ -308,8 +324,9 @@ export function WalletProvider({ children }: { children: ReactNode }) {
       availableProviders,
       connect,
       disconnect,
+      setMockPublicKey,
     }),
-    [activeProvider, availableProviders, connect, disconnect, error, isLoading, publicKey, reputation]
+    [activeProvider, availableProviders, connect, disconnect, error, isLoading, publicKey, reputation, setMockPublicKey]
   );
 
   return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>;

src/context/__tests__/WalletContext.setMockPublicKey.test.ts

@@ -0,0 +1,90 @@
+// src/context/__tests__/WalletContext.setMockPublicKey.test.ts
+//
+// Mirrors the test pattern established in src/utils/__tests__/diff.test.ts.
+// Verifies that setMockPublicKey is a guaranteed no-op when
+// NODE_ENV === 'production'.
+
+// Store the original NODE_ENV so we can restore it after each test.
+const originalNodeEnv = process.env.NODE_ENV;
+
+afterEach(() => {
+  // Restore env to avoid cross-test contamination.
+  Object.defineProperty(process.env, 'NODE_ENV', {
+    writable: true,
+    configurable: true,
+    value: originalNodeEnv,
+  });
+  jest.resetAllMocks();
+});
+
+describe('WalletContext – setMockPublicKey production guard', () => {
+  /**
+   * We test the guard logic in isolation rather than wiring up the full React
+   * context, because the constraint is pure conditional logic that does not
+   * require rendering.
+   *
+   * The extracted helper below reproduces the exact logic used in the
+   * WalletProvider implementation:
+   *
+   *   if (process.env.NODE_ENV === 'production') return;
+   *   applyVerifiedPublicKey(key, DEFAULT_WALLET_PROVIDER_ID);
+   */
+  function makeSetMockPublicKey(applyVerifiedPublicKey: (key: string, providerId: string) => void) {
+    const DEFAULT_WALLET_PROVIDER_ID = 'freighter';
+    return function setMockPublicKey(key: string) {
+      if (process.env.NODE_ENV === 'production') {
+        return;
+      }
+      applyVerifiedPublicKey(key, DEFAULT_WALLET_PROVIDER_ID);
+    };
+  }
+
+  test('does NOT call applyVerifiedPublicKey when NODE_ENV is production', () => {
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      writable: true,
+      configurable: true,
+      value: 'production',
+    });
+
+    const applyVerifiedPublicKey = jest.fn();
+    const setMockPublicKey = makeSetMockPublicKey(applyVerifiedPublicKey);
+
+    setMockPublicKey('GABCDE12345');
+
+    expect(applyVerifiedPublicKey).not.toHaveBeenCalled();
+  });
+
+  test('DOES call applyVerifiedPublicKey when NODE_ENV is development', () => {
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      writable: true,
+      configurable: true,
+      value: 'development',
+    });
+
+    const applyVerifiedPublicKey = jest.fn();
+    const setMockPublicKey = makeSetMockPublicKey(applyVerifiedPublicKey);
+    const testKey = 'GABCDE12345';
+
+    setMockPublicKey(testKey);
+
+    expect(applyVerifiedPublicKey).toHaveBeenCalledTimes(1);
+    expect(applyVerifiedPublicKey).toHaveBeenCalledWith(testKey, 'freighter');
+  });
+
+  test('DOES call applyVerifiedPublicKey when NODE_ENV is test', () => {
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      writable: true,
+      configurable: true,
+      value: 'test',
+    });
+
+    const applyVerifiedPublicKey = jest.fn();
+    const setMockPublicKey = makeSetMockPublicKey(applyVerifiedPublicKey);
+    const testKey = 'GXYZ9876';
+
+    setMockPublicKey(testKey);
+
+    expect(applyVerifiedPublicKey).toHaveBeenCalledTimes(1);
+    expect(applyVerifiedPublicKey).toHaveBeenCalledWith(testKey, 'freighter');
+  });
+});