fix(frontend): remove unsafe non-null assertion on WalletConnect publicKey

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/WalletConnect.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import WalletConnect from './WalletConnect'
+import { useWallet } from '../context/WalletContext'
+
+vi.mock('../context/WalletContext', () => ({
+  useWallet: vi.fn(),
+}))
+
+const mockUseWallet = vi.mocked(useWallet)
+
+const baseWallet = {
+  wrongNetwork: false,
+  connecting: false,
+  error: null as string | null,
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  recheckInstall: vi.fn(),
+  clearError: vi.fn(),
+  connected: false,
+}
+
+describe('<WalletConnect />', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders truncated publicKey when connected', () => {
+    mockUseWallet.mockReturnValue({
+      ...baseWallet,
+      status: 'connected',
+      publicKey: 'GABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOP',
+      connected: true,
+    })
+
+    render(<WalletConnect />)
+
+    expect(screen.getByText('GABC...MNOP')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /Disconnect wallet GABC\.\.\.MNOP/i }),
+    ).toBeInTheDocument()
+  })
+
+  it('does not crash when connected with null publicKey and shows fallback', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    mockUseWallet.mockReturnValue({
+      ...baseWallet,
+      status: 'connected',
+      publicKey: null,
+      connected: true,
+    })
+
+    render(<WalletConnect />)
+
+    expect(screen.getByText('Address unavailable')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Disconnect wallet' })).toBeInTheDocument()
+    expect(screen.queryByText(/\.\.\./)).not.toBeInTheDocument()
+
+    warn.mockRestore()
+  })
+
+  it('renders connect button when disconnected', () => {
+    mockUseWallet.mockReturnValue({
+      ...baseWallet,
+      status: 'disconnected',
+      publicKey: null,
+    })
+
+    render(<WalletConnect />)
+
+    expect(screen.getByRole('button', { name: 'Connect Wallet' })).toBeInTheDocument()
+  })
+})

frontend/src/components/WalletConnect.tsx

@@ -62,39 +62,49 @@ export default function WalletConnect() {
     );
   }
 
+  // Connected: guard against unexpected missing publicKey (avoids runtime crash from !)
+  if (!publicKey) {
+    if (import.meta.env.DEV) {
+      console.warn(
+        '[WalletConnect] status is connected but publicKey is null/undefined',
+      );
+    }
+    return (
+      <div className="flex items-center gap-3">
+        {wrongNetwork && (
+          <span className="text-gold-400 text-xs font-medium">Switch to Testnet</span>
+        )}
+        <span className="text-gray-300 dark:text-gray-300 light:text-gray-700 text-sm font-mono bg-navy-800 dark:bg-navy-800 light:bg-white px-3 py-1.5 rounded-md border border-navy-600 dark:border-navy-600 light:border-gray-300">
+          Address unavailable
+        </span>
+        <button
+          onClick={disconnect}
+          aria-pressed={true}
+          aria-label="Disconnect wallet"
+          className="text-gray-500 dark:text-gray-500 light:text-gray-600 text-xs hover:text-gray-300 dark:hover:text-gray-300 light:hover:text-gray-700 transition-colors"
+        >
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-3">
       {wrongNetwork && (
         <span className="text-gold-400 text-xs font-medium">Switch to Testnet</span>
       )}
-      {publicKey ? (
-        <>
-          <span className="text-gray-300 dark:text-gray-300 light:text-gray-700 text-sm font-mono bg-navy-800 dark:bg-navy-800 light:bg-white px-3 py-1.5 rounded-md border border-navy-600 dark:border-navy-600 light:border-gray-300">
-            {truncateAddress(publicKey)}
-          </span>
-          <button
-            onClick={disconnect}
-            aria-pressed={true}
-            aria-label={`Disconnect wallet ${truncateAddress(publicKey)}`}
-            className="text-gray-500 dark:text-gray-500 light:text-gray-600 text-xs hover:text-gray-300 dark:hover:text-gray-300 light:hover:text-gray-700 transition-colors"
-          >
-            Disconnect
-          </button>
-        </>
-      ) : (
-        <>
-          {import.meta.env.DEV && console.warn('[WalletConnect] Connected status but publicKey is null/undefined — unexpected state')}
-          <span className="text-gold-400 text-xs font-medium">Wallet key unavailable</span>
-          <button
-            onClick={disconnect}
-            aria-pressed={true}
-            aria-label="Disconnect wallet"
-            className="text-gray-500 dark:text-gray-500 light:text-gray-600 text-xs hover:text-gray-300 dark:hover:text-gray-300 light:hover:text-gray-700 transition-colors"
-          >
-            Disconnect
-          </button>
-        </>
-      )}
+      <span className="text-gray-300 dark:text-gray-300 light:text-gray-700 text-sm font-mono bg-navy-800 dark:bg-navy-800 light:bg-white px-3 py-1.5 rounded-md border border-navy-600 dark:border-navy-600 light:border-gray-300">
+        {truncateAddress(publicKey)}
+      </span>
+      <button
+        onClick={disconnect}
+        aria-pressed={true}
+        aria-label={`Disconnect wallet ${truncateAddress(publicKey)}`}
+        className="text-gray-500 dark:text-gray-500 light:text-gray-600 text-xs hover:text-gray-300 dark:hover:text-gray-300 light:hover:text-gray-700 transition-colors"
+      >
+        Disconnect
+      </button>
     </div>
   );
 }