[GF-13] [FRONTEND] Deposit & Transaction Flow Page

[wumibals]

Overview

⚠️ Depends on: #42 (GF-09 — Wallet Integration) and #44 (GF-12 — Data Service Layer).

Build the deposit page and full transaction flow. This is the primary conversion point of the app — the page where a user goes from browsing to actually putting capital into a vault.

Problem

No deposit page exists. The Deposit buttons in app/src/app/dashboard/page.tsx have type="button" with no onClick handler:

<button style={styles.button} type="button">
  Deposit
</button>

There is no /deposit route, no transaction confirmation modal, no success or error states, and no way for a user to complete an actual deposit.

Proposed Solution

1. Create app/src/app/deposit/page.tsx
A multi-step deposit page:

Step 1 — Tier selection
Show all four vault tiers as selectable cards. Each card displays:

• Tier name and lock duration
• Live APY (from useAPY from GF-12)
• Share multiplier
• Early-exit fee
• Minimum deposit
  Highlight the selected tier. Pre-select the tier if a ?tier=l6 query param is provided (so dashboard cards can deep-link here).

Step 2 — Amount input

• USDC amount input field
• Show minimum deposit for the selected tier; disable the Continue button if below minimum
• Show projected yield estimate: amount × apy × (lock_months / 12)
• Show share-units that will be minted: amount × multiplier

Step 3 — Confirmation modal
Before submitting, show a summary:

• Vault tier and lock duration
• Amount depositing
• Shares to be minted
• Lock expiry date (if applicable)
• Estimated gas/resource fee (from SDK simulation)
• Confirm & Deposit button

Step 4 — Transaction states

• Pending: spinner with Submitting transaction...
• Confirmed: success screen with position summary and a View Portfolio link
• Failed: error message with the Soroban error details and a Try Again button

2. Wire dashboard Deposit buttons
Update each vault card's Deposit button in app/src/app/dashboard/page.tsx to navigate to /deposit?tier=<tier>.

3. Nav Explore Vaults CTA
Update the landing page nav CTA to link to /deposit (not #vaults anchor) for connected users.

Acceptance Criteria

• /deposit page exists and is reachable
• Tier selector shows live APY per tier (not hardcoded)
• Amount input validates minimum deposit client-side before enabling Continue
• Projected yield and share-unit count are shown before confirming
• Confirmation modal shows exact amounts, lock expiry date, and estimated fee
• Transaction is simulated before broadcast — fee is shown from simulation result
• Pending / confirmed / failed states are all handled with appropriate UI
• Dashboard Deposit buttons navigate to /deposit?tier=<tier>
• Redirects to wallet connect flow if wallet is not connected
• Success screen links to /portfolio