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 000000000000..8a171d0c66f3
--- /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 && (
+
+ )
+ }
+
+ renderDropdown () {
+ const { accounts, selectedAccount, closeDropdown, onSelect } = this.props
+
+ return (
+
+
+
+ {
+ accounts.map(account => (
+
{
+ onSelect(account)
+ closeDropdown()
+ }}
+ icon={this.getListItemIcon(account, selectedAccount)}
+ />
+ ))
+ }
+
+
+ )
+ }
+
+ render () {
+ const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props
+
+ return (
+
+
!disabled && openDropdown()}
+ displayBalance={false}
+ displayAddress={false}
+ icon={
+ !disabled &&
+ }
+ />
+ { !disabled && dropdownOpen && this.renderDropdown() }
+
+ )
+ }
+}
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 000000000000..cb0839e72e59
--- /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 000000000000..abd2f7c75239
--- /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(
+
+ )
+
+ 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(
+
+ )
+
+ 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(
+
+ )
+
+ 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)
+ })
+})
diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js
deleted file mode 100644
index 261eb0aa25cf..000000000000
--- a/ui/app/components/dropdowns/account-dropdown-mini.js
+++ /dev/null
@@ -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(),
-
- ])
-
-}
-
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 715fea13f5d5..913c73c6b1bc 100644
--- a/ui/app/components/signature-request.js
+++ b/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 {
- selectedAccount,
- accountDropdownOpen,
- } = this.state
+ const { selectedAccount } = this.state
const {
accounts,
@@ -98,10 +94,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
h(AccountDropdownMini, {
selectedAccount,
accounts,
- onSelect: selectedAccount => this.setState({ selectedAccount }),
- dropdownOpen: accountDropdownOpen,
- openDropdown: () => this.setState({ accountDropdownOpen: true }),
- closeDropdown: () => this.setState({ accountDropdownOpen: false }),
+ disabled: true,
}),
])