From 411d9ba419381f2906c4ccd2c78e9d55788de0c5 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 20 Jun 2018 18:23:48 +0200
Subject: [PATCH 1/3] Add max value in TxForm (fix #38)

---
 .../light-react/src/Send/TxForm/TxForm.js     | 35 ++++++++++++-
 .../TokensList/TokenBalance/TokenBalance.js   | 34 ++-----------
 packages/light-react/src/stores/sendStore.js  |  4 +-
 .../light-react/src/stores/tokensStore.js     |  1 +
 packages/light-react/src/utils/withBalance.js | 50 +++++++++++++++++++
 packages/light-ui/src/TokenCard/TokenCard.js  |  3 +-
 6 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 packages/light-react/src/utils/withBalance.js

diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 932dfb36..41c5e222 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -5,21 +5,40 @@
 
 import React, { Component } from 'react';
 import { FormField, Header } from 'light-ui';
+import { fromWei, toWei } from '@parity/api/lib/util/wei';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
 import TokenBalance from '../../Tokens/TokensList/TokenBalance';
+import withBalance from '../../utils/withBalance';
 
 const MAX_GAS_PRICE = 40; // In Gwei
 const MIN_GAS_PRICE = 3; // Safelow gas price from GasStation, in Gwei
 
 @inject('sendStore')
+@withBalance(({ sendStore: { token } }) => token)
 @observer
 class Send extends Component {
   componentDidMount () {
     this.props.sendStore.estimateGas();
   }
 
+  getMaxAmount = () => {
+    const {
+      balance,
+      sendStore: { estimated, tx }
+    } = this.props;
+
+    // TODO this in sendStore as @computed?
+    return balance && estimated
+      ? +fromWei(
+        toWei(balance).minus(
+          estimated.multipliedBy(toWei(tx.gasPrice, 'shannon'))
+        )
+      )
+      : 0.01;
+  };
+
   handleChangeAmount = ({ target: { value } }) =>
     this.props.sendStore.setTxAmount(value);
 
@@ -35,6 +54,8 @@ class Send extends Component {
     }
   };
 
+  handleMax = () => this.props.sendStore.setTxAmount(this.getMaxAmount());
+
   handleSubmit = e => {
     e.preventDefault();
     const { history, sendStore } = this.props;
@@ -65,6 +86,7 @@ class Send extends Component {
         <div className='window_content'>
           <div className='box -padded'>
             <TokenBalance
+              decimals={6}
               drawers={[
                 <form
                   className='send-form'
@@ -77,13 +99,20 @@ class Send extends Component {
                         <div>
                           <input
                             className='form_field_amount'
+                            max={this.getMaxAmount()}
+                            min={0}
                             onChange={this.handleChangeAmount}
                             required
+                            step={10 ** -token.decimals}
                             type='number'
                             value={tx.amount}
                           />
                           <nav className='form-field_nav'>
-                            <button className='button -utility' type='button'>
+                            <button
+                              className='button -utility'
+                              onClick={this.handleMax}
+                              type='button'
+                            >
                               Max
                             </button>
                           </nav>
@@ -97,9 +126,11 @@ class Send extends Component {
                         <textarea
                           className='-sm'
                           onChange={this.handleChangeTo}
+                          pattern={/^0x[a-fA-F0-9]{40}$/}
+                          placeholder='Recipient address'
                           required
+                          title='Invalid address'
                           type='text'
-                          placeholder='Recipient address'
                           value={tx.to}
                         />
                       }
diff --git a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
index 4d4406c1..8b231f41 100644
--- a/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
+++ b/packages/light-react/src/Tokens/TokensList/TokenBalance/TokenBalance.js
@@ -4,42 +4,14 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
-import abi from '@parity/shared/lib/contracts/abi/eip20';
-import { empty } from 'rxjs';
-import {
-  defaultAccount$,
-  isNullOrLoading,
-  makeContract$,
-  myBalance$
-} from '@parity/light.js';
-import { filter, map, switchMap } from 'rxjs/operators';
-import { fromWei } from '@parity/api/lib/util/wei';
 import { inject } from 'mobx-react';
-import light from 'light-hoc';
 import PropTypes from 'prop-types';
 import { TokenCard } from 'light-ui';
 import { withRouter } from 'react-router-dom';
 
-@light({
-  balance: ({ token: { address, decimals } }) => {
-    if (!address) {
-      return empty();
-    }
-    return address === 'ETH'
-      ? myBalance$().pipe(
-        map(value => (isNullOrLoading(value) ? null : value)),
-        map(value => value && +fromWei(value))
-      )
-      : defaultAccount$().pipe(
-        filter(x => x),
-        switchMap(defaultAccount =>
-          makeContract$(address, abi).balanceOf$(defaultAccount)
-        ),
-        map(value => (isNullOrLoading(value) ? null : value)),
-        map(value => value && +value.div(10 ** decimals))
-      );
-  }
-})
+import withBalance from '../../../utils/withBalance';
+
+@withBalance()
 @inject('sendStore')
 @withRouter
 class TokenBalance extends Component {
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index 5a1ac63c..0e9515fa 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -14,7 +14,7 @@ import { toWei } from '@parity/api/lib/util/wei';
 import parityStore from './parityStore';
 import tokensStore from './tokensStore';
 
-const DEFAULT_GAS = 21000; // Default gas amount to show
+const DEFAULT_GAS = new BigNumber(21000); // Default gas amount to show
 
 class SendStore {
   @observable blockNumber; // Current block number, used to calculate tx confirmations.
@@ -222,7 +222,7 @@ class SendStore {
     // Since estimateGas is not always accurate, we add a 120% factor for buffer.
     const GAS_MULT_FACTOR = 1.2;
 
-    this.estimated = +estimated * GAS_MULT_FACTOR; // Don't store as BigNumber
+    this.estimated = estimated.multipliedBy(GAS_MULT_FACTOR);
   };
 
   @action
diff --git a/packages/light-react/src/stores/tokensStore.js b/packages/light-react/src/stores/tokensStore.js
index 4e3fd242..2c55ecff 100644
--- a/packages/light-react/src/stores/tokensStore.js
+++ b/packages/light-react/src/stores/tokensStore.js
@@ -52,6 +52,7 @@ class TokensStore {
       this.tokens = {
         ETH: {
           address: 'ETH',
+          decimals: 18,
           logo: ethereumIcon,
           name: 'Ethereum',
           symbol: 'ETH'
diff --git a/packages/light-react/src/utils/withBalance.js b/packages/light-react/src/utils/withBalance.js
new file mode 100644
index 00000000..48454dae
--- /dev/null
+++ b/packages/light-react/src/utils/withBalance.js
@@ -0,0 +1,50 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import abi from '@parity/shared/lib/contracts/abi/eip20';
+import { empty } from 'rxjs';
+import {
+  defaultAccount$,
+  isNullOrLoading,
+  makeContract$,
+  myBalance$
+} from '@parity/light.js';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { fromWei } from '@parity/api/lib/util/wei';
+import light from 'light-hoc';
+
+/**
+ * A HOC on light.js to get the current balance.
+ *
+ * @example
+ * @withBalance
+ * class MyComponent extends React.Component{
+ *
+ * }
+ */
+export default (propsSelector = ({ token }) => token) =>
+  light({
+    balance: ownProps => {
+      // Find our token object in the props
+      const token = propsSelector(ownProps);
+
+      if (!token.address) {
+        return empty();
+      }
+      return token.address === 'ETH'
+        ? myBalance$().pipe(
+          map(value => (isNullOrLoading(value) ? null : value)), // Transform loading state to null
+          map(value => value && fromWei(value))
+        )
+        : defaultAccount$().pipe(
+          filter(x => x),
+          switchMap(defaultAccount =>
+            makeContract$(token.address, abi).balanceOf$(defaultAccount)
+          ),
+          map(value => (isNullOrLoading(value) ? null : value)), // Transform loading state to null
+          map(value => value && value.div(10 ** token.decimals))
+        );
+    }
+  });
diff --git a/packages/light-ui/src/TokenCard/TokenCard.js b/packages/light-ui/src/TokenCard/TokenCard.js
index 1af15ee5..e1383899 100644
--- a/packages/light-ui/src/TokenCard/TokenCard.js
+++ b/packages/light-ui/src/TokenCard/TokenCard.js
@@ -30,7 +30,7 @@ const TokenCard = ({
         {token.name ? token.name : <Placeholder height={20} width={100} />}
       </div>
       <div className='token_balance'>
-        {Number.isFinite(balance) ? (
+        {balance ? (
           <span>{balance.toFixed(decimals)} </span>
         ) : showBalance ? (
           <Placeholder height={20} width={50} />
@@ -48,7 +48,6 @@ TokenCard.defaultProps = {
 };
 
 TokenCard.propTypes = {
-  balance: PropTypes.number,
   decimals: PropTypes.number.isRequired,
   token: PropTypes.shape({
     logo: PropTypes.string,
-- 
GitLab


From bb0d5c21107ed14930ba35fd847b485b7d15fe6a Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 20 Jun 2018 18:32:30 +0200
Subject: [PATCH 2/3] Remove default values (fix #47)

---
 packages/light-react/src/Send/TxForm/TxForm.js | 3 ++-
 packages/light-react/src/stores/sendStore.js   | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 41c5e222..0e61aa81 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -102,6 +102,7 @@ class Send extends Component {
                             max={this.getMaxAmount()}
                             min={0}
                             onChange={this.handleChangeAmount}
+                            placeholder='1.00'
                             required
                             step={10 ** -token.decimals}
                             type='number'
@@ -127,7 +128,7 @@ class Send extends Component {
                           className='-sm'
                           onChange={this.handleChangeTo}
                           pattern={/^0x[a-fA-F0-9]{40}$/}
-                          placeholder='Recipient address'
+                          placeholder='0x...'
                           required
                           title='Invalid address'
                           type='text'
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index 0e9515fa..861961ae 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -22,9 +22,9 @@ class SendStore {
   @observable tokenAddress; // 'ETH', or the token contract address
   @observable
   tx = {
-    amount: 0.01, // In Ether or in token
+    amount: null, // In Ether or in token
     gasPrice: 4, // in Gwei
-    to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747'
+    to: ''
   }; // The actual tx we are sending. No need to be observable.
   @observable txStatus; // Status of the tx, see wiki for details.
 
-- 
GitLab


From cf0966ee87bf13e7b16e2e9fc4eabf0ae3f72dbf Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Wed, 20 Jun 2018 18:46:23 +0200
Subject: [PATCH 3/3] Add address validation

---
 packages/light-react/src/Send/TxForm/TxForm.js |  6 +++---
 packages/light-react/src/stores/sendStore.js   | 11 ++++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/light-react/src/Send/TxForm/TxForm.js b/packages/light-react/src/Send/TxForm/TxForm.js
index 0e61aa81..3c4d90b2 100644
--- a/packages/light-react/src/Send/TxForm/TxForm.js
+++ b/packages/light-react/src/Send/TxForm/TxForm.js
@@ -124,13 +124,13 @@ class Send extends Component {
 
                     <FormField
                       input={
-                        <textarea
+                        <input
                           className='-sm'
                           onChange={this.handleChangeTo}
-                          pattern={/^0x[a-fA-F0-9]{40}$/}
+                          pattern='^0x[a-fA-F0-9]{40}$'
                           placeholder='0x...'
                           required
-                          title='Invalid address'
+                          title='Invalid Ethereum address'
                           type='text'
                           value={tx.to}
                         />
diff --git a/packages/light-react/src/stores/sendStore.js b/packages/light-react/src/stores/sendStore.js
index 861961ae..fea2d993 100644
--- a/packages/light-react/src/stores/sendStore.js
+++ b/packages/light-react/src/stores/sendStore.js
@@ -22,7 +22,7 @@ class SendStore {
   @observable tokenAddress; // 'ETH', or the token contract address
   @observable
   tx = {
-    amount: null, // In Ether or in token
+    amount: '', // In Ether or in token
     gasPrice: 4, // in Gwei
     to: ''
   }; // The actual tx we are sending. No need to be observable.
@@ -106,6 +106,7 @@ class SendStore {
     if (
       !this.tx || // There should be a tx
       !isAddress(this.tx.to) || // The address should be okay
+      !this.tx.amount ||
       isNaN(this.tx.amount) ||
       isNaN(this.tx.gasPrice)
     ) {
@@ -161,6 +162,10 @@ class SendStore {
    */
   @computed
   get txForEth () {
+    if (!this.isTxValid) {
+      return {};
+    }
+
     return {
       gasPrice: toWei(this.tx.gasPrice, 'shannon'), // shannon == gwei
       to: this.tx.to,
@@ -174,6 +179,10 @@ class SendStore {
    */
   @computed
   get txForErc20 () {
+    if (!this.isTxValid) {
+      return {};
+    }
+
     return {
       args: [
         this.tx.to,
-- 
GitLab