refactor(wallet-mobile): tx review (#3772)

Emurgo · Dec 19, 2024 · d4dc0a4 · d4dc0a4
1 parent d506c77
commit d4dc0a4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 186 deletions.
diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useFormattedMetadata.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useFormattedMetadata.tsx
@@ -21,7 +21,7 @@ export const formatMetadata = async (
     if (unsignedTx != null && unsignedTx.unsignedTx.auxiliaryData && hash != null) {
       generalTransactionMetadata = await unsignedTx.unsignedTx.auxiliaryData?.metadata()
     } else if (cbor != null && hash != null) {
-      const tx = await csl.Transaction.fromBytes(Buffer.from(cbor, 'hex'))
+      const tx = await csl.Transaction.fromHex(cbor)
       const auxiliaryData = await tx.auxiliaryData()
       generalTransactionMetadata = await auxiliaryData?.metadata()
     }

diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useFormattedTx.tsx b/apps/wallet-mobile/src/features/ReviewTx/common/hooks/useFormattedTx.tsx
@@ -1,6 +1,5 @@
 import {CredKind} from '@emurgo/cross-csl-core'
 import {isNonNullable} from '@yoroi/common'
-import {infoExtractName} from '@yoroi/portfolio'
 import {ApiUtxoData, Portfolio} from '@yoroi/types'
 import {NetworkApi} from '@yoroi/types/lib/typescript/network/manager'
 import _ from 'lodash'
@@ -9,7 +8,6 @@ import {useQuery} from 'react-query'
 import {YoroiWallet} from '../../../../yoroi-wallets/cardano/types'
 import {deriveRewardAddressFromAddress} from '../../../../yoroi-wallets/cardano/utils'
 import {wrappedCsl} from '../../../../yoroi-wallets/cardano/wrappedCsl'
-import {formatTokenWithText} from '../../../../yoroi-wallets/utils/format'
 import {asQuantity} from '../../../../yoroi-wallets/utils/utils'
 import {usePortfolioTokenInfos} from '../../../Portfolio/common/hooks/usePortfolioTokenInfos'
 import {useSelectedNetwork} from '../../../WalletManager/common/hooks/useSelectedNetwork'
@@ -138,10 +136,7 @@ const formatInputs = async (
           ? [
               {
                 tokenInfo: wallet.portfolioPrimaryTokenInfo,
-                name: wallet.portfolioPrimaryTokenInfo.name,
-                label: formatTokenWithText(coin, wallet.portfolioPrimaryTokenInfo),
                 quantity: coin,
-                isPrimary: true,
               },
             ]
           : []
@@ -155,10 +150,7 @@ const formatInputs = async (
 
             return {
               tokenInfo,
-              name: infoExtractName(tokenInfo),
-              label: formatTokenWithText(quantity, tokenInfo),
               quantity: quantity,
-              isPrimary: false,
             }
           })
           .filter(Boolean) ?? []
@@ -193,10 +185,7 @@ const formatOutputs = async (
       const primaryAssets = [
         {
           tokenInfo: wallet.portfolioPrimaryTokenInfo,
-          name: wallet.portfolioPrimaryTokenInfo.name,
-          label: formatTokenWithText(coin, wallet.portfolioPrimaryTokenInfo),
           quantity: coin,
-          isPrimary: true,
         },
       ]
 
@@ -209,10 +198,7 @@ const formatOutputs = async (
 
               return {
                 tokenInfo,
-                name: infoExtractName(tokenInfo),
-                label: formatTokenWithText(quantity, tokenInfo),
                 quantity,
-                isPrimary: false,
               }
             })
           })
@@ -236,10 +222,7 @@ export const formatFee = (wallet: YoroiWallet, data: TransactionBody): Formatted
 
   return {
     tokenInfo: wallet.portfolioPrimaryTokenInfo,
-    name: wallet.portfolioPrimaryTokenInfo.name,
-    label: formatTokenWithText(fee, wallet.portfolioPrimaryTokenInfo),
     quantity: fee,
-    isPrimary: true,
   }
 }
 

diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/mocks.ts b/apps/wallet-mobile/src/features/ReviewTx/common/mocks.ts
diff --git a/apps/wallet-mobile/src/features/ReviewTx/common/types.ts b/apps/wallet-mobile/src/features/ReviewTx/common/types.ts
@@ -14,10 +14,7 @@ export type TransactionOutputs = TransactionOutputsJSON
 export type FormattedInput = {
   assets: Array<{
     tokenInfo: Portfolio.Token.Info
-    name: string
-    label: string
     quantity: Balance.Quantity
-    isPrimary: boolean
   }>
   address: string | undefined
   addressKind: CredKind | null
@@ -32,10 +29,7 @@ export type FormattedInputs = Array<FormattedInput>
 export type FormattedOutput = {
   assets: Array<{
     tokenInfo: Portfolio.Token.Info
-    name: string
-    label: string
     quantity: Balance.Quantity
-    isPrimary: boolean
   }>
   address: string
   addressKind: CredKind | null
@@ -47,10 +41,7 @@ export type FormattedOutputs = Array<FormattedOutput>
 
 export type FormattedFee = {
   tokenInfo: Portfolio.Token.Info
-  name: string
-  label: string
   quantity: Balance.Quantity
-  isPrimary: boolean
 }
 
 export type FormattedTx = {

diff --git a/...et-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx b/...et-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx
@@ -2,7 +2,7 @@ import {CredKind} from '@emurgo/cross-csl-core'
 import {parseBoolean, useAsyncStorage, useMutationWithInvalidations} from '@yoroi/common'
 import {Blockies} from '@yoroi/identicon'
 import {useTheme} from '@yoroi/theme'
-import {Balance} from '@yoroi/types'
+import {Balance, Portfolio} from '@yoroi/types'
 import {Image} from 'expo-image'
 import * as React from 'react'
 import {Linking, ScrollView, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'
@@ -134,7 +134,7 @@ const WalletInfoSection = ({tx, createdBy}: {tx: FormattedTx; createdBy?: React.
         </>
       )}
 
-      <FeeInfoItem fee={tx.fee.label} />
+      <FeeInfoItem fee={formatTokenWithText(tx.fee.quantity, wallet.portfolioPrimaryTokenInfo)} />
     </>
   )
 }
@@ -202,7 +202,7 @@ const MyWalletTokens = ({
   const totalPrimaryTokenSent = React.useMemo(
     () =>
       notOwnedOutputs
-        .flatMap((output) => output.assets.filter((asset) => asset.isPrimary))
+        .flatMap((output) => output.assets.filter((asset) => asset.tokenInfo.nature === Portfolio.Token.Nature.Primary))
         .reduce((previous, current) => Quantities.sum([previous, current.quantity]), Quantities.zero),
     [notOwnedOutputs],
   )
@@ -213,7 +213,10 @@ const MyWalletTokens = ({
   const totalPrimaryTokenSpentLabel = formatTokenWithText(totalPrimaryTokenSpent, wallet.portfolioPrimaryTokenInfo)
 
   const notPrimaryTokenSent = React.useMemo(
-    () => notOwnedOutputs.flatMap((output) => output.assets.filter((asset) => !asset.isPrimary)),
+    () =>
+      notOwnedOutputs.flatMap((output) =>
+        output.assets.filter((asset) => asset.tokenInfo.nature !== Portfolio.Token.Nature.Primary),
+      ),
     [notOwnedOutputs],
   )
 
@@ -227,7 +230,12 @@ const MyWalletTokens = ({
         <TokenItem tokenInfo={wallet.portfolioPrimaryTokenInfo} label={`-${totalPrimaryTokenSpentLabel}`} />
 
         {notPrimaryTokenSent.map((token, index) => (
-          <TokenItem key={index} tokenInfo={token.tokenInfo} label={token.label} isPrimaryToken={false} />
+          <TokenItem
+            key={index}
+            tokenInfo={token.tokenInfo}
+            label={formatTokenWithText(token.quantity, token.tokenInfo)}
+            isPrimaryToken={false}
+          />
         ))}
       </View>
     </View>
@@ -296,9 +304,11 @@ const MultiExternalPartiesSection = ({outputs}: {outputs: FormattedOutputs}) =>
   const strings = useStrings()
 
   const receivers = outputs.map((output, index) => {
-    const totalPrimaryToken = output.assets.filter((asset) => asset.isPrimary)[0]?.quantity ?? Quantities.zero
+    const totalPrimaryToken =
+      output.assets.filter((asset) => asset.tokenInfo.nature === Portfolio.Token.Nature.Primary)[0]?.quantity ??
+      Quantities.zero
     const totalPrimaryTokenLabel = formatTokenWithText(totalPrimaryToken, wallet.portfolioPrimaryTokenInfo)
-    const notPrimaryToken = output.assets.filter((asset) => !asset.isPrimary)
+    const notPrimaryToken = output.assets.filter((asset) => asset.tokenInfo.nature !== Portfolio.Token.Nature.Primary)
     const address = output?.rewardAddress ?? output?.address ?? '-'
 
     return (
@@ -327,7 +337,7 @@ const MultiExternalPartiesSection = ({outputs}: {outputs: FormattedOutputs}) =>
               <TokenItem
                 key={index}
                 tokenInfo={token.tokenInfo}
-                label={token.label}
+                label={formatTokenWithText(token.quantity, token.tokenInfo)}
                 isPrimaryToken={false}
                 isSent={false}
               />

diff --git a/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/UTxOs/UTxOsTab.tsx b/apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/UTxOs/UTxOsTab.tsx
@@ -1,9 +1,12 @@
 import {useTheme} from '@yoroi/theme'
+import {Portfolio} from '@yoroi/types'
 import * as React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 
 import {Divider} from '../../../../../../components/Divider/Divider'
 import {Space} from '../../../../../../components/Space/Space'
+import {formatTokenWithText} from '../../../../../../yoroi-wallets/utils/format'
+import {useSelectedWallet} from '../../../../../WalletManager/common/hooks/useSelectedWallet'
 import {Accordion} from '../../../../common/Accordion'
 import {CopiableText} from '../../../../common/CopiableText'
 import {useStrings} from '../../../../common/hooks/useStrings'
@@ -13,6 +16,7 @@ import {FormattedInput, FormattedInputs, FormattedOutput, FormattedOutputs, Form
 export const UTxOsTab = ({tx}: {tx: FormattedTx}) => {
   const {styles} = useStyles()
   const strings = useStrings()
+  const {wallet} = useSelectedWallet()
 
   return (
     <View style={styles.root}>
@@ -22,7 +26,7 @@ export const UTxOsTab = ({tx}: {tx: FormattedTx}) => {
         <Inputs inputs={tx.inputs} />
       </Accordion>
 
-      <Fee fee={tx.fee.label} />
+      <Fee fee={formatTokenWithText(tx.fee.quantity, wallet.portfolioPrimaryTokenInfo)} />
 
       <Accordion label={`${strings.utxosOutputsLabel} (${tx.outputs.length})`}>
         <Outputs outputs={tx.outputs} />
@@ -67,9 +71,12 @@ const Input = ({input}: {input: FormattedInput}) => {
       <Space height="sm" />
 
       <View style={styles.tokenItems}>
-        {input.assets.map((asset, index) => (
-          <TokenItem tokenInfo={asset.tokenInfo} key={index} label={asset.label} isPrimaryToken={asset.isPrimary} />
-        ))}
+        {input.assets.map((asset, index) => {
+          const isPrimary = asset.tokenInfo.nature === Portfolio.Token.Nature.Primary
+          const label = formatTokenWithText(asset.quantity, asset.tokenInfo)
+
+          return <TokenItem tokenInfo={asset.tokenInfo} key={index} label={label} isPrimaryToken={isPrimary} />
+        })}
       </View>
     </View>
   )
@@ -98,15 +105,20 @@ const Output = ({output}: {output: FormattedOutput}) => {
       <Space height="sm" />
 
       <View style={styles.tokenItems}>
-        {output.assets.map((asset, index) => (
-          <TokenItem
-            key={index}
-            tokenInfo={asset.tokenInfo}
-            isSent={false}
-            label={asset.label}
-            isPrimaryToken={asset.isPrimary}
-          />
-        ))}
+        {output.assets.map((asset, index) => {
+          const isPrimary = asset.tokenInfo.nature === Portfolio.Token.Nature.Primary
+          const label = formatTokenWithText(asset.quantity, asset.tokenInfo)
+
+          return (
+            <TokenItem
+              key={index}
+              tokenInfo={asset.tokenInfo}
+              isSent={false}
+              label={label}
+              isPrimaryToken={isPrimary}
+            />
+          )
+        })}
       </View>
     </View>
   )