Merge branch 'i328-MultiVault' of github.com:MetaMask/metamask-plugin into i328-MultiVault

7 files changed, 259 insertions, 63 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 4f3083707..a6601cd0e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -95,7 +95,7 @@ var actions = {
   setRpcTarget: setRpcTarget,
   setProviderType: setProviderType,
   // hacky - need a way to get a reference to account manager
-  _setAccountManager: _setAccountManager,
+  _setKeyringController: _setKeyringController,
   // loading overlay
   SHOW_LOADING: 'SHOW_LOADING_INDICATION',
   HIDE_LOADING: 'HIDE_LOADING_INDICATION',
@@ -132,13 +132,17 @@ var actions = {
   RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS',
   BACK_TO_UNLOCK_VIEW: 'BACK_TO_UNLOCK_VIEW',
   backToUnlockView: backToUnlockView,
+  // SHOWING KEYCHAIN
+  SHOW_NEW_KEYCHAIN: 'SHOW_NEW_KEYCHAIN',
+  showNewKeychain: showNewKeychain,
+
 }
 
 module.exports = actions
 
-var _accountManager = null
-function _setAccountManager (accountManager) {
-  _accountManager = accountManager
+var _keyringController = null
+function _setKeyringController (accountManager) {
+  _keyringController = accountManager
 }
 
 function goHome () {
@@ -153,7 +157,7 @@ function tryUnlockMetamask (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
-    _accountManager.submitPassword(password, (err, selectedAccount) => {
+    _keyringController.submitPassword(password, (err, selectedAccount) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
         dispatch(actions.unlockFailed())
@@ -167,11 +171,11 @@ function tryUnlockMetamask (password) {
 function createNewVault (password, entropy) {
   return (dispatch) => {
     dispatch(actions.createNewVaultInProgress())
-    _accountManager.createNewVault(password, entropy, (err, result) => {
+    _keyringController.createNewVault(password, entropy, (err, result) => {
       if (err) {
         return dispatch(actions.showWarning(err.message))
       }
-      dispatch(this.goHome())
+      dispatch(this.showAccountsPage())
       dispatch(this.hideLoadingIndication())
     })
   }
@@ -185,14 +189,14 @@ function showInfoPage () {
 
 function setSelectedAddress (address) {
   return (dispatch) => {
-    _accountManager.setSelectedAddress(address)
+    _keyringController.setSelectedAddress(address)
   }
 }
 
 function setCurrentFiat (fiat) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    _accountManager.setCurrentFiat(fiat, (data, err) => {
+    _keyringController.setCurrentFiat(fiat, (data, err) => {
       dispatch(this.hideLoadingIndication())
       dispatch({
         type: this.SET_CURRENT_FIAT,
@@ -210,7 +214,7 @@ function signMsg (msgData) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
 
-    _accountManager.signMessage(msgData, (err) => {
+    _keyringController.signMessage(msgData, (err) => {
       dispatch(actions.hideLoadingIndication())
 
       if (err) return dispatch(actions.displayWarning(err.message))
@@ -221,20 +225,22 @@ function signMsg (msgData) {
 
 function signTx (txData) {
   return (dispatch) => {
-    web3.eth.sendTransaction(txData, (err, data) => {
-      dispatch(actions.hideLoadingIndication())
-
+    _accountManager.setGasMultiplier(txData.gasMultiplier, (err) => {
       if (err) return dispatch(actions.displayWarning(err.message))
-      dispatch(actions.hideWarning())
-      dispatch(actions.goHome())
+      web3.eth.sendTransaction(txData, (err, data) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) return dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideWarning())
+        dispatch(actions.goHome())
+      })
+      dispatch(this.showConfTxPage())
     })
-    dispatch(this.showConfTxPage())
   }
 }
 
 function sendTx (txData) {
   return (dispatch) => {
-    _accountManager.approveTransaction(txData.id, (err) => {
+    _keyringController.approveTransaction(txData.id, (err) => {
       if (err) {
         alert(err.message)
         dispatch(actions.txError(err))
@@ -260,12 +266,12 @@ function txError (err) {
 }
 
 function cancelMsg (msgData) {
-  _accountManager.cancelMessage(msgData.id)
+  _keyringController.cancelMessage(msgData.id)
   return actions.completedTx(msgData.id)
 }
 
 function cancelTx (txData) {
-  _accountManager.cancelTransaction(txData.id)
+  _keyringController.cancelTransaction(txData.id)
   return actions.completedTx(txData.id)
 }
 
@@ -294,7 +300,7 @@ function showInitializeMenu () {
 function agreeToDisclaimer () {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    _accountManager.agreeToDisclaimer((err) => {
+    _keyringController.agreeToDisclaimer((err) => {
       if (err) {
         return dispatch(actions.showWarning(err.message))
       }
@@ -326,6 +332,12 @@ function backToUnlockView () {
   }
 }
 
+function showNewKeychain () {
+  return {
+    type: actions.SHOW_NEW_KEYCHAIN
+  }
+}
+
 //
 // unlock screen
 //
@@ -358,7 +370,7 @@ function updateMetamaskState (newState) {
 
 function lockMetamask () {
   return (dispatch) => {
-    _accountManager.setLocked((err) => {
+    _keyringController.setLocked((err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
         return dispatch(actions.showWarning(err.message))
@@ -374,7 +386,7 @@ function lockMetamask () {
 function showAccountDetail (address) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    _accountManager.setSelectedAddress(address, (err, address) => {
+    _keyringController.setSelectedAddress(address, (err, address) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
         return dispatch(actions.showWarning(err.message))
@@ -445,7 +457,7 @@ function goBackToInitView () {
 //
 
 function setRpcTarget (newRpc) {
-  _accountManager.setRpcTarget(newRpc)
+  _keyringController.setRpcTarget(newRpc)
   return {
     type: actions.SET_RPC_TARGET,
     value: newRpc,
@@ -453,7 +465,7 @@ function setRpcTarget (newRpc) {
 }
 
 function setProviderType (type) {
-  _accountManager.setProviderType(type)
+  _keyringController.setProviderType(type)
   return {
     type: actions.SET_PROVIDER_TYPE,
     value: type,
@@ -461,7 +473,7 @@ function setProviderType (type) {
 }
 
 function useEtherscanProvider () {
-  _accountManager.useEtherscanProvider()
+  _keyringController.useEtherscanProvider()
   return {
     type: actions.USE_ETHERSCAN_PROVIDER,
   }
@@ -520,7 +532,7 @@ function exportAccount (address) {
   return function (dispatch) {
     dispatch(self.showLoadingIndication())
 
-    _accountManager.exportAccount(address, function (err, result) {
+    _keyringController.exportAccount(address, function (err, result) {
       dispatch(self.hideLoadingIndication())
 
       if (err) {
@@ -543,7 +555,7 @@ function showPrivateKey (key) {
 function saveAccountLabel (account, label) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    _accountManager.saveAccountLabel(account, label, (err) => {
+    _keyringController.saveAccountLabel(account, label, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
         return dispatch(actions.showWarning(err.message))
@@ -564,7 +576,7 @@ function showSendPage () {
 
 function agreeToEthWarning () {
   return (dispatch) => {
-    _accountManager.agreeToEthWarning((err) => {
+    _keyringController.agreeToEthWarning((err) => {
       if (err) {
         return dispatch(actions.showEthWarning(err.message))
       }
@@ -583,7 +595,7 @@ function showEthWarning () {
 
 function buyEth (address, amount) {
   return (dispatch) => {
-    _accountManager.buyEth(address, amount)
+    _keyringController.buyEth(address, amount)
     dispatch({
       type: actions.BUY_ETH,
     })
@@ -661,7 +673,7 @@ function coinShiftRquest (data, marketData) {
       if (response.error) return dispatch(actions.showWarning(response.error))
       var message = `
         Deposit your ${response.depositType} to the address bellow:`
-      _accountManager.createShapeShiftTx(response.deposit, response.depositType)
+      _keyringController.createShapeShiftTx(response.deposit, response.depositType)
       dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
     })
   }
diff --git a/ui/app/app.js b/ui/app/app.js
index 3266ced51..7392e275d 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -8,6 +8,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const DisclaimerScreen = require('./first-time/disclaimer')
 const InitializeMenuScreen = require('./first-time/init-menu')
 const CreateVaultScreen = require('./first-time/create-vault')
+const NewKeychainScreen = require('./new-keychain')
 // unlock
 const UnlockScreen = require('./unlock')
 // accounts
@@ -432,6 +433,9 @@ App.prototype.renderPrimary = function () {
     case 'sendTransaction':
       return h(SendTransactionScreen, {key: 'send-transaction'})
 
+    case 'newKeychain':
+      return h(NewKeyChainScreen, {key: 'new-keychain'})
+
     case 'confTx':
       return h(ConfirmTxScreen, {key: 'confirm-tx'})
 
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index d8e8524bf..545302098 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -29,8 +29,10 @@ PTXP.render = function () {
   var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
 
+  var gasMultiplier = txData.gasMultiplier
   var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
   var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
   var txFee = gasCost.mul(gasPrice)
   var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
   var maxCost = txValue.add(txFee)
diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js
new file mode 100644
index 000000000..823f5eb01
--- /dev/null
+++ b/ui/app/components/range-slider.js
@@ -0,0 +1,58 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RangeSlider
+
+inherits(RangeSlider, Component)
+function RangeSlider () {
+  Component.call(this)
+}
+
+RangeSlider.prototype.render = function () {
+  const state = this.state || {}
+  const props = this.props
+  const onInput = props.onInput || function () {}
+  const name = props.name
+  const {
+    min = 0,
+    max = 100,
+    increment = 1,
+    defaultValue = 50,
+    mirrorInput = false,
+  } = this.props.options
+  const {container, input, range} = props.style
+
+  return (
+    h('.flex-row', {
+      style: container,
+    }, [
+      h('input', {
+        type: 'range',
+        name: name,
+        min: min,
+        max: max,
+        step: increment,
+        style: range,
+        value: state.value || defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
+      }),
+
+      // Mirrored input for range
+      mirrorInput ? h('input.large-input', {
+        type: 'number',
+        name: `${name}Mirror`,
+        min: min,
+        max: max,
+        value: state.value || defaultValue,
+        step: increment,
+        style: input,
+        onChange: this.mirrorInputs.bind(this, event),
+      }) : null,
+    ])
+  )
+}
+
+RangeSlider.prototype.mirrorInputs = function (event) {
+  this.setState({value: event.target.value})
+}
diff --git a/ui/app/new-keychain.js b/ui/app/new-keychain.js
new file mode 100644
index 000000000..d6fefd0c7
--- /dev/null
+++ b/ui/app/new-keychain.js
@@ -0,0 +1,33 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+
+module.exports = connect(mapStateToProps)(NewKeychain)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(NewKeychain, Component)
+function NewKeychain () {
+  Component.call(this)
+}
+
+NewKeychain.prototype.render = function () {
+  const props = this.props
+
+  return (
+    h('div', {
+      style: {
+        background: 'blue',
+      },
+    }, [
+      h('h1',`Here's a list!!!!`),
+      h('button',
+        {
+          onClick: () => this.props.dispatch(actions.goHome())
+        })
+    ])
+  )
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index c2ac099a6..2bfb2567a 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -119,6 +119,15 @@ function reduceApp (state, action) {
         warning: null,
       })
 
+    case actions.SHOW_NEW_KEYCHAIN:
+      return extend(appState, {
+        currentView: {
+          name: 'newKeychain',
+          context: appState.currentView.context
+        },
+        transForward: true,
+      })
+
   // unlock
 
     case actions.UNLOCK_METAMASK:
@@ -540,4 +549,3 @@ function indexForPending (state, txId) {
   })
   return idx
 }
-
diff --git a/ui/app/send.js b/ui/app/send.js
index 009866cf7..97ed29e4a 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -9,7 +9,8 @@ const numericBalance = require('./util').numericBalance
 const addressSummary = require('./util').addressSummary
 const EthBalance = require('./components/eth-balance')
 const ethUtil = require('ethereumjs-util')
-
+const RangeSlider = require('./components/range-slider')
+const Tooltip = require('./components/tooltip')
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
@@ -50,7 +51,7 @@ SendTransactionScreen.prototype.render = function () {
       // Sender Profile
       //
 
-      h('.account-data-subsection.flex-column.flex-grow', {
+      h('.account-data-subsection.flex-row.flex-grow', {
         style: {
           margin: '0 20px',
         },
@@ -59,10 +60,9 @@ SendTransactionScreen.prototype.render = function () {
         // header - identicon + nav
         h('.flex-row.flex-space-between', {
           style: {
-            marginTop: 28,
+            marginTop: '15px',
           },
         }, [
-
           // back button
           h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
             onClick: this.back.bind(this),
@@ -77,42 +77,53 @@ SendTransactionScreen.prototype.render = function () {
           ]),
 
           // invisible place holder
-          h('i.fa.fa-users.fa-lg.invisible'),
+          h('i.fa.fa-users.fa-lg.invisible', {
+            style: {
+              marginTop: '28px',
+            },
+          }),
 
         ]),
 
         // account label
-        h('h2.font-medium.color-forest.flex-center', {
-          style: {
-            paddingTop: 8,
-            marginBottom: 8,
-          },
-        }, identity && identity.name),
 
-        // address and getter actions
-        h('.flex-row.flex-center', {
+        h('.flex-column', {
           style: {
-            marginBottom: 8,
+            marginTop: '10px',
+            alignItems: 'flex-start',
           },
         }, [
+          h('h2.font-medium.color-forest.flex-center', {
+            style: {
+              paddingTop: '8px',
+              marginBottom: '8px',
+            },
+          }, identity && identity.name),
 
-          h('div', {
+          // address and getter actions
+          h('.flex-row.flex-center', {
             style: {
-              lineHeight: '16px',
+              marginBottom: '8px',
             },
-          }, addressSummary(address)),
+          }, [
 
-        ]),
+            h('div', {
+              style: {
+                lineHeight: '16px',
+              },
+            }, addressSummary(address)),
 
-        // balance
-        h('.flex-row.flex-center', [
+          ]),
 
-          h(EthBalance, {
-            value: account && account.balance,
-          }),
+          // balance
+          h('.flex-row.flex-center', [
 
-        ]),
+            h(EthBalance, {
+              value: account && account.balance,
+            }),
 
+          ]),
+        ]),
       ]),
 
       //
@@ -123,8 +134,8 @@ SendTransactionScreen.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
-          marginTop: 32,
-          marginBottom: 16,
+          marginTop: '15px',
+          marginBottom: '16px',
         },
       }, [
         'Send Transaction',
@@ -152,7 +163,7 @@ SendTransactionScreen.prototype.render = function () {
           placeholder: 'Amount',
           type: 'number',
           style: {
-            marginRight: 6,
+            marginRight: '6px',
           },
           dataset: {
             persistentFormId: 'tx-amount',
@@ -171,20 +182,19 @@ SendTransactionScreen.prototype.render = function () {
       //
       // Optional Fields
       //
-
       h('h3.flex-center.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
-          marginTop: 16,
-          marginBottom: 16,
+          marginTop: '16px',
+          marginBottom: '16px',
         },
       }, [
         'Transactional Data (optional)',
       ]),
 
       // 'data' field
-      h('section.flex-row.flex-center', [
+      h('section.flex-column.flex-center', [
         h('input.large-input', {
           name: 'txData',
           placeholder: '0x01234',
@@ -197,6 +207,73 @@ SendTransactionScreen.prototype.render = function () {
           },
         }),
       ]),
+      // custom gasPrice field
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginBottom: '5px',
+        },
+      }, [
+        'Transaction Fee (optional)',
+        h(Tooltip, {
+          title: `
+            This is used to set the transaction's gas price.
+            Setting it to 100% will use the full recommended value.          `,
+        }, [
+          h('i.fa.fa-question-circle', {
+            style: {
+              marginLeft: '5px',
+            },
+          }),
+        ]),
+      ]),
+
+      h('section.flex-column.flex-center', [
+        h('.flex-row', [
+          h(RangeSlider, {
+            name: 'gasInput',
+            options: {
+              mirrorInput: true,
+              defaultValue: 100,
+              min: 80,
+              max: 220,
+            },
+            style: {
+              container: {
+                marginBottom: '16px',
+              },
+              range: {
+                width: '68vw',
+              },
+              input: {
+                width: '5em',
+                marginLeft: '5px',
+              },
+            },
+          }),
+
+          h('div', {
+            style: {
+              fontSize: '12px',
+              paddingTop: '8px',
+              paddingLeft: '5px',
+            },
+          }, '%'),
+        ]),
+        h('.flex-row', {
+          style: {
+            justifyContent: 'space-between',
+            width: '243px',
+            position: 'relative',
+            fontSize: '12px',
+            right: '42px',
+            bottom: '30px',
+          },
+        }, [
+          h('span', 'Cheaper'), h('span', 'Faster'),
+        ]),
+      ]),
     ])
   )
 }
@@ -211,11 +288,12 @@ SendTransactionScreen.prototype.back = function () {
   this.props.dispatch(actions.backToAccountDetail(address))
 }
 
-SendTransactionScreen.prototype.onSubmit = function () {
+SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
   const recipient = document.querySelector('input[name="address"]').value
   const input = document.querySelector('input[name="amount"]').value
   const value = util.normalizeEthStringToWei(input)
   const txData = document.querySelector('input[name="txData"]').value
+  const gasMultiplier = document.querySelector('input[name="gasInput"]').value
   const balance = this.props.balance
   let message
 
@@ -239,6 +317,7 @@ SendTransactionScreen.prototype.onSubmit = function () {
   var txParams = {
     from: this.props.address,
     value: '0x' + value.toString(16),
+    gasMultiplier: gasMultiplier * 0.01,
   }
 
   if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)