diff --git a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx index 2fc0798205..fff6a253bb 100644 --- a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx +++ b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx @@ -1,6 +1,15 @@ import {useTheme} from '@yoroi/theme' import * as React from 'react' -import {FlatList, Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View} from 'react-native' +import { + FlatList, + Image, + StyleSheet, + Text, + TouchableOpacity, + TouchableOpacityProps, + useWindowDimensions, + View, +} from 'react-native' import nftPlaceholder from '../../../../../assets/img/nft-placeholder.png' import {Icon, Spacer} from '../../../../../components' @@ -11,7 +20,7 @@ import {useNavigateTo} from '../../../common/useNavigateTo' import {useStrings} from '../../../common/useStrings' export const DashboardNFTsList = () => { - const {styles} = useStyles() + const {styles, cardItemWidth} = useStyles() const navigationTo = useNavigateTo() const {wallet} = useSelectedWallet() @@ -42,8 +51,8 @@ export const DashboardNFTsList = () => { showsHorizontalScrollIndicator={false} keyExtractor={(item) => item.info.id} renderItem={({item}) => ( - - + + )} /> @@ -79,6 +88,13 @@ const TouchNFTsList = ({onPress}: TouchableOpacityProps) => { const useStyles = () => { const {atoms, color} = useTheme() + const {width: SCREEN_WIDTH} = useWindowDimensions() + const PADDING_LEFT_SIDE = 16 + const PADDING_RIGHT_SIDE_FOR_ITEMS = 15 + const GAP_ITEMS = 8 + const initCardWidth = SCREEN_WIDTH - PADDING_LEFT_SIDE + const cardItemWidth = (initCardWidth - PADDING_RIGHT_SIDE_FOR_ITEMS - GAP_ITEMS) / 2 + const styles = StyleSheet.create({ container: { ...atoms.px_lg, @@ -104,10 +120,13 @@ const useStyles = () => { width: 164, height: 164, }, + nftItemContainer: { + aspectRatio: 1 / 1, + }, }) const colors = { gray_800: color.gray_c800, } - return {styles, colors} as const + return {styles, colors, cardItemWidth} as const } diff --git a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx index 5e9c12e417..3e087be432 100644 --- a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx +++ b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx @@ -30,18 +30,20 @@ export const DashboardTokenItem = ({tokenInfo}: Props) => { const {quantityChangePercent, variantPnl} = useQuantityChange({previousQuantity, quantity, decimals: info.decimals}) return ( - navigationTo.tokenDetail({id: info.id})}> - + navigationTo.tokenDetail({id: info.id})} style={styles.root}> + - + {quantityChangePercent}% - {formattedQuantity} + + {formattedQuantity} + @@ -77,6 +79,9 @@ const useStyles = () => { const {atoms, color} = useTheme() const styles = StyleSheet.create({ root: { + ...atoms.h_full, + }, + container: { ...atoms.p_lg, ...atoms.rounded_sm, ...atoms.flex_col, @@ -84,7 +89,6 @@ const useStyles = () => { ...atoms.border, ...atoms.flex_1, borderColor: color.gray_c300, - width: 164, ...atoms.h_full, }, symbol: { diff --git a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx index 149f225edf..4c709eee35 100644 --- a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx +++ b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx @@ -9,29 +9,33 @@ export const DashboardTokenSkeletonItem = () => { const {color, styles} = useStyles() return ( - + - - + + + - - + + - + + - + - + - - + + + - + - - + + + - + ) } const useStyles = () => { @@ -43,8 +47,13 @@ const useStyles = () => { ...atoms.flex_col, ...atoms.align_start, ...atoms.border, + ...atoms.w_full, + ...atoms.h_full, borderColor: color.gray_c300, - width: 164, + }, + fullSize: { + ...atoms.w_full, + ...atoms.h_full, }, }) diff --git a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx index 091b259058..9932a14a71 100644 --- a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx +++ b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx @@ -1,7 +1,15 @@ import {isPrimaryToken} from '@yoroi/portfolio' import {useTheme} from '@yoroi/theme' import * as React from 'react' -import {FlatList, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View} from 'react-native' +import { + FlatList, + StyleSheet, + Text, + TouchableOpacity, + TouchableOpacityProps, + useWindowDimensions, + View, +} from 'react-native' import {Icon, Spacer} from '../../../../../components' import {makeList} from '../../../../../kernel/utils' @@ -17,7 +25,7 @@ import {DashboardTokenSkeletonItem} from './DashboardTokenSkeletonItem' import {TradeTokensBanner} from './TradeTokensBanner' export const DashboardTokensList = () => { - const {styles} = useStyles() + const {styles, cardItemWidth, cardItemWidthForJustAda} = useStyles() const navigationTo = useNavigateTo() const isZeroADABalance = useZeroBalance() const {isLoading} = useGetTokensWithBalance() @@ -45,25 +53,56 @@ export const DashboardTokensList = () => { {makeList(3).map((_, index) => ( - + + + ))} ) - return ( - - {isJustADA && ( - - + return + } + + const renderTokensList = () => { + if (isZeroADABalance) { + return ( + + + + ) + } + if (isJustADA) { + return ( + + + + + + - )} + + ) + } - - + return ( + } + ListFooterComponent={renderFooterList()} + ItemSeparatorComponent={() => } + showsHorizontalScrollIndicator={false} + keyExtractor={(item) => item.info.id} + renderItem={({item}) => ( + + + + )} + /> ) } @@ -71,22 +110,7 @@ export const DashboardTokensList = () => { - {isZeroADABalance ? ( - - - - ) : ( - } - ListFooterComponent={renderFooterList()} - ItemSeparatorComponent={() => } - showsHorizontalScrollIndicator={false} - keyExtractor={(item) => item.info.id} - renderItem={({item}) => } - /> - )} + {renderTokensList()} ) } @@ -121,6 +145,16 @@ const TouchTokensList = ({onPress}: TouchableOpacityProps) => { const useStyles = () => { const {atoms, color} = useTheme() + const {width: SCREEN_WIDTH} = useWindowDimensions() + const PADDING_LEFT_SIDE = 16 + const PADDING_RIGHT_SIDE_FOR_ITEMS = 15 + const PADDING_RIGHT_SIDE_FOR_JUST_ADA = 16 + const GAP_ITEMS = 8 + const GAP_FOR_JUST_ADA = 16 + const initCardWidth = SCREEN_WIDTH - PADDING_LEFT_SIDE + const cardItemWidth = (initCardWidth - PADDING_RIGHT_SIDE_FOR_ITEMS - GAP_ITEMS) / 2 + const cardItemWidthForJustAda = (initCardWidth - PADDING_RIGHT_SIDE_FOR_JUST_ADA - GAP_FOR_JUST_ADA) / 2 + const styles = StyleSheet.create({ container: { ...atoms.px_lg, @@ -138,19 +172,27 @@ const useStyles = () => { ...atoms.body_1_lg_medium, color: color.gray_c900, }, - tradeTokensContainer: { - ...atoms.flex_row, - ...atoms.flex_1, - }, containerLoading: { ...atoms.flex_row, ...atoms.gap_sm, }, + justAdaContainer: { + ...atoms.flex_row, + ...atoms.gap_lg, + ...atoms.overflow_hidden, + ...atoms.w_full, + ...atoms.pl_lg, + paddingRight: 15, + ...atoms.align_start, + }, + tokenItemContainer: { + aspectRatio: 195 / 186, + }, }) const colors = { gray_800: color.gray_c800, } - return {styles, colors} as const + return {styles, colors, cardItemWidth, cardItemWidthForJustAda} as const } diff --git a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/TradeTokensBanner.tsx b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/TradeTokensBanner.tsx index 01cbd0258d..5f9cc91300 100644 --- a/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/TradeTokensBanner.tsx +++ b/apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/TradeTokensBanner.tsx @@ -42,8 +42,8 @@ const useStyles = () => { const {atoms, color} = useTheme() const styles = StyleSheet.create({ root: { - width: 164, ...atoms.flex_1, + ...atoms.h_full, }, gradientRoot: { ...atoms.p_lg,