Add Max button to send the whole balance

packages/fether-react/package.json

@@ -58,6 +58,7 @@
     "react-blockies": "^1.3.0",
     "react-dom": "^16.3.2",
     "react-final-form": "^3.6.4",
+    "react-final-form-listeners": "^1.0.1",
     "react-markdown": "^3.3.4",
     "react-resize-detector": "^3.0.1",
     "react-router-dom": "^4.2.2",

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

@@ -9,10 +9,11 @@ import createDecorator from 'final-form-calculate';
 import debounce from 'debounce-promise';
 import { Field, Form } from 'react-final-form';
 import { Form as FetherForm, Header } from 'fether-ui';
+import { fromWei, toWei } from '@parity/api/lib/util/wei';
 import { inject, observer } from 'mobx-react';
 import { isAddress } from '@parity/api/lib/util/address';
 import { Link } from 'react-router-dom';
-import { toWei } from '@parity/api/lib/util/wei';
+import { OnChange } from 'react-final-form-listeners';
 import { withProps } from 'recompose';
 
 import { estimateGas } from '../../utils/estimateGas';
@@ -35,6 +36,9 @@ const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
 @withEthBalance // ETH balance
 @observer
 class Send extends Component {
+  state = {
+    maxSelected: false
+  };
   handleSubmit = values => {
     const { accountAddress, history, sendStore, token } = this.props;
 
@@ -48,7 +52,6 @@ class Send extends Component {
       // ...set field "gas"
       gas: (value, allValues) => {
         const { parityStore, token } = this.props;
-
         if (this.preValidate(allValues) === true) {
           return estimateGas(allValues, token, parityStore.api);
         } else {
@@ -58,6 +61,36 @@ class Send extends Component {
     }
   });
 
+  calculateMax = (gas, gasPrice) => {
+    const { token, balance } = this.props;
+    const gasBn = gas ? new BigNumber(gas) : new BigNumber(21000);
+    const gasPriceBn = new BigNumber(gasPrice);
+    let output;
+
+    if (token.address === 'ETH') {
+      output = fromWei(
+        toWei(balance).minus(gasBn.mul(toWei(gasPriceBn, 'shannon')))
+      );
+      output = output.isNegative() ? new BigNumber(0) : output;
+    } else {
+      output = balance;
+    }
+    return output;
+  };
+
+  recalculateMax = (args, state, { changeValue }) => {
+    changeValue(state, 'amount', value => {
+      return this.calculateMax(
+        state.formState.values.gas,
+        state.formState.values.gasPrice
+      );
+    });
+  };
+
+  toggleMax = () => {
+    this.setState({ maxSelected: !this.state.maxSelected });
+  };
+
   render () {
     const {
       accountAddress,
@@ -88,19 +121,42 @@ class Send extends Component {
                     onSubmit={this.handleSubmit}
                     validate={this.validateForm}
                     decorators={[this.decorator]}
-                    render={({ handleSubmit, valid, validating, values }) => (
+                    mutators={{ recalculateMax: this.recalculateMax }}
+                    render={({
+                      handleSubmit,
+                      valid,
+                      validating,
+                      values,
+                      form: { mutators }
+                    }) => (
                       <form className='send-form' onSubmit={handleSubmit}>
                         <fieldset className='form_fields'>
                           <Field
                             className='form_field_amount'
                             formNoValidate
                             label='Amount'
                             name='amount'
+                            disabled={this.state.maxSelected}
                             placeholder='0.00'
                             render={FetherForm.Field}
                             required
                             type='number' // In ETH or coin
-                          />
+                          >
+                            <button
+                              type='button'
+                              className={
+                                this.state.maxSelected
+                                  ? 'button -tiny active max'
+                                  : 'button -tiny max'
+                              }
+                              onClick={() => {
+                                this.toggleMax();
+                                mutators.recalculateMax();
+                              }}
+                            >
+                              Max
+                            </button>
+                          </Field>
 
                           <Field
                             as='textarea'
@@ -115,18 +171,26 @@ class Send extends Component {
                           <Field
                             centerText={`${values.gasPrice} GWEI`}
                             className='-range'
-                            label='Transaction Fee'
-                            leftText='Slow'
+                            label='Transaction Speed'
+                            leftText='Low'
                             max={MAX_GAS_PRICE}
                             min={MIN_GAS_PRICE}
                             name='gasPrice'
                             render={FetherForm.Slider}
                             required
-                            rightText='Fast'
+                            rightText='High'
                             step={0.5}
                             type='range' // In Gwei
                           />
 
+                          <OnChange name='gasPrice'>
+                            {(value, previous) => {
+                              if (this.state.maxSelected) {
+                                mutators.recalculateMax();
+                              }
+                            }}
+                          </OnChange>
+
                           {values.to === values.from && (
                             <span>
                               <h3>WARNING:</h3>
@@ -170,12 +234,15 @@ class Send extends Component {
     if (amountBn.isNaN()) {
       return { amount: 'Please enter a valid amount' };
     } else if (amountBn.isZero()) {
+      if (this.state.maxSelected) {
+        return { amount: 'ETH balance too low to pay for gas.' };
+      }
       return { amount: 'Please enter a non-zero amount' };
     } else if (amountBn.isNegative()) {
       return { amount: 'Please enter a positive amount' };
-    } else if (token.symbol === 'ETH' && toWei(values.amount).lt(1)) {
+    } else if (token.address === 'ETH' && toWei(values.amount).lt(1)) {
       return { amount: 'Please enter at least 1 Wei' };
-    } else if (token.symbol !== 'ETH' && amountBn.dp() > token.decimals) {
+    } else if (token.address !== 'ETH' && amountBn.dp() > token.decimals) {
       return {
         amount: `Please enter a ${token.name} value of at least ${
           token.decimals
@@ -220,7 +287,9 @@ class Send extends Component {
           .plus(token.address === 'ETH' ? toWei(values.amount) : 0)
           .gt(toWei(ethBalance))
       ) {
-        return { amount: "You don't have enough ETH balance" };
+        return token.address !== 'ETH'
+          ? { amount: 'ETH balance too low to pay for gas' }
+          : { amount: "You don't have enough ETH balance" };
       }
     } catch (err) {
       console.error(err);

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

@@ -15,7 +15,7 @@
     cursor: pointer;
   }
 
-  &:active {
+  &:active,  &.active{
     background-color: darken($blue, 2.5%);
     color: $white;
   }
@@ -41,6 +41,23 @@
     padding: 0 0 0 0.925rem;
     opacity: 0.425;
 
+    &.max {
+      padding: 0.0rem 0.375rem;
+        border-radius: 1rem;
+        opacity: 0.625;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        border: solid 1px $black;
+
+      &.active{
+        background-color: darken($black, 2.5%);
+        color: $white;
+        opacity: 0.75;
+      }
+    }
+
+
     &:hover {
       opacity: 0.625;
       background-color: transparent;

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

@@ -128,6 +128,7 @@ input.form_field_amount[type='number'] {
   font-size: ms(6);
   line-height: ms(6) * 1.1;
   font-weight: 200;
+  width: 100%;
   text-align: center;
   -webkit-appearance: none;
 

packages/fether-ui/src/Form/Form.js

@@ -4,8 +4,8 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import { Field } from './Field';
-import { Slider } from './Slider';
 import { InputFile } from './InputFile';
+import { Slider } from './Slider';
 
 export const Form = {
   Field,

yarn.lock

@@ -13707,6 +13707,11 @@ react-error-overlay@^5.1.0:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.0.tgz#c516995a5652e7bfbed8b497910d5280df74a7e8"
   integrity sha512-akMy/BQT5m1J3iJIHkSb4qycq2wzllWsmmolaaFVnb+LPV9cIJ/nTud40ZsiiT0H3P+/wXIdbjx2fzF61OaeOQ==
 
+react-final-form-listeners@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-final-form-listeners/-/react-final-form-listeners-1.0.1.tgz#1604bdaa4b8a2ee16bf6bafadd8f977e359c9900"
+  integrity sha512-RtxE9VtB9hp0Buro3VgtB4CpdpEYyVueJQy9lZ7gYMVBRzAT3t3+Bvtu2kmxOfwmWvMyL8jts2HPAcTGNJdA2Q==
+
 react-final-form@^3.6.4:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-3.6.4.tgz#1ca37935c2af0bc659a53b293dd84a75d2381548"