feat - Fixes #293. Shows tx fee estimate and total tx amount. See issues in commit details

packages/fether-react/src/Onboarding/Onboarding.js

@@ -16,7 +16,7 @@ import termsAndConditions from './termsAndConditions.md';
  */
 const reactMarkdownOptions = {
   link: props => (
-    <a href={props.href} target='_blank'>
+    <a href={props.href} target='_blank' rel='noopener noreferrer'>
       {props.children}
     </a>
   )

packages/fether-react/src/Send/Sent/Sent.js

@@ -154,6 +154,7 @@ class Sent extends Component {
             token.address
           )}
           target='_blank'
+          rel='noopener noreferrer'
         >
           <button className='button -tiny'>See it on BlockScout</button>
         </a>

packages/fether-react/src/Send/TxForm/TxDetails/TxDetails.js

@@ -0,0 +1,70 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React, { Component } from 'react';
+import BigNumber from 'bignumber.js';
+import { fromWei, toWei } from '@parity/api/lib/util/wei';
+
+class TxDetails extends Component {
+  renderCalculation = () => {
+    const { estimatedTxFee, values } = this.props;
+
+    const gasPriceBn = new BigNumber(values.gasPrice.toString());
+    const gasLimitBn = estimatedTxFee
+      .div(gasPriceBn)
+      .div(10 ** 9)
+      .toFixed(0)
+      .toString();
+
+    return `Estimate amount of gas: ${gasLimitBn}`;
+  };
+
+  renderDetails = () => {
+    return `${this.renderCalculation()}
+${this.renderFee()}
+${this.renderTotalAmount()}`;
+  };
+
+  renderFee = () => {
+    const { estimatedTxFee } = this.props;
+
+    return `Fee: ${fromWei(estimatedTxFee, 'ether')
+      .toFixed(9)
+      .toString()} ETH (estimate * gas price)`;
+  };
+
+  renderTotalAmount = () => {
+    const { estimatedTxFee, token, values } = this.props;
+
+    return `Total Amount: ${fromWei(
+      estimatedTxFee.plus(
+        token.address === 'ETH' ? toWei(values.amount.toString()) : 0
+      ),
+      'ether'
+    ).toString()} ETH`;
+  };
+
+  render () {
+    const { showDetails } = this.props;
+
+    return (
+      <div>
+        <div className='form_field'>
+          <div hidden={!showDetails}>
+            <label htmlFor='txDetails'>Transaction Details (Estimate):</label>
+            <textarea
+              className='-sm-details'
+              id='txDetails'
+              readOnly
+              value={this.renderDetails()}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TxDetails;

packages/fether-react/src/Send/TxForm/TxDetails/index.js

@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import TxDetails from './TxDetails';
+
+export default TxDetails;

packages/fether-react/src/Send/TxForm/TxForm.js

@@ -22,6 +22,7 @@ import TokenBalance from '../../Tokens/TokensList/TokenBalance';
 import withAccount from '../../utils/withAccount.js';
 import withBalance, { withEthBalance } from '../../utils/withBalance';
 import withTokens from '../../utils/withTokens';
+import TxDetails from './TxDetails';
 
 const MAX_GAS_PRICE = 40; // In Gwei
 const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
@@ -37,26 +38,32 @@ const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
 @observer
 class Send extends Component {
   state = {
-    maxSelected: false
-  };
-  handleSubmit = values => {
-    const { accountAddress, history, sendStore, token } = this.props;
-
-    sendStore.setTx(values);
-    history.push(`/send/${token.address}/from/${accountAddress}/signer`);
+    maxSelected: false,
+    showDetails: false
   };
 
   decorator = createDecorator({
     field: /to|amount/, // when the value of these fields change...
     updates: {
       // ...set field "gas"
-      gas: (value, allValues) => {
+      gas: async (value, allValues) => {
         const { parityStore, token } = this.props;
+        let newGasEstimate = null;
+
         if (this.preValidate(allValues) === true) {
-          return estimateGas(allValues, token, parityStore.api);
-        } else {
-          return null;
+          try {
+            newGasEstimate = await estimateGas(
+              allValues,
+              token,
+              parityStore.api
+            );
+          } catch (error) {
+            console.error(error);
+            throw new Error('Unable to estimate gas');
+          }
         }
+
+        return newGasEstimate;
       }
     }
   });
@@ -78,6 +85,28 @@ class Send extends Component {
     return output;
   };
 
+  estimatedTxFee = values => {
+    if (
+      !values.amount ||
+      !values.gas ||
+      !values.gasPrice ||
+      isNaN(values.amount) ||
+      isNaN(values.gas) ||
+      isNaN(values.gasPrice)
+    ) {
+      return null;
+    }
+
+    return values.gas.multipliedBy(toWei(values.gasPrice, 'shannon'));
+  };
+
+  handleSubmit = values => {
+    const { accountAddress, history, sendStore, token } = this.props;
+
+    sendStore.setTx(values);
+    history.push(`/send/${token.address}/from/${accountAddress}/signer`);
+  };
+
   recalculateMax = (args, state, { changeValue }) => {
     changeValue(state, 'amount', value => {
       return this.calculateMax(
@@ -91,13 +120,37 @@ class Send extends Component {
     this.setState({ maxSelected: !this.state.maxSelected });
   };
 
+  showDetailsAnchor = () => {
+    return (
+      <span className='toggle-details'>
+        <a onClick={this.toggleDetails}>&darr; Details</a>
+      </span>
+    );
+  };
+
+  showHideAnchor = () => {
+    return (
+      <span className='toggle-details'>
+        <a onClick={this.toggleDetails}>&uarr; Hide</a>
+      </span>
+    );
+  };
+
+  toggleDetails = () => {
+    const { showDetails } = this.state;
+
+    this.setState({ showDetails: !showDetails });
+  };
+
   render () {
     const {
       accountAddress,
       sendStore: { tx },
       token
     } = this.props;
 
+    const { showDetails } = this.state;
+
     return (
       <div>
         <Header
@@ -132,7 +185,17 @@ class Send extends Component {
                       <form className='send-form' onSubmit={handleSubmit}>
                         <fieldset className='form_fields'>
                           <Field
+                            as='textarea'
                             autoFocus
+                            className='-sm'
+                            label='To'
+                            name='to'
+                            placeholder='0x...'
+                            required
+                            render={FetherForm.Field}
+                          />
+
+                          <Field
                             className='form_field_amount'
                             formNoValidate
                             label='Amount'
@@ -159,16 +222,6 @@ class Send extends Component {
                             </button>
                           </Field>
 
-                          <Field
-                            as='textarea'
-                            className='-sm'
-                            label='To'
-                            name='to'
-                            placeholder='0x...'
-                            required
-                            render={FetherForm.Field}
-                          />
-
                           <Field
                             centerText={`${values.gasPrice} GWEI`}
                             className='-range'
@@ -184,6 +237,19 @@ class Send extends Component {
                             type='range' // In Gwei
                           />
 
+                          {/* eslint-disable */}
+                          {valid &&
+                          !validating &&
+                          this.estimatedTxFee(values) ? (
+                            <TxDetails
+                              estimatedTxFee={this.estimatedTxFee(values)}
+                              showDetails={showDetails}
+                              token={token}
+                              values={values}
+                            />
+                          ) : null}
+                          {/* eslint-enable */}
+
                           <OnChange name='gasPrice'>
                             {(value, previous) => {
                               if (this.state.maxSelected) {
@@ -202,6 +268,17 @@ class Send extends Component {
                           )}
                         </fieldset>
                         <nav className='form-nav'>
+                          {/* eslint-disable */}
+                          {valid &&
+                          !validating &&
+                          this.estimatedTxFee(values) ? (
+                            <div className="form-details-buttons">
+                              {showDetails
+                                ? this.showHideAnchor()
+                                : this.showDetailsAnchor()}
+                            </div>
+                          ) : null}
+                          {/* eslint-enable */}
                           <button
                             disabled={!valid || validating}
                             className='button'
@@ -226,6 +303,10 @@ class Send extends Component {
   preValidate = values => {
     const { balance, token } = this.props;
 
+    if (!values) {
+      return;
+    }
+
     if (!values.amount) {
       return { amount: 'Please enter a valid amount' };
     }
@@ -268,29 +349,33 @@ class Send extends Component {
    * the tx.
    */
   validateForm = debounce(values => {
+    if (!values) {
+      return;
+    }
+
     try {
       const { ethBalance, token } = this.props;
 
+      if (!ethBalance) {
+        throw new Error('No "ethBalance"');
+      }
+
       const preValidation = this.preValidate(values);
+
       // preValidate return an error if a field isn't valid
       if (preValidation !== true) {
         return preValidation;
       }
 
       // If the gas hasn't been calculated yet, then we don't show any errors,
       // just wait a bit more
-      if (!values.gas) {
+      if (!this.estimatedTxFee(values)) {
         return;
       }
 
-      if (!ethBalance || isNaN(values.gas)) {
-        throw new Error('No "ethBalance" or "gas" value.');
-      }
-
       // Verify that `gas + (eth amount if sending eth) <= ethBalance`
       if (
-        values.gas
-          .multipliedBy(toWei(values.gasPrice, 'shannon'))
+        this.estimatedTxFee(values)
           .plus(token.address === 'ETH' ? toWei(values.amount) : 0)
           .gt(toWei(ethBalance))
       ) {

packages/fether-react/src/assets/sass/components/_form-nav.scss

@@ -1,4 +1,5 @@
 .form-nav {
+  position: relative;
   padding-top: 0.5rem;
   display: flex;
   justify-content: center;
@@ -10,4 +11,15 @@
   &.-space-around {
     justify-content: space-around;
   }
+
+  .form-details-buttons {
+    position: absolute;
+    left: 1rem;
+
+    .toggle-details > a {
+      color: $dark-grey;
+      font-size: 0.8rem;
+      font-weight: 400;
+    }
+  }
 }

packages/fether-react/src/assets/sass/modules/_variables.scss

@@ -9,6 +9,7 @@ $chrome: #F5F6F6;
 $faint: #ddd;
 $black: #222;
 $grey: #888;
+$dark-grey: #444;
 
 $purple: #330044;
 $blue: #160DF6;

packages/fether-react/src/assets/sass/shared/_basics.scss

@@ -9,6 +9,7 @@ body {
   font-weight: 400;
   font-size: ms(0);
   line-height: ms(0) * 1.3;
+  overflow-y: hidden;
 }
 
 .hidden {

packages/fether-react/src/assets/sass/shared/_form.scss

@@ -106,6 +106,20 @@
     font-family: $mono;
     font-size: ms(-1);
 
+    &.-xs-inline {
+      display: inline-flex;
+      height: 2.5rem;
+    }
+
+    &.-sm-details {
+      color: $dark-grey;
+      font-size: 0.6rem;
+      width: 100%;
+      height: 4.75rem;
+      opacity: 1;
+      resize: none;
+    }
+
     &.-sm {
       height: 3.5rem;
     }