diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index fa237f1d1e04..5f0f16b37e72 100644 --- a/ui/app/components/app/signature-request.js +++ b/ui/app/components/app/signature-request.js @@ -12,7 +12,7 @@ const { compose } = require('recompose') const { withRouter } = require('react-router-dom') const { ObjectInspector } = require('react-inspector') -import AccountDropdownMini from '../ui/account-dropdown-mini' +import AccountListItem from '../../pages/send/account-list-item/account-list-item.component' const actions = require('../../store/actions') const { conversionUtil } = require('../../helpers/utils/conversion-util') @@ -21,7 +21,6 @@ const { getSelectedAccount, getCurrentAccountWithSendEtherInfo, getSelectedAddress, - accountsWithSendEtherInfoSelector, conversionRateSelector, } = require('../../selectors/selectors.js') @@ -37,7 +36,6 @@ function mapStateToProps (state) { selectedAddress: getSelectedAddress(state), requester: null, requesterAddress: null, - accounts: accountsWithSendEtherInfoSelector(state), conversionRate: conversionRateSelector(state), } } @@ -137,23 +135,19 @@ SignatureRequest.prototype.renderHeader = function () { ]) } -SignatureRequest.prototype.renderAccountDropdown = function () { +SignatureRequest.prototype.renderAccount = function () { const { selectedAccount } = this.state - const { - accounts, - } = this.props - return h('div.request-signature__account', [ h('div.request-signature__account-text', [this.context.t('account') + ':']), - h(AccountDropdownMini, { - selectedAccount, - accounts, - disabled: true, - }), - + h('div.request-signature__account-item', [ + h(AccountListItem, { + account: selectedAccount, + displayBalance: false, + }), + ]), ]) } @@ -180,7 +174,7 @@ SignatureRequest.prototype.renderBalance = function () { SignatureRequest.prototype.renderAccountInfo = function () { return h('div.request-signature__account-info', [ - this.renderAccountDropdown(), + this.renderAccount(), this.renderRequestIcon(), diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js deleted file mode 100644 index d9627e31b3fc..000000000000 --- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import AccountListItem from '../../../pages/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/ui/account-dropdown-mini/index.js b/ui/app/components/ui/account-dropdown-mini/index.js deleted file mode 100644 index cb0839e72e59..000000000000 --- a/ui/app/components/ui/account-dropdown-mini/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './account-dropdown-mini.component' diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js deleted file mode 100644 index 9691f38aa927..000000000000 --- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import AccountDropdownMini from '../account-dropdown-mini.component' -import AccountListItem from '../../../../pages/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/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss deleted file mode 100644 index 996993db7701..000000000000 --- a/ui/app/css/itcss/components/account-dropdown-mini.scss +++ /dev/null @@ -1,48 +0,0 @@ -.account-dropdown-mini { - height: 22px; - background-color: $white; - font-family: Roboto; - line-height: 16px; - font-size: 12px; - width: 124px; - - &__close-area { - position: fixed; - top: 0; - left: 0; - z-index: 1000; - width: 100%; - height: 100%; - } - - &__list { - z-index: 1050; - position: absolute; - height: 180px; - width: 96pxpx; - border: 1px solid $geyser; - border-radius: 4px; - background-color: $white; - box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); - overflow-y: scroll; - } - - .account-list-item { - margin-top: 6px; - } - - .account-list-item__account-name { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 80px; - } - - .account-list-item__top-row { - margin: 0; - } - - .account-list-item__icon { - position: initial; - } -} \ No newline at end of file diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 3d426a33cf2c..dde66fbb30ad 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -42,8 +42,6 @@ @import './account-details-dropdown.scss'; -@import './account-dropdown-mini.scss'; - @import './editable-label.scss'; @import './pages/index.scss'; diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 6c950d846b46..25924b6c073a 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -101,6 +101,30 @@ font-size: 14px; } + &__account-item { + height: 22px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + width: 124px; + + .account-list-item { + margin-top: 6px; + } + + .account-list-item__account-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80px; + } + + .account-list-item__top-row { + margin: 0; + } + } + &__balance { color: $dusty-gray; margin-right: 17px;