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,