From 7309d88a1c2a666b8a6d26eb52bda2f38ea1c315 Mon Sep 17 00:00:00 2001
From: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>
Date: Fri, 26 Apr 2024 17:45:45 +0100
Subject: [PATCH] chore(wallet-mobile): updated PairedBalance

---
 .../PairedBalance/PairedBalance.stories.tsx   | 13 +++-
 .../PairedBalance/PairedBalance.tsx           | 78 +++++++++----------
 .../PairedBalance/PairedBalance.json          |  8 +-
 packages/portfolio/src/balance-manager.ts     |  2 +
 4 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx
index fcd0366835..1112437107 100644
--- a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx
+++ b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.stories.tsx
@@ -1,4 +1,5 @@
 import {storiesOf} from '@storybook/react-native'
+import {tokenBalanceMocks} from '@yoroi/portfolio'
 import React from 'react'
 import {View} from 'react-native'
 
@@ -19,7 +20,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={{quantity: '2', tokenId: mocks.wallet.primaryTokenInfo.id}} />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="*.****" />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -37,7 +38,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={{quantity: '2', tokenId: mocks.wallet.primaryTokenInfo.id}} />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="-.--" />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -55,7 +56,11 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={{quantity: '2', tokenId: mocks.wallet.primaryTokenInfo.id}} isPrivacyOff />
+              <PairedBalance
+                amount={tokenBalanceMocks.primaryETH}
+                privacyPlaceholder="you should see this"
+                isPrivacyOff
+              />
             </View>
           </View>
         </SelectedWalletProvider>
@@ -73,7 +78,7 @@ storiesOf('PairedBalance', module)
         >
           <View style={{flex: 1, justifyContent: 'center'}}>
             <View style={{borderWidth: 1}}>
-              <PairedBalance amount={{quantity: '2', tokenId: mocks.wallet.primaryTokenInfo.id}} />
+              <PairedBalance amount={tokenBalanceMocks.primaryETH} privacyPlaceholder="hide it" />
             </View>
           </View>
         </SelectedWalletProvider>
diff --git a/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx b/apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx
index b012a1683e..447b28ae23 100644
--- 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,9 +9,7 @@ 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
@@ -18,25 +17,35 @@ type Props = {
   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()
@@ -44,26 +53,17 @@ const Price = ({isPrivacyOff, amount, textStyle, privacyPlaceholder}: Props) =>
   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
index f08483a17b..2af9cac126 100644
--- 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
     }
   }
 ]
\ No newline at end of file
diff --git a/packages/portfolio/src/balance-manager.ts b/packages/portfolio/src/balance-manager.ts
index da064a972c..e18d85ddf8 100644
--- a/packages/portfolio/src/balance-manager.ts
+++ b/packages/portfolio/src/balance-manager.ts
@@ -244,6 +244,8 @@ export const portfolioBalanceManagerMaker = (
               balances: [...secondaries.values(), newPrimaryBalance],
             })
             sortedBalances = splitByType(sorted)
+            primaryBreakdown = newPrimaryBreakdown
+            primaryBalance = newPrimaryBalance
 
             observer.notify({
               on: Portfolio.Event.ManagerOn.Sync,