Merge branch 'master' into retry-tx-refractor

16 files changed, 182 insertions, 93 deletions

diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 71eb9ae23..adb52db74 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -35,6 +35,21 @@ AccountImportSubview.prototype.render = function () {
   return (
     h('div.new-account-import-form', [
 
+      h('.new-account-import-disclaimer', [
+        h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '),
+        h('span', {
+          style: {
+            cursor: 'pointer',
+            textDecoration: 'underline',
+          },
+          onClick: () => {
+            global.platform.openWindow({
+              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
+            })
+          },
+        }, 'here'),
+      ]),
+
       h('div.new-account-import-form__select-section', [
 
         h('div.new-account-import-form__select-label', 'Select Type'),
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 3e050c38c..200946753 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -284,20 +284,43 @@ function goHome () {
 // async actions
 
 function tryUnlockMetamask (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        dispatch(actions.unlockFailed(err.message))
-      } else {
+
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, error => {
+        if (error) {
+          return reject(error)
+        }
+
+        resolve()
+      })
+    })
+      .then(() => {
         dispatch(actions.unlockSucceeded())
+        return forceUpdateMetamaskState(dispatch)
+      })
+      .then(() => {
+        return new Promise((resolve, reject) => {
+          background.verifySeedPhrase(err => {
+            if (err) {
+              dispatch(actions.displayWarning(err.message))
+            }
+
+            resolve()
+          })
+        })
+      })
+      .then(() => {
         dispatch(actions.transitionForward())
-        forceUpdateMetamaskState(dispatch)
-      }
-    })
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.unlockFailed(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
@@ -339,46 +362,53 @@ function createNewVaultAndRestore (password, seed) {
     log.debug(`background.createNewVaultAndRestore`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndRestore(password, seed, (err) => {
-
-        dispatch(actions.hideLoadingIndication())
-
+      background.createNewVaultAndRestore(password, seed, err => {
         if (err) {
-          dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
 
-        dispatch(actions.showAccountsPage())
         resolve()
       })
     })
+      .then(() => dispatch(actions.unMarkPasswordForgotten()))
+      .then(() => {
+        dispatch(actions.showAccountsPage())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
 function createNewVaultAndKeychain (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndKeychain`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndKeychain(password, (err) => {
+      background.createNewVaultAndKeychain(password, err => {
         if (err) {
           dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
+
         log.debug(`background.placeSeedWords`)
+
         background.placeSeedWords((err) => {
           if (err) {
             dispatch(actions.displayWarning(err.message))
             return reject(err)
           }
-          dispatch(actions.hideLoadingIndication())
-          forceUpdateMetamaskState(dispatch)
+
           resolve()
         })
       })
     })
-
+      .then(() => forceUpdateMetamaskState(dispatch))
+      .then(() => dispatch(actions.hideLoadingIndication()))
+      .catch(() => dispatch(actions.hideLoadingIndication()))
   }
 }
 
@@ -389,18 +419,27 @@ function revealSeedConfirmation () {
 }
 
 function requestRevealSeed (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      log.debug(`background.placeSeedWords`)
-      background.placeSeedWords((err, result) => {
-        if (err) return dispatch(actions.displayWarning(err.message))
-        dispatch(actions.hideLoadingIndication())
-        dispatch(actions.showNewVaultSeed(result))
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, err => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.debug(`background.placeSeedWords`)
+        background.placeSeedWords((err, result) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+
+          dispatch(actions.showNewVaultSeed(result))
+          dispatch(actions.hideLoadingIndication())
+          resolve()
+        })
       })
     })
   }
@@ -851,11 +890,14 @@ function markPasswordForgotten () {
 }
 
 function unMarkPasswordForgotten () {
-  return (dispatch) => {
-    return background.unMarkPasswordForgotten(() => {
-      dispatch(actions.forgotPassword(false))
-      forceUpdateMetamaskState(dispatch)
+  return dispatch => {
+    return new Promise(resolve => {
+      background.unMarkPasswordForgotten(() => {
+        dispatch(actions.forgotPassword(false))
+        resolve()
+      })
     })
+      .then(() => forceUpdateMetamaskState(dispatch))
   }
 }
 
@@ -1500,6 +1542,7 @@ function pairUpdate (coin) {
     dispatch(actions.hideWarning())
     shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
       dispatch(actions.hideSubLoadingIndication())
+      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
       dispatch({
         type: actions.PAIR_UPDATE,
         value: {
@@ -1705,11 +1748,16 @@ function callBackgroundThenUpdate (method, ...args) {
 
 function forceUpdateMetamaskState (dispatch) {
   log.debug(`background.getState`)
-  background.getState((err, newState) => {
-    if (err) {
-      return dispatch(actions.displayWarning(err.message))
-    }
-    dispatch(actions.updateMetamaskState(newState))
+  return new Promise((resolve, reject) => {
+    background.getState((err, newState) => {
+      if (err) {
+        dispatch(actions.displayWarning(err.message))
+        return reject(err)
+      }
+
+      dispatch(actions.updateMetamaskState(newState))
+      resolve()
+    })
   })
 }
 
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index fa9ffc632..40918cc53 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -134,22 +134,6 @@ class AccountDropdowns extends Component {
             ]),
 
           ]),
-// =======
-//             },
-//           ),
-//           this.indicateIfLoose(keyring),
-//           h('span', {
-//             style: {
-//               marginLeft: '20px',
-//               fontSize: '24px',
-//               maxWidth: '145px',
-//               whiteSpace: 'nowrap',
-//               overflow: 'hidden',
-//               textOverflow: 'ellipsis',
-//             },
-//           }, identity.name || ''),
-//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-// >>>>>>> master:ui/app/components/account-dropdowns.js
         ]
       )
     })
@@ -159,7 +143,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', 'IMPORTED') : null
     } catch (e) { return }
   }
 
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 9be5cc5d1..ff10c0758 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#038789', // $blue-lagoon
+          backgroundColor: '#29B6AF', // $java
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#e91550', // $crimson
+          backgroundColor: '#ff4a8d', // $wild-strawberry
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#690496', // $purple
+          backgroundColor: '#7057ff', // $cornflower-blue
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ebb33f', // $tulip-tree
+          backgroundColor: '#f6c343', // $saffron
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
       h('div.deposit-ether-modal__header__close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
           this.props.hideModal()
         },
       }),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
 }
 
 DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
   this.props.hideModal()
   this.props.showAccountDetailModal()
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -308,7 +313,12 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => { this.onHide() },
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide()
+      },
       ref: (ref) => {
         this.modalRef = ref
       },
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 648b05049..87eb1588a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,11 +14,13 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
+  const { warning } = state.appState
   
   return {
     coinOptions,
     tokenExchangeRates,
     selectedAddress,
+    warning,
   }
 }
 
@@ -163,7 +165,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
 
 
 ShapeshiftForm.prototype.render = function () {
-  const { coinOptions, btnClass } = this.props
+  const { coinOptions, btnClass, warning } = this.props
   const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
   const coinPair = `${depositCoin}_eth`
   const { tokenExchangeRates } = this.props
@@ -206,7 +208,9 @@ ShapeshiftForm.prototype.render = function () {
 
           ]),
 
-          h('div', {
+          warning && h('div.shapeshift-form__address-input-label', warning),
+
+          !warning && h('div', {
             className: classnames('shapeshift-form__address-input-wrapper', {
               'shapeshift-form__address-input-wrapper--error': errorMessage,
             }),
@@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () {
             h('divshapeshift-form__address-input-error-message', [errorMessage]),
           ]),
 
-          this.renderMarketInfo(),
+          !warning && this.renderMarketInfo(),
 
       ]),
 
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 8ad7481c7..4752741aa 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -66,8 +66,9 @@
 
     .keyring-label {
       margin-top: 5px;
-      background-color: $black;
-      color: $dusty-gray;
+      background-color: $dusty-gray;
+      color: $black;
+      font-weight: normal;
     }
   }
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 919e1793b..53e3bff00 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -787,6 +787,10 @@
         width: auto;
         flex: 1;
       }
+
+      @media screen and (max-width: 575px) {
+        width: auto;
+      }
     }
   }
 
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 81f919df3..c6c254ede 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -54,6 +54,16 @@
 
 }
 
+.new-account-import-disclaimer {
+  width: 120%;
+  background-color: #F4F9FC;
+  display: inline-block;
+  align-items: center;
+  padding: 20px 30px 20px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .new-account-import-form {
   display: flex;
   flex-flow: column;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 1b5f1a491..640fd95b8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -47,6 +47,10 @@ $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
 $onahau: #d1edff;
+$java: #29b6af;
+$wild-strawberry: #ff4a8d;
+$cornflower-blue: #7057ff;
+$saffron: #f6c343;
 
 /*
   Z-Indicies
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index a4ed137f9..d1761f17d 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () {
 }
 
 RestoreVaultScreen.prototype.showInitializeMenu = function () {
-  this.props.dispatch(actions.unMarkPasswordForgotten())
-  if (this.props.forgottenPassword) {
-    this.props.dispatch(actions.backToUnlockView())
-  } else {
-    this.props.dispatch(actions.showInitializeMenu())
-  }
+  const { dispatch, forgottenPassword } = this.props
+  dispatch(actions.unMarkPasswordForgotten())
+    .then(() => {
+      if (forgottenPassword) {
+        dispatch(actions.backToUnlockView())
+      } else {
+        dispatch(actions.showInitializeMenu())
+      }
+    })
 }
 
 RestoreVaultScreen.prototype.createOnEnter = function (event) {
@@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   this.warning = null
   this.props.dispatch(actions.displayWarning(this.warning))
   this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
-  .then(() => {
-    this.props.dispatch(actions.unMarkPasswordForgotten())
-  })
-  .catch((err) => {
-    log.error(err.message)
-  })
-
+    .catch(err => log.error(err.message))
 }
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 4dda839a2..74a0f9299 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -138,14 +138,18 @@ function reduceApp (state, action) {
       })
 
     case actions.FORGOT_PASSWORD:
-      return extend(appState, {
-        currentView: {
-          name: action.value ? 'restoreVault' : 'accountDetail',
-        },
-        transForward: false,
+      const newState = extend(appState, {
         forgottenPassword: action.value,
       })
 
+      if (action.value) {
+        newState.currentView = {
+          name: 'restoreVault',
+        }
+      }
+
+      return newState
+
     case actions.SHOW_INIT_MENU:
       return extend(appState, {
         currentView: defaultView,
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 999939b89..b27e7140a 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -132,8 +132,6 @@ function reduceMetamask (state, action) {
 
     case actions.SHOW_NEW_VAULT_SEED:
       return extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: false,
         isRevealingSeedWords: true,
         seedWords: action.value,
       })
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index edb6bc41d..697dfc517 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -361,8 +361,9 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
     })
   }
 
+  const verifyTokenBalance = selectedToken && tokenBalance !== null
   let sufficientTokens
-  if (selectedToken) {
+  if (verifyTokenBalance) {
     sufficientTokens = isTokenBalanceSufficient({
       tokenBalance,
       amount,
@@ -377,7 +378,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
 
   if (conversionRate && !sufficientBalance) {
     amountError = 'Insufficient funds.'
-  } else if (selectedToken && !sufficientTokens) {
+  } else if (verifyTokenBalance && !sufficientTokens) {
     amountError = 'Insufficient tokens.'
   } else if (amountLessThanZero) {
     amountError = 'Can not send negative amounts of ETH.'
@@ -396,14 +397,15 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
     amount,
     setMaxModeTo,
     maxModeOn,
+    gasTotal,
   } = this.props
 
   return h('div.send-v2__form-row', [
 
-     h('div.send-v2__form-label', [
+    h('div.send-v2__form-label', [
       'Amount:',
       this.renderErrorMessage('amount'),
-      !errors.amount && h('div.send-v2__amount-max', {
+      !errors.amount && gasTotal && h('div.send-v2__amount-max', {
         onClick: (event) => {
           event.preventDefault()
           setMaxModeTo(true)
@@ -491,9 +493,12 @@ SendTransactionScreen.prototype.renderFooter = function () {
     goHome,
     clearSend,
     gasTotal,
+    tokenBalance,
+    selectedToken,
     errors: { amount: amountError, to: toError },
   } = this.props
 
+  const missingTokenBalance = selectedToken && !tokenBalance
   const noErrors = !amountError && toError === null
 
   return h('div.page-container__footer', [
@@ -504,7 +509,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
       },
     }, 'Cancel'),
     h('button.btn-clear.page-container__footer-button', {
-      disabled: !noErrors || !gasTotal,
+      disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
   ])
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 13c3f1274..cafe3a859 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -71,7 +71,7 @@ UnlockScreen.prototype.render = function () {
           style: {
             margin: 10,
           },
-        }, 'Unlock'),
+        }, 'Log In'),
       ]),
 
       h('.flex-row.flex-center.flex-grow', [
@@ -104,7 +104,7 @@ UnlockScreen.prototype.render = function () {
           },
         }, 'Use classic interface'),
       ]),
-      
+
     ])
   )
 }