core: build unified transaction service for build-sign-submit-poll

[EmeditWeb]

Problem

Transaction signing is duplicated and stubbed across the app instead of
living in one service. Vouch.tsx signs a fake placeholder XDR (#55),
Vouch.handleDecline simulates the call with setTimeout (#66), and sponsor
onboarding step 4 has no real deposit flow (#56). Every feature reinvents —
and fakes — the build → sign → submit → poll sequence, so no real contract
transaction is ever completed from the web app.

Before Starting

Read ALL of these before writing any code:

• context/architecture-context.md
• context/code-standards.md

What To Build

A single transaction service that owns the full lifecycle behind a wallet
adapter:

1. Request the unsigned XDR from the API services layer (never build
   contract calls in components).
2. Sign via a pluggable wallet adapter (Freighter / Albedo /
   StellarWalletsKit) resolved from wallet.store.
3. Submit and poll transaction status to resolution, returning a typed
   result with discriminated error states (rejected, expired, failed,
   insufficient funds).
4. Surface a shared useTransaction hook driving pending / signing /
   submitted / confirmed / error UI, and replace the fake flows in Vouch and
   Sponsors with it.

Files To Touch

• src/services/transaction.service.ts (new)
• src/hooks/useTransaction.ts (extend existing)
• src/stores/wallet.store.ts
• src/pages/Vouch.tsx, src/pages/Sponsors.tsx (replace stubs)

Acceptance Criteria

• One service owns build → sign → submit → poll for all features
• Wallet adapter is pluggable (at least Freighter) via wallet.store
• Typed result with explicit rejected/expired/failed states
• Vouch and Sponsors use the real flow; no setTimeout or fake XDR remain
• Loading, error, and empty states handled; no API calls in page files
• Unit tests cover success, rejection, and timeout paths

Mandatory Checks Before Opening PR

• All context/ files read and understood
• npm run lint passes with zero errors
• npm run build passes with zero errors
• npm test passes — test count not decreased
• No hardcoded hex colors; icons from lucide-react only
• No API calls in page files
• Tested on 375px mobile viewport
• PR references this issue number

[Lanhubs]

I can take ownership of this issue. Consolidating fragmented transaction logic into a unified, predictable service layer and replacing fake UX flows with production-ready Stellar wallet interactions maps perfectly to my full-stack architecture workflow.

Proposed Implementation Strategy
Centralized Transaction Service: I will design src/services/transaction.service.ts to manage the end-to-end blockchain lifecycle: fetching unsigned XDR structures from your API layout, passing them through the active wallet adapter (Freighter, Albedo, or StellarWalletsKit) sourced dynamically from wallet.store.ts, submitting the signed transaction, and polling the Horizon endpoint until resolution.

Discriminated Error Handlers: The service will output a strictly typed response envelope containing explicit, strongly typed states to let components handle rejected, expired, failed, or insufficient_funds errors deterministically.

Stateful Hook & Component Refactoring: I will implement or extend useTransaction.ts to expose pending, signing, submitted, confirmed, and error states. I will clean up Vouch.tsx and Sponsors.tsx, completely replacing the legacy setTimeout simulations and hardcoded placeholder XDR tokens with this unified hook execution pattern.

Testing & Guardrails: I will write targeted unit test setups using mocked wallet adapter providers to simulate deterministic success paths, user rejections, and network time-out exceptions. I'll verify the mobile layout configuration on a 375px viewport and confirm that npm run lint and npm run build finish with zero compiler errors.

[ebubeb683-ship-it]

I have experience using React, I have looked through the project’s code, and I can submit a Pull Request (PR) with the fix within 2 days.