[Frontend] Global Pending Transaction Queue & Transaction Tracker Toast System

[blurbeast]

Overview & Background

Stellar / Soroban transactions take between 3 and 10 seconds to close in a ledger block. When a user creates a stream, withdraws tokens, cancels a stream, or pauses/resumes, they currently lack persistent feedback if they navigate between pages or close the active modal. A global transaction queue with floating status toasts is essential for clear web3 user experience.

---

Detailed Problem Statement

1. Lack of In-Flight Visibility:
   • Users who click away from a modal have no way of knowing whether their signed transaction succeeded or failed on-chain.
2. Lost Context on Page Refresh:
   • In-flight transaction state is lost if the user reloads or navigates the Next.js app.
3. No Direct Explorer Link:
   • Users are not provided a quick link to inspect their transaction hash on Stellar Expert.

---

Technical Specification & Architecture

1. Global Transaction Context (TransactionContext.tsx)

Maintain transaction state persisted in localStorage:

export interface TrackedTransaction {
  id: string;
  txHash?: string;
  type: 'CREATE_STREAM' | 'WITHDRAW' | 'TOP_UP' | 'CANCEL' | 'PAUSE' | 'RESUME';
  status: 'SUBMITTING' | 'PENDING' | 'SUCCESS' | 'FAILED';
  description: string;
  submittedAt: number;
  errorMessage?: string;
  explorerUrl?: string;
}

2. Persistent Floating Toast Component (TransactionTracker.tsx)

• Renders in the bottom-right corner of the application layout.
• Displays animated spinner during PENDING, green check on SUCCESS, and alert icon on FAILED.
• Clickable link: "View on Stellar Expert ↗".
• Dismissible with auto-hide after 8 seconds on success.

3. Transaction Polling Hook (useTransactionWatcher.ts)

• Periodically checks transaction confirmation status against Horizon / Soroban RPC until confirmed or timed out (60s).

---

Target Files

• frontend/src/context/TransactionContext.tsx
• frontend/src/components/TransactionTracker.tsx
• frontend/src/hooks/useTransactionWatcher.ts
• frontend/src/app/layout.tsx

---

Acceptance Criteria

• Triggering any on-chain transaction immediately registers an entry in the persistent queue.
• Toast displays live status updates through submission, pending, and final confirmation.
• Survives page navigation and reloads via local storage synchronization.
• Links directly to Stellar Expert testnet/mainnet explorer.

[Solvecraft000]

@Solvecraft000 has applied to work on this issue as part of the Stellar Wave Program's 9th wave.

Hi maintainer, please I'd love to work on this issue, I'm a full-stack developer with years of experience. ETA 6hrs.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Solvecraft000 to this issue.

[Wilfred007]

@Wilfred007 has applied to work on this issue as part of the Stellar Wave Program's 9th wave.

Can I work on this task?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Wilfred007 to this issue.

[drips-wave]

Congratulations, @Wilfred007! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on September 30, 2026.

🧑‍💻 @Wilfred007: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @Wilfred007 as part of the Stellar Wave Program's 9th Wave 🥳

😎 @Wilfred007: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.