Add scrolling button to account list

1 files changed, 1 insertions, 249 deletions

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index e88389096..b2b4e4c6f 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -1,249 +1 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const { compose } = require('recompose')
-const { withRouter } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const actions = require('../../actions')
-const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
-const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
-const Tooltip = require('../tooltip')
-import Identicon from '../identicon'
-import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
-import { PRIMARY } from '../../constants/common'
-import { getMetaMaskAccounts } from '../../selectors'
-
-const {
-  SETTINGS_ROUTE,
-  INFO_ROUTE,
-  NEW_ACCOUNT_ROUTE,
-  IMPORT_ACCOUNT_ROUTE,
-  CONNECT_HARDWARE_ROUTE,
-  DEFAULT_ROUTE,
-} = require('../../routes')
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(AccountMenu)
-
-AccountMenu.contextTypes = {
-  t: PropTypes.func,
-}
-
-inherits(AccountMenu, Component)
-function AccountMenu () { Component.call(this) }
-
-function mapStateToProps (state) {
-  return {
-    selectedAddress: state.metamask.selectedAddress,
-    isAccountMenuOpen: state.metamask.isAccountMenuOpen,
-    keyrings: state.metamask.keyrings,
-    identities: state.metamask.identities,
-    accounts: getMetaMaskAccounts(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
-    showAccountDetail: address => {
-      dispatch(actions.showAccountDetail(address))
-      dispatch(actions.hideSidebar())
-      dispatch(actions.toggleAccountMenu())
-    },
-    lockMetamask: () => {
-      dispatch(actions.lockMetamask())
-      dispatch(actions.hideWarning())
-      dispatch(actions.hideSidebar())
-      dispatch(actions.toggleAccountMenu())
-    },
-    showConfigPage: () => {
-      dispatch(actions.showConfigPage())
-      dispatch(actions.hideSidebar())
-      dispatch(actions.toggleAccountMenu())
-    },
-    showInfoPage: () => {
-      dispatch(actions.showInfoPage())
-      dispatch(actions.hideSidebar())
-      dispatch(actions.toggleAccountMenu())
-    },
-    showRemoveAccountConfirmationModal: (identity) => {
-      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
-    },
-  }
-}
-
-AccountMenu.prototype.render = function () {
-  const {
-    isAccountMenuOpen,
-    toggleAccountMenu,
-    lockMetamask,
-    history,
-  } = this.props
-
-  return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
-    h(CloseArea, { onClick: toggleAccountMenu }),
-    h(Item, {
-      className: 'account-menu__header',
-    }, [
-      this.context.t('myAccounts'),
-      h('button.account-menu__logout-button', {
-        onClick: () => {
-          lockMetamask()
-          history.push(DEFAULT_ROUTE)
-        },
-      }, this.context.t('logout')),
-    ]),
-    h(Divider),
-    h('div.account-menu__accounts', this.renderAccounts()),
-    h(Divider),
-    h(Item, {
-      onClick: () => {
-        toggleAccountMenu()
-        history.push(NEW_ACCOUNT_ROUTE)
-      },
-      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
-      text: this.context.t('createAccount'),
-    }),
-    h(Item, {
-      onClick: () => {
-        toggleAccountMenu()
-        history.push(IMPORT_ACCOUNT_ROUTE)
-      },
-      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
-      text: this.context.t('importAccount'),
-    }),
-    h(Item, {
-      onClick: () => {
-        toggleAccountMenu()
-        if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-          global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE)
-        } else {
-          history.push(CONNECT_HARDWARE_ROUTE)
-        }
-      },
-      icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }),
-      text: this.context.t('connectHardwareWallet'),
-    }),
-    h(Divider),
-    h(Item, {
-      onClick: () => {
-        toggleAccountMenu()
-        history.push(INFO_ROUTE)
-      },
-      icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: this.context.t('infoHelp'),
-    }),
-    h(Item, {
-      onClick: () => {
-        toggleAccountMenu()
-        history.push(SETTINGS_ROUTE)
-      },
-      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-      text: this.context.t('settings'),
-    }),
-  ])
-}
-
-AccountMenu.prototype.renderAccounts = function () {
-  const {
-    identities,
-    accounts,
-    selectedAddress,
-    keyrings,
-    showAccountDetail,
-  } = this.props
-
-  const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), [])
-  return accountOrder.filter(address => !!identities[address]).map((address) => {
-
-    const identity = identities[address]
-    const isSelected = identity.address === selectedAddress
-
-    const balanceValue = accounts[address] ? accounts[address].balance : ''
-    const simpleAddress = identity.address.substring(2).toLowerCase()
-
-    const keyring = keyrings.find((kr) => {
-      return kr.accounts.includes(simpleAddress) ||
-        kr.accounts.includes(identity.address)
-    })
-
-    return h(
-      'div.account-menu__account.menu__item--clickable',
-      { onClick: () => showAccountDetail(identity.address) },
-      [
-        h('div.account-menu__check-mark', [
-          isSelected ? h('div.account-menu__check-mark-icon') : null,
-        ]),
-
-        h(
-          Identicon,
-          {
-            address: identity.address,
-            diameter: 24,
-          },
-        ),
-
-        h('div.account-menu__account-info', [
-          h('div.account-menu__name', identity.name || ''),
-          h(UserPreferencedCurrencyDisplay, {
-            className: 'account-menu__balance',
-            value: balanceValue,
-            type: PRIMARY,
-          }),
-        ]),
-
-        this.renderKeyringType(keyring),
-        this.renderRemoveAccount(keyring, identity),
-      ],
-    )
-  })
-}
-
-AccountMenu.prototype.renderRemoveAccount = function (keyring, identity) {
-  // Any account that's not from the HD wallet Keyring can be removed
-  const type = keyring.type
-  const isRemovable = type !== 'HD Key Tree'
-  if (isRemovable) {
-    return h(Tooltip, {
-      title: this.context.t('removeAccount'),
-      position: 'bottom',
-    }, [
-        h('a.remove-account-icon', {
-          onClick: (e) => this.removeAccount(e, identity),
-        }, ''),
-      ])
-  }
-  return null
-}
-
-AccountMenu.prototype.removeAccount = function (e, identity) {
-  e.preventDefault()
-  e.stopPropagation()
-  const { showRemoveAccountConfirmationModal } = this.props
-  showRemoveAccountConfirmationModal(identity)
-}
-
-AccountMenu.prototype.renderKeyringType = function (keyring) {
-  try { // Sometimes keyrings aren't loaded yet:
-    const type = keyring.type
-    let label
-    switch (type) {
-      case 'Trezor Hardware':
-      case 'Ledger Hardware':
-        label = this.context.t('hardware')
-      break
-      case 'Simple Key Pair':
-        label = this.context.t('imported')
-      break
-      default:
-        label = ''
-    }
-
-    return label !== '' ? h('.keyring-label.allcaps', label) : null
-
-  } catch (e) { return }
-}
+export { default } from './account-menu.container'