feat: add pull down to refresh portfolio and tx history data

[NeOMakinG]

Description

Adds a component wrapping all other the app, that allow users to pull down the app to refresh the portfolio and tx history data

Issue (if applicable)

closes #11107

Risk

Low

High Risk PRs Require 2 approvals

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

Testing

• Connect any account using the mobile app (you can deploy this branch on an env if you dont want to use expo)
• Pull down, notice you see a (ugly component?) showing the system
• You can try to send TRX or MON to an activated secondary account, notice you dont see the balance of this account
• Pull down and refresh
• The balance is updated

Engineering

Operations

• [ ] :checkered_flag: My feature is behind a flag and doesn't require operations testing (yet)

Screenshots (if applicable)

https://jam.dev/c/0a0da730-c8a8-45a0-ae7a-82426e853f0e

Summary by CodeRabbit

• New Features

  • Added pull-to-refresh functionality on mobile devices. Users can now swipe down to refresh account information and transaction history, with visual feedback and status messages during the refresh process.

• Style

  • Adjusted loading indicator display for improved consistency across portfolio views.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

This pull request introduces a mobile-specific pull-to-refresh feature allowing users to drag down from the top to reload account balances, portfolio data, and transaction history. Two new reusable components (PullToRefreshWrapper and PullToRefreshList) are created and integrated into multiple pages. A new npm dependency (use-pull-to-refresh) is added. Portfolio, AssetAccounts, and TransactionHistoryContent components are updated with mobile-aware rendering and refresh handlers.

Changes

Cohort / File(s)	Summary
New Pull-to-Refresh Components src/components/PullToRefresh/PullToRefreshWrapper.tsx, src/components/PullToRefresh/PullToRefreshList.tsx	Introduces two reusable React components for pull-to-refresh UI. PullToRefreshWrapper provides the drag area and state management; PullToRefreshList wraps scrollable content with indicator, progress bar, and translated status text. Both leverage Framer Motion for animations and sync with multiple query states to display loading feedback.
Mobile Integration into Pages src/pages/Dashboard/Portfolio.tsx, src/components/AssetAccounts/AssetAccounts.tsx, src/components/TransactionHistory/TransactionHistoryContent.tsx	Adds mobile detection via media query breakpoints and conditionally wraps content in PullToRefreshList on small screens. Each component introduces a handleRefresh callback that resets API state, re-initiates account fetches, and conditionally refetches transaction history based on LazyTxHistory feature flag. Tracks fetch state across multiple queries to compute isRefreshing.
Dependencies & Translations package.json, src/assets/translations/en/main.json	Adds "use-pull-to-refresh" npm dependency. Introduces new translation group with three keys (pullToRefresh, releaseToRefresh, refreshing) for UI text.
UI Polish src/pages/Dashboard/components/AccountTableSkeleton.tsx	Reduces skeleton row count from 5 to 4.

Sequence Diagram

sequenceDiagram
    actor User
    participant Mobile as Mobile UI<br/>(PullToRefreshList)
    participant GestureDetector as Gesture Detector<br/>(use-pull-to-refresh)
    participant StateManager as State Manager<br/>(hooks)
    participant API as API Layer<br/>(Redux queries)
    participant Renderer as Visual Feedback<br/>(Icon/Spinner)

    User->>GestureDetector: Pull down gesture
    GestureDetector->>StateManager: Update pullProgress (y position)
    StateManager->>Renderer: Render pull indicator<br/>with opacity based on progress
    
    alt Dragged Beyond Threshold (>200px)
        GestureDetector->>StateManager: Trigger onRefresh
        StateManager->>StateManager: Set isRefreshing = true
        StateManager->>Renderer: Show spinner,<br/>display "refreshing" text
        
        par Parallel API Calls
            StateManager->>API: Reset portfolio state
            StateManager->>API: Reset tx history state
            StateManager->>API: Refetch getAccount (all accounts)
            StateManager->>API: Conditionally refetch<br/>getAllTxHistory<br/>(if LazyTxHistory disabled)
        and
            API-->>StateManager: Fetch responses received
        end
        
        StateManager->>StateManager: Set isRefreshing = false
        StateManager->>Renderer: Show refresh icon,<br/>display "pull to refresh" text
        Renderer->>User: Content updated with fresh data
    else Drag Distance < Threshold
        GestureDetector->>StateManager: Reset animation (y → 0)
        StateManager->>Renderer: Collapse indicator
        Renderer->>User: Return to default state
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Areas requiring extra attention:

• TransactionHistoryContent.tsx: Contains complex fetch state coordination across multiple queries and additional selector logic; validate that refresh flow correctly handles enabled/disabled accounts
• Pull-to-refresh threshold logic: Verify the 200px threshold behavior is consistent across components and matches UX requirements from issue #11107
• Feature flag interaction: Ensure LazyTxHistory flag correctly gates transaction history refetches in all three integrated components (Portfolio, AssetAccounts, TransactionHistoryContent)
• Mobile breakpoint consistency: Confirm all three pages use the same breakpoint definition for mobile detection

Possibly related PRs

• shapeshift/web#10708: Modifies Portfolio.tsx CardBody padding on mobile; may have overlapping mobile rendering changes
• shapeshift/web#10923: Modifies Portfolio.tsx component rendering and mobile behavior; directly touches the same component being enhanced

Suggested reviewers

• premiumjibles
• gomesalexandre

Poem

🐰 A hop and a pull, down from the top,
Fresh data flows, the balances don't stop,
Swipe and refresh on mobile so neat,
Transactions incoming, your wallet's complete! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	All changes are scoped to pull-to-refresh feature implementation. Only minor unrelated change: AccountTableSkeleton row count reduction from 5 to 4.	Remove or document the AccountTableSkeleton row count change (5→4), which appears unrelated to pull-to-refresh feature requirements.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding pull-to-refresh functionality for portfolio and transaction history data on mobile.
Linked Issues check	✅ Passed	Code changes fully implement #11107 requirements: pull-to-refresh on mobile home and tx history screens with balance/price refresh and inbound transaction detection.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch pull-down-refresh-accounts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[NeOMakinG]

Holding on that for now as it's not 100% a priority plus it needs a bigger lift