Split WalletView into component and container files (#7546)

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

@@ -1,178 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const inherits = require('util').inherits
-const { checksumAddress } = require('../../helpers/utils/util')
-// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const actions = require('../../store/actions')
-import BalanceComponent from '../ui/balance'
-const TokenList = require('./token-list')
-const selectors = require('../../selectors/selectors')
-const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes')
-
-import AddTokenButton from './add-token-button'
-import AccountDetails from './account-details'
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(WalletView)
-
-WalletView.contextTypes = {
-  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
-}
-
-WalletView.defaultProps = {
-  responsiveDisplayClassname: '',
-}
-
-function mapStateToProps (state) {
-
-  return {
-    network: state.metamask.network,
-    sidebarOpen: state.appState.sidebar.isOpen,
-    identities: state.metamask.identities,
-    accounts: selectors.getMetaMaskAccounts(state),
-    keyrings: state.metamask.keyrings,
-    selectedAddress: selectors.getSelectedAddress(state),
-    selectedAccount: selectors.getSelectedAccount(state),
-    selectedTokenAddress: state.metamask.selectedTokenAddress,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    showSendPage: () => dispatch(actions.showSendPage()),
-    hideSidebar: () => dispatch(actions.hideSidebar()),
-    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
-    showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
-  }
-}
-
-inherits(WalletView, Component)
-function WalletView () {
-  Component.call(this)
-}
-
-WalletView.prototype.renderWalletBalance = function () {
-  const {
-    selectedTokenAddress,
-    selectedAccount,
-    unsetSelectedToken,
-    hideSidebar,
-    sidebarOpen,
-  } = this.props
-
-  const selectedClass = selectedTokenAddress
-    ? ''
-    : 'wallet-balance-wrapper--active'
-  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
-
-  return h('div', { className }, [
-    h('div.wallet-balance',
-      {
-        onClick: () => {
-          unsetSelectedToken()
-          selectedTokenAddress && sidebarOpen && hideSidebar()
-        },
-      },
-      [
-        h(BalanceComponent, {
-          balanceValue: selectedAccount ? selectedAccount.balance : '',
-          style: {},
-        }),
-      ]
-    ),
-  ])
-}
-
-WalletView.prototype.renderAddToken = function () {
-  const {
-    sidebarOpen,
-    hideSidebar,
-    history,
-  } = this.props
-  const { metricsEvent } = this.context
-
-  return h(AddTokenButton, {
-    onClick () {
-      history.push(ADD_TOKEN_ROUTE)
-      metricsEvent({
-        eventOpts: {
-          category: 'Navigation',
-          action: 'Token Menu',
-          name: 'Clicked "Add Token"',
-        },
-      })
-      if (sidebarOpen) {
-        hideSidebar()
-      }
-    },
-  })
-}
-
-WalletView.prototype.render = function () {
-  const {
-    responsiveDisplayClassname,
-    selectedAddress,
-    keyrings,
-    identities,
-    network,
-  } = this.props
-  // temporary logs + fake extra wallets
-
-  const checksummedAddress = checksumAddress(selectedAddress, network)
-
-  if (!selectedAddress) {
-    throw new Error('selectedAddress should not be ' + String(selectedAddress))
-  }
-
-  const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(selectedAddress)
-  })
-
-  let label = ''
-  let type
-  if (keyring) {
-    type = keyring.type
-    if (type !== 'HD Key Tree') {
-      if (type.toLowerCase().search('hardware') !== -1) {
-        label = this.context.t('hardware')
-      } else {
-        label = this.context.t('imported')
-      }
-    }
-  }
-
-  return h('div.wallet-view.flex-column', {
-    style: {},
-    className: responsiveDisplayClassname,
-  }, [
-
-    h(AccountDetails, {
-      label,
-      checksummedAddress,
-      name: identities[selectedAddress].name,
-    }),
-
-    this.renderWalletBalance(),
-
-    h(TokenList),
-
-    this.renderAddToken(),
-  ])
-}
-
-// TODO: Extra wallets, for dev testing. Remove when PRing to master.
-// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
-//     h('div.wallet-balance', {}, [
-//       h(BalanceComponent, {
-//         balanceValue: selectedAccount.balance,
-//         style: {},
-//       }),
-//     ]),
-// ])

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

@@ -0,0 +1 @@
+export { default } from './wallet-view.container'

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

@@ -0,0 +1,132 @@
+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'
+
+const { checksumAddress } = require('../../../helpers/utils/util')
+const TokenList = require('../token-list')
+const { ADD_TOKEN_ROUTE } = require('../../../helpers/constants/routes')
+
+export default class WalletView extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    responsiveDisplayClassname: '',
+    selectedAccount: null,
+    selectedTokenAddress: null,
+  }
+
+  static propTypes = {
+    selectedTokenAddress: PropTypes.string,
+    selectedAccount: PropTypes.object,
+    selectedAddress: PropTypes.string.isRequired,
+    keyrings: PropTypes.array.isRequired,
+    responsiveDisplayClassname: PropTypes.string,
+    identities: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
+    unsetSelectedToken: PropTypes.func.isRequired,
+    sidebarOpen: PropTypes.bool.isRequired,
+    hideSidebar: 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': Boolean(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()
+          }
+        }}
+      />
+    )
+  }
+
+  render () {
+    const {
+      responsiveDisplayClassname,
+      selectedAddress,
+      keyrings,
+      identities,
+    } = this.props
+
+    const checksummedAddress = checksumAddress(selectedAddress)
+
+    const keyring = keyrings.find((kr) => {
+      return kr.accounts.includes(selectedAddress)
+    })
+
+    let label = ''
+    let type
+    if (keyring) {
+      type = keyring.type
+      if (type !== 'HD Key Tree') {
+        if (type.toLowerCase().search('hardware') !== -1) {
+          label = this.context.t('hardware')
+        } else {
+          label = this.context.t('imported')
+        }
+      }
+    }
+
+    return (
+      <div className={classnames('wallet-view', 'flex-column', responsiveDisplayClassname)}>
+        <AccountDetails
+          label={label}
+          checksummedAddress={checksummedAddress}
+          name={identities[selectedAddress].name}
+        />
+        {this.renderWalletBalance()}
+        <TokenList />
+        {this.renderAddToken()}
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,33 @@
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { compose } from 'recompose'
+import WalletView from './wallet-view.component'
+import {showSendPage, hideSidebar, setSelectedToken, showAddTokenPage} from '../../../store/actions'
+import * as selectors from '../../../selectors/selectors'
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    sidebarOpen: state.appState.sidebar.isOpen,
+    identities: state.metamask.identities,
+    accounts: selectors.getMetaMaskAccounts(state),
+    keyrings: state.metamask.keyrings,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedAccount: selectors.getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSendPage: () => dispatch(showSendPage()),
+    hideSidebar: () => dispatch(hideSidebar()),
+    unsetSelectedToken: () => dispatch(setSelectedToken()),
+    showAddTokenPage: () => dispatch(showAddTokenPage()),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(WalletView)