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 deleted file mode 100644 index 3d1195c591..0000000000 --- a/packages/core-mobile/app/new/features/portfolio/components/assets/TokensList.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react' -import { LocalTokenWithBalance } from 'store/balance' -import { View } from '@avalabs/k2-alpine' -import { Space } from 'components/Space' -import Animated, { LinearTransition } from 'react-native-reanimated' -import { ListFilterHeader } from '../ListFilterHeader' -import { TokenListItem } from './TokenListItem' -import { useFilterAndSort } from './useFilterAndSort' -import { ActionButton as TSquareButton } from './types' -import { ACTION_BUTTONS, AssetManageView } from './consts' -import { ActionButton } from './ActionButton' - -export const TokensList = (): React.JSX.Element => { - const { data, filter, sort, view } = useFilterAndSort() - - 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 ( - - ) - } - - const renderActionItem = ( - item: TSquareButton, - index: number - ): React.JSX.Element => { - return - } - - const renderSeparator = (): React.JSX.Element => { - return - } - - return ( - - renderActionItem(item.item, item.index)} - showsHorizontalScrollIndicator={false} - keyExtractor={(_, index) => index.toString()} - itemLayoutAnimation={LinearTransition.springify()} - /> - - - 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 - } - } - /> - - ) -} 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 index 559e510d7b..0154f69129 100644 --- 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 ( + + ) + } + + const renderActionItem = ( + item: TSquareButton, + index: number + ): React.JSX.Element => { + return + } + + const renderSeparator = (): React.JSX.Element => { + return + } + const renderContent = (): React.JSX.Element => { + return if (isBalanceLoading || isRefetchingBalance) { return } @@ -37,10 +85,49 @@ const PortfolioAssetsScreen = (): JSX.Element | undefined => { if (tokens.length === 0) { return } - return + return ( + <> + + + 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 ( + + renderActionItem(item.item, item.index)} + showsHorizontalScrollIndicator={false} + keyExtractor={(_, index) => index.toString()} + itemLayoutAnimation={LinearTransition.springify()} + /> + {renderContent()} + + ) } - -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 index c2f34a75a2..a66b675bba 100644 --- 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 } - return + return } return (