diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js index 0d82e5f6fe34..abca2af153f0 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js @@ -84,7 +84,7 @@ export default function UserPreferencedCurrencyDisplay({ numberOfDecimals={numberOfDecimals} prefixComponent={prefixComponent} hideLabel={!showCurrencySuffix} - suffix={showCurrencySuffix && !showEthLogo && currency.toUpperCase()} + suffix={showCurrencySuffix && !showEthLogo && currency} privacyMode={privacyMode} /> ); diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index b5ebc0a83eb6..757e5b56f563 100644 --- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap +++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap @@ -180,9 +180,10 @@ exports[`AssetPage should render a native asset 1`] = ` class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column" data-testid="multichain-token-list-item" > -
Ethereum Mainnet logo @@ -221,12 +222,14 @@ exports[`AssetPage should render a native asset 1`] = ` > TEST -

- TEST -

+

+

+ > + $0.00 +

- 0 TEST + 0 - + TEST

@@ -249,7 +254,7 @@ exports[`AssetPage should render a native asset 1`] = ` class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between" /> - +
-
Ethereum Mainnet logo @@ -526,7 +532,9 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `

+ > + $0.00 +

-
+
-
Ethereum Mainnet logo @@ -1009,7 +1018,9 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `

+ > + $0.00 +

-
+
({ }, })); +jest.mock('../../../hooks/useMultiPolling', () => ({ + __esModule: true, + default: jest.fn(), +})); + describe('AssetPage', () => { const mockStore = { localeMessages: { @@ -40,10 +46,24 @@ describe('AssetPage', () => { }, metamask: { tokenList: {}, + tokenBalances: {}, + marketData: {}, + allTokens: {}, + accountsByChainId: { + '0x1': { + 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': { + address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', + balance: '0x00', + }, + }, + }, currentCurrency: 'usd', accounts: {}, ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }), currencyRates: { + TEST: { + conversionRate: 123, + }, ETH: { conversionRate: 123, }, @@ -53,7 +73,7 @@ describe('AssetPage', () => { internalAccounts: { accounts: { 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': { - address: '0x1', + address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3', metadata: { name: 'Test Account', @@ -119,6 +139,23 @@ describe('AssetPage', () => { formatRangeToParts: jest.fn(), }; }); + // Clear previous mock implementations + (useMultiPolling as jest.Mock).mockClear(); + + // Mock implementation for useMultiPolling + (useMultiPolling as jest.Mock).mockImplementation(({ input }) => { + // Mock startPolling and stopPollingByPollingToken for each input + const startPolling = jest.fn().mockResolvedValue('mockPollingToken'); + const stopPollingByPollingToken = jest.fn(); + + input.forEach((inputItem: string) => { + const key = JSON.stringify(inputItem); + // Simulate returning a unique token for each input + startPolling.mockResolvedValueOnce(`mockToken-${key}`); + }); + + return { startPolling, stopPollingByPollingToken }; + }); }); afterEach(() => { @@ -320,50 +357,47 @@ describe('AssetPage', () => { }); it('should render an ERC20 token with prices', async () => { - // jest.useFakeTimers(); - try { - const address = '0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55'; - const marketCap = 456; - - // Mock price history - nock('https://price.api.cx.metamask.io') - .get(`/v1/chains/${CHAIN_IDS.MAINNET}/historical-prices/${address}`) - .query(true) - .reply(200, { prices: [[1, 1]] }); - - const { queryByTestId, container } = renderWithProvider( - , - configureMockStore([thunk])({ - ...mockStore, - metamask: { - ...mockStore.metamask, - marketData: { - [CHAIN_IDS.MAINNET]: { - [address]: { - price: 123, - marketCap, - }, + const address = '0xe4246B1Ac0Ba6839d9efA41a8A30AE3007185f55'; + const marketCap = 456; + + // Mock price history + nock('https://price.api.cx.metamask.io') + .get(`/v1/chains/${CHAIN_IDS.MAINNET}/historical-prices/${address}`) + .query(true) + .reply(200, { prices: [[1, 1]] }); + + const { queryByTestId, container } = renderWithProvider( + , + configureMockStore([thunk])({ + ...mockStore, + metamask: { + ...mockStore.metamask, + marketData: { + [CHAIN_IDS.MAINNET]: { + [address]: { + price: 123, + marketCap, + currency: 'ETH', }, }, }, - }), - ); + }, + }), + ); - // Verify chart is rendered - await waitFor(() => { - const chart = queryByTestId('asset-price-chart'); - expect(chart).toHaveClass('mm-box--background-color-transparent'); - }); + // Verify chart is rendered + await waitFor(() => { + const chart = queryByTestId('asset-price-chart'); + console.log('CHART: ', chart); + expect(chart).toHaveClass('mm-box--background-color-transparent'); + }); - // Verify market data is rendered - const marketCapElement = queryByTestId('asset-market-cap'); - expect(marketCapElement).toHaveTextContent( - `${marketCap * mockStore.metamask.currencyRates.ETH.conversionRate}`, - ); + // Verify market data is rendered + const marketCapElement = queryByTestId('asset-market-cap'); + expect(marketCapElement).toHaveTextContent( + `${marketCap * mockStore.metamask.currencyRates.ETH.conversionRate}`, + ); - expect(container).toMatchSnapshot(); - } finally { - // jest.useRealTimers(); - } + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx index 0ef573e5d66b..17c50fe9c050 100644 --- a/ui/pages/asset/components/asset-page.tsx +++ b/ui/pages/asset/components/asset-page.tsx @@ -113,6 +113,7 @@ const AssetPage = ({ ) as Record; const { chainId, type, symbol, name, image, decimals } = asset; + console.log(symbol); const address = type === AssetType.token @@ -155,6 +156,8 @@ const AssetPage = ({ tokenMarketDetails.allTimeHigh > 0 || tokenMarketDetails.allTimeLow > 0); + console.log('chart', chainId, address, currentPrice, currency); + return (