trim unused account-list-item code and co-locate styles (#9116)

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 (
+    <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,
+}

ui/app/components/app/account-list-item/index.js

@@ -0,0 +1 @@
+export { default } from './account-list-item'

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

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 Identicon from '../../../ui/identicon'
-import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
+import AccountListItem from '../account-list-item'
-import AccountListItem from '../account-list-item.component'
 
 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)
-    })
   })
 })

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

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 {
         <div className="request-signature__account-item">
           <AccountListItem
             account={fromAccount}
-            displayBalance={false}
           />
         </div>
       </div>

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 {
         <div className="signature-request-header--account">
           {fromAccount && (
             <AccountListItem
-              displayBalance={false}
               account={fromAccount}
             />
           )}

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

ui/app/css/itcss/components/account-dropdown.scss

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

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

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 {
         <div className="request-decrypt-message__account-item">
           <AccountListItem
             account={fromAccount}
-            displayBalance={false}
           />
         </div>
       </div>

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 {
         <div className="request-encryption-public-key__account-item">
           <AccountListItem
             account={fromAccount}
-            displayBalance={false}
           />
         </div>
       </div>

ui/app/pages/send/account-list-item/account-list-item.component.js

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

ui/app/pages/send/account-list-item/account-list-item.container.js

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

ui/app/pages/send/account-list-item/index.js

@@ -1 +0,0 @@
-export { default } from './account-list-item.container'

ui/app/pages/send/account-list-item/tests/account-list-item-container.test.js

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