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', () => {