Refactor asset page component (#8788)

The asset page component has been split into three parts: the main
asset page wrapper, and a component for the content (either token or
native currency). This makes it easier to add functionality that is
specific to either token asset pages or native currency asset pages.

ui/app/pages/asset/asset.js

@@ -1,63 +1,30 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
-import { Redirect, useHistory, useParams } from 'react-router-dom'
+import { Redirect, useParams } from 'react-router-dom'
-import { createAccountLink } from '@metamask/etherscan-link'
-
-import TransactionList from '../../components/app/transaction-list'
-import { EthOverview, TokenOverview } from '../../components/app/wallet-overview'
-import { getCurrentNetworkId, getSelectedIdentity } from '../../selectors/selectors'
 import { getTokens } from '../../ducks/metamask/metamask'
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
-import { showModal } from '../../store/actions'
 
-import AssetNavigation from './components/asset-navigation'
+import NativeAsset from './components/native-asset'
-import TokenOptions from './components/token-options'
+import TokenAsset from './components/token-asset'
 
 const Asset = () => {
-  const dispatch = useDispatch()
-  const network = useSelector(getCurrentNetworkId)
-  const selectedAccountName = useSelector((state) => getSelectedIdentity(state).name)
   const nativeCurrency = useSelector((state) => state.metamask.nativeCurrency)
   const tokens = useSelector(getTokens)
-  const history = useHistory()
   const { asset } = useParams()
 
   const token = tokens.find((token) => token.address === asset)
 
-  let assetName
+  let content
-  let optionsButton
-
   if (token) {
-    assetName = token.symbol
+    content = <TokenAsset token={token} />
-    optionsButton = (
-      <TokenOptions
-        onRemove={() => dispatch(showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))}
-        onViewEtherscan={() => {
-          const url = createAccountLink(token.address, network)
-          global.platform.openTab({ url })
-        }}
-        tokenSymbol={token.symbol}
-      />
-    )
   } else if (asset === nativeCurrency) {
-    assetName = nativeCurrency
+    content = <NativeAsset nativeCurrency={nativeCurrency} />
   } else {
-    return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
+    content = <Redirect to={{ pathname: DEFAULT_ROUTE }} />
   }
-
-  const overview = token
-    ? <TokenOverview className="asset__overview" token={token} />
-    : <EthOverview className="asset__overview" />
   return (
     <div className="main-container asset__container">
-      <AssetNavigation
+      { content }
-        accountName={selectedAccountName}
-        assetName={assetName}
-        onBack={() => history.push(DEFAULT_ROUTE)}
-        optionsButton={optionsButton}
-      />
-      { overview }
-      <TransactionList tokenAddress={token?.address} />
     </div>
   )
 }

ui/app/pages/asset/components/native-asset.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+
+import TransactionList from '../../../components/app/transaction-list'
+import { EthOverview } from '../../../components/app/wallet-overview'
+import { getSelectedIdentity } from '../../../selectors/selectors'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+
+import AssetNavigation from './asset-navigation'
+
+export default function NativeAsset ({ nativeCurrency }) {
+  const selectedAccountName = useSelector((state) => getSelectedIdentity(state).name)
+  const history = useHistory()
+
+  return (
+    <>
+      <AssetNavigation
+        accountName={selectedAccountName}
+        assetName={nativeCurrency}
+        onBack={() => history.push(DEFAULT_ROUTE)}
+      />
+      <EthOverview className="asset__overview" />
+      <TransactionList />
+    </>
+  )
+}
+
+NativeAsset.propTypes = {
+  nativeCurrency: PropTypes.string.isRequired,
+}

ui/app/pages/asset/components/token-asset.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { createAccountLink } from '@metamask/etherscan-link'
+
+import TransactionList from '../../../components/app/transaction-list'
+import { TokenOverview } from '../../../components/app/wallet-overview'
+import { getCurrentNetworkId, getSelectedIdentity } from '../../../selectors/selectors'
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
+import { showModal } from '../../../store/actions'
+
+import AssetNavigation from './asset-navigation'
+import TokenOptions from './token-options'
+
+export default function TokenAsset ({ token }) {
+  const dispatch = useDispatch()
+  const network = useSelector(getCurrentNetworkId)
+  const selectedAccountName = useSelector((state) => getSelectedIdentity(state).name)
+  const history = useHistory()
+
+  return (
+    <>
+      <AssetNavigation
+        accountName={selectedAccountName}
+        assetName={token.symbol}
+        onBack={() => history.push(DEFAULT_ROUTE)}
+        optionsButton={(
+          <TokenOptions
+            onRemove={() => dispatch(showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))}
+            onViewEtherscan={() => {
+              const url = createAccountLink(token.address, network)
+              global.platform.openTab({ url })
+            }}
+            tokenSymbol={token.symbol}
+          />
+        )}
+      />
+      <TokenOverview className="asset__overview" token={token} />
+      <TransactionList tokenAddress={token.address} />
+    </>
+  )
+}
+
+TokenAsset.propTypes = {
+  token: PropTypes.shape({
+    address: PropTypes.string.isRequired,
+    decimals: PropTypes.number,
+    symbol: PropTypes.string,
+  }).isRequired,
+}