diff --git a/ui/app/components/app/account-list-item/account-list-item.js b/ui/app/components/app/account-list-item/account-list-item.js
new file mode 100644
index 000000000..7e001f7d6
--- /dev/null
+++ b/ui/app/components/app/account-list-item/account-list-item.js
@@ -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 (
+
handleClick && handleClick({ name, address, balance })}
+ >
+
+
+
+
+
{ name || address }
+
+ {icon &&
{ icon }
}
+
+
+
+
+ {displayAddress && name && (
+
+ { checksumAddress(address) }
+
+ )}
+
+ )
+}
+
+AccountListItem.propTypes = {
+ account: PropTypes.object,
+ className: PropTypes.string,
+ displayAddress: PropTypes.bool,
+ handleClick: PropTypes.func,
+ icon: PropTypes.node,
+}
diff --git a/ui/app/components/app/account-list-item/index.js b/ui/app/components/app/account-list-item/index.js
new file mode 100644
index 000000000..1759f6597
--- /dev/null
+++ b/ui/app/components/app/account-list-item/index.js
@@ -0,0 +1 @@
+export { default } from './account-list-item'
diff --git a/ui/app/components/app/account-list-item/index.scss b/ui/app/components/app/account-list-item/index.scss
new file mode 100644
index 000000000..dcc08d9b5
--- /dev/null
+++ b/ui/app/components/app/account-list-item/index.scss
@@ -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;
+ }
+}
diff --git a/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/app/account-list-item/tests/account-list-item-component.test.js
similarity index 75%
rename from ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
rename to ui/app/components/app/account-list-item/tests/account-list-item-component.test.js
index a2949511a..ee4ef3c89 100644
--- a/ui/app/pages/send/account-list-item/tests/account-list-item-component.test.js
+++ b/ui/app/components/app/account-list-item/tests/account-list-item-component.test.js
@@ -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 () {
}
/>
@@ -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)
- })
})
})
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index 5cb6fd2a7..64136c661 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -1,3 +1,4 @@
+@import 'account-list-item/index';
@import 'account-menu/index';
@import 'add-token-button/index';
@import '../ui/alert/index';
diff --git a/ui/app/components/app/signature-request-original/signature-request-original.component.js b/ui/app/components/app/signature-request-original/signature-request-original.component.js
index 8587f024e..29e06bab6 100644
--- a/ui/app/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/app/components/app/signature-request-original/signature-request-original.component.js
@@ -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 {
diff --git a/ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js b/ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js
index 89440acdc..2ec74748c 100644
--- a/ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js
+++ b/ui/app/components/app/signature-request/signature-request-header/signature-request-header.component.js
@@ -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 {
{fromAccount && (
)}
diff --git a/ui/app/css/base-styles.scss b/ui/app/css/base-styles.scss
index 6a970f9a3..5445d2f34 100644
--- a/ui/app/css/base-styles.scss
+++ b/ui/app/css/base-styles.scss
@@ -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;
}
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
deleted file mode 100644
index 3d2e29b42..000000000
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ /dev/null
@@ -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);
- }
- }
- }
-}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index ea01b5060..e26483b32 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -8,7 +8,6 @@
@import './network';
@import './modal';
@import './newui-sections';
-@import './account-dropdown';
@import './send';
@import './loading-overlay';
diff --git a/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index a95e6d4cd..a054eb2b3 100644
--- a/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@@ -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 {
diff --git a/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
index 5ef485c72..3dbba9b8f 100644
--- a/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
@@ -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 {
diff --git a/ui/app/pages/send/account-list-item/account-list-item.component.js b/ui/app/pages/send/account-list-item/account-list-item.component.js
deleted file mode 100644
index 58df336e5..000000000
--- a/ui/app/pages/send/account-list-item/account-list-item.component.js
+++ /dev/null
@@ -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 (
- handleClick && handleClick({ name, address, balance })}
- >
-
-
-
-
-
{ name || address }
-
- {icon &&
{ icon }
}
-
-
-
-
- {displayAddress && name && (
-
- { checksumAddress(address) }
-
- )}
-
- {displayBalance && (
-
-
-
-
- {
- balanceIsCached
- ? *
- : null
- }
-
- {showFiat && (
-
- )}
-
-
- )}
-
-
- )
-}
-
-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,
-}
diff --git a/ui/app/pages/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js
deleted file mode 100644
index 40888d3ba..000000000
--- a/ui/app/pages/send/account-list-item/account-list-item.container.js
+++ /dev/null
@@ -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),
- }
-}
diff --git a/ui/app/pages/send/account-list-item/index.js b/ui/app/pages/send/account-list-item/index.js
deleted file mode 100644
index 907485cf7..000000000
--- a/ui/app/pages/send/account-list-item/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './account-list-item.container'
diff --git a/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js
deleted file mode 100644
index 611830d78..000000000
--- a/ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js
+++ /dev/null
@@ -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,
- })
- })
-
- })
-
-})