Disable account dropdown on signing screens (#6024)

3 files changed, 192 insertions, 0 deletions

diff --git a/ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/account-dropdown-mini/account-dropdown-mini.component.js
new file mode 100644
index 000000000..8a171d0c6
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/ui/app/components/account-dropdown-mini/index.js b/ui/app/components/account-dropdown-mini/index.js
new file mode 100644
index 000000000..cb0839e72
--- /dev/null
+++ b/ui/app/components/account-dropdown-mini/index.js
@@ -0,0 +1 @@
+export { default } from './account-dropdown-mini.component'
diff --git a/ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
new file mode 100644
index 000000000..abd2f7c75
--- /dev/null
+++ b/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)
+  })
+})