m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

Remove AccountDropdownMini component (#6906)

Browse Source 
The `AccountDropdownMini` component featured the ability to switch
accounts using a dropdown, but this functionality was disabled in #6024.
It has been acting as a restyled `AccountListItem` since then.

The component has been removed, and the style changes moved to the sole
parent component (`RequestSignature`).
This commit is contained in:
Mark Stacey 2019-07-25 08:55:43 -03:00 committed by GitHub
parent 74639ab3ae
commit adac1de822
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 33 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui/app/components/app/signature-request.js
View File

@ -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(),

84
ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
View File

@ -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 && (
<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>
)
}
}

1
ui/app/components/ui/account-dropdown-mini/index.js
View File

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

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

@ -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(
<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)
})
})

48
ui/app/css/itcss/components/account-dropdown-mini.scss
View File

@ -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;
}
}

2
ui/app/css/itcss/components/index.scss
View File

@ -42,8 +42,6 @@
@import './account-details-dropdown.scss';
@import './account-dropdown-mini.scss';
@import './editable-label.scss';
@import './pages/index.scss';

24
ui/app/css/itcss/components/request-signature.scss
View File

@ -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;