Add pull-to-refresh on AccountDashboardPage for mobile

[Mystery-CLI]

Background

Mobile users of FuTuRe frequently check their account dashboard to view current balance and recent transaction history. On mobile devices, the intuitive gesture to refresh content is a pull-to-refresh interaction — dragging the page downward from the top to trigger a fresh data fetch. This interaction pattern is ubiquitous in native mobile apps (banking apps, social apps, email clients) and is expected by users as a fundamental UX primitive. Currently, AccountDashboardPage.jsx provides no way to trigger a manual refresh on mobile other than reloading the entire page.

Problem

The absence of pull-to-refresh on AccountDashboardPage creates several friction points:

• No obvious refresh mechanism on mobile. Users who want to verify their latest balance or see if a pending transaction has completed have no mobile-native way to trigger a refresh. The browser's pull-to-refresh (which reloads the entire page) is inconsistent with app-like behaviour and loses any in-memory state.
• Stale data display. The dashboard polls for balance updates on a timer, but the interval may leave data stale in the moments a user most wants fresh data — after receiving a payment or completing a transfer.
• Inconsistency with mobile app conventions. Every banking and fintech application on iOS and Android supports pull-to-refresh on account dashboards. Its absence signals a lack of mobile polish.
• No user feedback during refresh. Even if a refresh could be triggered, there is no loading indicator calibrated for the pull gesture that communicates progress to the user.

Proposed Solution

Implement a pull-to-refresh gesture on AccountDashboardPage.jsx that re-fetches the account balance and recent transactions from Stellar Horizon when the user drags the page content downward past a threshold. The implementation should:

1. Use a touch-based gesture detection approach compatible with the existing React component structure. Libraries such as react-pull-to-refresh or a custom implementation using touch event listeners are acceptable.
2. Display a loading spinner or animated indicator during the pull gesture and subsequent fetch.
3. On successful refresh, update the balance and transaction list state with the new data.
4. Handle errors gracefully — if the Horizon fetch fails, show a brief toast notification and restore the previous data.
5. Prevent the pull-to-refresh from conflicting with normal vertical scrolling on pages where the dashboard content is taller than the viewport.
6. Respect the offline cache — if the device is offline, display the cached balance indicator rather than an error.

Implementation Steps

1. Evaluate pull-to-refresh library options for compatibility with the existing React version and Vite build setup.
2. Install the chosen library (or implement a custom gesture handler) and integrate it as a wrapper around the dashboard content area.
3. Wire the pull gesture to the existing balance and transaction fetch functions.
4. Implement the loading indicator compatible with the pull animation.
5. Add error handling and toast notification for failed refreshes.
6. Test on both iOS Safari and Android Chrome using real devices or BrowserStack.

Acceptance Criteria

• Pulling down on the dashboard page on a mobile browser triggers a balance and transaction refresh.
• A visible loading indicator appears during the pull gesture and fetch.
• A successful refresh updates the displayed balance and transaction list.
• A failed refresh shows a non-intrusive error notification and preserves the previous displayed data.
• The gesture does not interfere with normal downward scrolling when the user is mid-page.

Notes

Pull-to-refresh should be enabled only in a mobile context (touch devices). On desktop browsers, it should either be disabled or supplemented with a visible refresh button. The gesture threshold (how far down the user must drag) should follow platform conventions.