mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Remove AccountDropdownMini
component (#6906)
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:
parent
74639ab3ae
commit
adac1de822
@ -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(),
|
||||
|
||||
|
@ -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 +0,0 @@
|
||||
export { default } from './account-dropdown-mini.component'
|
@ -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)
|
||||
})
|
||||
})
|
@ -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;
|
||||
}
|
||||
}
|
@ -42,8 +42,6 @@
|
||||
|
||||
@import './account-details-dropdown.scss';
|
||||
|
||||
@import './account-dropdown-mini.scss';
|
||||
|
||||
@import './editable-label.scss';
|
||||
|
||||
@import './pages/index.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;
|
||||
|
Loading…
Reference in New Issue
Block a user