Add block & timestamp conditions to Signer (#4411)

* WIP

* WIP (with lint)

* Update ui/RadioButtons

* transaction.condition

* Date & Time selection in-place

* Swap to condition-only

* Fix tests, align naming

* Pick error properly from validation

* Update tests

* condition: time sent withough ms

* Format numbers as base-10

* override popup styles (zIndex)

* Pass condition to signer

* Update expectation (failing test typo)

* Adjust min/max height for expanded bar

* Fix address display

* Fix name display

* Number inputs for gas/gasPrice/blockNumber

* Default blockNumber to 1 (align with min setting)

* Update tests with min value

* Add Block Number

* Fix failing tests (after blockNumber intro)

js/src/views/ParityBar/parityBar.css

@@ -15,6 +15,9 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$overlayZ: 10000;
+$modalZ: 10001;
+
 .account {
   display: flex;
   flex: 1;
@@ -61,7 +64,7 @@
   bottom: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.5);
-  z-index: 10000;
+  z-index: $overlayZ;
   user-select: none;
 }
 
@@ -70,7 +73,7 @@
   position: fixed;
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
-  z-index: 10001;
+  z-index: $modalZ;
   user-select: none;
 }
 
@@ -109,7 +112,8 @@
   border-radius: 4px 4px 0 0;
   display: flex;
   flex-direction: column;
-  max-height: 50vh;
+  min-height: 30vh;
+  max-height: 80vh;
   max-width: calc(100vw - 1em);
 
   .content {

js/src/views/Signer/components/TransactionMainDetails/transactionMainDetails.js

@@ -73,14 +73,14 @@ export default class TransactionMainDetails extends Component {
                 : transaction
             }
           />
-          { this.renderEditGas() }
+          { this.renderEditTx() }
         </div>
         { children }
       </div>
     );
   }
 
-  renderEditGas () {
+  renderEditTx () {
     const { gasStore } = this.props;
 
     if (!gasStore) {
@@ -91,7 +91,7 @@ export default class TransactionMainDetails extends Component {
       <div className={ styles.editButtonRow }>
         <Button
           icon={ <MapsLocalGasStation /> }
-          label='Edit gas/gasPrice'
+          label='Edit conditions/gas/gasPrice'
           onClick={ this.toggleGasEditor }
         />
       </div>

js/src/views/Signer/components/TransactionPending/transactionPending.js

@@ -45,6 +45,7 @@ export default class TransactionPending extends Component {
     onReject: PropTypes.func.isRequired,
     store: PropTypes.object.isRequired,
     transaction: PropTypes.shape({
+      condition: PropTypes.object,
       data: PropTypes.string,
       from: PropTypes.string.isRequired,
       gas: PropTypes.object.isRequired,
@@ -59,6 +60,7 @@ export default class TransactionPending extends Component {
   };
 
   gasStore = new GasPriceEditor.Store(this.context.api, {
+    condition: this.props.transaction.condition,
     gas: this.props.transaction.gas.toFixed(),
     gasLimit: this.props.gasLimit,
     gasPrice: this.props.transaction.gasPrice.toFixed()
@@ -80,7 +82,7 @@ export default class TransactionPending extends Component {
 
   render () {
     return this.gasStore.isEditing
-      ? this.renderGasEditor()
+      ? this.renderTxEditor()
       : this.renderTransaction();
   }
 
@@ -115,7 +117,7 @@ export default class TransactionPending extends Component {
     );
   }
 
-  renderGasEditor () {
+  renderTxEditor () {
     const { className } = this.props;
 
     return (
@@ -133,15 +135,21 @@ export default class TransactionPending extends Component {
   onConfirm = (data) => {
     const { id, transaction } = this.props;
     const { password, wallet } = data;
-    const { gas, gasPrice } = this.gasStore.overrideTransaction(transaction);
+    const { condition, gas, gasPrice } = this.gasStore.overrideTransaction(transaction);
 
-    this.props.onConfirm({
+    const options = {
       gas,
       gasPrice,
       id,
       password,
       wallet
-    });
+    };
+
+    if (condition && (condition.block || condition.time)) {
+      options.condition = condition;
+    }
+
+    this.props.onConfirm(options);
   }
 
   onReject = () => {