Allow editing of send ether.

5 files changed, 131 insertions, 23 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 93cd40ed6..0d7f03d0e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -115,6 +115,7 @@ var actions = {
   TRANSACTION_ERROR: 'TRANSACTION_ERROR',
   NEXT_TX: 'NEXT_TX',
   PREVIOUS_TX: 'PREV_TX',
+  EDIT_TX: 'EDIT_TX',
   signMsg: signMsg,
   cancelMsg: cancelMsg,
   signPersonalMsg,
@@ -129,10 +130,13 @@ var actions = {
   completedTx: completedTx,
   txError: txError,
   nextTx: nextTx,
+  editTx,
   previousTx: previousTx,
   cancelAllTx: cancelAllTx,
   viewPendingTx: viewPendingTx,
   VIEW_PENDING_TX: 'VIEW_PENDING_TX',
+  updateTransactionParams,
+  UPDATE_TRANSACTION_PARAMS: 'UPDATE_TRANSACTION_PARAMS',
   // send screen
   estimateGas,
   getGasPrice,
@@ -668,6 +672,8 @@ function updateAndApproveTx (txData) {
     log.debug(`actions calling background.updateAndApproveTx`)
     background.updateAndApproveTransaction(txData, (err) => {
       dispatch(actions.hideLoadingIndication())
+      dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
+      dispatch(actions.clearSend())
       if (err) {
         dispatch(actions.txError(err))
         dispatch(actions.goHome())
@@ -685,6 +691,14 @@ function completedTx (id) {
   }
 }
 
+function updateTransactionParams (id, txParams) {
+  return {
+    type: actions.UPDATE_TRANSACTION_PARAMS,
+    id,
+    value: txParams,
+  }
+}
+
 function txError (err) {
   return {
     type: actions.TRANSACTION_ERROR,
@@ -948,6 +962,13 @@ function previousTx () {
   }
 }
 
+function editTx (txId) {
+  return {
+    type: actions.EDIT_TX,
+    value: txId,
+  }
+}
+
 function showConfigPage (transitionForward = true) {
   return {
     type: actions.SHOW_CONFIG_PAGE,
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index d12bc499b..8b5801aec 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -19,6 +19,7 @@ function mapStateToProps (state) {
     conversionRate,
     identities,
     currentCurrency,
+    send,
   } = state.metamask
   const accounts = state.metamask.accounts
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
@@ -27,12 +28,30 @@ function mapStateToProps (state) {
     identities,
     selectedAddress,
     currentCurrency,
+    send,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    clearSend: () => dispatch(actions.clearSend()),
+    editTransaction: txMeta => {
+      const { id, txParams } = txMeta
+      const {
+        gas: gasLimit,
+        gasPrice,
+        from,
+        to,
+        value: amount
+      } = txParams
+      dispatch(actions.editTx(id))
+      dispatch(actions.updateGasLimit(gasLimit)),
+      dispatch(actions.updateGasPrice(gasPrice)),
+      dispatch(actions.updateSendTo(to)),
+      dispatch(actions.updateSendAmount(amount)),
+      dispatch(actions.updateSendErrors({ to: null, amount: null })),
+      dispatch(actions.showSendPage())
+    },
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
   }
 }
@@ -157,7 +176,7 @@ ConfirmSendEther.prototype.getData = function () {
 }
 
 ConfirmSendEther.prototype.render = function () {
-  const { backToAccountDetail, selectedAddress, currentCurrency } = this.props
+  const { editTransaction, selectedAddress, currentCurrency, clearSend } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -199,8 +218,8 @@ ConfirmSendEther.prototype.render = function () {
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
           h('button.confirm-screen-back-button', {
-            onClick: () => backToAccountDetail(selectedAddress),
-          }, 'BACK'),
+            onClick: () => editTransaction(txMeta),
+          }, 'EDIT'),
           h('div.confirm-screen-title', 'Confirm Transaction'),
           h('div.confirm-screen-header-tip'),
         ]),
@@ -371,7 +390,10 @@ ConfirmSendEther.prototype.render = function () {
       }, [
         // Cancel Button
         h('div.cancel.btn-light.confirm-screen-cancel-button', {
-          onClick: (event) => this.cancel(event, txMeta),
+          onClick: (event) => {
+            clearSend()
+            this.cancel(event, txMeta)
+          },
         }, 'CANCEL'),
 
         // Accept Button
@@ -419,7 +441,27 @@ ConfirmSendEther.prototype.getFormEl = function () {
 ConfirmSendEther.prototype.gatherTxMeta = function () {
   const props = this.props
   const state = this.state
-  const txData = clone(state.txData) || clone(props.txData)
+  let txData = clone(state.txData) || clone(props.txData)
+
+  if (props.send.editingTransactionId) {
+    const {
+      send: {
+        memo,
+        amount: value,
+        gasLimit: gas,
+        gasPrice,
+      }
+    } = props
+    const { txParams: { from, to } } = txData
+    txData.txParams = {
+      from: ethUtil.addHexPrefix(from),
+      to: ethUtil.addHexPrefix(to),
+      memo: memo && ethUtil.addHexPrefix(memo),
+      value: ethUtil.addHexPrefix(value),
+      gas: ethUtil.addHexPrefix(gas),
+      gasPrice: ethUtil.addHexPrefix(gasPrice),
+    }
+  }
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 51d5c4f89..4451a6113 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -63,6 +63,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
     ),
     signTx: txParams => dispatch(actions.signTx(txParams)),
+    updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
     addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
@@ -76,5 +77,6 @@ function mapDispatchToProps (dispatch) {
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
     goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
+    backToConfirmScreen: editingTransactionId => dispatch(actions.showConfTxPage({ id: editingTransactionId })),
   }
 }
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 3b93a1625..bc0d0a4b3 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -33,6 +33,7 @@ function reduceMetamask (state, action) {
       amount: '0x0',
       memo: '',
       errors: {},
+      editingTransactionId: null,
     },
     coinOptions: {},
   }, state.metamask)
@@ -108,6 +109,14 @@ function reduceMetamask (state, action) {
       }
       return newState
 
+    case actions.EDIT_TX:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          editingTransactionId: action.value,
+        },
+      })
+
     case actions.SHOW_NEW_VAULT_SEED:
       return extend(metamaskState, {
         isUnlocked: true,
@@ -262,6 +271,20 @@ function reduceMetamask (state, action) {
         },
       })
 
+    case actions.UPDATE_TRANSACTION_PARAMS:
+      const { id, value } = action
+      let { selectedAddressTxList } = metamaskState
+      selectedAddressTxList = selectedAddressTxList.map(tx => {
+        if (tx.id === id) {
+          tx.txParams = value
+        }
+        return tx
+      })
+
+      return extend(metamaskState, {
+        selectedAddressTxList,
+      })
+
     case actions.PAIR_UPDATE:
       const { value: { marketinfo: pairMarketInfo } } = action
       return extend(metamaskState, {
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 690af7e5c..b7e904ea8 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -93,6 +93,9 @@ SendTransactionScreen.prototype.componentWillMount = function () {
     updateGasTotal,
     from,
     tokenContract,
+    editingTransactionId,
+    gasPrice,
+    gasLimit,
   } = this.props
   const { symbol } = selectedToken || {}
 
@@ -102,22 +105,32 @@ SendTransactionScreen.prototype.componentWillMount = function () {
 
   const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data)
 
-  Promise
-    .all([
-      getGasPrice(),
-      estimateGas(estimateGasParams),
-      tokenContract && tokenContract.balanceOf(from.address),
-    ])
-    .then(([gasPrice, gas, usersToken]) => {
-
-      const newGasTotal = multiplyCurrencies(gas, gasPrice, {
-        toNumericBase: 'hex',
-        multiplicandBase: 16,
-        multiplierBase: 16,
+  let newGasTotal
+  if (!editingTransactionId) {
+    Promise
+      .all([
+        getGasPrice(),
+        estimateGas(estimateGasParams),
+        tokenContract && tokenContract.balanceOf(from.address)
+      ])
+      .then(([gasPrice, gas, usersToken]) => {
+
+        const newGasTotal = multiplyCurrencies(gas, gasPrice, {
+          toNumericBase: 'hex',
+          multiplicandBase: 16,
+          multiplierBase: 16,
+        })
+        updateGasTotal(newGasTotal)
+        this.updateSendTokenBalance(usersToken)
       })
-      updateGasTotal(newGasTotal)
-      this.updateSendTokenBalance(usersToken)
+  } else {
+    newGasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 16,
     })
+    updateGasTotal(newGasTotal)
+  }
 }
 
 SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
@@ -394,6 +407,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
     errors,
     amount,
   } = this.props
+
   return h('div.send-v2__form-row', [
 
     h('div.send-v2__form-label', [
@@ -551,9 +565,12 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     gasPrice,
     signTokenTx,
     signTx,
+    updateAndApproveTx,
     selectedToken,
-    clearSend,
+    toAccounts,
+    editingTransactionId,
     errors: { amount: amountError, to: toError },
+    backToConfirmScreen,
   } = this.props
 
   const noErrors = !amountError && toError === null
@@ -564,6 +581,11 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
 
   this.addToAddressBookIfNew(to)
 
+  if (editingTransactionId) {
+    backToConfirmScreen(editingTransactionId)
+    return
+  }
+
   const txParams = {
     from,
     value: '0',
@@ -576,8 +598,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     txParams.to = to
   }
 
-  clearSend()
-
   selectedToken
     ? signTokenTx(selectedToken.address, to, amount, txParams)
     : signTx(txParams)