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 - -

+
+

+ TEST +

+
+
+

+ 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 ? (