Cancel tx JS

.gitignore

@@ -19,6 +19,9 @@
 # mac stuff
 .DS_Store
 
+# npm stuff
+npm-debug.log
+
 # gdb files
 .gdb_history
 

js/package.json

@@ -151,6 +151,7 @@
     "blockies": "0.0.2",
     "brace": "0.9.0",
     "bytes": "2.4.0",
+    "date-difference": "1.0.0",
     "debounce": "1.0.0",
     "es6-error": "4.0.0",
     "es6-promise": "4.0.5",

js/src/api/rpc/parity/parity.js

@@ -395,6 +395,11 @@ export default class Parity {
       .execute('parity_removeReservedPeer', encode);
   }
 
+  removeTransaction (transactionId) {
+    return this._transport
+      .execute('parity_removeTransaction', inHex(transactionId));
+  }
+
   rpcSettings () {
     return this._transport
       .execute('parity_rpcSettings');

js/src/jsonrpc/interfaces/parity.js

@@ -643,6 +643,23 @@ export default {
     }
   },
 
+  removeTransaction: {
+    section: SECTION_ACCOUNTS,
+    desc: 'Cancel a pending transaction',
+    params: [
+      {
+        type: Data,
+        desc: 'transactionId, 32-byte hex',
+        example: '0x1db2c0cf57505d0f4a3d589414f0a0025ca97421d2cd596a9486bc7e2cd2bf8b'
+      }
+    ],
+    returns: {
+      type: Boolean,
+      desc: 'returns `true` if the transaction was successfully canceled, `false` if not.',
+      example: true
+    }
+  },
+
   registryAddress: {
     section: SECTION_NET,
     desc: 'The address for the global registry.',
@@ -1622,7 +1639,14 @@ export default {
         example: {
           from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',
           to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567',
-          value: fromDecimal(2441406250)
+          gas: fromDecimal(30400),
+          gasPrice: fromDecimal(10000000000000),
+          value: fromDecimal(2441406250),
+          data: '0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
+          condition: {
+            block: 354221,
+            time: new Date()
+          }
         }
       }
     ],

js/src/ui/MethodDecoding/methodDecoding.js

@@ -178,14 +178,16 @@ class MethodDecoding extends Component {
       );
 
       return (
-        <FormattedMessage
-          id='ui.methodDecoding.condition.block'
-          defaultMessage=', {historic, select, true {Submitted} false {Submission}} at block {blockNumber}'
-          values={ {
-            historic,
-            blockNumber
-          } }
-        />
+        <div>
+          <FormattedMessage
+            id='ui.methodDecoding.condition.block'
+            defaultMessage='{historic, select, true {Will be submitted} false {To be submitted}} at block {blockNumber}'
+            values={ {
+              historic,
+              blockNumber
+            } }
+          />
+        </div>
       );
     }
 
@@ -197,14 +199,16 @@ class MethodDecoding extends Component {
       );
 
       return (
-        <FormattedMessage
-          id='ui.methodDecoding.condition.time'
-          defaultMessage=', {historic, select, true {Submitted} false {Submission}} at {timestamp}'
-          values={ {
-            historic,
-            timestamp
-          } }
-        />
+        <div>
+          <FormattedMessage
+            id='ui.methodDecoding.condition.time'
+            defaultMessage='{historic, select, true {Will be submitted} false {To be submitted}} {timestamp}'
+            values={ {
+              historic,
+              timestamp
+            } }
+          />
+        </div>
       );
     }
 
@@ -493,7 +497,7 @@ class MethodDecoding extends Component {
         <div className={ styles.description }>
           <FormattedMessage
             id='ui.methodDecoding.signature.info'
-            defaultMessage='{historic, select, true {Executed} false {Will execute}} the {method} function on the contract {address} trsansferring {ethValue}{inputLength, plural, zero {,} other {passing the following {inputLength, plural, one {parameter} other {parameters}}}}'
+            defaultMessage='{historic, select, true {Executed} false {Will execute}} the {method} function on the contract {address} transferring {ethValue}{inputLength, plural, zero {,} other {passing the following {inputLength, plural, one {parameter} other {parameters}}}}'
             values={ {
               historic,
               method,

js/src/ui/TxList/TxRow/txRow.js

@@ -15,6 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import moment from 'moment';
+import dateDifference from 'date-difference';
+import { FormattedMessage } from 'react-intl';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
@@ -35,6 +37,7 @@ class TxRow extends Component {
   static propTypes = {
     accountAddresses: PropTypes.array.isRequired,
     address: PropTypes.string.isRequired,
+    blockNumber: PropTypes.object,
     contractAddresses: PropTypes.array.isRequired,
     netVersion: PropTypes.string.isRequired,
     tx: PropTypes.object.isRequired,
@@ -48,6 +51,13 @@ class TxRow extends Component {
     historic: true
   };
 
+  state = {
+    isCancelOpen: false,
+    isEditOpen: false,
+    canceled: false,
+    editing: false
+  };
+
   render () {
     const { address, className, historic, netVersion, tx } = this.props;
 
@@ -137,11 +147,98 @@ class TxRow extends Component {
     return (
       <td className={ styles.timestamp }>
         <div>{ blockNumber && block ? moment(block.timestamp).fromNow() : null }</div>
-        <div>{ blockNumber ? _blockNumber.toFormat() : 'Pending' }</div>
+        <div>{ blockNumber ? _blockNumber.toFormat() : this.renderCancelToggle() }</div>
       </td>
     );
   }
 
+  renderCancelToggle () {
+    const { canceled, editing, isCancelOpen, isEditOpen } = this.state;
+
+    if (canceled) {
+      return (
+        <div className={ styles.pending }>
+          <FormattedMessage
+            id='ui.txList.txRow.canceled'
+            defaultMessage='CANCELED'
+          />
+        </div>
+      );
+    }
+
+    if (editing) {
+      return (
+        <div className={ styles.pending }>
+          <FormattedMessage
+            id='ui.txList.txRow.editing'
+            defaultMessage='EDITING'
+          />
+        </div>
+      );
+    }
+
+    if (!isCancelOpen && !isEditOpen) {
+      return (
+        <div className={ styles.pending }>
+          <span>
+            <FormattedMessage
+              id='ui.txList.txRow.time'
+              defaultMessage='{when}'
+              values={ { when: this.getCondition() } }
+            />
+          </span>
+          <div>
+            <FormattedMessage
+              id='ui.txList.txRow.scheduled'
+              defaultMessage='SCHEDULED'
+            />
+          </div>
+          <a onClick={ this.setEdit }>
+            <FormattedMessage
+              id='ui.txList.txRow.edit'
+              defaultMessage='EDIT'
+            />
+          </a>
+          <span>{' | '}</span>
+          <a onClick={ this.setCancel }>
+            <FormattedMessage
+              id='ui.txList.txRow.cancel'
+              defaultMessage='CANCEL'
+            />
+          </a>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.pending }>
+        <div />
+        <div>
+          <FormattedMessage
+            id='ui.txList.txRow.verify'
+            defaultMessage='ARE YOU SURE?'
+          />
+        </div>
+        <a onClick={ (isCancelOpen) ? this.cancelTransaction : this.editTransaction }>
+          <FormattedMessage
+            id='ui.txList.txRow.verify.cancelEdit'
+            defaultMessage='{ which }'
+            values={ {
+              which: `${(isCancelOpen) ? 'Cancel' : 'Edit'}`
+            } }
+          />
+        </a>
+        <span>{' | '}</span>
+        <a onClick={ this.nevermind }>
+          <FormattedMessage
+            id='ui.txList.txRow.verify.nevermind'
+            defaultMessage='Nevermind'
+          />
+        </a>
+      </div>
+    );
+  }
+
   getIsKnownContract (address) {
     const { contractAddresses } = this.props;
 
@@ -165,6 +262,61 @@ class TxRow extends Component {
 
     return `/addresses/${address}`;
   }
+
+  getCondition = () => {
+    const { blockNumber, tx } = this.props;
+    let { time, block } = tx.condition;
+
+    if (time) {
+      if ((time.getTime() - Date.now()) >= 0) {
+        return `${dateDifference(new Date(), time, { compact: true })} left`;
+      } else {
+        return 'submitting...';
+      }
+    } else if (blockNumber) {
+      block = blockNumber.minus(block);
+      return (block.toNumber() < 0)
+        ? block.abs().toFormat(0) + ' blocks left'
+        : 'submitting...';
+    }
+  }
+
+  cancelTransaction = () => {
+    const { parity } = this.context.api;
+    const { hash } = this.props.tx;
+
+    parity.removeTransaction(hash);
+    this.setState({ canceled: true });
+  }
+
+  editTransaction = () => {
+    const { parity } = this.context.api;
+    const { hash, gas, gasPrice, to, from, value, input, condition } = this.props.tx;
+
+    parity.removeTransaction(hash);
+    parity.postTransaction({
+      from,
+      to,
+      gas,
+      gasPrice,
+      value,
+      condition,
+      data: input
+    });
+    this.setState({ editing: true });
+  }
+
+  setCancel = () => {
+    this.setState({ isCancelOpen: true });
+  }
+
+  setEdit = () => {
+    this.setState({ isEditOpen: true });
+  }
+
+  nevermind = () => {
+    this.setState({ isCancelOpen: false, isEditOpen: false });
+  }
 }
 
 function mapStateToProps (initState) {

js/src/ui/TxList/txList.css

@@ -42,10 +42,11 @@
     }
 
     &.timestamp {
-      padding-top: 1.5em;
-      text-align: right;
+      max-width: 5em;
+      padding-top: 0.75em;
+      text-align: center;
       line-height: 1.5em;
-      opacity: 0.5;
+      color: grey;
     }
 
     &.transaction {
@@ -83,4 +84,12 @@
   .left {
     text-align: left;
   }
+
+  .pending {
+    padding: 0em;
+  }
+
+  .pending div {
+    padding-bottom: 1.25em;
+  }
 }

js/src/ui/TxList/txList.js

@@ -35,6 +35,7 @@ class TxList extends Component {
       PropTypes.array,
       PropTypes.object
     ]).isRequired,
+    blockNumber: PropTypes.object,
     netVersion: PropTypes.string.isRequired
   };
 
@@ -63,18 +64,19 @@ class TxList extends Component {
   }
 
   renderRows () {
-    const { address, netVersion } = this.props;
+    const { address, netVersion, blockNumber } = this.props;
 
     return this.store.sortedHashes.map((txhash) => {
       const tx = this.store.transactions[txhash];
-      const blockNumber = tx.blockNumber.toNumber();
-      const block = this.store.blocks[blockNumber];
+      const txBlockNumber = tx.blockNumber.toNumber();
+      const block = this.store.blocks[txBlockNumber];
 
       return (
         <TxRow
           key={ tx.hash }
           tx={ tx }
           block={ block }
+          blockNumber={ blockNumber }
           address={ address }
           netVersion={ netVersion }
         />