move formatting numbers into TransactionSummaryComponent

rsksmart · Feb 26, 2024 · ba7a56b · ba7a56b
1 parent 3fad6a5
commit ba7a56b
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 35 deletions.
diff --git a/src/components/token/index.tsx b/src/components/token/index.tsx
@@ -18,15 +18,15 @@ import { ContactCard } from 'screens/contacts/components'
 import { TokenImage, TokenSymbol } from 'screens/home/TokenImage'
 import { noop, sharedColors, sharedStyles, testIDs } from 'shared/constants'
 import { ContactWithAddressRequired } from 'shared/types'
-import { castStyle, formatTokenValue } from 'shared/utils'
+import { castStyle, formatTokenValue, formatUsdValue } from 'shared/utils'
 
 import { DollarIcon } from '../icons/DollarIcon'
 import { EyeIcon } from '../icons/EyeIcon'
 
 export interface CurrencyValue {
   symbol: TokenSymbol | string
   symbolType: 'usd' | 'icon'
-  balance: string
+  balance: number | string
 }
 
 interface Props {
@@ -70,7 +70,7 @@ export const TokenBalance = ({
     firstValue.symbol?.toUpperCase() === 'TRIF'
 
   const firstValueBalance = editable
-    ? firstValue.balance
+    ? firstValue.balance.toString()
     : formatTokenValue(firstValue.balance)
 
   const onCopyAddress = useCallback(() => {
@@ -125,7 +125,11 @@ export const TokenBalance = ({
           )}
           {secondValue && (
             <Typography type="body1" style={styles.subTitle}>
-              {hide ? '\u002A\u002A\u002A\u002A\u002A' : secondValue.balance}
+              {hide
+                ? '\u002A\u002A\u002A\u002A\u002A'
+                : secondValue.symbolType === 'usd'
+                ? formatUsdValue(secondValue.balance)
+                : formatTokenValue(secondValue.balance)}
             </Typography>
           )}
           {error && (
@@ -221,6 +225,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     width: 20,
     height: 20,
+    marginRight: 4,
   }),
   subTitle: castStyle.text({
     color: sharedColors.subTitle,

diff --git a/src/redux/slices/transactionsSlice/types.ts b/src/redux/slices/transactionsSlice/types.ts
@@ -35,7 +35,7 @@ export interface IBitcoinTransaction {
 
 export interface TokenFeeValueObject {
   tokenValue: string
-  usdValue: string
+  usdValue: number | string
   symbol?: TokenSymbol | string
 }
 

diff --git a/src/screens/activity/ActivityRow.tsx b/src/screens/activity/ActivityRow.tsx
@@ -79,9 +79,7 @@ export const ActivityBasicRow = ({
   }
 
   const txSummary: TransactionSummaryScreenProps = useMemo(() => {
-    const tokenUsd = formatUsdValue(usdValue)
-    const feeUsd = formatUsdValue(fee.usdValue)
-    const totalUsd = formatUsdValue(usdValue + Number(fee.usdValue))
+    const totalUsd = usdValue + Number(fee.usdValue)
 
     const totalToken =
       symbol === fee.symbol
@@ -98,15 +96,15 @@ export const ActivityBasicRow = ({
         usdValue: {
           symbol: '$',
           symbolType: 'usd',
-          balance: tokenUsd,
+          balance: usdValue,
         },
         fee: {
           symbol: fee.symbol || symbol,
           tokenValue: fee.tokenValue,
-          usdValue: feeUsd,
+          usdValue: fee.usdValue,
         },
-        totalToken: formatTokenValue(totalToken),
-        totalUsd: totalUsd,
+        totalToken,
+        totalUsd,
         status,
         amIReceiver,
         from,

diff --git a/src/screens/send/TransactionForm.tsx b/src/screens/send/TransactionForm.tsx
@@ -29,7 +29,7 @@ import {
 } from 'components/index'
 import { CurrencyValue, TokenBalance } from 'components/token'
 import { defaultIconSize, sharedColors, testIDs } from 'shared/constants'
-import { castStyle, formatTokenValue, formatUsdValue } from 'shared/utils'
+import { castStyle, formatTokenValue } from 'shared/utils'
 import { IPrice } from 'src/subscriptions/types'
 import { TokenBalanceObject } from 'store/slices/balancesSlice/types'
 import { Contact, ContactWithAddressRequired } from 'src/shared/types'
@@ -182,9 +182,9 @@ export const TransactionForm = ({
     symbol: selectedToken.symbol,
   })
   const [secondBalance, setSecondBalance] = useState<CurrencyValue>({
-    balance: formatUsdValue(0),
+    balance: '0',
     symbolType: 'usd',
-    symbol: '$',
+    symbol: '',
   })
   const [balanceInverted, setBalanceInverted] = useState(false)
   const [proposedContact, setProposedContact] =
@@ -207,13 +207,13 @@ export const TransactionForm = ({
         setValue('amount', balanceToSet)
         setSecondBalance(prev => ({
           ...prev,
-          balance: formatTokenValue(balanceToSet),
+          balance: balanceToSet,
         }))
       } else {
         setValue('amount', numberAmount)
         setSecondBalance(prev => ({
           ...prev,
-          balance: formatUsdValue(convertTokenToUSD(numberAmount, tokenQuote)),
+          balance: convertTokenToUSD(numberAmount, tokenQuote),
         }))
       }
     },

diff --git a/src/screens/transactionSummary/TransactionSummaryComponent.tsx b/src/screens/transactionSummary/TransactionSummaryComponent.tsx
@@ -12,7 +12,7 @@ import {
   sharedColors,
   sharedStyles,
 } from 'shared/constants'
-import { castStyle } from 'shared/utils'
+import { castStyle, formatTokenValue, formatUsdValue } from 'shared/utils'
 import { AppButton, AppTouchable, Typography } from 'components/index'
 import { useAppSelector } from 'store/storeUtils'
 import { isMyAddress } from 'components/address/lib'
@@ -174,7 +174,7 @@ export const TransactionSummaryComponent = ({
                     size={12}
                   />
                   <Typography type={'body2'} style={[sharedStyles.textCenter]}>
-                    {fee.tokenValue} {fee.symbol}
+                    {formatTokenValue(fee.tokenValue)} {fee.symbol}
                   </Typography>
                 </View>
               </View>
@@ -186,7 +186,7 @@ export const TransactionSummaryComponent = ({
                     sharedStyles.textRight,
                     { color: sharedColors.labelLight },
                   ]}>
-                  {fee.usdValue}
+                  {formatUsdValue(fee.usdValue)}
                 </Typography>
               </View>
             </>
@@ -207,7 +207,7 @@ export const TransactionSummaryComponent = ({
             <View style={sharedStyles.row}>
               <TokenImage symbol={tokenValue.symbol} size={12} transparent />
               <Typography type={'body2'} style={[sharedStyles.textCenter]}>
-                {totalToken} {tokenValue.symbol}{' '}
+                {formatTokenValue(totalToken)} {tokenValue.symbol}{' '}
                 {tokenValue.symbol !== fee.symbol &&
                   !amIReceiver &&
                   t('transaction_summary_plus_fees')}
@@ -221,7 +221,7 @@ export const TransactionSummaryComponent = ({
                 sharedStyles.textRight,
                 { color: sharedColors.labelLight },
               ]}>
-              {totalUsd}
+              {formatUsdValue(totalUsd)}
             </Typography>
           </View>
           {/* arrive value */}

diff --git a/src/screens/transactionSummary/index.tsx b/src/screens/transactionSummary/index.tsx
@@ -25,8 +25,8 @@ export interface TransactionSummaryScreenProps {
     usdValue: CurrencyValue
     fee: TokenFeeValueObject
     time: string
-    totalToken: string
-    totalUsd: string
+    totalToken: number
+    totalUsd: number
     hashId?: string
     status?: TransactionStatus
     amIReceiver?: boolean

diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
@@ -83,8 +83,7 @@ const formatNumber = (
 
   // Check for small positive amounts less than the minimum value
   if (num > 0 && num < minValue) {
-    const smallAmountDisplay = `<${sign}0.${'0'.repeat(decimalPlaces - 1)}1`
-    return smallAmountDisplay
+    return `<${sign}0.${'0'.repeat(decimalPlaces - 1)}1`
   }
 
   // Format the number with fixed decimal places

diff --git a/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx b/src/ux/requestsModal/ReviewBitcoinTransactionContainer.tsx
@@ -99,15 +99,15 @@ export const ReviewBitcoinTransactionContainer = ({
         usdValue: {
           symbol: '$',
           symbolType: 'usd',
-          balance: formatUsdValue(amountUsd),
+          balance: amountUsd,
         },
         fee: {
           symbol: TokenSymbol.BTC,
           tokenValue: miningFee,
-          usdValue: formatUsdValue(feeUsd),
+          usdValue: feeUsd,
         },
-        totalToken: formatTokenValue(totalBtc, 8),
-        totalUsd: formatUsdValue(totalUsd),
+        totalToken: totalBtc,
+        totalUsd: totalUsd,
         time: 'approx 1 min',
         to: addressToPay,
       },

diff --git a/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx b/src/ux/requestsModal/ReviewRelayTransaction/ReviewTransactionContainer.tsx
@@ -227,15 +227,15 @@ export const ReviewTransactionContainer = ({
         usdValue: {
           symbol: '$',
           symbolType: 'usd',
-          balance: formatUsdValue(tokenUsd),
+          balance: tokenUsd,
         },
         fee: {
           symbol: feeSymbol,
-          tokenValue: formatTokenValue(rbtcFeeValue ?? feeValue),
-          usdValue: formatUsdValue(feeUsd),
+          tokenValue: rbtcFeeValue ?? feeValue,
+          usdValue: feeUsd,
         },
-        totalToken: formatTokenValue(totalToken),
-        totalUsd: formatUsdValue(totalUsd),
+        totalToken,
+        totalUsd,
         time: 'approx 1 min',
         to,
       },