Refactor asset list into separate component (#8263)

The pieces that we'll be referring to as the "Asset List" in the near
future have been extracted from WalletView into a separate AssetList
component. This list includes ETH, the tokens, and the 'Add Token'
button.

The styles were moved alongside this new component as well.

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

@@ -0,0 +1,114 @@
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import BalanceComponent from '../../ui/balance'
+import AddTokenButton from '../add-token-button'
+import TokenList from '../token-list'
+import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes'
+
+export default class AssetList extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    selectedAccount: undefined,
+    selectedTokenAddress: undefined,
+  }
+
+  static propTypes = {
+    hideSidebar: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+    selectedAccount: PropTypes.object,
+    selectedTokenAddress: PropTypes.string,
+    setSelectedToken: PropTypes.func.isRequired,
+    sidebarOpen: PropTypes.bool.isRequired,
+    unsetSelectedToken: PropTypes.func.isRequired,
+  }
+
+  renderWalletBalance () {
+    const {
+      hideSidebar,
+      selectedTokenAddress,
+      selectedAccount,
+      sidebarOpen,
+      unsetSelectedToken,
+    } = this.props
+
+    return (
+      <div
+        className={classnames('flex-column', 'wallet-balance-wrapper', {
+          'wallet-balance-wrapper--active': !selectedTokenAddress,
+        })}
+      >
+        <div
+          className="wallet-balance"
+          onClick={() => {
+            unsetSelectedToken()
+            selectedTokenAddress && sidebarOpen && hideSidebar()
+          }}
+        >
+          <BalanceComponent
+            balanceValue={selectedAccount ? selectedAccount.balance : ''}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderAddToken () {
+    const {
+      hideSidebar,
+      history,
+      sidebarOpen,
+    } = 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"',
+            },
+          })
+          if (sidebarOpen) {
+            hideSidebar()
+          }
+        }}
+      />
+    )
+  }
+
+  render () {
+    const {
+      hideSidebar,
+      selectedTokenAddress,
+      setSelectedToken,
+      sidebarOpen,
+    } = this.props
+    return (
+      <>
+        {this.renderWalletBalance()}
+        <TokenList
+          onTokenClick={(tokenAddress) => {
+            setSelectedToken(tokenAddress)
+            this.context.metricsEvent({
+              eventOpts: {
+                category: 'Navigation',
+                action: 'Token Menu',
+                name: 'Clicked Token',
+              },
+            })
+            selectedTokenAddress !== tokenAddress && sidebarOpen && hideSidebar()
+          }}
+        />
+        {this.renderAddToken()}
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'redux'
+import AssetList from './asset-list.component'
+import { hideSidebar, setSelectedToken } from '../../../store/actions'
+import { getSelectedAccount } from '../../../selectors/selectors'
+
+function mapStateToProps (state) {
+  return {
+    sidebarOpen: state.appState.sidebar.isOpen,
+    selectedAccount: getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideSidebar: () => dispatch(hideSidebar()),
+    setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)),
+    unsetSelectedToken: () => dispatch(setSelectedToken()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AssetList)

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

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

ui/app/components/app/index.scss

@@ -6,6 +6,8 @@
 
 @import 'app-header/index';
 
+@import 'asset-list/asset-list.scss';
+
 @import '../ui/breadcrumbs/index';
 
 @import '../ui/button-group/index';

ui/app/components/app/wallet-view/wallet-view.component.js

@@ -1,13 +1,11 @@
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import BalanceComponent from '../../ui/balance'
-import AddTokenButton from '../add-token-button'
 import AccountDetails from '../account-details'
 
 import { checksumAddress } from '../../../helpers/utils/util'
-import TokenList from '../token-list'
+import AssetList from '../asset-list'
-import { ADD_TOKEN_ROUTE, CONNECTED_ROUTE } from '../../../helpers/constants/routes'
+import { CONNECTED_ROUTE } from '../../../helpers/constants/routes'
 
 export default class WalletView extends Component {
   static contextTypes = {
@@ -17,8 +15,6 @@ export default class WalletView extends Component {
 
   static defaultProps = {
     responsiveDisplayClassname: '',
-    selectedAccount: null,
-    selectedTokenAddress: null,
   }
 
   static propTypes = {
@@ -27,69 +23,8 @@ export default class WalletView extends Component {
     identities: PropTypes.object.isRequired,
     keyrings: PropTypes.array.isRequired,
     responsiveDisplayClassname: PropTypes.string,
-    selectedAccount: PropTypes.object,
     selectedAddress: PropTypes.string.isRequired,
-    selectedTokenAddress: PropTypes.string,
-    setSelectedToken: PropTypes.func.isRequired,
     sidebarOpen: PropTypes.bool.isRequired,
-    unsetSelectedToken: PropTypes.func.isRequired,
-  }
-
-  renderWalletBalance () {
-    const {
-      selectedTokenAddress,
-      selectedAccount,
-      unsetSelectedToken,
-      hideSidebar,
-      sidebarOpen,
-    } = this.props
-
-    return (
-      <div
-        className={classnames('flex-column', 'wallet-balance-wrapper', {
-          'wallet-balance-wrapper--active': !selectedTokenAddress,
-        })}
-      >
-        <div
-          className="wallet-balance"
-          onClick={() => {
-            unsetSelectedToken()
-            selectedTokenAddress && sidebarOpen && hideSidebar()
-          }}
-        >
-          <BalanceComponent
-            balanceValue={selectedAccount ? selectedAccount.balance : ''}
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderAddToken () {
-    const {
-      sidebarOpen,
-      hideSidebar,
-      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"',
-            },
-          })
-          if (sidebarOpen) {
-            hideSidebar()
-          }
-        }}
-      />
-    )
   }
 
   showConnectedSites = () => {
@@ -106,14 +41,10 @@ export default class WalletView extends Component {
 
   render () {
     const {
-      hideSidebar,
       identities,
       keyrings,
       responsiveDisplayClassname,
       selectedAddress,
-      selectedTokenAddress,
-      setSelectedToken,
-      sidebarOpen,
     } = this.props
 
     const checksummedAddress = checksumAddress(selectedAddress)
@@ -143,21 +74,7 @@ export default class WalletView extends Component {
           name={identities[selectedAddress].name}
           showConnectedSites={this.showConnectedSites}
         />
-        {this.renderWalletBalance()}
+        <AssetList />
-        <TokenList
-          onTokenClick={(tokenAddress) => {
-            setSelectedToken(tokenAddress)
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Navigation',
-                action: 'Token Menu',
-                name: 'Clicked Token',
-              },
-            })
-            selectedTokenAddress !== tokenAddress && sidebarOpen && hideSidebar()
-          }}
-        />
-        {this.renderAddToken()}
       </div>
     )
   }

ui/app/components/app/wallet-view/wallet-view.container.js

@@ -2,8 +2,8 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'redux'
 import WalletView from './wallet-view.component'
-import { hideSidebar, setSelectedToken } from '../../../store/actions'
+import { hideSidebar } from '../../../store/actions'
-import { getSelectedAddress, getSelectedAccount } from '../../../selectors/selectors'
+import { getSelectedAddress } from '../../../selectors/selectors'
 
 function mapStateToProps (state) {
   return {
@@ -11,16 +11,12 @@ function mapStateToProps (state) {
     identities: state.metamask.identities,
     keyrings: state.metamask.keyrings,
     selectedAddress: getSelectedAddress(state),
-    selectedAccount: getSelectedAccount(state),
-    selectedTokenAddress: state.metamask.selectedTokenAddress,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
     hideSidebar: () => dispatch(hideSidebar()),
-    setSelectedToken: (tokenAddress) => dispatch(setSelectedToken(tokenAddress)),
-    unsetSelectedToken: () => dispatch(setSelectedToken()),
   }
 }
 

ui/app/css/itcss/components/index.scss

@@ -23,9 +23,6 @@
 
 @import './loading-overlay.scss';
 
-// Balances
-@import './wallet-balance.scss';
-
 // Tx List and Sections
 @import './transaction-list.scss';