fix: token balance - pending tx

src/js/actions/SendFormActions.js

@@ -174,7 +174,7 @@ export const calculate = (prevProps: Props, props: Props) => {
     
     if (state.setMax) {
 
-        const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency);
+        const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency, isToken);
 
         if (isToken) {
             const token: ?Token = findToken(tokens, account.address, state.currency, account.deviceState);
@@ -390,7 +390,7 @@ export const validation = (props: Props): void => {
         } else {
 
             let decimalRegExp: RegExp;
-            const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency);
+            const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, state.currency, state.currency !== state.networkSymbol);
 
             if (state.currency !== state.networkSymbol) {
                 const token = findToken(tokens, account.address, state.currency, account.deviceState);
@@ -404,7 +404,7 @@ export const validation = (props: Props): void => {
                     }
 
                     if (!state.amount.match(decimalRegExp)) {
-                        errors.amount = `Maximum ${ token.decimals} decimals allowed`;
+                        errors.amount = `Maximum ${ token.decimals } decimals allowed`;
                     } else if (new BigNumber(state.total).greaterThan(account.balance)) {
                         errors.amount = `Not enough ${ state.networkSymbol } to cover transaction fee`;
                     } else if (new BigNumber(state.amount).greaterThan( new BigNumber(token.balance).minus(pendingAmount) )) {
@@ -853,7 +853,6 @@ export const onSend = (): AsyncAction => {
             txAddress = token.address;
         }
 
-        const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, currentState.currency);
         const pendingNonce: number = stateUtils.getPendingNonce(pending);
         const nonce = pendingNonce > 0 && pendingNonce >= account.nonce ? pendingNonce : account.nonce;
 

src/js/components/wallet/account/send/PendingTransactions.js

@@ -79,7 +79,7 @@ const PendingTransactions = (props: Props) => {
                 <div className="name">
                     <a href={ `${props.network.explorer.tx}${tx.id}`} target="_blank" rel="noreferrer noopener">{ name }</a>
                 </div>
-                <div className="amount">{ tx.total } { symbol }</div>
+                <div className="amount">{ isSmartContractTx ? tx.amount : tx.total } { symbol }</div>
             </div>
         )
     });

src/js/components/wallet/account/summary/Summary.js

@@ -99,7 +99,10 @@ const Summary = (props: Props) => {
 
             </div>
 
-            <SummaryTokens tokens={ tokens } removeToken={ props.removeToken } />
+            <SummaryTokens 
+                pending={ pending }
+                tokens={ tokens } 
+                removeToken={ props.removeToken } />
 
         </div>
     )

src/js/components/wallet/account/summary/SummaryTokens.js

@@ -4,10 +4,13 @@
 import React from 'react';
 import ColorHash from 'color-hash';
 import ScaleText from 'react-scale-text';
+import * as stateUtils from '~/js/reducers/utils';
+import BigNumber from 'bignumber.js';
 
 import type { Props as BaseProps } from './index';
 
 type Props = {
+    pending: $PropertyType<$ElementType<BaseProps, 'selectedAccount'>, 'pending'>,
     tokens: $ElementType<BaseProps, 'tokens'>,
     removeToken: $ElementType<BaseProps, 'removeToken'>
 }
@@ -25,6 +28,9 @@ const SummaryTokens = (props: Props) => {
             background: bgColor.hex(token.name),
             borderColor: bgColor.hex(token.name)
         }
+
+        const pendingAmount: BigNumber = stateUtils.getPendingAmount(props.pending, token.symbol, true);
+        const balance: string = new BigNumber(token.balance).minus(pendingAmount).toString(10);
         return (
             <div key={ index } className="token">
                 <div className="icon" style={ iconColor }>
@@ -33,7 +39,7 @@ const SummaryTokens = (props: Props) => {
                     </div>
                 </div>
                 <div className="name">{ token.name }</div>
-                <div className="balance">{ token.balance } { token.symbol }</div>
+                <div className="balance">{ balance } { token.symbol }</div>
                 <button className="transparent" onClick={ event => props.removeToken(token) }></button>
             </div>
         )

src/js/reducers/utils/index.js

@@ -98,10 +98,10 @@ export const getPendingNonce = (pending: Array<PendingTx>): number => {
     }, 0);
 }
 
-export const getPendingAmount = (pending: Array<PendingTx>, currency: string): BigNumber => {
+export const getPendingAmount = (pending: Array<PendingTx>, currency: string, token: boolean = false): BigNumber => {
     return pending.reduce((value: BigNumber, tx: PendingTx) => {
         if (tx.currency === currency && !tx.rejected) {
-            return new BigNumber(value).plus(tx.total);
+            return new BigNumber(value).plus(token ? tx.amount : tx.total);
         }
         return value;
     }, new BigNumber('0'));