Add token selection to the send screen (#6445)

* Move send to pages/ * Fix unit tests * Finish UI * Integrate asset dropdown to send actions * Remove console.log * Hide asset change during edit * Enable switch from send token to seand eth * Enable switching from token to eth when editing * Fix linter * Fixing test * Fix unit tests * Fix linter * Fix react warning; remove console.log * fix flat test * Add metrics * Address code review comments * Consistent spacing between send screen form rows. * Reduce height of gas buttons on send screen. * Make send screen gas button height dependent on size of contents.
MetaMask · Apr 17, 2019 · 931aaeb · 931aaeb
1 parent a844eb2
commit 931aaeb
Show file tree

Hide file tree

Showing 137 changed files with 444 additions and 134 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -139,6 +139,9 @@
   "approved": {
     "message": "Approved"
   },
+  "asset": {
+    "message": "Asset"
+  },
   "attemptingConnect": {
     "message": "Attempting to connect to blockchain."
   },
@@ -1351,6 +1354,9 @@
   "selectAnAccountHelp": {
     "message": "Select the account to view in MetaMask"
   },
+  "selectAnAsset": {
+    "message": "Select an Asset"
+  },
   "selectAHigherGasFee": {
     "message": "Select a higher gas fee to accelerate the processing of your transaction.*"
   },

diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
@@ -72,7 +72,7 @@ async function runSendFlowTest (assert, done) {
   const sendToAccountAddress = sendToFieldInput.val()
   assert.equal(sendToAccountAddress, '0x2f8D4a878cFA04A6E60D46362f5644DeAb66572D', 'send to dropdown selects the correct address')
 
-  const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(2)')
+  const sendAmountField = await queryAsync($, '.send-v2__form-row:eq(3)')
   sendAmountField.find('.unit-input')[0].click()
 
   const sendAmountFieldInput = await findAsync(sendAmountField, '.unit-input__input')
@@ -115,7 +115,7 @@ async function runSendFlowTest (assert, done) {
   sendToFieldInputInEdit[0].focus()
   sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
 
-  const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(2)')
+  const sendAmountFieldInEdit = await queryAsync($, '.send-v2__form-row:eq(3)')
   sendAmountFieldInEdit.find('.unit-input')[0].click()
 
   const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('.unit-input__input')

diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js
@@ -18,11 +18,11 @@ const {
   MIN_GAS_PRICE_DEC,
   MIN_GAS_LIMIT_DEC,
   MIN_GAS_PRICE_GWEI,
-} = require('../send/send.constants')
+} = require('../../../pages/send/send.constants')
 
 const {
   isBalanceSufficient,
-} = require('../send/send.utils')
+} = require('../../../pages/send/send.utils')
 
 const {
   conversionUtil,
@@ -47,7 +47,7 @@ const {
 const {
   getGasPrice,
   getGasLimit,
-} = require('../send/send.selectors')
+} = require('../../../pages/send/send.selectors')
 
 function mapStateToProps (state) {
   const selectedToken = getSelectedToken(state)

diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js
@@ -10,7 +10,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const connect = require('react-redux').connect
-const ToAutoComplete = require('./send/to-autocomplete').default
+const ToAutoComplete = require('../../pages/send/to-autocomplete').default
 const log = require('loglevel')
 const { isValidENSAddress } = require('../../helpers/utils/util')
 

diff --git a/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/...ents/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -63,7 +63,7 @@ import {
 import {
   calcGasTotal,
   isBalanceSufficient,
-} from '../../send/send.utils'
+} from '../../../../pages/send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
 

diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
@@ -99,15 +99,13 @@
   }
 
   &__loading-container {
-    height: 78px;
+    height: 54px;
   }
 
   .button-group__button, .button-group__button--active {
-    height: 78px;
     background: white;
     color: $scorpion;
-    padding-top: 9px;
-    padding-left: 8.5px;
+    padding: 2px 8.5px 4px 8.5px;
 
     @media screen and (max-width: $break-small) {
       padding-left: 4px;

diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import BigNumber from 'bignumber.js'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
-import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import { MIN_GAS_PRICE_GWEI } from '../../../../pages/send/send.constants'
 import Button from '../../../ui/button'
 
 import {

diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.container.js b/ui/app/components/app/transaction-list-item/transaction-list-item.container.js
@@ -15,7 +15,7 @@ import {
   setCustomGasLimit,
 } from '../../../ducks/gas/gas.duck'
 import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors'
-import { isBalanceSufficient } from '../send/send.utils'
+import { isBalanceSufficient } from '../../../pages/send/send.utils'
 
 const mapStateToProps = (state, ownProps) => {
   const { metamask: { knownMethodData, accounts } } = state

diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import AccountListItem from '../../app/send/account-list-item/account-list-item.component'
+import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component'
 
 export default class AccountDropdownMini extends PureComponent {
   static propTypes = {

diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
@@ -2,7 +2,7 @@ import React from 'react'
 import assert from 'assert'
 import { shallow } from 'enzyme'
 import AccountDropdownMini from '../account-dropdown-mini.component'
-import AccountListItem from '../../../app/send/account-list-item/account-list-item.component'
+import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component'
 
 describe('AccountDropdownMini', () => {
   it('should render an account with an icon', () => {

diff --git a/ui/app/components/ui/unit-input/unit-input.component.js b/ui/app/components/ui/unit-input/unit-input.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { removeLeadingZeroes } from '../../app/send/send.utils'
+import { removeLeadingZeroes } from '../../../pages/send/send.utils'
 
 /**
  * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
@@ -549,7 +549,7 @@
   }
 
   &__form-row {
-    margin: 14.5px 18px 0px;
+    margin: 8px 18px 0px;
     position: relative;
     display: flex;
     flex-flow: row;
@@ -592,8 +592,8 @@
     flex: 0 0 auto;
   }
 
-  &__from-dropdown {
-    height: 73px;
+  &__from-dropdown,
+  &__asset-dropdown {
     width: 100%;
     border: 1px solid $alto;
     border-radius: 4px;
@@ -628,6 +628,104 @@
     }
   }
 
+  &__from-dropdown {
+    height: 73px;
+  }
+
+  &__asset-dropdown {
+    height: 62px;
+    border: none;
+
+    &__asset {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      padding: 10px 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba($alto, 0.2);
+      }
+    }
+
+    &__asset-icon {
+      .identicon {
+        border: 1px solid $alto;
+      }
+    }
+
+    &__asset-data {
+      display: flex;
+      flex-flow: column nowrap;
+      margin-left: 8px;
+    }
+
+    &__symbol {
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    &__name {
+      display: flex;
+      flex-flow: row nowrap;
+      font-size: 12px;
+
+      &__label {
+        margin-right: .25rem;
+      }
+    }
+
+    &__close-area {
+      z-index: 2000;
+    }
+
+    &__list {
+      z-index: 2050;
+      position: absolute;
+      height: 220px;
+      width: 100%;
+      border: 1px solid $geyser;
+      border-radius: 4px;
+      background-color: $white;
+      box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+      top: 55px;
+      left: 0;
+      box-sizing: content-box;
+      overflow-y: scroll;
+    }
+
+    &__input-wrapper {
+      border: 1px solid $alto;
+      border-radius: 4px;
+
+      &--opened {
+        position: relative;
+        z-index: 2050;
+      }
+
+      .send-v2__asset-dropdown__asset {
+        &:hover {
+          background-color: $white;
+        }
+      }
+    }
+
+    &__input {
+      z-index: 1025;
+      position: relative;
+      height: 54px;
+      width: 100%;
+      border: none;
+      border-radius: 4px;
+      background-color: $white;
+      color: $tundora;
+      padding: 10px;
+      font-family: Roboto;
+      font-size: 16px;
+      line-height: 21px;
+    }
+  }
+
   &__to-autocomplete {
     position: relative;
 

diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
@@ -154,9 +154,26 @@ function reduceMetamask (state, action) {
       return newState
 
     case actions.SET_SELECTED_TOKEN:
-      return extend(metamaskState, {
+      newState = extend(metamaskState, {
         selectedTokenAddress: action.value,
       })
+      const newSend = extend(metamaskState.send)
+
+      if (metamaskState.send.editingTransactionId && !action.value) {
+        delete newSend.token
+        const unapprovedTx = newState.unapprovedTxs[newSend.editingTransactionId] || {}
+        const txParams = unapprovedTx.txParams || {}
+        newState.unapprovedTxs = extend(newState.unapprovedTxs, {
+          [newSend.editingTransactionId]: extend(unapprovedTx, {
+            txParams: extend(txParams, { data: '' }),
+          }),
+        })
+        newSend.tokenBalance = null
+        newSend.balance = '0'
+      }
+
+      newState.send = newSend
+      return newState
 
     case actions.SET_ACCOUNT_LABEL:
       const account = action.value.account

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../components/app/confirm-page-container'
-import { isBalanceSufficient } from '../../components/app/send/send.utils'
+import { isBalanceSufficient } from '../send/send.utils'
 import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -14,9 +14,9 @@ import {
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
 } from '../../helpers/constants/error-keys'
 import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util'
-import { isBalanceSufficient, calcGasTotal } from '../../components/app/send/send.utils'
+import { isBalanceSufficient, calcGasTotal } from '../send/send.utils'
 import { conversionGreaterThan } from '../../helpers/utils/conversion-util'
-import { MIN_GAS_LIMIT_DEC } from '../../components/app/send/send.constants'
+import { MIN_GAS_LIMIT_DEC } from '../send/send.constants'
 import { checksumAddress, addressSlicer, valuesFor } from '../../helpers/utils/util'
 import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../selectors/selectors'
 

diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
@@ -3,7 +3,7 @@ import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-
+``
 const mapStateToProps = state => {
   const { metamask, appState } = state
   const {

diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js
@@ -10,7 +10,7 @@ import { getMetaMaskAccounts, getNetworkIdentifier } from '../../selectors/selec
 // init
 import FirstTimeFlow from '../first-time-flow'
 // accounts
-const SendTransactionScreen = require('../../components/app/send/send.container')
+const SendTransactionScreen = require('../send/send.container')
 const ConfirmTransaction = require('../confirm-transaction')
 
 // slideout menu

diff --git a/ui/app/components/app/send/README.md → ui/app/pages/send/README.md b/ui/app/components/app/send/README.md → ui/app/pages/send/README.md
diff --git a/...unt-list-item/account-list-item-README.md → ...unt-list-item/account-list-item-README.md b/...unt-list-item/account-list-item-README.md → ...unt-list-item/account-list-item-README.md
diff --git a/...-list-item/account-list-item.component.js → ...-list-item/account-list-item.component.js b/...-list-item/account-list-item.component.js → ...-list-item/account-list-item.component.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { checksumAddress } from '../../../../helpers/utils/util'
-import Identicon from '../../../ui/identicon'
-import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../../../../helpers/constants/common'
-import Tooltip from '../../../ui/tooltip-v2'
+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'
 
 export default class AccountListItem extends Component {
 

diff --git a/...-list-item/account-list-item.container.js → ...-list-item/account-list-item.container.js b/...-list-item/account-list-item.container.js → ...-list-item/account-list-item.container.js
@@ -8,7 +8,7 @@ import {
   getIsMainnet,
   isBalanceCached,
   preferencesSelector,
-} from '../../../../selectors/selectors'
+} from '../../../selectors/selectors'
 import AccountListItem from './account-list-item.component'
 
 export default connect(mapStateToProps)(AccountListItem)

diff --git a/...nents/app/send/account-list-item/index.js → ui/app/pages/send/account-list-item/index.js b/...nents/app/send/account-list-item/index.js → ui/app/pages/send/account-list-item/index.js
diff --git a/...tests/account-list-item-component.test.js → ...tests/account-list-item-component.test.js b/...tests/account-list-item-component.test.js → ...tests/account-list-item-component.test.js
@@ -3,15 +3,15 @@ import assert from 'assert'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import proxyquire from 'proxyquire'
-import Identicon from '../../../../ui/identicon'
-import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'
+import Identicon from '../../../../components/ui/identicon'
+import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
 
 const utilsMethodStubs = {
   checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
 }
 
 const AccountListItem = proxyquire('../account-list-item.component.js', {
-  '../../../../helpers/utils/util': utilsMethodStubs,
+  '../../../helpers/utils/util': utilsMethodStubs,
 }).default
 
 

diff --git a/...tests/account-list-item-container.test.js → ...tests/account-list-item-container.test.js b/...tests/account-list-item-container.test.js → ...tests/account-list-item-container.test.js
@@ -15,7 +15,7 @@ proxyquire('../account-list-item.container.js', {
     getCurrentCurrency: () => `mockCurrentCurrency`,
     getNativeCurrency: () => `mockNativeCurrency`,
   },
-  '../../../../selectors/selectors': {
+  '../../../selectors/selectors': {
     isBalanceCached: () => `mockBalanceIsCached`,
     preferencesSelector: ({ showFiatInTestnets }) => ({
       showFiatInTestnets,

diff --git a/ui/app/components/app/send/index.js → ui/app/pages/send/index.js b/ui/app/components/app/send/index.js → ui/app/pages/send/index.js
diff --git a/...components/app/send/send-content/index.js → ui/app/pages/send/send-content/index.js b/...components/app/send/send-content/index.js → ui/app/pages/send/send-content/index.js
diff --git a/...nd/send-content/send-amount-row/README.md → ...nd/send-content/send-amount-row/README.md b/...nd/send-content/send-amount-row/README.md → ...nd/send-content/send-amount-row/README.md
diff --git a/...max-button/amount-max-button.component.js → ...max-button/amount-max-button.component.js b/...max-button/amount-max-button.component.js → ...max-button/amount-max-button.component.js