[Web] Username registration flow — claim @username with Stellar wallet connect and ZK proof generation

[ryzen-xp]

📝 Description

Build the end-to-end username registration UI flow. The user connects their Stellar wallet, enters a desired @username, the frontend generates the ZK non-inclusion proof off-chain via the SDK, and submits the registration transaction to the Soroban contract.

✅ Requirements

• Step 1: Connect Stellar wallet (Freighter or xBull)
• Step 2: Enter desired @username — live availability check via SDK resolveUsername
• Step 3: Frontend calls SDK to generate Poseidon hash + non-inclusion proof
• Step 4: Submit register_resolver transaction to Soroban contract
• Step 5: Success screen showing @username claimed + transaction link
• Loading states and error handling at every step
• Form validation: alphanumeric + hyphens only, 3–32 chars

🎯 Acceptance Criteria

• Wallet connect works with Freighter
• Username availability check shows real-time feedback
• ZK proof generated client-side without exposing username
• Soroban transaction submitted and confirmed
• Success state shows username + Stellar Explorer link
• Error states for: wallet not connected, username taken, proof failure, tx failure

📁 Expected files to change/structure

• src/pages/register.tsx
• src/components/UsernameInput.tsx
• src/components/WalletConnect.tsx
• src/hooks/useRegistration.ts
• src/lib/sdk.ts — SDK wrapper

---

🌿 Branch: feat/web-registration-flow | Priority: HIGH | Difficulty: ☕☕☕ all-nighter