diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index 63e11b77d40c..c6575d1e6a1f 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -49,6 +49,7 @@ import {
showPrimaryCurrency,
showSecondaryCurrency,
} from '../../../../shared/modules/currency-display.utils';
+import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../helpers/utils/util';
const AssetList = ({ onClickAsset }) => {
const [showDetectedTokens, setShowDetectedTokens] = useState(false);
@@ -105,7 +106,10 @@ const AssetList = ({ onClickAsset }) => {
const { tokensWithBalances, totalFiatBalance, totalWeiBalance, loading } =
useAccountTotalFiatBalance(selectedAddress, shouldHideZeroBalanceTokens);
-
+ tokensWithBalances.forEach((token) => {
+ // token.string is the balance displayed in the TokenList UI
+ token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
+ });
const balanceIsZero = Number(totalFiatBalance) === 0;
const isBuyableChain = useSelector(getIsBuyableChain);
const shouldShowBuy = isBuyableChain && balanceIsZero;
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index 1767fab5562a..ebf7e4a58ccf 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -43,7 +43,7 @@ exports[`Token Cell should match snapshot 1`] = `
style="flex-grow: 1; overflow: hidden;"
>
-
- 5.000
-
- TEST
-
-
+
+
+
diff --git a/ui/components/app/token-cell/token-cell.test.js b/ui/components/app/token-cell/token-cell.test.js
index 0988ab5d305c..f3ccd03fb27d 100644
--- a/ui/components/app/token-cell/token-cell.test.js
+++ b/ui/components/app/token-cell/token-cell.test.js
@@ -109,14 +109,14 @@ describe('Token Cell', () => {
});
it('should render the correct token and filter by symbol and address', () => {
- const { queryByText, getByAltText } = renderWithProvider(
+ const { getByTestId, getByAltText } = renderWithProvider(
,
mockStore,
);
const image = getByAltText('TEST logo');
- expect(queryByText('TEST')).toBeInTheDocument();
+ expect(getByTestId('multichain-token-list-item-value')).toBeInTheDocument();
expect(image).toBeInTheDocument();
expect(image).toHaveAttribute('src', './images/test_image.svg');
});
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 4ab0d2a4ffdd..df718b429400 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -38,7 +38,7 @@ exports[`TokenListItem should render correctly 1`] = `
style="flex-grow: 1; overflow: hidden;"
>
-
-
-
-
+
+
+
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 669d4f704619..74a3125dba8b 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -200,6 +200,7 @@ export const TokenListItem = ({
>
@@ -222,10 +223,10 @@ export const TokenListItem = ({
>
{isStakeable ? (
<>
- {tokenTitle} {stakeableTitle}
+ {tokenSymbol} {stakeableTitle}
>
) : (
- tokenTitle
+ tokenSymbol
)}
@@ -238,10 +239,10 @@ export const TokenListItem = ({
>
{isStakeable ? (
- {tokenTitle} {stakeableTitle}
+ {tokenSymbol} {stakeableTitle}
) : (
- tokenTitle
+ tokenSymbol
)}
)}
@@ -271,12 +272,37 @@ export const TokenListItem = ({
)}
-
- {primary} {tokenSymbol}{' '}
-
+
+ {/* bottom left */}
+
+ {tokenTitle}
+
+
+
+ {/* bottom right */}
+
+ {primary} {tokenSymbol}{' '}
+
+
+
{showScamWarningModal ? (