chore(wallet-mobile): updated PairedBalance

Emurgo · Apr 26, 2024 · cb4e39f · cb4e39f
1 parent 417869f
commit cb4e39f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 45 deletions.
diff --git a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx
@@ -1,3 +1,4 @@
+import {amountBreakdown} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Portfolio} from '@yoroi/types'
 import * as React from 'react'
@@ -8,62 +9,61 @@ import {useCurrencyContext} from '../../features/Settings/Currency'
 import {useSelectedWallet} from '../../features/WalletManager/Context'
 import {useExchangeRate} from '../../yoroi-wallets/hooks'
 import {CurrencySymbol} from '../../yoroi-wallets/types'
-import {Quantities} from '../../yoroi-wallets/utils'
 import {Boundary, ResetError, ResetErrorRef} from '..'
-import { splitBigInt } from '@yoroi/common'
 
 type Props = {
   amount: Portfolio.Token.Amount
   privacyPlaceholder: string
   isPrivacyOff?: boolean
   textStyle?: TextStyle
 }
-export const PairedBalance = React.forwardRef<ResetErrorRef, Props>(({isPrivacyOff, amount, textStyle, privacyPlaceholder}, ref) => {
-  const {currency} = useCurrencyContext()
+export const PairedBalance = React.forwardRef<ResetErrorRef, Props>(
+  ({isPrivacyOff, amount, textStyle, privacyPlaceholder}, ref) => {
+    const {currency} = useCurrencyContext()
 
-  return (
-    <Boundary
-      key={currency}
-      loading={{size: 'small'}}
-      error={{
-        fallback: ({resetErrorBoundary}) => (
-          <ResetError resetErrorBoundary={resetErrorBoundary} ref={ref}>
-            <BalanceError textStyle={textStyle} />
-          </ResetError>
-        ),
-      }}
-    >
-      <Price isPrivacyOff={isPrivacyOff} amount={amount} privacyPlaceholder={privacyPlaceholder} textStyle={textStyle} />
-    </Boundary>
-  )
-})
+    // hide pairing when set to the primary token
+    if (currency === 'ADA') return null
+
+    return (
+      <Boundary
+        key={currency}
+        loading={{size: 'small'}}
+        error={{
+          fallback: ({resetErrorBoundary}) => (
+            <ResetError resetErrorBoundary={resetErrorBoundary} ref={ref}>
+              <BalanceError textStyle={textStyle} />
+            </ResetError>
+          ),
+        }}
+      >
+        <Price
+          isPrivacyOff={isPrivacyOff}
+          amount={amount}
+          privacyPlaceholder={privacyPlaceholder}
+          textStyle={textStyle}
+        />
+      </Boundary>
+    )
+  },
+)
 
 const Price = ({isPrivacyOff, amount, textStyle, privacyPlaceholder}: Props) => {
   const wallet = useSelectedWallet()
   const styles = useStyles()
   const {currency, config} = useCurrencyContext()
   const rate = useExchangeRate({wallet, to: currency})
 
-  // hide pairing when set to the primary token
-  if (currency === 'ADA') return null
+  const price = React.useMemo(() => {
+    if (rate == null) return `... ${currency}`
 
-  if (rate == null)
-    return (
-      <Text style={[styles.pairedBalanceText, textStyle]}>
-        ... {currency}
-      </Text>
-    )
+    return !isPrivacyOff
+      ? `${amountBreakdown(amount).bn.times(rate).toFormat(config.decimals)} ${currency}`
+      : `${privacyPlaceholder} ${currency}`
+  }, [amount, config.decimals, currency, isPrivacyOff, privacyPlaceholder, rate])
 
-  const price = splitBigInt()
-
-  const secondaryExchangeQuantity = Quantities.decimalPlaces(
-    Quantities.product([primaryExchangeQuantity, `${rate}`]),
-    config.decimals,
-  )
-  const pairedTotal = isPrivacyOff ? hiddenPairedTotal : secondaryExchangeQuantity
   return (
     <Text style={[styles.pairedBalanceText, textStyle]} testID="pairedTotalText">
-      {`${pairedTotal} ${currency}`}
+      {price}
     </Text>
   )
 }
@@ -73,11 +73,7 @@ const BalanceError = ({textStyle}: {textStyle?: TextStyle}) => {
   const styles = useStyles()
   const {currency} = useCurrencyContext()
 
-  return (
-    <Text style={[styles.pairedBalanceText, textStyle]}>
-      {strings.pairedBalanceError(currency)}
-    </Text>
-  )
+  return <Text style={[styles.pairedBalanceText, textStyle]}>{strings.pairedBalanceError(currency)}</Text>
 }
 
 const messages = defineMessages({

diff --git a/apps/wallet-mobile/translations/messages/src/components/PairedBalance/PairedBalance.json b/apps/wallet-mobile/translations/messages/src/components/PairedBalance/PairedBalance.json
@@ -4,14 +4,14 @@
     "defaultMessage": "!!!Error obtaining {currency} pairing",
     "file": "src/components/PairedBalance/PairedBalance.tsx",
     "start": {
-      "line": 84,
+      "line": 80,
       "column": 22,
-      "index": 2633
+      "index": 2560
     },
     "end": {
-      "line": 87,
+      "line": 83,
       "column": 3,
-      "index": 2765
+      "index": 2692
     }
   }
 ]