Cancel tx JS

.gitignore

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

js/package.json

@@ -164,6 +164,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/jsonrpc/interfaces/parity.js

@@ -1833,7 +1833,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

@@ -185,14 +185,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>
       );
     }
 
@@ -204,14 +206,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>
       );
     }
 

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';
@@ -36,12 +38,15 @@ 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
   };
 
@@ -50,6 +55,10 @@ class TxRow extends Component {
   };
 
   state = {
+    isCancelOpen: false,
+    isEditOpen: false,
+    canceled: false,
+    editing: false,
     isContract: false,
     isDeploy: false
   };
@@ -166,11 +175,124 @@ 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
+            lassName={ styles.uppercase }
+            id='ui.txList.txRow.canceled'
+            defaultMessage='Canceled'
+          />
+        </div>
+      );
+    }
+
+    if (editing) {
+      return (
+        <div className={ styles.pending }>
+          <div className={ styles.uppercase }>
+            <FormattedMessage
+              id='ui.txList.txRow.editing'
+              defaultMessage='Editing'
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (!isCancelOpen && !isEditOpen) {
+      const pendingStatus = this.getCondition();
+
+      if (pendingStatus === 'submitting') {
+        return (
+          <div className={ styles.pending }>
+            <div />
+            <div className={ styles.uppercase }>
+              <FormattedMessage
+                id='ui.txList.txRow.submitting'
+                defaultMessage='Submitting'
+              />
+            </div>
+          </div>
+        );
+      }
+      return (
+        <div className={ styles.pending }>
+          <span>
+            { pendingStatus }
+          </span>
+          <div className={ styles.uppercase }>
+            <FormattedMessage
+              id='ui.txList.txRow.scheduled'
+              defaultMessage='Scheduled'
+            />
+          </div>
+          <a onClick={ this.setEdit } className={ styles.uppercase }>
+            <FormattedMessage
+              id='ui.txList.txRow.edit'
+              defaultMessage='Edit'
+            />
+          </a>
+          <span>{' | '}</span>
+          <a onClick={ this.setCancel } className={ styles.uppercase }>
+            <FormattedMessage
+              id='ui.txList.txRow.cancel'
+              defaultMessage='Cancel'
+            />
+          </a>
+        </div>
+      );
+    }
+
+    let which;
+
+    if (isCancelOpen) {
+      which = (
+        <FormattedMessage
+          id='ui.txList.txRow.verify.cancelEditCancel'
+          defaultMessage='Cancel'
+        />
+      );
+    } else {
+      which = (
+        <FormattedMessage
+          id='ui.txList.txRow.verify.cancelEditEdit'
+          defaultMessage='Edit'
+        />
+      );
+    }
+
+    return (
+      <div className={ styles.pending }>
+        <div />
+        <div className={ styles.uppercase }>
+          <FormattedMessage
+            id='ui.txList.txRow.verify'
+            defaultMessage='Are you sure?'
+          />
+        </div>
+        <a onClick={ (isCancelOpen) ? this.cancelTx : this.editTx }>
+          { which }
+        </a>
+        <span>{' | '}</span>
+        <a onClick={ this.revertEditCancel }>
+          <FormattedMessage
+            id='ui.txList.txRow.verify.nevermind'
+            defaultMessage='Nevermind'
+          />
+        </a>
+      </div>
+    );
+  }
+
   getIsKnownContract (address) {
     const { contractAddresses } = this.props;
 
@@ -194,6 +316,70 @@ 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`;
+        return (
+          <FormattedMessage
+            id='ui.txList.txRow.pendingStatus.time'
+            defaultMessage='{time} left'
+            values={ {
+              time: dateDifference(new Date(), time, { compact: true })
+            } }
+          />
+        );
+      } else {
+        return 'submitting';
+      }
+    } else if (blockNumber) {
+      block = blockNumber.minus(block);
+      // return (block.toNumber() < 0)
+      //   ? block.abs().toFormat(0) + ' blocks left'
+      //   : 'submitting';
+      if (block.toNumber() < 0) {
+        return (
+          <FormattedMessage
+            id='ui.txList.txRow.pendingStatus.blocksLeft'
+            defaultMessage='{blockNumber} blocks left'
+            values={ {
+              blockNumber: block.abs().toFormat(0)
+            } }
+          />
+        );
+      } else {
+        return '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 });
+  }
+
+  revertEditCancel = () => {
+    this.setState({ isCancelOpen: false, isEditOpen: false });
+  }
 }
 
 function mapStateToProps (initState) {