Cancel tx JS

.gitignore

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

js/package.json

@@ -158,6 +158,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,34 @@ export default {
     }
   },
 
+  removeTransaction: {
+    section: SECTION_ACCOUNTS,
+    desc: 'Cancel a pending transaction. If the transaction has already been pushed to the network, there is no guarantee that the transaction can be removed.',
+    params: [
+      {
+        type: Data,
+        desc: 'transactionId, 32-byte hex',
+        example: '0x1db2c0cf57505d0f4a3d589414f0a0025ca97421d2cd596a9486bc7e2cd2bf8b'
+      }
+    ],
+    returns: {
+      type: Object,
+      desc: 'the removed transaction if cancellation was successful, an error if not.',
+      example: {
+        condition: {},
+        from: '0x00d0f4d320c54b44f9fe852af1215a528c99f1ab',
+        gas: '0x5208',
+        gasPrice: '0x2540be400',
+        hash: '0x9f771b70b3d33eae61064432f7398593d28d7bfa49004bc43004dfbe0777ab0e',
+        input: '0x',
+        networkId: 42,
+        nonce: '0x10',
+        to: '0x00a3755a680f9b906a4465923ea5ad3c960ddcec',
+        value: '0xde0b6b3a7640000'
+      }
+    }
+  },
+
   registryAddress: {
     section: SECTION_NET,
     desc: 'The address for the global registry.',
@@ -1622,7 +1650,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,19 +37,29 @@ 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,
 
     block: PropTypes.object,
     className: PropTypes.string,
+    cancelTransaction: PropTypes.func,
+    editTransaction: PropTypes.func,
     historic: PropTypes.bool
   };
 
   static defaultProps = {
     historic: true
   };
 
+  state = {
+    isCancelOpen: false,
+    isEditOpen: false,
+    canceled: false,
+    editing: false
+  };
+
   render () {
     const { address, className, historic, netVersion, tx } = this.props;
 
@@ -137,11 +149,113 @@ 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) {
+      const pendingStatus = this.getCondition();
+
+      if (pendingStatus === 'submitting...') {
+        return (
+          <div className={ styles.pending }>
+            <div />
+            <div>
+              <FormattedMessage
+                id='ui.txList.txRow.submitting'
+                defaultMessage='SUBMITTING'
+              />
+            </div>
+          </div>
+        );
+      }
+      return (
+        <div className={ styles.pending }>
+          <span>
+            <FormattedMessage
+              id='ui.txList.txRow.time'
+              defaultMessage='{ which }'
+              values={ { which: pendingStatus } }
+            />
+          </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.cancelTx : this.editTx }>
+          <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 +279,48 @@ 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...';
+    }
+  }
+
+  cancelTx = () => {
+    const { cancelTransaction, tx } = this.props;
+
+    cancelTransaction(this, tx);
+  }
+
+  editTx = () => {
+    const { editTransaction, tx } = this.props;
+
+    editTransaction(this, tx);
+  }
+
+  setCancel = () => {
+    this.setState({ isCancelOpen: true });
+  }
+
+  setEdit = () => {
+    this.setState({ isEditOpen: true });
+  }
+
+  nevermind = () => {
+    this.setState({ isCancelOpen: false, isEditOpen: false });
+  }
 }
 
 function mapStateToProps (initState) {