feat: add React frontend with Stellar Wallets Kit integration

[murat48]

Summary

Added a React + TypeScript frontend for Stellar AgentKit using wallet kit (no secret key input).

Changes

• React Frontend (frontend/): Vite + React 18 + TypeScript setup
• Stellar Wallets Kit: @creit-tech/stellar-wallets-kit v2.1.0 for wallet connection (Freighter, LOBSTR, etc.)
• Wallet Context: Global wallet state management (publicKey, signXdr)
• Components:
  • SwapPanel: DEX token swap operations
  • LiquidityPanel: Add/remove liquidity
  • PaymentPanel: Send XLM/token payments
• No secret key input: All signing via wallet extension

Tech Stack

• React 18, TypeScript, Vite
• @creit-tech/stellar-wallets-kit v2.1.0
• pnpm

---

Summary by cubic

Adds a React + TypeScript Testnet frontend with @creit-tech/stellar-wallets-kit for wallet connect and signing so users can send payments, swap assets, and manage liquidity without secret keys. Improves swap safety with stricter slippage limits, input validation, and more reliable route checks.

• New Features

  • Vite + React 18 app under frontend/.
  • Wallet connect via @creit-tech/stellar-wallets-kit (header button, global state, Testnet only).
  • Payments: XLM and issued assets with explorer links on success.
  • DEX swaps: strict-send/receive quotes, route preview/selection, slippage control, execution.
  • Liquidity pools: view reserves, deposit, withdraw using a default Testnet Soroban contract.
  • All transactions signed by the connected wallet.

• Bug Fixes

  • Truncate long addresses in the header.
  • Validate slippage input and enforce a 0–10000 bps cap; align input max with the runtime bound; prevent NaN/invalid values.
  • Persist and highlight the selected route; detect stale/mismatched routes with numeric comparison and block swaps.
  • Pre-validate amounts and inputs; clearer errors and disabled states.

^{Written for commit 6381db0. Summary will update on new commits.}

[murat48]

[cubic-dev-ai]

4 issues found across 16 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/style.css">

<violation number="1" location="frontend/src/style.css:407">
P2: Long wallet addresses may overflow in the flex address bar because the truncating element lacks `min-width: 0`/flex sizing, preventing reliable ellipsis behavior.</violation>
</file>

<file name="frontend/src/components/SwapPanel.tsx">

<violation number="1" location="frontend/src/components/SwapPanel.tsx:101">
P2: Route selection in the UI is not honored during swap execution; swap always uses internally re-quoted first route.</violation>

<violation number="2" location="frontend/src/components/SwapPanel.tsx:109">
P2: Unvalidated `parseInt` on slippage can pass `NaN` into swap execution, leading to invalid transaction parameters and runtime failure.</violation>
</file>

<file name="frontend/src/lib/stellar.ts">

<violation number="1" location="frontend/src/lib/stellar.ts:60">
P1: Soroban `sendTransaction` response is not validated; code returns hash before confirming final transaction success.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

3 issues found across 3 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/SwapPanel.tsx">

<violation number="1" location="frontend/src/components/SwapPanel.tsx:99">
P2: Slippage validation omits the declared upper bound, allowing out-of-range values to be used in swap execution.</violation>
</file>

<file name="frontend/src/lib/stellar.ts">

<violation number="1" location="frontend/src/lib/stellar.ts:137">
P2: Providing `route` bypasses required-amount validation, but swap construction still uses non-null asserted `sendAmount`/`destAmount`, allowing runtime undefined values.</violation>

<violation number="2" location="frontend/src/lib/stellar.ts:138">
P2: `executeSwap` trusts caller-provided `route` without validating it against current swap inputs, allowing stale route data to drive path/slippage bounds and causing incorrect execution constraints.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

2 issues found across 2 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/SwapPanel.tsx">

<violation number="1" location="frontend/src/components/SwapPanel.tsx:99">
P2: Slippage constraints are inconsistent: runtime allows up to 10000 bps while the input field still declares max 5000.</violation>
</file>

<file name="frontend/src/lib/stellar.ts">

<violation number="1" location="frontend/src/lib/stellar.ts:149">
P2: Route reuse validation is incomplete: it only compares one amount string and can accept stale routes from changed inputs or reject equivalent amounts due to formatting.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[daiwikmh]

ci checks failing

[daiwikmh]

ci checks fail