Convert TokenList component to an ES6 class (#7785)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

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

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import TokenCell from './token-cell'
-import { inherits } from 'util'
 import TokenTracker from 'eth-token-tracker'
 import { connect } from 'react-redux'
 import { getSelectedAddress } from '../../selectors/selectors'
@@ -27,88 +26,24 @@ for (const address in contracts) {
   }
 }
 
-TokenList.contextTypes = {
+class TokenList extends Component {
+  static contextTypes = {
     t: PropTypes.func,
-}
-
-export default connect(mapStateToProps)(TokenList)
-
-
-inherits(TokenList, Component)
-function TokenList () {
-  this.state = {
-    tokens: [],
-    isLoading: true,
-    network: null,
   }
-  Component.call(this)
-}
 
-TokenList.prototype.render = function TokenList () {
-  const { userAddress, assetImages } = this.props
-  const state = this.state
-  const { tokens, isLoading, error } = state
-  if (isLoading) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          height: '250px',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '30px',
-        }}
-      >
-        {this.context.t('loadingTokens')}
-      </div>
-    )
+  static propTypes = {
+    tokens: PropTypes.array.isRequired,
+    userAddress: PropTypes.string.isRequired,
+    network: PropTypes.string.isRequired,
+    assetImages: PropTypes.object.isRequired,
   }
 
-  if (error) {
-    log.error(error)
-    return (
-      <div
-        className="hotFix"
-        style={{
-          padding: '80px',
-        }}
-      >
-        {this.context.t('troubleTokenBalances')}
-        <span
-          className="hotFix"
-          style={{
-            color: 'rgba(247, 134, 28, 1)',
-            cursor: 'pointer',
-          }}
-          onClick={() => {
-            global.platform.openWindow({
-              url: `https://ethplorer.io/address/${userAddress}`,
-            })
-          }}
-        >
-          {this.context.t('here')}
-        </span>
-      </div>
-    )
+  state = {
+    tokens: [],
+    isLoading: true,
   }
 
-  return (
-    <div>
-      {tokens.map((tokenData, index) => {
-        tokenData.image = assetImages[tokenData.address]
-        return (
-          <TokenCell key={index} {...tokenData} />
-        )
-      })}
-    </div>
-  )
-}
-
-TokenList.prototype.componentDidMount = function () {
-  this.createFreshTokenTracker()
-}
-
-TokenList.prototype.createFreshTokenTracker = function () {
+  createFreshTokenTracker () {
     if (this.tracker) {
       // Clean up old trackers when refreshing:
       this.tracker.stop()
@@ -145,9 +80,20 @@ TokenList.prototype.createFreshTokenTracker = function () {
         log.error(`Problem updating balances`, reason)
         this.setState({ isLoading: false })
       })
-}
+  }
 
-TokenList.prototype.componentDidUpdate = function (prevProps) {
+  updateBalances = function (tokens) {
+    if (!this.tracker.running) {
+      return
+    }
+    this.setState({ tokens, isLoading: false })
+  }
+
+  componentDidMount () {
+    this.createFreshTokenTracker()
+  }
+
+  componentDidUpdate (prevProps) {
     const {
       network: oldNet,
       userAddress: oldAddress,
@@ -173,20 +119,76 @@ TokenList.prototype.componentDidUpdate = function (prevProps) {
 
     this.setState({ isLoading: true })
     this.createFreshTokenTracker()
-}
-
-TokenList.prototype.updateBalances = function (tokens) {
-  if (!this.tracker.running) {
-    return
   }
-  this.setState({ tokens, isLoading: false })
-}
 
-TokenList.prototype.componentWillUnmount = function () {
+  componentWillUnmount () {
     if (!this.tracker) {
       return
     }
     this.tracker.stop()
     this.tracker.removeListener('update', this.balanceUpdater)
     this.tracker.removeListener('error', this.showError)
+  }
+
+  render () {
+    const { userAddress, assetImages } = this.props
+    const state = this.state
+    const { tokens, isLoading, error } = state
+    if (isLoading) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            height: '250px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '30px',
+          }}
+        >
+          {this.context.t('loadingTokens')}
+        </div>
+      )
+    }
+
+    if (error) {
+      log.error(error)
+      return (
+        <div
+          className="hotFix"
+          style={{
+            padding: '80px',
+          }}
+        >
+          {this.context.t('troubleTokenBalances')}
+          <span
+            className="hotFix"
+            style={{
+              color: 'rgba(247, 134, 28, 1)',
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              global.platform.openWindow({
+                url: `https://ethplorer.io/address/${userAddress}`,
+              })
+            }}
+          >
+            {this.context.t('here')}
+          </span>
+        </div>
+      )
+    }
+
+    return (
+      <div>
+        {tokens.map((tokenData, index) => {
+          tokenData.image = assetImages[tokenData.address]
+          return (
+            <TokenCell key={index} {...tokenData} />
+          )
+        })}
+      </div>
+    )
+  }
 }
+
+export default connect(mapStateToProps)(TokenList)