diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx index f705d17fa7d6..40ec79a9e474 100644 --- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx +++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx @@ -73,12 +73,6 @@ const AssetListControlBar = ({ windowType !== ENVIRONMENT_TYPE_POPUP; useEffect(() => { - // this swap is needed when toggling primary currency type for native token in order to sort by tokenFiatAmount only - if (useNativeCurrencyAsPrimaryCurrency) { - [nativeTokenWithBalance.string, nativeTokenWithBalance.tokenFiatAmount] = - [nativeTokenWithBalance.tokenFiatAmount, nativeTokenWithBalance.string]; - } - const sortedTokenList = sortAssets( [nativeTokenWithBalance, ...tokensWithBalances], tokenSortConfig || { diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx index 3178772637fe..917e9508c3c3 100644 --- a/ui/components/app/assets/asset-list/asset-list.tsx +++ b/ui/components/app/assets/asset-list/asset-list.tsx @@ -46,6 +46,7 @@ export type TokenWithBalance = { symbol: string; string?: string; image: string; + secondary?: string; tokenFiatAmount?: string; isNative?: boolean; }; diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx index 73f5acb9e3fe..da32522e60c6 100644 --- a/ui/components/app/assets/asset-list/native-token/native-token.tsx +++ b/ui/components/app/assets/asset-list/native-token/native-token.tsx @@ -28,7 +28,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => { const balance = useSelector(getMultichainSelectedAccountCachedBalance); const balanceIsLoading = !balance; - const { string, symbol, tokenFiatAmount } = useNativeTokenBalance(); + const { string, symbol, secondary } = useNativeTokenBalance(); const primaryTokenImage = useSelector(getMultichainCurrencyImage); @@ -47,7 +47,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => { // TODO: rename this primary/secondary concept here to be more intuitive, regardless of setting primary={string} tokenSymbol={symbol} - secondary={tokenFiatAmount} + secondary={secondary} tokenImage={balanceIsLoading ? null : primaryTokenImage} isOriginalTokenSymbol={isOriginalNativeSymbol} isNativeCurrency diff --git a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts index 91d02b448271..eea954deb520 100644 --- a/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts +++ b/ui/components/app/assets/asset-list/native-token/use-native-token-balance.ts @@ -1,3 +1,4 @@ +import currencyFormatter from 'currency-formatter'; import { useSelector } from 'react-redux'; import { showPrimaryCurrency, @@ -9,7 +10,7 @@ import { getMultichainSelectedAccountCachedBalance, getMultichainShouldShowFiat, } from '../../../../../selectors/multichain'; -import { getPreferences } from '../../../../../selectors'; +import { getCurrentCurrency, getPreferences } from '../../../../../selectors'; import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol'; import { PRIMARY, SECONDARY } from '../../../../../helpers/constants/common'; import { useUserPreferencedCurrency } from '../../../../../hooks/useUserPreferencedCurrency'; @@ -30,7 +31,7 @@ export const useNativeTokenBalance = () => { rpcUrl, ); const balance = useSelector(getMultichainSelectedAccountCachedBalance); - + const currentCurrency = useSelector(getCurrentCurrency); const { currency: primaryCurrency, numberOfDecimals: primaryNumberOfDecimals, @@ -72,12 +73,26 @@ export const useNativeTokenBalance = () => { ? primaryCurrencyProperties.suffix : secondaryCurrencyProperties.suffix; + const unformattedTokenFiatAmount = useNativeCurrencyAsPrimaryCurrency + ? secondaryCurrencyDisplay.toString() + : primaryCurrencyDisplay.toString(); + + // useCurrencyDisplay passes along the symbol and formatting into the value here + // for sorting we need the raw value, without the currency and it should be decimal + // this is the easiest way to do this without extensive refactoring of useCurrencyDisplay + const tokenFiatAmount = currencyFormatter + .unformat(unformattedTokenFiatAmount, { + code: currentCurrency.toUpperCase(), + }) + .toString(); + const nativeTokenWithBalance: TokenWithBalance = { address: '', symbol: tokenSymbol || '', string: primaryBalance, image: primaryTokenImage, - tokenFiatAmount: secondaryBalance, + secondary: secondaryBalance, + tokenFiatAmount, isNative: true, };