feature(wallet-mobile): new tx review wallet balance dialog (#3724)

Signed-off-by: banklesss <[email protected]> Co-authored-by: Juliano Lazzarotto <[email protected]>
Emurgo · Nov 7, 2024 · 9642d40 · 9642d40
1 parent 6a5cda4
commit 9642d40
Show file tree

Hide file tree

Showing 5 changed files with 459 additions and 211 deletions.
diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/WalletBalance.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/WalletBalance.tsx
@@ -0,0 +1,172 @@
+import {useTheme} from '@yoroi/theme'
+import {PortfolioTokenBalances} from '@yoroi/types/lib/typescript/portfolio/balances'
+import * as React from 'react'
+import {FlatList, StyleSheet, Text, View} from 'react-native'
+
+import {Icon} from '../../../components/Icon'
+import {Space} from '../../../components/Space/Space'
+import {usePortfolioBalances} from '../../Portfolio/common/hooks/usePortfolioBalances'
+import {TokenInfoIcon} from '../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
+import {BalanceCard} from '../../Portfolio/useCases/PortfolioDashboard/BalanceCard/BalanceCard'
+import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
+import {useStrings} from './hooks/useStrings'
+
+export const WalletBalance = ({image, plate, name}: {image: string; plate: string; name: string}) => {
+  const {styles} = useStyles()
+  const strings = useStrings()
+  const {wallet} = useSelectedWallet()
+  const balances = usePortfolioBalances({wallet})
+  const ftList = balances.fts ?? []
+  const nftsList = balances.nfts ?? []
+
+  return (
+    <View style={styles.root}>
+      <Container>
+        <Icon.WalletAvatar style={styles.walletChecksum} image={image} size={80} />
+      </Container>
+
+      <Space height="sm" />
+
+      <Container>
+        <Text style={styles.name}>{name}</Text>
+      </Container>
+
+      <Container>
+        <Text style={styles.plate}>{plate}</Text>
+      </Container>
+
+      <Space height="lg" />
+
+      <BalanceCard />
+
+      <Space height="lg" />
+
+      <TokenSquares>
+        <TokenSquare count={ftList.length} list={ftList} title={strings.walletBalanceTokensTitle} />
+
+        <Space width="lg" />
+
+        <TokenSquare count={nftsList.length} list={nftsList} title={strings.walletBalanceNFTsTitle} />
+      </TokenSquares>
+    </View>
+  )
+}
+
+const TokenSquare = ({
+  title,
+  count,
+  list,
+}: {
+  title: string
+  count: number
+  list: PortfolioTokenBalances['fts'] | PortfolioTokenBalances['nfts']
+}) => {
+  const {styles} = useStyles()
+
+  if (list.length == 0) {
+    return (
+      <View style={styles.square}>
+        <Text style={styles.squareTitle}>{title}</Text>
+
+        <Space fill />
+
+        <Text style={styles.squareTitle}>-</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.square}>
+      <Text style={styles.squareTitle}>{title}</Text>
+
+      <Space fill />
+
+      <Text style={styles.squareCount}>{count}</Text>
+
+      <TokenList assetList={list} />
+    </View>
+  )
+}
+
+const TokenSquares = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+
+  return <View style={styles.squares}>{children}</View>
+}
+
+const Container = ({children}: {children: React.ReactNode}) => {
+  const {styles} = useStyles()
+  return <View style={styles.container}>{children}</View>
+}
+
+const TokenList = ({assetList}: {assetList: PortfolioTokenBalances['fts'] | PortfolioTokenBalances['nfts']}) => {
+  const {styles} = useStyles()
+
+  return (
+    <FlatList
+      horizontal
+      data={assetList}
+      style={styles.assetList}
+      ItemSeparatorComponent={() => <Space width="sm" />}
+      showsHorizontalScrollIndicator={false}
+      keyExtractor={(item) => item.info.id}
+      renderItem={({item}) => <TokenInfoIcon info={item.info} size="md" />}
+    />
+  )
+}
+
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+
+  const styles = StyleSheet.create({
+    root: {
+      ...atoms.flex_1,
+    },
+    container: {
+      ...atoms.align_center,
+    },
+    walletChecksum: {
+      height: 80,
+      width: 80,
+    },
+    name: {
+      ...atoms.body_1_lg_medium,
+      color: color.text_gray_medium,
+    },
+    plate: {
+      ...atoms.body_2_md_regular,
+      color: color.text_gray_low,
+    },
+    squares: {
+      ...atoms.w_full,
+      ...atoms.flex_1,
+      ...atoms.flex_row,
+      ...atoms.px_lg,
+    },
+    square: {
+      ...atoms.rounded_sm,
+      ...atoms.flex_1,
+      ...atoms.border,
+      ...atoms.p_lg,
+      borderColor: color.gray_200,
+      aspectRatio: 1,
+    },
+    squareTitle: {
+      ...atoms.body_1_lg_medium,
+      color: color.text_gray_medium,
+    },
+    squareCount: {
+      ...atoms.heading_1_medium,
+      color: color.text_gray_max,
+    },
+    assetList: {
+      maxHeight: 40,
+    },
+  })
+
+  const colors = {
+    copy: color.gray_900,
+  }
+
+  return {styles, colors} as const
+}
diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx
@@ -44,6 +44,9 @@ export const useStrings = () => {
     description: intl.formatMessage(messages.description),
     details: intl.formatMessage(messages.details),
     tokenDetailsTitle: intl.formatMessage(messages.tokenDetailsTitle),
+    walletBalanceTitle: intl.formatMessage(messages.walletBalanceTitle),
+    walletBalanceTokensTitle: intl.formatMessage(messages.walletBalanceTokensTitle),
+    walletBalanceNFTsTitle: intl.formatMessage(messages.walletBalanceNFTsTitle),
     poolDetailsTitle: intl.formatMessage(messages.poolDetailsTitle),
     registerStakingKey: intl.formatMessage(messages.registerStakingKey),
     selectAbstain: intl.formatMessage(messages.selectAbstain),
@@ -211,6 +214,18 @@ const messages = defineMessages({
     id: 'txReview.tokenDetails.title',
     defaultMessage: '!!!Asset Details',
   },
+  walletBalanceTitle: {
+    id: 'txReview.walletBalance.title',
+    defaultMessage: '!!!Wallet balance',
+  },
+  walletBalanceTokensTitle: {
+    id: 'txReview.walletBalanceTokens.title',
+    defaultMessage: '!!!Tokens',
+  },
+  walletBalanceNFTsTitle: {
+    id: 'txReview.walletBalanceNFTs.title',
+    defaultMessage: '!!!NFTs',
+  },
   poolDetailsTitle: {
     id: 'txReview.poolDetails.title',
     defaultMessage: '!!!Pool Details',

diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/Overview/OverviewTab.tsx
@@ -4,7 +4,7 @@ import {CredKind} from '@emurgo/cross-csl-core'
 import {Blockies} from '@yoroi/identicon'
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {Linking, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {Linking, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'
 
 import {Divider} from '../../../../../components/Divider/Divider'
 import {Icon} from '../../../../../components/Icon'
@@ -21,6 +21,7 @@ import {useOperations} from '../../../common/operations'
 import {ReviewTxState, useReviewTx} from '../../../common/ReviewTxProvider'
 import {TokenItem} from '../../../common/TokenItem'
 import {FormattedOutputs, FormattedTx} from '../../../common/types'
+import {WalletBalance} from '../../../common/WalletBalance'
 
 export const OverviewTab = ({
   tx,
@@ -58,8 +59,18 @@ const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {
   const strings = useStrings()
   const {wallet, meta} = useSelectedWallet()
   const {walletManager} = useWalletManager()
+  const {openModal} = useModal()
   const {plate, seed} = walletManager.checksum(wallet.publicKeyHex)
   const seedImage = new Blockies({seed}).asBase64()
+  const {height: windowHeight} = useWindowDimensions()
+
+  const handleShowWalletBalance = () => {
+    openModal(
+      strings.walletBalanceTitle,
+      <WalletBalance image={seedImage} plate={plate} name={meta.name} />,
+      windowHeight * 0.8,
+    )
+  }
 
   return (
     <>
@@ -71,7 +82,9 @@ const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {
 
           <Space width="xs" />
 
-          <Text style={styles.walletInfoText}>{`${plate} | ${meta.name}`}</Text>
+          <TouchableOpacity activeOpacity={0.5} onPress={handleShowWalletBalance}>
+            <Text style={styles.walletInfoText}>{`${plate} | ${meta.name}`}</Text>
+          </TouchableOpacity>
         </View>
       </View>
 

diff --git a/apps/wallet-mobile/src/kernel/i18n/locales/en-US.json b/apps/wallet-mobile/src/kernel/i18n/locales/en-US.json
@@ -1256,6 +1256,7 @@
   "txReview.tokenDetails.overViewTab.description.label": "Description",
   "txReview.tokenDetails.overViewTab.details.label": "Details on",
   "txReview.tokenDetails.title": "Asset Details",
+  "txReview.walletBalance.title": "Wallet balance",
   "txReview.poolDetails.title": "Pool Details",
   "txReview.operations.registerStakingKey": "Register staking key deposit",
   "txReview.operations.deregisterStakingKey": "Deregister staking key",
@@ -1270,5 +1271,7 @@
   "txReview.submittedTxButton": "Go to transactions",
   "txReview.failedTxTitle": "Transaction failed",
   "txReview.failedTxText": "Your transaction has not been processed properly due to technical issues",
-  "txReview.failedTxButton": "Go to transactions"
+  "txReview.failedTxButton": "Go to transactions",
+  "txReview.walletBalanceTokens.title": "Tokens",
+  "txReview.walletBalanceNFTs.title": "NFTs"
 }