From d9da8a48ffdecd49655eebd75c749115d22078da Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Sat, 10 Dec 2016 16:46:00 +0100
Subject: [PATCH] Add sender balance in transfer modal

---
 js/src/modals/Transfer/Details/details.js     |  4 +-
 js/src/modals/Transfer/store.js               |  3 +-
 js/src/modals/Transfer/transfer.js            |  5 ++-
 js/src/redux/providers/balancesReducer.js     |  2 +-
 .../ui/Form/AddressSelect/addressSelect.css   |  9 ++++-
 js/src/ui/Form/AddressSelect/addressSelect.js | 37 +++++++++++++++++--
 6 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/js/src/modals/Transfer/Details/details.js b/js/src/modals/Transfer/Details/details.js
index 53f04c489..20ac06f85 100644
--- a/js/src/modals/Transfer/Details/details.js
+++ b/js/src/modals/Transfer/Details/details.js
@@ -134,6 +134,7 @@ export default class Details extends Component {
     images: PropTypes.object.isRequired,
     sender: PropTypes.string,
     senderError: PropTypes.string,
+    sendersBalances: PropTypes.object,
     recipient: PropTypes.string,
     recipientError: PropTypes.string,
     tag: PropTypes.string,
@@ -203,7 +204,7 @@ export default class Details extends Component {
   }
 
   renderFromAddress () {
-    const { sender, senderError, senders } = this.props;
+    const { sender, senderError, senders, sendersBalances } = this.props;
 
     if (!senders) {
       return null;
@@ -218,6 +219,7 @@ export default class Details extends Component {
           hint='the sender address'
           value={ sender }
           onChange={ this.onEditSender }
+          balances={ sendersBalances }
         />
       </div>
     );
diff --git a/js/src/modals/Transfer/store.js b/js/src/modals/Transfer/store.js
index 3a8f54f92..e08d7203d 100644
--- a/js/src/modals/Transfer/store.js
+++ b/js/src/modals/Transfer/store.js
@@ -54,6 +54,7 @@ export default class TransferStore {
 
   @observable sender = '';
   @observable senderError = null;
+  @observable sendersBalances = {};
 
   @observable total = '0.0';
   @observable totalError = null;
@@ -66,8 +67,6 @@ export default class TransferStore {
   onClose = null;
 
   senders = null;
-  sendersBalances = null;
-
   isWallet = false;
   wallet = null;
 
diff --git a/js/src/modals/Transfer/transfer.js b/js/src/modals/Transfer/transfer.js
index 0c96a1168..57dc569f2 100644
--- a/js/src/modals/Transfer/transfer.js
+++ b/js/src/modals/Transfer/transfer.js
@@ -155,8 +155,8 @@ class Transfer extends Component {
 
   renderDetailsPage () {
     const { account, balance, images, senders } = this.props;
-    const { valueAll, extras, recipient, recipientError, sender, senderError } = this.store;
-    const { tag, total, totalError, value, valueError } = this.store;
+    const { recipient, recipientError, sender, senderError, sendersBalances } = this.store;
+    const { valueAll, extras, tag, total, totalError, value, valueError } = this.store;
 
     return (
       <Details
@@ -170,6 +170,7 @@ class Transfer extends Component {
         recipientError={ recipientError }
         sender={ sender }
         senderError={ senderError }
+        sendersBalances={ sendersBalances }
         tag={ tag }
         total={ total }
         totalError={ totalError }
diff --git a/js/src/redux/providers/balancesReducer.js b/js/src/redux/providers/balancesReducer.js
index 01923a4f4..e21ae676d 100644
--- a/js/src/redux/providers/balancesReducer.js
+++ b/js/src/redux/providers/balancesReducer.js
@@ -44,7 +44,7 @@ export default handleActions({
         const { token, value } = t;
         const { tag } = token;
 
-        const tokenIndex = nextTokens.findIndex((tok) => tok.token.tag === tag);
+        const tokenIndex = nextTokens.findIndex((tok) => tok.token && tok.token.tag === tag);
 
         if (tokenIndex === -1) {
           nextTokens.push({
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
index 30671db73..01bc8901d 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.css
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -15,7 +15,9 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .account {
-  padding: 4px 0 0 0;
+  padding: 0.25em 0;
+  display: flex;
+  align-items: center;
 }
 
 .name {
@@ -27,6 +29,11 @@
   padding: 0 0 0 1em;
 }
 
+.balance {
+  color: #aaa;
+  padding-left: 1em;
+}
+
 .image {
   display: inline-block;
   height: 32px;
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index d0f331c34..2fbcc80bf 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -21,6 +21,8 @@ import AutoComplete from '../AutoComplete';
 import IdentityIcon from '../../IdentityIcon';
 import IdentityName from '../../IdentityName';
 
+import { fromWei } from '~/api/util/wei';
+
 import styles from './addressSelect.css';
 
 export default class AddressSelect extends Component {
@@ -40,7 +42,8 @@ export default class AddressSelect extends Component {
     value: PropTypes.string,
     tokens: PropTypes.object,
     onChange: PropTypes.func.isRequired,
-    allowInput: PropTypes.bool
+    allowInput: PropTypes.bool,
+    balances: PropTypes.object
   }
 
   state = {
@@ -129,7 +132,34 @@ export default class AddressSelect extends Component {
     };
   }
 
+  renderBalance (address) {
+    const { balances = {} } = this.props;
+    const balance = balances[address];
+
+    if (!balance) {
+      return null;
+    }
+
+    const ethToken = balance.tokens.find((t) => t.token.tag.toLowerCase() === 'eth');
+
+    if (!ethToken) {
+      return null;
+    }
+
+    const value = fromWei(ethToken.value);
+
+    return (
+      <div className={ styles.balance }>
+        { value.toFormat(3) }<small> { 'ETH' }</small>
+      </div>
+    );
+  }
+
   renderMenuItem (address) {
+    const balance = this.props.balances
+      ? this.renderBalance(address)
+      : null;
+
     const item = (
       <div className={ styles.account }>
         <IdentityIcon
@@ -139,6 +169,8 @@ export default class AddressSelect extends Component {
         <IdentityName
           className={ styles.name }
           address={ address } />
+
+        { balance }
       </div>
     );
 
@@ -155,11 +187,10 @@ export default class AddressSelect extends Component {
 
   getSearchText () {
     const entry = this.getEntry();
-    const { value } = this.state;
 
     return entry && entry.name
       ? entry.name.toUpperCase()
-      : value;
+      : this.state.value;
   }
 
   getEntry () {