Refactor TokenBalance component (#8752)

The `TokenBalance` component now uses the new `useTokenTracker` hook
instead of the `withTokenTracker` higher-order component. The component
was converted from a split container/component to a functional
component so that the hook could be used.

The prop `withSymbol` was removed from a few call sites, as it was no
longer used. An empty string was substituted for any falsy `string` or
`symbol` because that's what the `withTokenTracker` higher-order
component did.

ui/app/components/app/wallet-overview/token-overview.js

@@ -31,9 +31,8 @@ const TokenOverview = ({ className, token }) => {
       balance={(
         <div className="token-overview__balance">
           <TokenBalance
-            token={token}
-            withSymbol
             className="token-overview__primary-balance"
+            token={token}
           />
         </div>
       )}

ui/app/components/ui/token-balance/index.js

@@ -1 +1 @@
-export { default } from './token-balance.container'
+export { default } from './token-balance'

ui/app/components/ui/token-balance/token-balance.component.js

@@ -1,23 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import CurrencyDisplay from '../currency-display'
-
-export default class TokenBalance extends PureComponent {
-  static propTypes = {
-    string: PropTypes.string,
-    symbol: PropTypes.string,
-    className: PropTypes.string,
-  }
-
-  render () {
-    const { className, string, symbol } = this.props
-
-    return (
-      <CurrencyDisplay
-        className={className}
-        displayValue={string}
-        suffix={symbol}
-      />
-    )
-  }
-}

ui/app/components/ui/token-balance/token-balance.container.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'redux'
-import withTokenTracker from '../../../helpers/higher-order-components/with-token-tracker'
-import TokenBalance from './token-balance.component'
-import { getSelectedAddress } from '../../../selectors'
-
-const mapStateToProps = (state) => {
-  return {
-    userAddress: getSelectedAddress(state),
-  }
-}
-
-export default compose(
-  connect(mapStateToProps),
-  withTokenTracker
-)(TokenBalance)

ui/app/components/ui/token-balance/token-balance.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../currency-display'
+import { useTokenTracker } from '../../../hooks/useTokenTracker'
+
+export default function TokenBalance ({ className, token }) {
+  const { tokensWithBalances } = useTokenTracker([token])
+
+  const { string, symbol } = tokensWithBalances[0] || {}
+  return (
+    <CurrencyDisplay
+      className={className}
+      displayValue={string || ''}
+      suffix={symbol || ''}
+    />
+  )
+}
+
+TokenBalance.propTypes = {
+  className: PropTypes.string,
+  token: PropTypes.shape({
+    address: PropTypes.string.isRequired,
+    decimals: PropTypes.number,
+    symbol: PropTypes.string,
+  }).isRequired,
+}
+
+TokenBalance.defaultProps = {
+  className: undefined,
+}

ui/app/helpers/higher-order-components/with-token-tracker/tests/with-token-tracker.component.test.js

@@ -1,44 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import withTokenTracker from '../with-token-tracker.component'
-import TokenBalance from '../../../../components/ui/token-balance/token-balance.component'
-// import sinon from 'sinon'
-import TokenTracker from '@metamask/eth-token-tracker'
-
-const { createTestProviderTools } = require('../../../../../../test/stub/provider')
-
-const provider = createTestProviderTools({ scaffold: {} }).provider
-
-describe('WithTokenTracker HOC', function () {
-  let wrapper
-
-  beforeEach(function () {
-    const TokenTracker = withTokenTracker(TokenBalance)
-    wrapper = shallow(
-      <TokenTracker
-        userAddress="0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc"
-        token={
-          {
-            address: 'test',
-          }
-        }
-      />
-    )
-  })
-
-  it('#setError', function () {
-    wrapper.instance().setError('test')
-    assert.equal(wrapper.props().error, 'test')
-  })
-
-  it('#updateBalance', function () {
-    wrapper.instance().tracker = new TokenTracker({
-      provider,
-    })
-    wrapper.instance().updateBalance([{ string: 'test string', symbol: 'test symbol' }])
-    assert.equal(wrapper.props().string, 'test string')
-    assert.equal(wrapper.props().symbol, 'test symbol')
-  })
-
-})

ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js

@@ -146,7 +146,6 @@ export default class SendAssetRow extends Component {
             <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span>
             <TokenBalance
               token={token}
-              withSymbol
             />
           </div>
         </div>