Skip to content

[Performance] TransactionHistory fetches Stellar payments on every render with no cache or request deduplication #126

Description

@cybermax4200

Why this matters now

TransactionHistory is rendered inside WalletScreen, which itself remounts on every tab switch. Each mount issues a getPayments() call to the Horizon API with no check for a cached result. On a slow 3G connection (the target environment) this produces visible layout flicker, unnecessary data usage, and redundant Horizon load. With multiple Horizon requests in-flight from other wallet balance calls, this compounds the existing sequential fetch problem.

Problem / What

src/components/TransactionHistory.tsx fetches on every render:

useEffect(() => {
  void load();
}, [publicKey]);   // fires on every WalletScreen mount

There is no local cache, no staleness check, and no deduplication. getPayments is a pure Horizon API call with no memoization. The component holds payments purely in useState, so nothing survives a remount.

The fix should cache payments in walletStore (which is already MMKV-persisted) alongside a paymentsLastFetchedAt timestamp, and skip the Horizon call when the cache is fresh (< 60 s).

Key Challenges

  • walletStore must gain payments, paymentsLastFetchedAt, and setter actions without breaking existing partialize behavior (once Issue 7 is resolved, or in coordination with it).
  • The 60-second TTL should be a named constant and tested.
  • The cache must be invalidated after a sendTokens success (so a freshly sent payment appears immediately).
  • TransactionHistory.tsx should expose a refresh affordance so the user can manually bust the cache.

Acceptance Criteria

  • TransactionHistory reads from walletStore instead of fetching on every mount.
  • A Horizon fetch is only issued when the cache is absent or older than PAYMENTS_CACHE_TTL_MS (default 60 s).
  • SendTokensScreen calls a refreshPayments action after a successful submission.
  • Tests: (a) no second Horizon call within TTL, (b) cache busted after sendTokens, (c) manual refresh triggers a fresh call.

Relevant files / functions

  • src/components/TransactionHistory.tsx
  • src/store/walletStore.ts — add payments, paymentsLastFetchedAt, setPayments
  • src/screens/SendTokensScreen.tsx — call refreshPayments on success
  • src/services/stellar.tsgetPayments

Out of scope

  • Pagination of the payments list (the current limit=10 default is acceptable for now).
  • Real-time streaming via Horizon SSE.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions