chore(transfer): adapted to portfolio amount

Emurgo · Apr 29, 2024 · 08c70d6 · 08c70d6
1 parent 580c810
commit 08c70d6
Show file tree

Hide file tree

Showing 13 changed files with 617 additions and 112 deletions.
diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
diff --git a/apps/wallet-mobile/src/TxHistory/AssetList/ListBalances.tsx b/apps/wallet-mobile/src/TxHistory/AssetList/ListBalances.tsx
@@ -7,9 +7,9 @@ import {useIntl} from 'react-intl'
 import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native'
 
 import {Spacer} from '../../components/Spacer'
-import {TokenAmountItem, TokenAmountItemProps} from '../../components/TokenAmountItem/TokenAmountItem'
 import {useExplorers} from '../../features/Explorer/common/useExplorers'
 import {usePortfolioBalances} from '../../features/Portfolio/common/hooks/usePortfolioBalances'
+import {TokenAmountItem, TokenAmountItemProps} from '../../features/Portfolio/common/TokenAmountItem/TokenAmountItem'
 import {usePrivacyMode} from '../../features/Settings/PrivacyMode/PrivacyMode'
 import {useSelectedWallet} from '../../features/WalletManager/Context'
 import globalMessages from '../../i18n/global-messages'
@@ -25,48 +25,51 @@ type Props = Partial<ListProps> & {
 export const ListBalances = (props: Props) => {
   const strings = useStrings()
   const styles = useStyles()
-  const {track} = useMetrics()
   const wallet = useSelectedWallet()
   const balances = usePortfolioBalances({wallet})
-  const explorers = useExplorers(wallet.network)
   const {isPrivacyOff, privacyPlaceholder} = usePrivacyMode()
 
-  const [filteringBy, setFilteringBy] = React.useState<keyof typeof balances>('all')
+  const [fungibilityFilter, setFungibilityFilter] = React.useState<keyof typeof balances>('all')
   const [isPending, startTransition] = React.useTransition()
 
+  const explorers = useExplorers(wallet.network)
+
+  const {track} = useMetrics()
   useFocusEffect(
     React.useCallback(() => {
       track.assetsPageViewed()
     }, [track]),
   )
 
-  const handleOnPressNFTs = React.useCallback(() => startTransition(() => setFilteringBy('nfts')), [])
-  const handleOnPressFTs = React.useCallback(() => startTransition(() => setFilteringBy('fts')), [])
-  const handleOnPressAll = React.useCallback(() => startTransition(() => setFilteringBy('all')), [])
+  const handleOnPressNFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('nfts')), [])
+  const handleOnPressFTs = React.useCallback(() => startTransition(() => setFungibilityFilter('fts')), [])
+  const handleOnPressAll = React.useCallback(() => startTransition(() => setFungibilityFilter('all')), [])
   const chips = [
     {label: strings.all, onPress: handleOnPressAll, value: 'all', disabled: isPending},
-    {
-      label: strings.nfts(balances.nfts.length),
-      onPress: handleOnPressNFTs,
-      value: 'nfts',
-      disabled: isPending || balances.nfts.length === 0,
-    },
     {
       label: strings.tokens(balances.fts.length),
       onPress: handleOnPressFTs,
       value: 'fts',
-      disabled: isPending || balances.fts.length === 0,
+      disabled: isPending,
     },
   ]
+  if (balances.nfts.length > 0) {
+    chips.push({
+      label: strings.nfts(balances.nfts.length),
+      onPress: handleOnPressNFTs,
+      value: 'nfts',
+      disabled: isPending,
+    })
+  }
 
   return (
     <View style={styles.assetList} testID="assetList">
-      <FilterBalancesByType selectedValue={filteringBy} chips={chips} />
+      <FilterBalancesByType selectedValue={fungibilityFilter} chips={chips} />
 
       <FlashList
         {...props}
         bounces={false}
-        data={balances[filteringBy]}
+        data={balances[fungibilityFilter]}
         renderItem={({item: amount}) => (
           <ExplorableAssetItem
             isMainnet={wallet.isMainnet}

diff --git a/...kenAmountItem/TokenAmountItem.stories.tsx → ...kenAmountItem/TokenAmountItem.stories.tsx b/...kenAmountItem/TokenAmountItem.stories.tsx → ...kenAmountItem/TokenAmountItem.stories.tsx
@@ -3,10 +3,10 @@ import {tokenMocks} from '@yoroi/portfolio'
 import React from 'react'
 import {Text, View} from 'react-native'
 
-import {QueryProvider} from '../../../.storybook/decorators'
-import {SelectedWalletProvider} from '../../features/WalletManager/Context'
-import {mocks} from '../../yoroi-wallets/mocks'
-import {Spacer} from '..'
+import {QueryProvider} from '../../../../../.storybook/decorators'
+import {Spacer} from '../../../../components'
+import {mocks} from '../../../../yoroi-wallets/mocks'
+import {SelectedWalletProvider} from '../../../WalletManager/Context'
 import {TokenAmountItem} from './TokenAmountItem'
 
 const primaryAmount = tokenMocks.primaryETH.balance

diff --git a/...nents/TokenAmountItem/TokenAmountItem.tsx → ...ommon/TokenAmountItem/TokenAmountItem.tsx b/...nents/TokenAmountItem/TokenAmountItem.tsx → ...ommon/TokenAmountItem/TokenAmountItem.tsx
@@ -5,10 +5,10 @@ import {Swap} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
 
-import {usePriceImpactRiskTheme} from '../../features/Swap/common/helpers'
-import {SwapPriceImpactRisk} from '../../features/Swap/common/types'
-import {Icon, Spacer, Text} from '..'
-import {PairedBalance} from '../PairedBalance/PairedBalance'
+import {Icon, Spacer, Text} from '../../../../components'
+import {PairedBalance} from '../../../../components/PairedBalance/PairedBalance'
+import {usePriceImpactRiskTheme} from '../../../Swap/common/helpers'
+import {SwapPriceImpactRisk} from '../../../Swap/common/types'
 import {TokenInfoIcon} from './TokenInfoIcon'
 
 export type TokenAmountItemProps = {
@@ -55,19 +55,17 @@ export const TokenAmountItem = ({
       </Left>
 
       <Middle>
-        <View style={styles.row}>
-          <Text numberOfLines={1} ellipsizeMode="middle" style={styles.name} testID="tokenInfoText">
-            {name}
-          </Text>
+        <Text numberOfLines={1} ellipsizeMode="middle" style={styles.name} testID="tokenInfoText">
+          {name}
+        </Text>
 
-          {showSwapDetails && (
-            <>
-              <Spacer width={4} />
+        {showSwapDetails && (
+          <>
+            <Spacer width={4} />
 
-              {inWallet && <Icon.Portfolio size={22} color={colors.icon} />}
-            </>
-          )}
-        </View>
+            {inWallet && <Icon.Portfolio size={22} color={colors.icon} />}
+          </>
+        )}
 
         <Text numberOfLines={1} ellipsizeMode="middle" style={styles.detail} testID="tokenFingerprintText">
           {detail}
@@ -76,7 +74,7 @@ export const TokenAmountItem = ({
 
       <Right>
         {info.type !== Portfolio.Token.Type.NFT && variant !== 'swap' && (
-          <View style={styles.row} testID="tokenAmountText">
+          <View testID="tokenAmountText">
             {priceImpactRisk === 'moderate' && <Icon.Info size={24} color={priceImpactRiskTextColor} />}
 
             {priceImpactRisk === 'high' && <Icon.Warning size={24} color={priceImpactRiskTextColor} />}
@@ -138,32 +136,20 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
       alignItems: 'center',
     },
     name: {
       color: color.gray[900],
-      fontSize: 16,
-      lineHeight: 22,
-      fontWeight: '500',
-      fontFamily: 'Rubik-Medium',
+      ...typography['body-1-l-medium'],
     },
     detail: {
       color: color.gray[600],
-      fontSize: 12,
-      lineHeight: 18,
+      ...typography['body-3-s-regular'],
       maxWidth: 140,
     },
     quantity: {
       color: color.gray[900],
       ...typography['body-1-l-regular'],
-      textAlign: 'right',
-      flexGrow: 1,
-    },
-    row: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
     },
   })
 

diff --git a/...ponents/TokenAmountItem/TokenInfoIcon.tsx → .../common/TokenAmountItem/TokenInfoIcon.tsx b/...ponents/TokenAmountItem/TokenInfoIcon.tsx → .../common/TokenAmountItem/TokenInfoIcon.tsx
@@ -5,7 +5,7 @@ import {Image} from 'expo-image'
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
-import {Icon} from '../Icon'
+import {Icon} from '../../../../components/Icon'
 
 const headers = {
   Accept: 'image/webp',