fix issue where token details page unnecessarily relies on send asset state (#13717)

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(
+              history.push({
-                updateSendAsset({
+                pathname: TOKEN_DETAILS,
-                  type: ASSET_TYPES.TOKEN,
+                state: { tokenAddress: token.address },
-                  details: { ...token },
-                }),
-              ).then(() => {
-                history.push(TOKEN_DETAILS);
               });
             }}
             tokenSymbol={token.symbol}

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) => ({
+  const tokenAddress = history?.location?.state?.tokenAddress;
-    asset: getSendAssetAddress(state),
-  }));
 
-  const { asset: tokenAddress } = assetAddress;
+  const tokenMetadata = tokenList?.[tokenAddress];
-
-  const tokenMetadata = tokenList[tokenAddress];
   const fileName = tokenMetadata?.iconUrl;
   const imagePath = useTokenDetection
     ? fileName

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 }) =>
-      <Identicon
+      isEqualCaseInsensitive(address, testTokenAddress),
-        diameter={32}
-        address={state.send.asset.details.address}
-        image={state.token.image}
-      />
     );
-    expect(image).toBeDefined();
+    const iconImage = (
+      <Identicon diameter={32} address={testTokenAddress} image={token.image} />
+    );
+    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(<TokenDetailsPage />, store);
-    expect(getByText(state.send.asset.details.address)).toBeInTheDocument();
+    expect(getByText(testTokenAddress)).toBeInTheDocument();
   });
 
   it('should call copy button when click is simulated', () => {