Allow editing of gasPrice & gas in Signer (#3777)

* Rework gas display (maintainable) * Move GasPriceSelector to ui * Allow opening of gas component (WIP) * Merge * Consistency * Adjust for Signer display * Set maximum height based on screen size * Gas editor displays in-place * Cleanups * Merge * Style fixes * Fixup stash mishap (again) * Add store test * Allow edited values to refrect on the display * Fix properties * Adjust styling to show different rows * git mv * git mv * Style fixes * Style updates * Pass gas & gasPrice with confirmation * Fix build (case) * Style fixes * Basic GasPriceEditor smoketest * manual move 1 * manual move 2 * manual move 1 * manual move 2 * NODE_ENV=test ace fix * UI smoketests * Style * Format options via formatter * Initial version * Re-add even/odd class * re-add gasLimit to embedded passing * style * Updated for passing gas & price to store * Allow gas/price overrides when none available * Fix slider value, pass as number
2016-12-11 17:43:51 +01:00
parent 885d6eaa4d
commit 929b6ee0f7
59 changed files with 1423 additions and 856 deletions
--- a/js/src/views/Signer/components/SignRequest/signRequest.js
+++ b/js/src/views/Signer/components/SignRequest/signRequest.js
@@ -0,0 +1,131 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { observer } from 'mobx-react';
+
+import Account from '../Account';
+import TransactionPendingForm from '../TransactionPendingForm';
+import TxHashLink from '../TxHashLink';
+
+import styles from './signRequest.css';
+
+@observer
+export default class SignRequest extends Component {
+  static propTypes = {
+    id: PropTypes.object.isRequired,
+    address: PropTypes.string.isRequired,
+    hash: PropTypes.string.isRequired,
+    isFinished: PropTypes.bool.isRequired,
+    isSending: PropTypes.bool,
+    onConfirm: PropTypes.func,
+    onReject: PropTypes.func,
+    status: PropTypes.string,
+    className: PropTypes.string,
+    isTest: PropTypes.bool.isRequired,
+    store: PropTypes.object.isRequired
+  };
+
+  componentWillMount () {
+    const { address, store } = this.props;
+
+    store.fetchBalance(address);
+  }
+
+  render () {
+    const { className } = this.props;
+
+    return (
+      <div className={ `${styles.container} ${className}` }>
+        { this.renderDetails() }
+        { this.renderActions() }
+      </div>
+    );
+  }
+
+  renderDetails () {
+    const { address, hash, isTest, store } = this.props;
+    const balance = store.balances[address];
+
+    if (!balance) {
+      return <div />;
+    }
+
+    return (
+      <div className={ styles.signDetails }>
+        <div className={ styles.address }>
+          <Account
+            address={ address }
+            balance={ balance }
+            isTest={ isTest } />
+        </div>
+        <div className={ styles.info } title={ hash }>
+          <p>Dapp is requesting to sign arbitrary transaction using this account.</p>
+          <p><strong>Confirm the transaction only if you trust the app.</strong></p>
+        </div>
+      </div>
+    );
+  }
+
+  renderActions () {
+    const { address, isFinished, status } = this.props;
+
+    if (isFinished) {
+      if (status === 'confirmed') {
+        const { hash, isTest } = this.props;
+
+        return (
+          <div className={ styles.actions }>
+            <span className={ styles.isConfirmed }>Confirmed</span>
+            <div>
+              Transaction hash:
+              <TxHashLink
+                isTest={ isTest }
+                txHash={ hash }
+                className={ styles.txHash } />
+            </div>
+          </div>
+        );
+      }
+
+      return (
+        <div className={ styles.actions }>
+          <span className={ styles.isRejected }>Rejected</span>
+        </div>
+      );
+    }
+
+    return (
+      <TransactionPendingForm
+        address={ address }
+        isSending={ this.props.isSending }
+        onConfirm={ this.onConfirm }
+        onReject={ this.onReject }
+        className={ styles.actions }
+        />
+    );
+  }
+
+  onConfirm = password => {
+    const { id } = this.props;
+
+    this.props.onConfirm({ id, password });
+  }
+
+  onReject = () => {
+    this.props.onReject(this.props.id);
+  }
+}