feat(wallet): disconnect and swap Freighter profiles without page refresh

[stephanieoghenemega-eng]

Closes #4

The problem

hooks/useAccount.ts stored the wallet address in a module-level variable and only fetched it once. The file even documented the bug: "This does not update the return value if the user changes their Freighter settings; they will need to refresh the page."

Switching Freighter profiles left stale address state everywhere until a manual reload. There was also no disconnect UI — the navbar had no wallet indicator at all.

Changes

hooks/useAccount.ts

Rewrote to use useState and subscribe to Freighter's watchWallet event, which fires whenever the active profile changes in the extension:

export function useAccount(): AccountInfo | null {
  const [address, setAddress] = useState<string | null>(null);

  const syncAccount = useCallback(async () => {
    const connected = await isConnected();
    if (!connected) { setAddress(null); return; }
    const user = await getUserInfo();
    setAddress(user?.publicKey ?? null);
  }, []);

  useEffect(() => {
    syncAccount();
    const unsubscribe = watchWallet(() => { void syncAccount(); });
    return () => { unsubscribe?.(); };
  }, [syncAccount]);

  if (!address) return null;
  return { address, displayName: `${address.slice(0, 4)}...${address.slice(-4)}` };
}

Account switches now update the UI in real time across every component that calls useAccount().

components/atoms/wallet-button/index.tsx (new)

A WalletButton component that shows the connected address and a dropdown with two actions:

• Switch account — calls setAllowed() to open the Freighter permission popup so the user can approve a different profile
• Disconnect — calls the onDisconnect callback which clears local state (Freighter has no server-side session to invalidate)

Closes on outside click via a mousedown listener attached to document.

components/organisms/navbar/index.tsx

The navbar now shows the wallet state:

• Not connected → <ConnectButton label="Connect wallet" />
• Connected → <WalletButton address={...} onDisconnect={...} />

Both desktop and mobile drawer updated. The green dot on WalletButton makes the connected state immediately visible.

Before / After

Before: No wallet UI in the navbar. useAccount returned stale data after profile switch.

After: Connected address shown as GABC...WXYZ with a green indicator. Switching profiles in Freighter updates the displayed address immediately. Clicking "Disconnect" clears the session.

Test plan

• Connect Freighter → navbar shows truncated address with green dot
• Click address → dropdown appears with "Switch account" and "Disconnect"
• Click "Switch account" → Freighter permission dialog opens
• Switch accounts inside Freighter without clicking anything → navbar address updates automatically
• Click "Disconnect" → navbar reverts to Connect button
• Click outside the dropdown → dropdown closes

[vercel]

@stephanieoghenemega-eng is attempting to deploy a commit to the Meshack Yaro 's projects Team on Vercel.

A member of the Team first needs to authorize it.