Disable account dropdown on signing screens (#6024)

ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js

@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import AccountListItem from '../send/account-list-item/account-list-item.component'
+
+export default class AccountDropdownMini extends PureComponent {
+  static propTypes = {
+    accounts: PropTypes.array.isRequired,
+    closeDropdown: PropTypes.func,
+    disabled: PropTypes.bool,
+    dropdownOpen: PropTypes.bool,
+    onSelect: PropTypes.func,
+    openDropdown: PropTypes.func,
+    selectedAccount: PropTypes.object.isRequired,
+  }
+
+  static defaultProps = {
+    closeDropdown: () => {},
+    disabled: false,
+    dropdownOpen: false,
+    onSelect: () => {},
+    openDropdown: () => {},
+  }
+
+  getListItemIcon (currentAccount, selectedAccount) {
+    return currentAccount.address === selectedAccount.address && (
+      <i
+        className="fa fa-check fa-lg"
+        style={{ color: '#02c9b1' }}
+      />
+    )
+  }
+
+  renderDropdown () {
+    const { accounts, selectedAccount, closeDropdown, onSelect } = this.props
+
+    return (
+      <div>
+        <div
+          className="account-dropdown-mini__close-area"
+          onClick={closeDropdown}
+        />
+        <div className="account-dropdown-mini__list">
+          {
+            accounts.map(account => (
+              <AccountListItem
+                key={account.address}
+                account={account}
+                displayBalance={false}
+                displayAddress={false}
+                handleClick={() => {
+                  onSelect(account)
+                  closeDropdown()
+                }}
+                icon={this.getListItemIcon(account, selectedAccount)}
+              />
+            ))
+          }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props
+
+    return (
+      <div className="account-dropdown-mini">
+        <AccountListItem
+          account={selectedAccount}
+          handleClick={() => !disabled && openDropdown()}
+          displayBalance={false}
+          displayAddress={false}
+          icon={
+            !disabled && <i
+              className="fa fa-caret-down fa-lg"
+              style={{ color: '#dedede' }}
+            />
+          }
+        />
+        { !disabled && dropdownOpen && this.renderDropdown() }
+      </div>
+    )
+  }
+}

ui/app/components/account-dropdown-mini/index.js

@@ -0,0 +1 @@
+export { default } from './account-dropdown-mini.component'

ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js

@@ -0,0 +1,107 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import AccountDropdownMini from '../account-dropdown-mini.component'
+import AccountListItem from '../../send/account-list-item/account-list-item.component'
+
+describe('AccountDropdownMini', () => {
+  it('should render an account with an icon', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 1)
+    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
+    assert.equal(accountListItemProps.account.address, '0x1')
+    const iconProps = accountListItemProps.icon.props
+    assert.equal(iconProps.className, 'fa fa-caret-down fa-lg')
+  })
+
+  it('should render a list of accounts', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+        dropdownOpen={true}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 4)
+  })
+
+  it('should render a single account when disabled', () => {
+    const accounts = [
+      {
+        address: '0x1',
+        name: 'account1',
+        balance: '0x1',
+      },
+      {
+        address: '0x2',
+        name: 'account2',
+        balance: '0x2',
+      },
+      {
+        address: '0x3',
+        name: 'account3',
+        balance: '0x3',
+      },
+    ]
+
+    const wrapper = shallow(
+      <AccountDropdownMini
+        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
+        accounts={accounts}
+        dropdownOpen={false}
+        disabled={true}
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(AccountListItem).length, 1)
+    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
+    assert.equal(accountListItemProps.account.address, '0x1')
+    assert.equal(accountListItemProps.icon, false)
+  })
+})

ui/app/components/dropdowns/account-dropdown-mini.js

@@ -1,75 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('../send/account-list-item/account-list-item.component').default
-
-module.exports = AccountDropdownMini
-
-inherits(AccountDropdownMini, Component)
-function AccountDropdownMini () {
-  Component.call(this)
-}
-
-AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
-  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
-  return currentAccount.address === selectedAccount.address
-    ? listItemIcon
-    : null
-}
-
-AccountDropdownMini.prototype.renderDropdown = function () {
-  const {
-    accounts,
-    selectedAccount,
-    closeDropdown,
-    onSelect,
-  } = this.props
-
-  return h('div', {}, [
-
-    h('div.account-dropdown-mini__close-area', {
-      onClick: closeDropdown,
-    }),
-
-    h('div.account-dropdown-mini__list', {}, [
-
-      ...accounts.map(account => h(AccountListItem, {
-        account,
-        displayBalance: false,
-        displayAddress: false,
-        handleClick: () => {
-          onSelect(account)
-          closeDropdown()
-        },
-        icon: this.getListItemIcon(account, selectedAccount),
-      })),
-
-    ]),
-
-  ])
-}
-
-AccountDropdownMini.prototype.render = function () {
-  const {
-    selectedAccount,
-    openDropdown,
-    dropdownOpen,
-  } = this.props
-
-  return h('div.account-dropdown-mini', {}, [
-
-    h(AccountListItem, {
-      account: selectedAccount,
-      handleClick: openDropdown,
-      displayBalance: false,
-      displayAddress: false,
-      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
-    }),
-
-    dropdownOpen && this.renderDropdown(),
-
-  ])
-
-}
-

ui/app/components/signature-request.js

@@ -10,7 +10,7 @@ const { compose } = require('recompose')
 const { withRouter } = require('react-router-dom')
 const { ObjectInspector } = require('react-inspector')
 
-const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
+import AccountDropdownMini from './account-dropdown-mini'
 
 const actions = require('../actions')
 const { conversionUtil } = require('../conversion-util')
@@ -63,7 +63,6 @@ function SignatureRequest (props) {
 
   this.state = {
     selectedAccount: props.selectedAccount,
-    accountDropdownOpen: false,
   }
 }
 
@@ -82,10 +81,7 @@ SignatureRequest.prototype.renderHeader = function () {
 }
 
 SignatureRequest.prototype.renderAccountDropdown = function () {
-  const {
+  const { selectedAccount } = this.state
-    selectedAccount,
-    accountDropdownOpen,
-  } = this.state
 
   const {
     accounts,
@@ -98,10 +94,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
     h(AccountDropdownMini, {
       selectedAccount,
       accounts,
-      onSelect: selectedAccount => this.setState({ selectedAccount }),
+      disabled: true,
-      dropdownOpen: accountDropdownOpen,
-      openDropdown: () => this.setState({ accountDropdownOpen: true }),
-      closeDropdown: () => this.setState({ accountDropdownOpen: false }),
     }),
 
   ])