fix: unformat to raw fiat value for sorting purposes

MetaMask · Sep 25, 2024 · a6d153a · a6d153a
1 parent a0ad07a
commit a6d153a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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,
   };