feat(observability): log successful wallet connections via useWalletConnectionLogger (#599)

[Ajibose]

Closes #599

Summary

Adds a debug-level structured log emitted the moment a wallet connection succeeds, so developers can trace wallet session activity without relying on browser extension logs.

What was implemented

• useWalletConnectionLogger (src/hooks/useWalletConnectionLogger.ts): a hook that watches wagmi's useAccount() state and, on a successful connection, emits:

  console.debug('[wallet-connection]', {
    truncated_address, // first 4 + last 4 chars, e.g. "0x12...5678"
    connection_method, // active connector's name (falls back to id, then "unknown")
    connected_at,       // ISO timestamp
  });
  

  • Dedupes on the connected address via a useRef, so the log fires once per connection event — not on re-renders, and not again for unrelated state or query-cache updates that leave the address unchanged.
  • Disconnecting resets the dedupe key, so a later reconnection (same or different address) logs again.
  • Suppressed by default when process.env.NODE_ENV === 'test', matching the existing [cache-invalidation] logging convention in useWallet.ts.
  • The full wallet address is never included under any field name — only the truncated form, reused from the existing shortenAddress util (src/lib/web3/format.ts).

• Web3Provider (src/providers/Web3Provider.tsx): mounts a small internal WalletConnectionLogger component (calls the hook, renders null) inside the provider tree, so the log fires exactly once app-wide regardless of which UI — ConnectWalletButton or WalletConnectCalloutBanner — initiated the connection, rather than duplicating the logic in each.

Files

New files

• src/hooks/useWalletConnectionLogger.ts — the logging hook
• src/hooks/__tests__/useWalletConnectionLogger.test.ts — unit tests

Modified files

• src/providers/Web3Provider.tsx — mounts the logger once at the provider boundary

Tests added

src/hooks/__tests__/useWalletConnectionLogger.test.ts (mocks wagmi's useAccount, matching the pattern used in useNetworkMismatch.test.ts):

• Emits a structured log with truncated_address, connection_method, and connected_at on a successful connection
• Never includes the full wallet address under any field name
• Falls back to the connector id when no name is available
• Falls back to "unknown" when there is no connector at all
• Does not emit when the wallet is not connected
• Does not re-emit on re-renders for the same connected address
• Emits again after a disconnect/reconnect cycle
• Does not emit in the test environment by default

How to test

pnpm test src/hooks/__tests__/useWalletConnectionLogger.test.ts

Manually: connect a wallet via ConnectWalletButton in a non-test build and confirm the browser console prints a single [wallet-connection] debug log with a truncated address, the connector name, and a timestamp — and that navigating/re-rendering afterward does not print it again.

[drips-wave]

@Ajibose Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits