Convert AssetList to functional component (#8588)

The `AssetList` component is now a function rather than a class, and it
makes use of the new `useMetricsEvent` and `useUserPreferencedCurrency`
hooks.

ui/app/components/app/asset-list/asset-list.component.js

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import AddTokenButton from '../add-token-button'
-import TokenList from '../token-list'
-import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes'
-import AssetListItem from '../asset-list-item'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
-
-export default class AssetList extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static defaultProps = {
-    selectedTokenAddress: undefined,
-  }
-
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-    selectedAccountBalance: PropTypes.string,
-    selectedTokenAddress: PropTypes.string,
-    setSelectedToken: PropTypes.func.isRequired,
-    showFiat: PropTypes.bool.isRequired,
-    unsetSelectedToken: PropTypes.func.isRequired,
-  }
-
-  renderWalletBalance () {
-    const {
-      selectedAccountBalance,
-      selectedTokenAddress,
-      showFiat,
-      unsetSelectedToken,
-    } = this.props
-
-    return (
-      <AssetListItem
-        active={!selectedTokenAddress}
-        onClick={unsetSelectedToken}
-        data-testid="wallet-balance"
-      >
-        <UserPreferencedCurrencyDisplay
-          className="asset-list__primary-amount"
-          ethNumberOfDecimals={4}
-          type={PRIMARY}
-          value={selectedAccountBalance}
-        />
-        {
-          showFiat && (
-            <UserPreferencedCurrencyDisplay
-              className="asset-list__secondary-amount"
-              ethNumberOfDecimals={4}
-              type={SECONDARY}
-              value={selectedAccountBalance}
-            />
-          )
-        }
-      </AssetListItem>
-    )
-  }
-
-  renderAddToken () {
-    const {
-      history,
-    } = this.props
-    const { metricsEvent } = this.context
-
-    return (
-      <AddTokenButton
-        onClick={() => {
-          history.push(ADD_TOKEN_ROUTE)
-          metricsEvent({
-            eventOpts: {
-              category: 'Navigation',
-              action: 'Token Menu',
-              name: 'Clicked "Add Token"',
-            },
-          })
-        }}
-      />
-    )
-  }
-
-  render () {
-    const { setSelectedToken } = this.props
-    return (
-      <>
-        {this.renderWalletBalance()}
-        <TokenList
-          onTokenClick={(tokenAddress) => {
-            setSelectedToken(tokenAddress)
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Token Menu',
-                name: 'Clicked Token',
-              },
-            })
-          }}
-        />
-        {this.renderAddToken()}
-      </>
-    )
-  }
-}

ui/app/components/app/asset-list/asset-list.container.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'redux'
-import AssetList from './asset-list.component'
-import { setSelectedToken } from '../../../store/actions'
-import { getCurrentAccountWithSendEtherInfo, getShouldShowFiat } from '../../../selectors/selectors'
-
-function mapStateToProps (state) {
-  return {
-    selectedAccountBalance: getCurrentAccountWithSendEtherInfo(state).balance,
-    selectedTokenAddress: state.metamask.selectedTokenAddress,
-    showFiat: getShouldShowFiat(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)),
-    unsetSelectedToken: () => dispatch(setSelectedToken()),
-  }
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(AssetList)

ui/app/components/app/asset-list/asset-list.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import AddTokenButton from '../add-token-button'
+import TokenList from '../token-list'
+import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes'
+import AssetListItem from '../asset-list-item'
+import CurrencyDisplay from '../../ui/currency-display'
+import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
+import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency'
+import { getCurrentAccountWithSendEtherInfo, getShouldShowFiat } from '../../../selectors/selectors'
+import { setSelectedToken } from '../../../store/actions'
+
+const AssetList = () => {
+  const dispatch = useDispatch()
+  const history = useHistory()
+  const selectedAccountBalance = useSelector((state) => getCurrentAccountWithSendEtherInfo(state).balance)
+  const selectedTokenAddress = useSelector((state) => state.metamask.selectedTokenAddress)
+  const showFiat = useSelector(getShouldShowFiat)
+  const metricsEvent = useMetricEvent()
+
+  const {
+    currency: primaryCurrency,
+    numberOfDecimals: primaryNumberOfDecimals,
+  } = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 })
+  const {
+    currency: secondaryCurrency,
+    numberOfDecimals: secondaryNumberOfDecimals,
+  } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 })
+
+  return (
+    <>
+      <AssetListItem
+        active={!selectedTokenAddress}
+        onClick={() => dispatch(setSelectedToken())}
+        data-testid="wallet-balance"
+      >
+        <CurrencyDisplay
+          className="asset-list__primary-amount"
+          currency={primaryCurrency}
+          numberOfDecimals={primaryNumberOfDecimals}
+          value={selectedAccountBalance}
+        />
+        {
+          showFiat && (
+            <CurrencyDisplay
+              className="asset-list__secondary-amount"
+              currency={secondaryCurrency}
+              numberOfDecimals={secondaryNumberOfDecimals}
+              value={selectedAccountBalance}
+            />
+          )
+        }
+      </AssetListItem>
+      <TokenList
+        onTokenClick={(tokenAddress) => {
+          dispatch(setSelectedToken(tokenAddress))
+          metricsEvent({
+            eventOpts: {
+              category: 'Navigation',
+              action: 'Token Menu',
+              name: 'Clicked Token',
+            },
+          })
+        }}
+      />
+      <AddTokenButton
+        onClick={() => {
+          history.push(ADD_TOKEN_ROUTE)
+          metricsEvent({
+            eventOpts: {
+              category: 'Navigation',
+              action: 'Token Menu',
+              name: 'Clicked "Add Token"',
+            },
+          })
+        }}
+      />
+    </>
+  )
+}
+
+export default AssetList

ui/app/components/app/asset-list/index.js

@@ -1 +1 @@
-export { default } from './asset-list.container.js'
+export { default } from './asset-list.js'