Merge branch 'master' into nm

8 files changed, 189 insertions, 31 deletions

diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 330f73805..32b103c86 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const exportAsFile = require('../util').exportAsFile
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
@@ -20,20 +21,21 @@ function mapStateToProps (state) {
 }
 
 ExportAccountView.prototype.render = function () {
-  var state = this.props
-  var accountDetail = state.accountDetail
+  const state = this.props
+  const accountDetail = state.accountDetail
+  const nickname = state.identities[state.address].name
 
   if (!accountDetail) return h('div')
-  var accountExport = accountDetail.accountExport
+  const accountExport = accountDetail.accountExport
 
-  var notExporting = accountExport === 'none'
-  var exportRequested = accountExport === 'requested'
-  var accountExported = accountExport === 'completed'
+  const notExporting = accountExport === 'none'
+  const exportRequested = accountExport === 'requested'
+  const accountExported = accountExport === 'completed'
 
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    var warning = `Export private keys at your own risk.`
+    const warning = `Export private keys at your own risk.`
     return (
       h('div', {
         style: {
@@ -89,6 +91,8 @@ ExportAccountView.prototype.render = function () {
   }
 
   if (accountExported) {
+    const plainKey = ethUtil.stripHexPrefix(accountDetail.privateKey)
+
     return h('div.privateKey', {
       style: {
         margin: '0 20px',
@@ -105,10 +109,16 @@ ExportAccountView.prototype.render = function () {
         onClick: function (event) {
           copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
         },
-      }, ethUtil.stripHexPrefix(accountDetail.privateKey)),
+      }, plainKey),
       h('button', {
         onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
       }, 'Done'),
+      h('button', {
+        style: {
+          marginLeft: '10px',
+        },
+        onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
+      }, 'Save as File'),
     ])
   }
 }
@@ -117,6 +127,6 @@ ExportAccountView.prototype.onExportKeyPress = function (event) {
   if (event.key !== 'Enter') return
   event.preventDefault()
 
-  var input = document.getElementById('exportAccount').value
+  const input = document.getElementById('exportAccount').value
   this.props.dispatch(actions.exportAccount(input, this.props.address))
 }
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index bb112dcca..fe80af8b3 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -25,7 +25,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, accounts, selected, menuItemStyles, actions } = this.props
+    const { identities, accounts, selected, menuItemStyles, actions, keyrings } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
@@ -33,6 +33,12 @@ class AccountDropdowns extends Component {
 
       const balanceValue = accounts[key].balance
       const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
 
       return h(
         DropdownMenuItem,
@@ -88,6 +94,7 @@ class AccountDropdowns extends Component {
                 marginLeft: '10px',
               },
             }, [
+              this.indicateIfLoose(keyring),
               h('span.account-dropdown-name', {
                 style: {
                   fontSize: '18px',
@@ -97,6 +104,7 @@ class AccountDropdowns extends Component {
                   textOverflow: 'ellipsis',
                 },
               }, identity.name || ''),
+              h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
 
               h('span.account-dropdown-balance', {
                 style: {
@@ -125,11 +133,35 @@ 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
         ]
       )
     })
   }
 
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label', 'LOOSE') : null
+    } catch (e) { return }
+  }
+
   renderAccountSelector () {
     const { actions, useCssTransition, innerStyle } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
@@ -389,7 +421,8 @@ AccountDropdowns.defaultProps = {
 
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
-  selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
 }
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 9133c78e3..8424a479a 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -23,7 +23,7 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('span', {
+    return h('span.pointer', {
       style: {
         display: 'flex',
         alignItems: 'center',
@@ -38,7 +38,7 @@ Network.prototype.render = function () {
         },
         src: 'images/loading.svg',
       }),
-      h('i.fa.fa-sort-desc'),
+      h('i.fa.fa-caret-down'),
     ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
@@ -77,7 +77,8 @@ Network.prototype.render = function () {
                 style: {
                   color: '#039396',
                 }},
-              'Ethereum Main Net'),
+              'Main Network'),
+              h('i.fa.fa-caret-down.fa-lg'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
@@ -90,6 +91,7 @@ Network.prototype.render = function () {
                   color: '#ff6666',
                 }},
               'Ropsten Test Net'),
+              h('i.fa.fa-caret-down.fa-lg'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
@@ -102,6 +104,7 @@ Network.prototype.render = function () {
                   color: '#690496',
                 }},
               'Kovan Test Net'),
+              h('i.fa.fa-caret-down.fa-lg'),
             ])
           case 'rinkeby-test-network':
             return h('.network-indicator', [
@@ -114,6 +117,7 @@ Network.prototype.render = function () {
                   color: '#e7a218',
                 }},
               'Rinkeby Test Net'),
+              h('i.fa.fa-caret-down.fa-lg'),
             ])
           default:
             return h('.network-indicator', [
@@ -129,6 +133,7 @@ Network.prototype.render = function () {
                   color: '#AEAEAE',
                 }},
               'Private Network'),
+              h('i.fa.fa-caret-down.fa-lg'),
             ])
         }
       })(),
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 16308d121..718a22de0 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -38,7 +38,7 @@ PendingMsgDetails.prototype.render = function () {
 
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
-        h('.flex-row.flex-space-between', [
+        h('.flex-column.flex-space-between', [
           h('label.font-small', 'MESSAGE'),
           h('span.font-small', msgParams.data),
         ]),
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
index b2cac164a..834719c53 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@@ -18,6 +18,9 @@ PendingMsg.prototype.render = function () {
 
     h('div', {
       key: msgData.id,
+      style: {
+        maxWidth: '350px',
+      },
     }, [
 
       // header
@@ -32,10 +35,21 @@ PendingMsg.prototype.render = function () {
         style: {
           margin: '10px',
         },
-      }, `Signing this message can have
+      }, [
+        `Signing this message can have
         dangerous side effects. Only sign messages from
         sites you fully trust with your entire account.
-        This will be fixed in a future version.`),
+        This dangerous method will be removed in a future version. `,
+        h('a', {
+          href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
+          style: { color: 'rgb(247, 134, 28)' },
+          onClick: (event) => {
+            event.preventDefault()
+            const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
+            global.platform.openWindow({ url })
+          },
+        }, 'Read more here.'),
+      ]),
 
       // message details
       h(PendingTxDetails, state),
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index c1b079a25..a679107c9 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -240,6 +240,15 @@ PendingTx.prototype.render = function () {
     totalInETH,
   } = this.getData()
 
+  // This is from the latest master
+  // It handles some of the errors that we are not currently handling
+  // Leaving as comments fo reference
+
+  // const balanceBn = hexToBn(balance)
+  // const insufficientBalance = balanceBn.lt(maxCost)
+  // const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting
+  // const showRejectAll = props.unconfTxListLength > 1
+
   this.inputs = []
 
   return (
@@ -332,9 +341,88 @@ PendingTx.prototype.render = function () {
               h('div.confirm-screen-row-info', `$${totalInUSD} USD`),
               h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
-        ]),
+          ]),
         ]),
 
+// These are latest errors handling from master
+// Leaving as comments as reference when we start implementing error handling
+//         h('style', `
+//           .conf-buttons button {
+//             margin-left: 10px;
+//             text-transform: uppercase;
+//           }
+//         `),
+
+//         txMeta.simulationFails ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Transaction Error. Exception thrown in contract code.')
+//         : null,
+
+//         !isValidAddress ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+//         : null,
+
+//         insufficientBalance ?
+//           h('span.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Insufficient balance for transaction')
+//         : null,
+
+//         // send + cancel
+//         h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button', {
+//             onClick: (event) => {
+//               this.resetGasFields()
+//               event.preventDefault()
+//             },
+//           }, 'Reset'),
+
+//           // Accept Button or Buy Button
+//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+//             h('input.confirm.btn-green', {
+//               type: 'submit',
+//               value: 'SUBMIT',
+//               style: { marginLeft: '10px' },
+//               disabled: buyDisabled,
+//             }),
+
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelTransaction,
+//           }, 'Reject'),
+//         ]),
+//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelAllTransactions,
+//           }, 'Reject All'),
+//         ]) : null,
+//       ]),
+//     ])
+//   )
+// }
       ]),
 
       h('form#pending-tx-form.flex-column.flex-center', {
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 2d1dd0ea7..0efa89c63 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -48,10 +48,28 @@ TokenList.prototype.render = function () {
 
   if (error) {
     log.error(error)
-    return this.message('There was a problem loading your token balances.')
+    return h('.hotFix', {
+      style: {
+        padding: '80px',
+      },
+    }, [
+      'We had trouble loading your token balances. You can view them ',
+      h('span.hotFix', {
+        style: {
+          color: 'rgba(247, 134, 28, 1)',
+          cursor: 'pointer',
+        },
+        onClick: () => {
+          global.platform.openWindow({
+          url: `https://ethplorer.io/address/${userAddress}`,
+        })
+        },
+      }, 'here'),
+    ])
   }
 
   return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
+
 }
 
 TokenList.prototype.message = function (body) {
@@ -84,7 +102,7 @@ TokenList.prototype.createFreshTokenTracker = function () {
   this.tracker = new TokenTracker({
     userAddress,
     provider: global.ethereumProvider,
-    tokens: uniqueMergeTokens(defaultTokens, this.props.tokens),
+    tokens: this.props.tokens,
     pollingInterval: 8000,
   })
 
@@ -149,4 +167,3 @@ function uniqueMergeTokens (tokensA, tokensB = []) {
   })
   return result
 }
-
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index eca2a7100..880a288af 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -60,16 +60,7 @@ TransactionListItem.prototype.render = function () {
     }, [
 
       h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        h('.pop-hover', {
-          onClick: (event) => {
-            event.stopPropagation()
-            if (!isTx || isPending) return
-            var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}`
-            global.platform.openWindow({ url })
-          },
-        }, [
-          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
-        ]),
+        h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
       ]),
 
       h(Tooltip, {