From 61996945748fbcfb5b6b5eefbe42d3160d5b77d4 Mon Sep 17 00:00:00 2001 From: onghwan Date: Mon, 16 Dec 2024 14:15:57 -0500 Subject: [PATCH 1/3] use tokenInCurrencyFormatter to show claimable amount and fees in currency --- .../app/screens/earn/ClaimRewards.tsx | 61 +++++++++++-------- 1 file changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/core-mobile/app/screens/earn/ClaimRewards.tsx b/packages/core-mobile/app/screens/earn/ClaimRewards.tsx index f6c7751e8a..2907a35ed3 100644 --- a/packages/core-mobile/app/screens/earn/ClaimRewards.tsx +++ b/packages/core-mobile/app/screens/earn/ClaimRewards.tsx @@ -40,7 +40,7 @@ import { ConfirmScreen } from './components/ConfirmScreen' type ScreenProps = EarnScreenProps const ClaimRewards = (): JSX.Element | null => { - const { theme } = useApplicationContext() + const { theme, appHook } = useApplicationContext() const { navigate, goBack } = useNavigation() const onBack = useRoute().params?.onBack const { data } = usePChainBalance() @@ -85,29 +85,42 @@ const ClaimRewards = (): JSX.Element | null => { } }, [navigate, showFeeError, insufficientBalanceForFee]) - const [claimableAmountInAvax, claimableAmountInCurrency] = useMemo(() => { - if (data?.balancePerType.unlockedUnstaked) { - const unlockedInUnit = new TokenUnit( - data.balancePerType.unlockedUnstaked, - pNetwork.networkToken.decimals, - pNetwork.networkToken.symbol - ) - return [ - unlockedInUnit.toDisplay(), - unlockedInUnit.mul(avaxPrice).toDisplay() - ] + const [claimableAmountInAvax, formattedClaimableAmountInCurrency] = + useMemo(() => { + if (data?.balancePerType.unlockedUnstaked) { + const unlockedInUnit = new TokenUnit( + data.balancePerType.unlockedUnstaked, + pNetwork.networkToken.decimals, + pNetwork.networkToken.symbol + ) + return [ + unlockedInUnit.toDisplay(), + appHook.tokenInCurrencyFormatter( + Number(unlockedInUnit.mul(avaxPrice).toString()) + ) + ] + } + return [UNKNOWN_AMOUNT, UNKNOWN_AMOUNT] + }, [ + avaxPrice, + data?.balancePerType.unlockedUnstaked, + pNetwork.networkToken.decimals, + pNetwork.networkToken.symbol, + appHook + ]) + + const [feesInAvax, formattedFeesInCurrency] = useMemo(() => { + if (totalFees === undefined) { + return [UNKNOWN_AMOUNT, UNKNOWN_AMOUNT] } - return [UNKNOWN_AMOUNT, UNKNOWN_AMOUNT] - }, [ - avaxPrice, - data?.balancePerType.unlockedUnstaked, - pNetwork.networkToken.decimals, - pNetwork.networkToken.symbol - ]) - const [feesInAvax, feesInCurrency] = useMemo(() => { - return [totalFees?.toDisplay(), totalFees?.mul(avaxPrice).toDisplay()] - }, [avaxPrice, totalFees]) + return [ + totalFees.toDisplay(), + appHook.tokenInCurrencyFormatter( + Number(totalFees.mul(avaxPrice).toString()) + ) + ] + }, [avaxPrice, totalFees, appHook]) const cancelClaim = (): void => { AnalyticsService.capture('StakeCancelClaim') @@ -134,7 +147,7 @@ const ClaimRewards = (): JSX.Element | null => { - {`${feesInCurrency} ${selectedCurrency}`} + {formattedFeesInCurrency} ) @@ -198,7 +211,7 @@ const ClaimRewards = (): JSX.Element | null => { - {`${claimableAmountInCurrency} ${selectedCurrency}`} + {formattedClaimableAmountInCurrency} From 45c7fab6cd0b8d94fa99434433ff73dd8d949484 Mon Sep 17 00:00:00 2001 From: onghwan Date: Mon, 16 Dec 2024 14:37:00 -0500 Subject: [PATCH 2/3] refactoring --- packages/core-mobile/app/screens/earn/ClaimRewards.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-mobile/app/screens/earn/ClaimRewards.tsx b/packages/core-mobile/app/screens/earn/ClaimRewards.tsx index 2907a35ed3..746fafccd5 100644 --- a/packages/core-mobile/app/screens/earn/ClaimRewards.tsx +++ b/packages/core-mobile/app/screens/earn/ClaimRewards.tsx @@ -96,7 +96,7 @@ const ClaimRewards = (): JSX.Element | null => { return [ unlockedInUnit.toDisplay(), appHook.tokenInCurrencyFormatter( - Number(unlockedInUnit.mul(avaxPrice).toString()) + unlockedInUnit.mul(avaxPrice).toDisplay({ asNumber: true }) ) ] } @@ -117,7 +117,7 @@ const ClaimRewards = (): JSX.Element | null => { return [ totalFees.toDisplay(), appHook.tokenInCurrencyFormatter( - Number(totalFees.mul(avaxPrice).toString()) + totalFees.mul(avaxPrice).toDisplay({ asNumber: true }) ) ] }, [avaxPrice, totalFees, appHook]) From 29edfbd7d25782c09f0fd2acb44bb069c9a82ab5 Mon Sep 17 00:00:00 2001 From: onghwan Date: Mon, 16 Dec 2024 14:40:14 -0500 Subject: [PATCH 3/3] fix showing duplicated currency symbol --- .../app/screens/earn/components/StakeCard.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/core-mobile/app/screens/earn/components/StakeCard.tsx b/packages/core-mobile/app/screens/earn/components/StakeCard.tsx index ef17bfbd0a..182511968f 100644 --- a/packages/core-mobile/app/screens/earn/components/StakeCard.tsx +++ b/packages/core-mobile/app/screens/earn/components/StakeCard.tsx @@ -22,7 +22,6 @@ import NetworkService from 'services/network/NetworkService' import { useSelector } from 'react-redux' import { xpChainToken } from 'utils/units/knownTokens' import { UTCDate } from '@date-fns/utc' -import { selectSelectedCurrency } from 'store/settings/currency/slice' import { UNKNOWN_AMOUNT } from 'consts/amount' import { selectActiveNetwork } from 'store/network' import { isDevnet } from 'utils/isDevnet' @@ -59,7 +58,6 @@ export const StakeCard = (props: Props): JSX.Element => { const navigation = useNavigation() const { txHash, status, title, stakeAmount } = props const avaxPrice = useAvaxTokenPriceInSelectedCurrency() - const selectedCurrency = useSelector(selectSelectedCurrency) const isDevMode = useSelector(selectIsDeveloperMode) const activeNetwork = useSelector(selectActiveNetwork) const { networkToken: pChainNetworkToken } = @@ -112,7 +110,7 @@ export const StakeCard = (props: Props): JSX.Element => { const stakeAmountInCurrency = stakeAmountInAvax?.mul(avaxPrice) const stakeAmountInCurrencyDisplay = stakeAmountInCurrency ? tokenInCurrencyFormatter( - stakeAmountInCurrency.toDisplay({ fixedDp: 2, asNumber: true }) + stakeAmountInCurrency.toDisplay({ asNumber: true }) ) : UNKNOWN_AMOUNT @@ -157,7 +155,7 @@ export const StakeCard = (props: Props): JSX.Element => { {stakeAmountInAvaxDisplay} AVAX - {`${stakeAmountInCurrencyDisplay} ${selectedCurrency}`} + {`${stakeAmountInCurrencyDisplay}`} @@ -176,7 +174,7 @@ export const StakeCard = (props: Props): JSX.Element => { {estimatedRewardInAvaxDisplay} AVAX - {`${estimatedRewardInCurrencyDisplay} ${selectedCurrency}`} + {`${estimatedRewardInCurrencyDisplay}`} @@ -202,7 +200,7 @@ export const StakeCard = (props: Props): JSX.Element => { const rewardAmountInCurrencyDisplay = rewardAmountInCurrency ? tokenInCurrencyFormatter( - rewardAmountInCurrency.toDisplay({ fixedDp: 2, asNumber: true }) + rewardAmountInCurrency.toDisplay({ asNumber: true }) ) : UNKNOWN_AMOUNT @@ -223,7 +221,7 @@ export const StakeCard = (props: Props): JSX.Element => { {stakeAmountInAvaxDisplay} AVAX - {`${stakeAmountInCurrencyDisplay} ${selectedCurrency}`} + {`${stakeAmountInCurrencyDisplay}`} @@ -244,7 +242,7 @@ export const StakeCard = (props: Props): JSX.Element => { {rewardAmountInAvaxDisplay} AVAX - {`${rewardAmountInCurrencyDisplay} ${selectedCurrency}`} + {`${rewardAmountInCurrencyDisplay}`}