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) > - + @@ -37,7 +38,7 @@ storiesOf('PairedBalance', module) > - + @@ -55,7 +56,11 @@ storiesOf('PairedBalance', module) > - + @@ -73,7 +78,7 @@ storiesOf('PairedBalance', module) > - + 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(({isPrivacyOff, amount, textStyle, privacyPlaceholder}, ref) => { - const {currency} = useCurrencyContext() +export const PairedBalance = React.forwardRef( + ({isPrivacyOff, amount, textStyle, privacyPlaceholder}, ref) => { + const {currency} = useCurrencyContext() - return ( - ( - - - - ), - }} - > - - - ) -}) + // hide pairing when set to the primary token + if (currency === 'ADA') return null + + return ( + ( + + + + ), + }} + > + + + ) + }, +) 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 ( - - ... {currency} - - ) + 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 ( - {`${pairedTotal} ${currency}`} + {price} ) } @@ -73,11 +73,7 @@ const BalanceError = ({textStyle}: {textStyle?: TextStyle}) => { const styles = useStyles() const {currency} = useCurrencyContext() - return ( - - {strings.pairedBalanceError(currency)} - - ) + return {strings.pairedBalanceError(currency)} } 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,