UI #24 — Add 'What does this mean for me?' personalised explanation mode

[Tinna23]

Description

When a user enters their own Stellar address, every explanation flips to first-person language: 'You sent 50 XLM to...' instead of 'GABC... sent 50 XLM to GDCD...'. This makes the app feel personal and dramatically more useful for anyone reviewing their own transaction history.

What To Build

src/hooks/usePersonalMode.ts

• Stores myAddress in localStorage under stellar-explain-my-address
• Exports: setMyAddress(), clearMyAddress(), personalise(text: string): string
• personalise() replaces myAddress occurrences in explanation text with 'you' / 'your account'

src/components/common/PersonalModeToggle.tsx

• A 'Personalise ✦' button in the result area header
• Clicking opens a popover: 'Enter your address to personalise explanations'
• On submit: validates address (G-prefix, 56 chars), saves, re-renders all explanations with substitutions
• While active: button shows 'Personal mode on · [truncated address]' with ✕ to clear

Apply personalise() to:

• TransactionResult → summary, payment from/to/summary fields
• AccountResult → summary field

Key Files

• src/hooks/usePersonalMode.ts
• src/components/common/PersonalModeToggle.tsx
• src/components/TransactionResult.tsx
• src/components/AccountResult.tsx

Acceptance Criteria

• Setting a personal address replaces it in all explanation text with 'you'/'your account'
• Applied to transaction summaries, payment cards, and account summaries
• Persists across page reloads
• Clearing restores all original text immediately
• Invalid addresses rejected with inline validation error
• No partial-string false matches

Complexity: High · 200 pts
Stage: S10 — Power Features (Wave 2)
Depends on: UI #6, UI #7