Rightly check balance in Transfer // Get all accounts balances #3282

js/src/modals/Transfer/store.js

@@ -75,6 +75,9 @@ export default class TransferStore {
   gasLimit = null;
   onClose = null;
 
+  senders = null;
+  sendersBalances = null;
+
   isWallet = false;
   wallet = null;
 
@@ -112,7 +115,7 @@ export default class TransferStore {
   constructor (api, props) {
     this.api = api;
 
-    const { account, balance, gasLimit, senders, onClose, newError } = props;
+    const { account, balance, gasLimit, senders, onClose, newError, sendersBalances } = props;
 
     this.account = account;
     this.balance = balance;
@@ -127,6 +130,8 @@ export default class TransferStore {
     }
 
     if (senders) {
+      this.senders = senders;
+      this.sendersBalances = sendersBalances;
       this.senderError = ERRORS.requireSender;
     }
   }
@@ -393,19 +398,29 @@ export default class TransferStore {
   }
 
   @action recalculate = () => {
-    const { account, balance } = this;
+    const { account } = this;
 
-    if (!account || !balance) {
+    if (!account || !this.balance) {
+      return;
+    }
+
+    const balance = this.senders
+      ? this.sendersBalances[this.sender]
+      : this.balance;
+
+    if (!balance) {
       return;
     }
 
     const { gas, gasPrice, tag, valueAll, isEth } = this;
 
     const gasTotal = new BigNumber(gasPrice || 0).mul(new BigNumber(gas || 0));
-    const balance_ = balance.tokens.find((b) => tag === b.token.tag);
+
     const availableEth = new BigNumber(balance.tokens[0].value);
-    const available = new BigNumber(balance_.value);
-    const format = new BigNumber(balance_.token.format || 1);
+
+    const senderBalance = this.balance.tokens.find((b) => tag === b.token.tag);
+    const available = new BigNumber(senderBalance.value);
+    const format = new BigNumber(senderBalance.token.format || 1);
 
     let { value, valueError } = this;
     let totalEth = gasTotal;

js/src/modals/Transfer/transfer.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { observer } from 'mobx-react';
+import { pick } from 'lodash';
 
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
@@ -45,10 +46,10 @@ class Transfer extends Component {
     gasLimit: PropTypes.object.isRequired,
     images: PropTypes.object.isRequired,
 
-    account: PropTypes.object,
     senders: nullableProptype(PropTypes.object),
+    sendersBalances: nullableProptype(PropTypes.object),
+    account: PropTypes.object,
     balance: PropTypes.object,
-    balances: PropTypes.object,
     wallet: PropTypes.object,
     onClose: PropTypes.func
   }
@@ -296,7 +297,9 @@ function mapStateToProps (initState, initProps) {
 
   return (state) => {
     const { gasLimit } = state.nodeStatus;
-    return { gasLimit, wallet, senders };
+    const sendersBalances = senders ? pick(state.balances.balances, Object.keys(senders)) : null;
+
+    return { gasLimit, wallet, senders, sendersBalances };
   };
 }
 

js/src/redux/providers/balancesActions.js

@@ -113,7 +113,7 @@ export function fetchTokens (_tokenIds) {
 export function fetchBalances (_addresses) {
   return (dispatch, getState) => {
     const { api, personal } = getState();
-    const { visibleAccounts } = personal;
+    const { visibleAccounts, accounts } = personal;
 
     const addresses = uniq(_addresses || visibleAccounts || []);
 
@@ -123,12 +123,14 @@ export function fetchBalances (_addresses) {
 
     const fullFetch = addresses.length === 1;
 
+    const fetchedAddresses = uniq(addresses.concat(Object.keys(accounts)));
+
     return Promise
-      .all(addresses.map((addr) => fetchAccount(addr, api, fullFetch)))
+      .all(fetchedAddresses.map((addr) => fetchAccount(addr, api, fullFetch)))
       .then((accountsBalances) => {
         const balances = {};
 
-        addresses.forEach((addr, idx) => {
+        fetchedAddresses.forEach((addr, idx) => {
           balances[addr] = accountsBalances[idx];
         });
 

js/src/views/Wallet/wallet.js

@@ -21,6 +21,7 @@ import ContentCreate from 'material-ui/svg-icons/content/create';
 import ActionDelete from 'material-ui/svg-icons/action/delete';
 import ContentSend from 'material-ui/svg-icons/content/send';
 
+import nullableProptype from '~/util/nullable-proptype';
 import { EditMeta, Transfer } from '../../modals';
 import { Actionbar, Button, Page, Loading } from '../../ui';
 
@@ -61,11 +62,11 @@ class Wallet extends Component {
 
   static propTypes = {
     setVisibleAccounts: PropTypes.func.isRequired,
+    balance: nullableProptype(PropTypes.object.isRequired),
     images: PropTypes.object.isRequired,
     address: PropTypes.string.isRequired,
     wallets: PropTypes.object.isRequired,
     wallet: PropTypes.object.isRequired,
-    balances: PropTypes.object.isRequired,
     isTest: PropTypes.bool.isRequired
   };
 
@@ -99,10 +100,9 @@ class Wallet extends Component {
   }
 
   render () {
-    const { wallets, balances, address } = this.props;
+    const { wallets, balance, address } = this.props;
 
     const wallet = (wallets || {})[address];
-    const balance = (balances || {})[address];
 
     if (!wallet) {
       return null;
@@ -164,9 +164,7 @@ class Wallet extends Component {
   }
 
   renderActionbar () {
-    const { address, balances } = this.props;
-
-    const balance = balances[address];
+    const { address, balance } = this.props;
     const showTransferButton = !!(balance && balance.tokens);
 
     const buttons = [
@@ -229,15 +227,13 @@ class Wallet extends Component {
       return null;
     }
 
-    const { wallets, balances, images, address } = this.props;
+    const { wallets, balance, images, address } = this.props;
     const wallet = wallets[address];
-    const balance = balances[address];
 
     return (
       <Transfer
         account={ wallet }
         balance={ balance }
-        balances={ balances }
         images={ images }
         onClose={ this.onTransferClose }
       />
@@ -277,12 +273,14 @@ function mapStateToProps (_, initProps) {
     const { wallets } = state.personal;
     const { balances } = state.balances;
     const { images } = state;
+
     const wallet = state.wallet.wallets[address] || {};
+    const balance = balances[address] || null;
 
     return {
       isTest,
       wallets,
-      balances,
+      balance,
       images,
       address,
       wallet