mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
trim unused account-list-item code and co-locate styles (#9116)
This commit is contained in:
parent
db1b72a95c
commit
ecaa6c55dd
51
ui/app/components/app/account-list-item/account-list-item.js
Normal file
51
ui/app/components/app/account-list-item/account-list-item.js
Normal file
@ -0,0 +1,51 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { checksumAddress } from '../../../helpers/utils/util'
|
||||
import Identicon from '../../ui/identicon'
|
||||
import AccountMismatchWarning from '../../ui/account-mismatch-warning/account-mismatch-warning.component'
|
||||
|
||||
export default function AccountListItem ({
|
||||
account,
|
||||
className,
|
||||
displayAddress = false,
|
||||
handleClick,
|
||||
icon = null,
|
||||
}) {
|
||||
const { name, address, balance } = account || {}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`account-list-item ${className}`}
|
||||
onClick={() => handleClick && handleClick({ name, address, balance })}
|
||||
>
|
||||
|
||||
<div className="account-list-item__top-row">
|
||||
<Identicon
|
||||
address={address}
|
||||
className="account-list-item__identicon"
|
||||
diameter={18}
|
||||
/>
|
||||
|
||||
<div className="account-list-item__account-name">{ name || address }</div>
|
||||
|
||||
{icon && <div className="account-list-item__icon">{ icon }</div>}
|
||||
|
||||
<AccountMismatchWarning address={address} />
|
||||
</div>
|
||||
|
||||
{displayAddress && name && (
|
||||
<div className="account-list-item__account-address">
|
||||
{ checksumAddress(address) }
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
AccountListItem.propTypes = {
|
||||
account: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
displayAddress: PropTypes.bool,
|
||||
handleClick: PropTypes.func,
|
||||
icon: PropTypes.node,
|
||||
}
|
1
ui/app/components/app/account-list-item/index.js
Normal file
1
ui/app/components/app/account-list-item/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './account-list-item'
|
26
ui/app/components/app/account-list-item/index.scss
Normal file
26
ui/app/components/app/account-list-item/index.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.account-list-item {
|
||||
&__top-row {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__account-name {
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&__account-address {
|
||||
margin-left: 35px;
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
@ -3,9 +3,8 @@ import assert from 'assert'
|
||||
import { shallow } from 'enzyme'
|
||||
import sinon from 'sinon'
|
||||
import * as utils from '../../../../helpers/utils/util'
|
||||
import Identicon from '../../../../components/ui/identicon'
|
||||
import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
|
||||
import AccountListItem from '../account-list-item.component'
|
||||
import Identicon from '../../../ui/identicon'
|
||||
import AccountListItem from '../account-list-item'
|
||||
|
||||
describe('AccountListItem Component', function () {
|
||||
let wrapper, propsMethodSpies, checksumAddressStub
|
||||
@ -22,11 +21,7 @@ describe('AccountListItem Component', function () {
|
||||
<AccountListItem
|
||||
account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
|
||||
className="mockClassName"
|
||||
conversionRate={4}
|
||||
currentCurrency="mockCurrentyCurrency"
|
||||
nativeCurrency="ETH"
|
||||
displayAddress={false}
|
||||
displayBalance={false}
|
||||
handleClick={propsMethodSpies.handleClick}
|
||||
icon={<i className="mockIcon" />}
|
||||
/>
|
||||
@ -113,36 +108,5 @@ describe('AccountListItem Component', function () {
|
||||
wrapper.setProps({ account: { address: 'someAddressButNoName' } })
|
||||
assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
|
||||
})
|
||||
|
||||
it('should render a CurrencyDisplay with the correct props if displayBalance is true', function () {
|
||||
wrapper.setProps({ displayBalance: true })
|
||||
assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 2)
|
||||
assert.deepEqual(
|
||||
wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
|
||||
{
|
||||
type: 'PRIMARY',
|
||||
value: 'mockBalance',
|
||||
hideTitle: true,
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
it('should only render one CurrencyDisplay if showFiat is false', function () {
|
||||
wrapper.setProps({ showFiat: false, displayBalance: true })
|
||||
assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
|
||||
assert.deepEqual(
|
||||
wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
|
||||
{
|
||||
type: 'PRIMARY',
|
||||
value: 'mockBalance',
|
||||
hideTitle: true,
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
it('should not render a CurrencyDisplay if displayBalance is false', function () {
|
||||
wrapper.setProps({ displayBalance: false })
|
||||
assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
|
||||
})
|
||||
})
|
||||
})
|
@ -1,3 +1,4 @@
|
||||
@import 'account-list-item/index';
|
||||
@import 'account-menu/index';
|
||||
@import 'add-token-button/index';
|
||||
@import '../ui/alert/index';
|
||||
|
@ -7,7 +7,7 @@ import { ObjectInspector } from 'react-inspector'
|
||||
import { ENVIRONMENT_TYPE_NOTIFICATION, MESSAGE_TYPE } from '../../../../../app/scripts/lib/enums'
|
||||
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
|
||||
import Identicon from '../../ui/identicon'
|
||||
import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component'
|
||||
import AccountListItem from '../account-list-item'
|
||||
import { conversionUtil } from '../../../helpers/utils/conversion-util'
|
||||
import Button from '../../ui/button'
|
||||
|
||||
@ -95,7 +95,6 @@ export default class SignatureRequestOriginal extends Component {
|
||||
<div className="request-signature__account-item">
|
||||
<AccountListItem
|
||||
account={fromAccount}
|
||||
displayBalance={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component'
|
||||
import AccountListItem from '../../account-list-item'
|
||||
import NetworkDisplay from '../../network-display'
|
||||
|
||||
export default class SignatureRequestHeader extends PureComponent {
|
||||
@ -16,7 +16,6 @@ export default class SignatureRequestHeader extends PureComponent {
|
||||
<div className="signature-request-header--account">
|
||||
{fromAccount && (
|
||||
<AccountListItem
|
||||
displayBalance={false}
|
||||
account={fromAccount}
|
||||
/>
|
||||
)}
|
||||
|
@ -24,8 +24,6 @@ html {
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
.unit-input__input,
|
||||
.account-list-item__account-primary-balance,
|
||||
.account-list-item__input,
|
||||
.currency-display__input {
|
||||
outline: none;
|
||||
}
|
||||
|
@ -1,104 +0,0 @@
|
||||
.account-dropdown-balance {
|
||||
color: $dusty-gray;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.account-dropdown-edit-button {
|
||||
color: $dusty-gray;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.account-list-item {
|
||||
&__top-row {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__tooltip-wrapper {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
&__account-balances {
|
||||
height: auto;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #9b9b9b;
|
||||
margin-left: 34px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__primary-cached-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__cached-star {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__cached-balances {
|
||||
div:first-of-type {
|
||||
color: $web-orange;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
color: rgba(220, 153, 18, 0.6901960784313725);
|
||||
}
|
||||
}
|
||||
|
||||
&__account-name {
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&__account-primary-balance,
|
||||
&__account-secondary-balance {
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__balance-flag {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: -8px;
|
||||
color: $primary-blue;
|
||||
}
|
||||
|
||||
&__account-primary-balance {
|
||||
color: $scorpion;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__account-secondary-balance {
|
||||
color: $dusty-gray;
|
||||
}
|
||||
|
||||
&__account-address {
|
||||
margin-left: 35px;
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
&:hover {
|
||||
background: rgba($alto, 0.2);
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
background: rgba($alto, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -8,7 +8,6 @@
|
||||
@import './network';
|
||||
@import './modal';
|
||||
@import './newui-sections';
|
||||
@import './account-dropdown';
|
||||
@import './send';
|
||||
@import './loading-overlay';
|
||||
|
||||
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
|
||||
import copyToClipboard from 'copy-to-clipboard'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import AccountListItem from '../send/account-list-item/account-list-item.component'
|
||||
import AccountListItem from '../../components/app/account-list-item'
|
||||
import Button from '../../components/ui/button'
|
||||
import Identicon from '../../components/ui/identicon'
|
||||
import Tooltip from '../../components/ui/tooltip-v2'
|
||||
@ -119,7 +119,6 @@ export default class ConfirmDecryptMessage extends Component {
|
||||
<div className="request-decrypt-message__account-item">
|
||||
<AccountListItem
|
||||
account={fromAccount}
|
||||
displayBalance={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import AccountListItem from '../send/account-list-item/account-list-item.component'
|
||||
import AccountListItem from '../../components/app/account-list-item'
|
||||
import Button from '../../components/ui/button'
|
||||
import Identicon from '../../components/ui/identicon'
|
||||
|
||||
@ -99,7 +99,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
|
||||
<div className="request-encryption-public-key__account-item">
|
||||
<AccountListItem
|
||||
account={fromAccount}
|
||||
displayBalance={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,101 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
import { checksumAddress } from '../../../helpers/utils/util'
|
||||
import Identicon from '../../../components/ui/identicon'
|
||||
import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display'
|
||||
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
|
||||
import Tooltip from '../../../components/ui/tooltip-v2'
|
||||
import AccountMismatchWarning from '../../../components/ui/account-mismatch-warning/account-mismatch-warning.component'
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext'
|
||||
|
||||
export default function AccountListItem ({
|
||||
account,
|
||||
className,
|
||||
displayAddress = false,
|
||||
displayBalance = true,
|
||||
handleClick,
|
||||
icon = null,
|
||||
balanceIsCached,
|
||||
showFiat = true,
|
||||
}) {
|
||||
const t = useI18nContext()
|
||||
const { name, address, balance } = account || {}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`account-list-item ${className}`}
|
||||
onClick={() => handleClick && handleClick({ name, address, balance })}
|
||||
>
|
||||
|
||||
<div className="account-list-item__top-row">
|
||||
<Identicon
|
||||
address={address}
|
||||
className="account-list-item__identicon"
|
||||
diameter={18}
|
||||
/>
|
||||
|
||||
<div className="account-list-item__account-name">{ name || address }</div>
|
||||
|
||||
{icon && <div className="account-list-item__icon">{ icon }</div>}
|
||||
|
||||
<AccountMismatchWarning address={address} />
|
||||
</div>
|
||||
|
||||
{displayAddress && name && (
|
||||
<div className="account-list-item__account-address">
|
||||
{ checksumAddress(address) }
|
||||
</div>
|
||||
)}
|
||||
|
||||
{displayBalance && (
|
||||
<Tooltip
|
||||
position="left"
|
||||
title={t('balanceOutdated')}
|
||||
disabled={!balanceIsCached}
|
||||
style={{
|
||||
left: '-20px !important',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={classnames('account-list-item__account-balances', {
|
||||
'account-list-item__cached-balances': balanceIsCached,
|
||||
})}
|
||||
>
|
||||
<div className="account-list-item__primary-cached-container">
|
||||
<UserPreferencedCurrencyDisplay
|
||||
type={PRIMARY}
|
||||
value={balance}
|
||||
hideTitle
|
||||
/>
|
||||
{
|
||||
balanceIsCached
|
||||
? <span className="account-list-item__cached-star">*</span>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
{showFiat && (
|
||||
<UserPreferencedCurrencyDisplay
|
||||
type={SECONDARY}
|
||||
value={balance}
|
||||
hideTitle
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
AccountListItem.propTypes = {
|
||||
account: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
displayAddress: PropTypes.bool,
|
||||
displayBalance: PropTypes.bool,
|
||||
handleClick: PropTypes.func,
|
||||
icon: PropTypes.node,
|
||||
balanceIsCached: PropTypes.bool,
|
||||
showFiat: PropTypes.bool,
|
||||
}
|
@ -1,21 +0,0 @@
|
||||
import { connect } from 'react-redux'
|
||||
import {
|
||||
getNativeCurrency,
|
||||
getIsMainnet,
|
||||
isBalanceCached,
|
||||
getPreferences,
|
||||
} from '../../../selectors'
|
||||
import AccountListItem from './account-list-item.component'
|
||||
|
||||
export default connect(mapStateToProps)(AccountListItem)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { showFiatInTestnets } = getPreferences(state)
|
||||
const isMainnet = getIsMainnet(state)
|
||||
|
||||
return {
|
||||
nativeCurrency: getNativeCurrency(state),
|
||||
balanceIsCached: isBalanceCached(state),
|
||||
showFiat: (isMainnet || !!showFiatInTestnets),
|
||||
}
|
||||
}
|
@ -1 +0,0 @@
|
||||
export { default } from './account-list-item.container'
|
@ -1,63 +0,0 @@
|
||||
import assert from 'assert'
|
||||
import proxyquire from 'proxyquire'
|
||||
|
||||
let mapStateToProps
|
||||
|
||||
proxyquire('../account-list-item.container.js', {
|
||||
'react-redux': {
|
||||
connect: (ms) => {
|
||||
mapStateToProps = ms
|
||||
return () => ({})
|
||||
},
|
||||
},
|
||||
'../../../selectors': {
|
||||
getConversionRate: () => `mockConversionRate`,
|
||||
getCurrentCurrency: () => `mockCurrentCurrency`,
|
||||
getNativeCurrency: () => `mockNativeCurrency`,
|
||||
isBalanceCached: () => `mockBalanceIsCached`,
|
||||
getPreferences: ({ showFiatInTestnets }) => ({
|
||||
showFiatInTestnets,
|
||||
}),
|
||||
getIsMainnet: ({ isMainnet }) => isMainnet,
|
||||
},
|
||||
})
|
||||
|
||||
describe('account-list-item container', function () {
|
||||
|
||||
describe('mapStateToProps()', function () {
|
||||
|
||||
it('should map the correct properties to props', function () {
|
||||
assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
|
||||
nativeCurrency: 'mockNativeCurrency',
|
||||
balanceIsCached: 'mockBalanceIsCached',
|
||||
showFiat: true,
|
||||
})
|
||||
})
|
||||
|
||||
it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', function () {
|
||||
assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
|
||||
nativeCurrency: 'mockNativeCurrency',
|
||||
balanceIsCached: 'mockBalanceIsCached',
|
||||
showFiat: true,
|
||||
})
|
||||
})
|
||||
|
||||
it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', function () {
|
||||
assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
|
||||
nativeCurrency: 'mockNativeCurrency',
|
||||
balanceIsCached: 'mockBalanceIsCached',
|
||||
showFiat: true,
|
||||
})
|
||||
})
|
||||
|
||||
it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', function () {
|
||||
assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
|
||||
nativeCurrency: 'mockNativeCurrency',
|
||||
balanceIsCached: 'mockBalanceIsCached',
|
||||
showFiat: false,
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
})
|
Loading…
Reference in New Issue
Block a user