feat: update pull to refresh functionality on wallet and home tabs (#…

…6255)

### Description

As the title:
1. on the Wallet tab, pull to refresh refreshes balances. the loader is
also displayed for any background refreshes.
2. on the Home tab, pull to refresh refreshes only the transaction
items. the loader is not displayed for background refreshes.

### Test plan



https://github.com/user-attachments/assets/b0a56779-e02c-4f2f-b5e9-08b2bd6dfd9a



### Related issues

- Fixes RET-1254

### Backwards compatibility

Y

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [ ] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/tokens/AssetList.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
+  RefreshControl,
   SectionList,
   SectionListData,
   SectionListProps,
@@ -11,10 +12,12 @@ import {
   View,
 } from 'react-native'
 import Animated from 'react-native-reanimated'
-import { AssetsEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { AssetsEvents } from 'src/analytics/Events'
 import { hideWalletBalancesSelector } from 'src/app/selectors'
 import Touchable from 'src/components/Touchable'
+import { refreshAllBalances } from 'src/home/actions'
+import { balancesLoadingSelector } from 'src/home/selectors'
 import CircledIcon from 'src/icons/CircledIcon'
 import ImageErrorIcon from 'src/icons/ImageErrorIcon'
 import Add from 'src/icons/quick-actions/Add'
@@ -96,6 +99,7 @@ export default function AssetList({
   )
 
   const hideWalletBalances = useSelector(hideWalletBalancesSelector)
+  const isRefreshingBalances = useSelector(balancesLoadingSelector)
 
   const positions = useSelector(positionsWithBalanceSelector)
   const positionSections = useMemo(() => {
@@ -130,6 +134,10 @@ export default function AssetList({
     dispatch(fetchNfts())
   }, [])
 
+  const onRefresh = () => {
+    dispatch(refreshAllBalances())
+  }
+
   const sections =
     activeTab === AssetTabType.Tokens
       ? [{ data: tokens }]
@@ -275,6 +283,13 @@ export default function AssetList({
           nfts.length > 0 &&
           styles.nftsContentContainer,
       ]}
+      refreshControl={
+        <RefreshControl
+          refreshing={isRefreshingBalances}
+          onRefresh={onRefresh}
+          colors={[Colors.accent]}
+        />
+      }
       // ensure header is above the scrollbar on ios overscroll
       scrollIndicatorInsets={{ top: listHeaderHeight }}
       // @ts-ignore can't get the SectionList to accept a union type :(

src/transactions/feed/TransactionFeedV2.tsx

@@ -15,11 +15,9 @@ import { SwapEvents } from 'src/analytics/Events'
 import { NotificationVariant } from 'src/components/InLineNotification'
 import SectionHead from 'src/components/SectionHead'
 import Toast from 'src/components/Toast'
-import { refreshAllBalances } from 'src/home/actions'
 import ActionsCarousel from 'src/home/ActionsCarousel'
 import GetStarted from 'src/home/GetStarted'
 import NotificationBox from 'src/home/NotificationBox'
-import { balancesLoadingSelector } from 'src/home/selectors'
 import { getLocalCurrencyCode } from 'src/localCurrency/selectors'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { store } from 'src/redux/store'
@@ -314,7 +312,6 @@ export default function TransactionFeedV2() {
   const allowedNetworkForTransfers = useAllowedNetworksForTransfers()
   const address = useSelector(walletAddressSelector)
   const localCurrencyCode = useSelector(getLocalCurrencyCode)
-  const isRefreshingBalances = useSelector(balancesLoadingSelector)
   const standByTransactions = useSelector(formattedStandByTransactionsSelector)
   const feedFirstPage = useSelector(feedFirstPageSelector)
   const { hasNewlyCompletedTransactions, newlyCompletedCrossChainSwaps } =
@@ -323,7 +320,7 @@ export default function TransactionFeedV2() {
   const [paginatedData, setPaginatedData] = useState<PaginatedData>({
     [FIRST_PAGE_CURSOR]: feedFirstPage,
   })
-  const [showError, setShowError] = useState(false)
+  const [status, setStatus] = useState<'loading' | 'error' | 'idle'>('loading')
   const [allTransactionsShown, setAllTransactionsShown] = useState(false)
 
   const { data, isFetching, error, refetch } = useTransactionFeedV2Query(
@@ -342,6 +339,19 @@ export default function TransactionFeedV2() {
     { skip: !address, pollingInterval: POLL_INTERVAL_MS }
   )
 
+  useEffect(
+    // The status state variable is set to loading when a fetch is triggered on
+    // component mount and on pull to refresh, which allows us to hide the
+    // refresh spinner on background poll / fetch more pages. This effect will
+    // dismiss the loader by resetting this variable.
+    function dismissLoading() {
+      if (!isFetching) {
+        setStatus('idle')
+      }
+    },
+    [isFetching]
+  )
+
   /**
    * There are only 2 scenarios when we actually update the paginated data:
    *
@@ -409,7 +419,7 @@ export default function TransactionFeedV2() {
       // scroll actions for loading additional pages and the initial wallet load
       // if no cached transactions exist.
       if (('hasAfterCursor' in error && error.hasAfterCursor) || feedFirstPage.length === 0) {
-        setShowError(true)
+        setStatus('error')
       }
     },
     [error, feedFirstPage]
@@ -479,14 +489,10 @@ export default function TransactionFeedV2() {
     // refetch the transaction feed with the last known cursor, since this
     // toast should only be displayed on error fetching next page or initial
     // page if no transactions have been fetched before.
-    setShowError(false)
+    setStatus('loading')
     return refetch()
   }
 
-  const onRefresh = () => {
-    dispatch(refreshAllBalances())
-  }
-
   return (
     <>
       <SectionList
@@ -499,13 +505,11 @@ export default function TransactionFeedV2() {
         scrollEventThrottle={16}
         refreshControl={
           <RefreshControl
-            refreshing={isRefreshingBalances}
-            onRefresh={onRefresh}
+            refreshing={status === 'loading'}
+            onRefresh={handleRetryFetch}
             colors={[colors.accent]}
           />
         }
-        onRefresh={onRefresh}
-        refreshing={isRefreshingBalances}
         onEndReached={fetchMoreTransactions}
         initialNumToRender={20}
         ListHeaderComponent={
@@ -534,13 +538,15 @@ export default function TransactionFeedV2() {
         }
       />
       <Toast
-        showToast={showError}
+        showToast={status === 'error'}
         variant={NotificationVariant.Error}
         description={t('transactionFeed.error.fetchError')}
         ctaLabel={t('transactionFeed.fetchErrorRetry')}
         onPressCta={handleRetryFetch}
         swipeable
-        onDismiss={() => setShowError(false)}
+        onDismiss={() => {
+          setStatus('idle')
+        }}
       />
     </>
   )