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

package.json

@@ -210,6 +210,7 @@
     "styled-components": "^6.0.7",
     "tronweb": "6.1.0",
     "use-long-press": "^3.3.0",
+    "use-pull-to-refresh": "^2.4.1",
     "uuid": "^9.0.0",
     "vaul": "^1.1.2",
     "viem": "2.40.3",

src/assets/translations/en/main.json

@@ -2639,5 +2639,10 @@
         "description": "Your reward of %{amountAndSymbol} is complete."
       }
     }
+  },
+  "pullToRefresh": {
+    "pullToRefresh": "Pull to refresh",
+    "releaseToRefresh": "Release to refresh",
+    "refreshing": "Refreshing..."
   }
 }

src/components/AssetAccounts/AssetAccounts.tsx

@@ -1,12 +1,20 @@
-import { Card, CardBody, CardHeader, Grid, Heading, Stack } from '@chakra-ui/react'
+import { Card, CardBody, CardHeader, Grid, Heading, Stack, useMediaQuery } from '@chakra-ui/react'
 import type { AccountId, AssetId } from '@shapeshiftoss/caip'
+import { useIsFetching } from '@tanstack/react-query'
+import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
 
 import { AssetAccountRow } from './AssetAccountRow'
 
+import { PullToRefreshList } from '@/components/PullToRefresh/PullToRefreshList'
 import { Text } from '@/components/Text'
+import { useFeatureFlag } from '@/hooks/useFeatureFlag/useFeatureFlag'
+import { portfolioApi } from '@/state/slices/portfolioSlice/portfolioSlice'
+import { selectIsAnyPortfolioGetAccountLoading } from '@/state/slices/portfolioSlice/selectors'
 import { selectAccountIdsByAssetIdAboveBalanceThreshold } from '@/state/slices/selectors'
-import { useAppSelector } from '@/state/store'
+import { txHistoryApi } from '@/state/slices/txHistorySlice/txHistorySlice'
+import { useAppDispatch, useAppSelector } from '@/state/store'
+import { breakpoints } from '@/theme/theme'
 
 type AssetAccountsProps = {
   assetId: AssetId
@@ -24,11 +32,45 @@
 
 export const AssetAccounts = ({ assetId, accountId }: AssetAccountsProps) => {
   const translate = useTranslate()
+  const [isMobile] = useMediaQuery(`(max-width: ${breakpoints['md']})`, { ssr: false })
+  const dispatch = useAppDispatch()
+  const isLazyTxHistoryEnabled = useFeatureFlag('LazyTxHistory')
+
+  const getAccountFetching = useIsFetching({ queryKey: ['getAccount'] })
+  const portalsAccountFetching = useIsFetching({ queryKey: ['portalsAccount'] })
+  const portalsPlatformsFetching = useIsFetching({ queryKey: ['portalsPlatforms'] })
+  const isPortfolioLoading = useAppSelector(selectIsAnyPortfolioGetAccountLoading)
+
+  const isRefreshing =
+    getAccountFetching > 0 ||
+    portalsAccountFetching > 0 ||
+    portalsPlatformsFetching > 0 ||
+    isPortfolioLoading
+
   const accountIds = useAppSelector(state =>
     selectAccountIdsByAssetIdAboveBalanceThreshold(state, { assetId }),
   )
+
+  const handleRefresh = useCallback(async () => {
+    dispatch(portfolioApi.util.resetApiState())
+    dispatch(txHistoryApi.util.resetApiState())
+
+    const { getAllTxHistory } = txHistoryApi.endpoints
+
+    accountIds.forEach(accountId => {
+      dispatch(portfolioApi.endpoints.getAccount.initiate({ accountId, upsertOnFetch: true }))
+    })
+
+    if (isLazyTxHistoryEnabled) return
+
+    accountIds.forEach(requestedAccountId => {
+      dispatch(getAllTxHistory.initiate(requestedAccountId))
+    })
+  }, [dispatch, accountIds, isLazyTxHistoryEnabled])
+
   if ((accountIds && accountIds.length === 0) || accountId) return null
-  return (
+
+  const content = (
     <Card>
       <CardHeader>
         <Heading as='h5'>{translate('assets.assetDetails.assetAccounts.assetAllocation')}</Heading>
@@ -74,4 +116,14 @@
       </CardBody>
     </Card>
   )
+
+  if (!isMobile) {
+    return content
+  }
+
+  return (
+    <PullToRefreshList onRefresh={handleRefresh} isRefreshing={isRefreshing}>
+      {content}
+    </PullToRefreshList>
+  )
 }

src/components/PullToRefresh/PullToRefreshList.tsx

@@ -0,0 +1,124 @@
+import {
+  Box,
+  Flex,
+  Progress,
+  Spinner,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { FiRefreshCw } from 'react-icons/fi'
+import { useTranslate } from 'react-polyglot'
+import { usePullToRefresh } from 'use-pull-to-refresh'
+
+type PullToRefreshListProps = {
+  children: ReactNode
+  onRefresh: () => void | Promise<void>
+  isRefreshing?: boolean
+}
+
+export const PullToRefreshList: React.FC<PullToRefreshListProps> = ({
+  children,
+  onRefresh,
+  isRefreshing = false,
+}) => {
+  const translate = useTranslate()
+  const progressColor = useColorModeValue('blue.500', 'blue.400')
+  const textColor = useColorModeValue('gray.700', 'gray.200')
+
+  const { isRefreshing: isPulling, pullPosition } = usePullToRefresh({
+    onRefresh,
+    maximumPullLength: 150,
+    refreshThreshold: 100,
+  })
+
+  const pullProgress = useMemo(() => {
+    return Math.min(pullPosition / 100, 1)
+  }, [pullPosition])
+
+  const indicatorOpacity = useMemo(() => {
+    return Math.min(pullPosition / 40, 1)
+  }, [pullPosition])
+
+  const displayText = useMemo(() => {
+    if (isRefreshing) return translate('pullToRefresh.refreshing')
+    if (pullProgress >= 1) return translate('pullToRefresh.releaseToRefresh')
+    if (pullProgress > 0.2) return translate('pullToRefresh.pullToRefresh')
+    return ''
+  }, [isRefreshing, pullProgress, translate])
+
+  const iconRotation = useMemo(() => {
+    return isRefreshing ? 0 : pullProgress * 360
+  }, [isRefreshing, pullProgress])
+
+  const showIndicator = pullPosition > 0 || isRefreshing
+
+  return (
+    <Box position='relative' height='100%' overflow='auto'>
+      {/* Pull indicator */}
+      {showIndicator && (
+        <Box
+          position='absolute'
+          top={0}
+          left={0}
+          right={0}
+          height='90px'
+          display='flex'
+          alignItems='center'
+          justifyContent='center'
+          pointerEvents='none'
+          opacity={indicatorOpacity}
+          transform={`translateY(${Math.min(pullPosition - 90, 0)}px)`}
+          transition='opacity 0.2s ease-out'
+          zIndex={10}
+        >
+          <Flex direction='column' align='center' justify='center' gap={2}>
+            <Box>
+              {isRefreshing ? (
+                <Spinner size='sm' color={progressColor} thickness='2px' speed='0.8s' />
+              ) : (
+                <Box
+                  as={FiRefreshCw}
+                  fontSize='24px'
+                  color={progressColor}
+                  transform={`rotate(${iconRotation}deg)`}
+                  transition='transform 0.1s ease-out'
+                />
+              )}
+            </Box>
+
+            <Box
+              width='100%'
+              maxWidth='180px'
+              height='3px'
+              bg='whiteAlpha.200'
+              borderRadius='full'
+            >
+              {!isRefreshing && (
+                <Box
+                  height='100%'
+                  bg={progressColor}
+                  borderRadius='full'
+                  width={`${pullProgress * 100}%`}
+                  transition='width 0.1s ease-out'
+                  boxShadow={pullProgress >= 1 ? `0 0 8px ${progressColor}` : 'none'}
+                />
+              )}
+              {isRefreshing && <Progress isIndeterminate={true} size='xs' colorScheme='blue' />}
+            </Box>
+
+            {displayText && (
+              <Text fontSize='xs' fontWeight='medium' color={textColor}>
+                {displayText}
+              </Text>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {/* Content with dynamic padding to reveal indicator */}
+      <Box paddingTop={showIndicator ? `${Math.min(pullPosition, 90)}px` : 0}>{children}</Box>
+    </Box>
+  )
+}