fix: size portfolio card item

Emurgo · Jun 26, 2024 · 9754dce · 9754dce
1 parent 821fe4f
commit 9754dce
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 58 deletions.
diff --git a/...rc/features/Portfolio/useCases/PortfolioDashboard/DashboardNFTsList/DashboardNFTsList.tsx b/...rc/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 {
+  Dimensions,
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  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}) => (
-          <View>
-            <MediaPreview info={item.info} width={164} height={164} style={styles.image} />
+          <View style={[styles.nftItemContainer, {width: cardItemWidth}]}>
+            <MediaPreview info={item.info} width={cardItemWidth} height={cardItemWidth} style={styles.image} />
           </View>
         )}
       />
@@ -79,6 +88,14 @@ const TouchNFTsList = ({onPress}: TouchableOpacityProps) => {
 
 const useStyles = () => {
   const {atoms, color} = useTheme()
+
+  const SCREEN_WIDTH = Dimensions.get('window').width
+  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 +121,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/...features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenItem.tsx b/...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 (
-    <TouchableOpacity onPress={() => navigationTo.tokenDetail({id: info.id})}>
-      <View style={styles.root}>
+    <TouchableOpacity onPress={() => navigationTo.tokenDetail({id: info.id})} style={styles.root}>
+      <View style={styles.container}>
         <TokenInfo info={info} />
 
-        <Spacer height={16} />
+        <Spacer fill />
 
         <View style={styles.quantityContainer}>
           <PnlTag variant={variantPnl} withIcon>
             <Text>{quantityChangePercent}%</Text>
           </PnlTag>
 
-          <Text style={styles.tokenValue}>{formattedQuantity}</Text>
+          <Text ellipsizeMode="tail" numberOfLines={1} style={styles.tokenValue}>
+            {formattedQuantity}
+          </Text>
 
           <PairedBalance textStyle={styles.pairedTokenValue} amount={tokenInfo} />
         </View>
@@ -77,14 +79,16 @@ const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     root: {
+      ...atoms.h_full,
+    },
+    container: {
       ...atoms.p_lg,
       ...atoms.rounded_sm,
       ...atoms.flex_col,
       ...atoms.align_start,
       ...atoms.border,
       ...atoms.flex_1,
       borderColor: color.gray_c300,
-      width: 164,
       ...atoms.h_full,
     },
     symbol: {

diff --git a/.../Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx b/.../Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokenSkeletonItem.tsx
@@ -9,29 +9,33 @@ export const DashboardTokenSkeletonItem = () => {
   const {color, styles} = useStyles()
 
   return (
-    <SkeletonPlaceholder backgroundColor={color.gray_c100}>
+    <View style={styles.fullSize}>
       <View style={styles.root}>
-        <SkeletonPlaceholder.Item flexDirection="row" gap={12} alignItems="center">
-          <SkeletonPlaceholder.Item width={40} height={40} borderRadius={8} />
+        <SkeletonPlaceholder backgroundColor={color.gray_c100}>
+          <SkeletonPlaceholder.Item flexDirection="row" gap={12} alignItems="center">
+            <SkeletonPlaceholder.Item width={40} height={40} borderRadius={8} />
 
-          <SkeletonPlaceholder.Item flexDirection="column" gap={6}>
-            <SkeletonPlaceholder.Item width={39} height={16} borderRadius={8} />
+            <SkeletonPlaceholder.Item flexDirection="column" gap={6}>
+              <SkeletonPlaceholder.Item width={39} height={16} borderRadius={8} />
 
-            <SkeletonPlaceholder.Item width={53} height={12} borderRadius={8} />
+              <SkeletonPlaceholder.Item width={53} height={12} borderRadius={8} />
+            </SkeletonPlaceholder.Item>
           </SkeletonPlaceholder.Item>
-        </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
 
-        <Spacer height={16} />
+        <Spacer fill />
 
-        <SkeletonPlaceholder.Item>
-          <SkeletonPlaceholder.Item width={64} height={20} borderRadius={8} marginBottom={7} />
+        <SkeletonPlaceholder backgroundColor={color.gray_c100}>
+          <SkeletonPlaceholder.Item>
+            <SkeletonPlaceholder.Item width={64} height={20} borderRadius={8} marginBottom={7} />
 
-          <SkeletonPlaceholder.Item width={128} height={16} borderRadius={8} marginBottom={7} />
+            <SkeletonPlaceholder.Item width={128} height={16} borderRadius={8} marginBottom={7} />
 
-          <SkeletonPlaceholder.Item width={75} height={12} borderRadius={8} marginVertical={3} />
-        </SkeletonPlaceholder.Item>
+            <SkeletonPlaceholder.Item width={75} height={12} borderRadius={8} marginVertical={3} />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
       </View>
-    </SkeletonPlaceholder>
+    </View>
   )
 }
 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/...eatures/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx b/...eatures/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/DashboardTokensList.tsx
@@ -1,7 +1,7 @@
 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 {Dimensions, FlatList, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
 
 import {Icon, Spacer} from '../../../../../components'
 import {makeList} from '../../../../../kernel/utils'
@@ -17,7 +17,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,48 +45,64 @@ export const DashboardTokensList = () => {
           <View />
 
           {makeList(3).map((_, index) => (
-            <DashboardTokenSkeletonItem key={index} />
+            <View style={[styles.tokenItemContainer, {width: cardItemWidth}]} key={index}>
+              <DashboardTokenSkeletonItem />
+            </View>
           ))}
 
           <Spacer width={8} />
         </View>
       )
 
-    return (
-      <View style={styles.tradeTokensContainer}>
-        {isJustADA && (
-          <View style={styles.tradeTokensContainer}>
-            <Spacer width={16} />
+    return <Spacer width={16} />
+  }
 
+  const renderTokensList = () => {
+    if (isZeroADABalance) {
+      return (
+        <View style={styles.container}>
+          <BuyADABanner />
+        </View>
+      )
+    }
+
+    if (isJustADA) {
+      return (
+        <View style={styles.justAdaContainer}>
+          <View style={[styles.tokenItemContainer, {width: cardItemWidthForJustAda}]}>
+            <DashboardTokenItem tokenInfo={tokensList[0]} />
+          </View>
+
+          <View style={[styles.tokenItemContainer, {width: cardItemWidthForJustAda}]}>
             <TradeTokensBanner />
           </View>
-        )}
+        </View>
+      )
+    }
 
-        <Spacer width={16} />
-      </View>
+    return (
+      <FlatList
+        horizontal
+        data={tokensList}
+        ListHeaderComponent={<Spacer width={16} />}
+        ListFooterComponent={renderFooterList()}
+        ItemSeparatorComponent={() => <Spacer width={8} />}
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(item) => item.info.id}
+        renderItem={({item}) => (
+          <View style={[styles.tokenItemContainer, {width: cardItemWidth}]}>
+            <DashboardTokenItem tokenInfo={item} />
+          </View>
+        )}
+      />
     )
   }
 
   return (
     <View style={styles.root}>
       <Heading countTokens={tokensList.length} onPress={handleDirectTokensList} isFirstUser={isFirstUser} />
 
-      {isZeroADABalance ? (
-        <View style={styles.container}>
-          <BuyADABanner />
-        </View>
-      ) : (
-        <FlatList
-          horizontal
-          data={tokensList}
-          ListHeaderComponent={<Spacer width={16} />}
-          ListFooterComponent={renderFooterList()}
-          ItemSeparatorComponent={() => <Spacer width={8} />}
-          showsHorizontalScrollIndicator={false}
-          keyExtractor={(item) => item.info.id}
-          renderItem={({item}) => <DashboardTokenItem key={item?.info?.id} tokenInfo={item} />}
-        />
-      )}
+      {renderTokensList()}
     </View>
   )
 }
@@ -121,6 +137,17 @@ const TouchTokensList = ({onPress}: TouchableOpacityProps) => {
 
 const useStyles = () => {
   const {atoms, color} = useTheme()
+
+  const SCREEN_WIDTH = Dimensions.get('window').width
+  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 +165,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/.../features/Portfolio/useCases/PortfolioDashboard/DashboardTokensList/TradeTokensBanner.tsx b/.../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,