diff --git a/ui/pages/asset/components/token-asset.js b/ui/pages/asset/components/token-asset.js index 5fef2a741..893d2606c 100644 --- a/ui/pages/asset/components/token-asset.js +++ b/ui/pages/asset/components/token-asset.js @@ -17,8 +17,6 @@ import { import { getURLHostName } from '../../../helpers/utils/util'; import { showModal } from '../../../store/actions'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; -import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send'; - import AssetNavigation from './asset-navigation'; import AssetOptions from './asset-options'; @@ -70,13 +68,9 @@ export default function TokenAsset({ token }) { dispatch(showModal({ name: 'ACCOUNT_DETAILS' })); }} onViewTokenDetails={() => { - dispatch( - updateSendAsset({ - type: ASSET_TYPES.TOKEN, - details: { ...token }, - }), - ).then(() => { - history.push(TOKEN_DETAILS); + history.push({ + pathname: TOKEN_DETAILS, + state: { tokenAddress: token.address }, }); }} tokenSymbol={token.symbol} diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js index 4289f4712..8fb34799a 100644 --- a/ui/pages/token-details/token-details-page.js +++ b/ui/pages/token-details/token-details-page.js @@ -2,7 +2,6 @@ import React, { useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Redirect, useHistory } from 'react-router-dom'; import { getTokens } from '../../ducks/metamask/metamask'; -import { getSendAssetAddress } from '../../ducks/send'; import { getUseTokenDetection, getTokenList } from '../../selectors'; import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'; import { isEqualCaseInsensitive } from '../../helpers/utils/util'; @@ -31,18 +30,13 @@ export default function TokenDetailsPage() { const dispatch = useDispatch(); const history = useHistory(); const t = useContext(I18nContext); - const tokens = useSelector(getTokens); const tokenList = useSelector(getTokenList); const useTokenDetection = useSelector(getUseTokenDetection); - const assetAddress = useSelector((state) => ({ - asset: getSendAssetAddress(state), - })); + const tokenAddress = history?.location?.state?.tokenAddress; - const { asset: tokenAddress } = assetAddress; - - const tokenMetadata = tokenList[tokenAddress]; + const tokenMetadata = tokenList?.[tokenAddress]; const fileName = tokenMetadata?.iconUrl; const imagePath = useTokenDetection ? fileName diff --git a/ui/pages/token-details/token-details-page.test.js b/ui/pages/token-details/token-details-page.test.js index ae5a6a47e..623430725 100644 --- a/ui/pages/token-details/token-details-page.test.js +++ b/ui/pages/token-details/token-details-page.test.js @@ -3,8 +3,10 @@ import configureMockStore from 'redux-mock-store'; import { fireEvent } from '@testing-library/react'; import { renderWithProvider } from '../../../test/lib/render-helpers'; import Identicon from '../../components/ui/identicon/identicon.component'; +import { isEqualCaseInsensitive } from '../../helpers/utils/util'; import TokenDetailsPage from './token-details-page'; +const testTokenAddress = '0xaD6D458402F60fD3Bd25163575031ACDce07538A'; const state = { metamask: { selectedAddress: '0xAddress', @@ -86,10 +88,10 @@ const state = { }, tokens: [ { - address: '0xaD6D458402F60fD3Bd25163575031ACDce07538A', + address: testTokenAddress, symbol: 'DAA', decimals: 18, - image: null, + image: 'testImage', isERC721: false, }, { @@ -101,28 +103,23 @@ const state = { }, ], }, - send: { - asset: { - balance: '0x0', - type: 'TOKEN', - details: { - address: '0xaD6D458402F60fD3Bd25163575031ACDce07538A', - decimals: 18, - image: null, - isERC721: false, - symbol: 'DAI', - }, - }, - }, - token: { - address: '0x6b175474e89094c44da98b954eedeac495271d0f', - decimals: 18, - image: './images/eth_logo.svg', - isERC721: false, - symbol: 'ETH', - }, }; +jest.mock('react-router-dom', () => { + const original = jest.requireActual('react-router-dom'); + return { + ...original, + useHistory: () => ({ + push: jest.fn(), + location: { + state: { + tokenAddress: testTokenAddress, + }, + }, + }), + }; +}); + describe('TokenDetailsPage', () => { it('should render title "Token details" in token details page', () => { const store = configureMockStore()(state); @@ -139,14 +136,13 @@ describe('TokenDetailsPage', () => { }); it('should render an icon image', () => { - const image = ( - + const token = state.metamask.tokens.find(({ address }) => + isEqualCaseInsensitive(address, testTokenAddress), ); - expect(image).toBeDefined(); + const iconImage = ( + + ); + expect(iconImage).toBeDefined(); }); it('should render token contract address title in token details page', () => { @@ -158,7 +154,7 @@ describe('TokenDetailsPage', () => { it('should render token contract address in token details page', () => { const store = configureMockStore()(state); const { getByText } = renderWithProvider(, store); - expect(getByText(state.send.asset.details.address)).toBeInTheDocument(); + expect(getByText(testTokenAddress)).toBeInTheDocument(); }); it('should call copy button when click is simulated', () => {