refactor assets screen

ava-labs · Feb 13, 2025 · f473c66 · f473c66
1 parent 0beb4f1
commit f473c66
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 96 deletions.
diff --git a/packages/core-mobile/app/new/features/portfolio/components/assets/TokensList.tsx b/packages/core-mobile/app/new/features/portfolio/components/assets/TokensList.tsx
diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/assets.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/assets.tsx
@@ -1,20 +1,34 @@
 import React from 'react'
-import { EmptyAssets } from 'features/portfolio/components/assets/EmptyAssets'
-import { useSelector } from 'react-redux'
 import {
+  LocalTokenWithBalance,
   selectIsLoadingBalances,
   selectIsRefetchingBalances,
   selectNonNFTTokensWithBalanceForAccount
 } from 'store/balance'
+import { View } from '@avalabs/k2-alpine'
+import { Space } from 'components/Space'
+import Animated, { LinearTransition } from 'react-native-reanimated'
 import { selectActiveAccount } from 'store/account'
-import { RootState } from 'store'
-import { TokensList } from 'features/portfolio/components/assets/TokensList'
-import { ErrorState } from 'features/portfolio/components/assets/ErrorState'
 import { useSearchableTokenList } from 'screens/portfolio/useSearchableTokenList'
-import { LoadingState } from 'features/portfolio/components/assets/LoadingState'
+import { useSelector } from 'react-redux'
 import { useIsOnline } from 'common/hooks/useIsOnline'
+import { RootState } from 'store'
+import { ListFilterHeader } from '../../../../features/portfolio/components/ListFilterHeader'
+import { TokenListItem } from '../../../../features/portfolio/components/assets/TokenListItem'
+import { useFilterAndSort } from '../../../../features/portfolio/components/assets/useFilterAndSort'
+import { ActionButton as TSquareButton } from '../../../../features/portfolio/components/assets/types'
+import {
+  ACTION_BUTTONS,
+  AssetManageView
+} from '../../../../features/portfolio/components/assets/consts'
+import { ActionButton } from '../../../../features/portfolio/components/assets/ActionButton'
+import { LoadingState } from '../../../../features/portfolio/components/assets/LoadingState'
+import { ErrorState } from '../../../../features/portfolio/components/assets/ErrorState'
+import { EmptyAssets } from '../../../../features/portfolio/components/assets/EmptyAssets'
+
+export const PortfolioScreen = (): React.JSX.Element => {
+  const { data, filter, sort, view } = useFilterAndSort()
 
-const PortfolioAssetsScreen = (): JSX.Element | undefined => {
   const { refetch } = useSearchableTokenList()
   const isOnline = useIsOnline()
   const activeAccount = useSelector(selectActiveAccount)
@@ -25,7 +39,41 @@ const PortfolioAssetsScreen = (): JSX.Element | undefined => {
   const isBalanceLoading = useSelector(selectIsLoadingBalances)
   const isRefetchingBalance = useSelector(selectIsRefetchingBalances)
 
+  const goToTokenDetail = (): void => {
+    // TODO: go to token detail
+  }
+
+  const isGridView =
+    view.data[0]?.[view.selected.row] === AssetManageView.Hightlights
+
+  const renderItem = (
+    token: LocalTokenWithBalance,
+    index: number,
+    gridView: boolean
+  ): React.JSX.Element => {
+    return (
+      <TokenListItem
+        token={token}
+        index={index}
+        onPress={goToTokenDetail}
+        isGridView={gridView}
+      />
+    )
+  }
+
+  const renderActionItem = (
+    item: TSquareButton,
+    index: number
+  ): React.JSX.Element => {
+    return <ActionButton item={item} index={index} key={index} />
+  }
+
+  const renderSeparator = (): React.JSX.Element => {
+    return <Space y={isGridView ? 16 : 10} />
+  }
+
   const renderContent = (): React.JSX.Element => {
+    return <ErrorState onPress={refetch} />
     if (isBalanceLoading || isRefetchingBalance) {
       return <LoadingState />
     }
@@ -37,10 +85,49 @@ const PortfolioAssetsScreen = (): JSX.Element | undefined => {
     if (tokens.length === 0) {
       return <EmptyAssets />
     }
-    return <TokensList />
+    return (
+      <>
+        <ListFilterHeader filter={filter} sort={sort} view={view} />
+        <Animated.FlatList
+          scrollEventThrottle={16}
+          data={data}
+          numColumns={isGridView ? 2 : 1}
+          renderItem={item =>
+            renderItem(
+              item.item as LocalTokenWithBalance,
+              item.index,
+              isGridView
+            )
+          }
+          ItemSeparatorComponent={renderSeparator}
+          showsVerticalScrollIndicator={false}
+          key={isGridView ? 'grid' : 'list'}
+          keyExtractor={item => (item as LocalTokenWithBalance).localId}
+          columnWrapperStyle={
+            isGridView && {
+              justifyContent: 'space-between',
+              gap: 16
+            }
+          }
+        />
+      </>
+    )
   }
 
-  return renderContent()
+  return (
+    <View sx={{ marginTop: 30 }}>
+      <Animated.FlatList
+        style={{ marginHorizontal: -16 }}
+        contentContainerStyle={{ gap: 10, paddingHorizontal: 16 }}
+        horizontal
+        scrollEventThrottle={16}
+        data={ACTION_BUTTONS}
+        renderItem={item => renderActionItem(item.item, item.index)}
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(_, index) => index.toString()}
+        itemLayoutAnimation={LinearTransition.springify()}
+      />
+      {renderContent()}
+    </View>
+  )
 }
-
-export default PortfolioAssetsScreen
diff --git a/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/index.tsx b/packages/core-mobile/app/new/routes/(signedIn)/(tabs)/portfolio/index.tsx
@@ -27,7 +27,7 @@ import { UNKNOWN_AMOUNT } from 'consts/amount'
 import { RootState } from 'store'
 import { useWatchlist } from 'hooks/watchlist/useWatchlist'
 import PortfolioDefiScreen from './defi'
-import PortfolioAssetsScreen from './assets'
+import { PortfolioScreen } from './assets'
 import PortfolioCollectiblesScreen from './collectibles'
 
 const PortfolioHomeScreen = (): JSX.Element => {
@@ -129,7 +129,7 @@ const PortfolioHomeScreen = (): JSX.Element => {
     } else if (selectedSegmentIndex === 1) {
       return <PortfolioDefiScreen />
     }
-    return <PortfolioAssetsScreen />
+    return <PortfolioScreen />
   }
 
   return (