add placement of dropdown, balances, addresses are accounts

app/components/accountlist.css

@@ -1,7 +1,3 @@
-.accounts {
-    
-}
-
 .identicon {
     border-radius: 50%;
 }
@@ -10,19 +6,29 @@
     border-radius: 50%;
     overflow: hidden;
     float: left;
-    margin: 8px 0;
-}
-
-.accountIdenticon {
-    margin-right: 5px;
+    margin: 7px 0;
 }
 
 .accountHexString {
+    margin-left: 7px;
+    width: 267px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:inline-block;
+}
 
+.accountBalance {
+    margin-left: 10px;
+    overflow: hidden;
+    display: inline-block;
+    width:77px;
+    text-align: center;
+    text-overflow: ellipsis;
 }
 
 .accountList {
     float: left;
+    margin-left: 10px;
 }
 
 .account {

app/components/accountlist.js

@@ -11,30 +11,50 @@ class AccList extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            accounts: [],
-            defaultAccount: "0x0000000000000000000000000000000000000000"
+            classNameNavDropdown: props.classNameNavDropdown,
+            defaultAccount: "0x0000000000000000000000000000000000000000",
+            addresses: [],
+            balances: []
         }
         __embarkContext.execWhenReady(() => {
-            this.loadAccs()   
+            this.load()   
         });
     }  
     
 
-    loadAccs() {
-        let result = web3.eth.getAccounts().then((accs) => { 
-            if (accs) {
-                var defaultAcc = web3.eth.defaultAccount;
-                this.setState({defaultAccount:  defaultAcc ? accs[0] : defaultAcc });
-                this.setState({accounts: accs});
+    load() {
+        web3.eth.getAccounts((err, addresses) => { 
+            if (addresses) {
+                var defaultAccount = web3.eth.defaultAccount;
+                if(!defaultAccount){
+                    web3.eth.defaultAccount = addresses[0];
+                }
+                
+                var balances = [];
+                balances.length == addresses.length;
+                addresses.forEach((address, index) => {
+                    web3.eth.getBalance(address, 'latest', (err, balance) => {
+                        balances[index] = balance;
+                        if(index+1 == balances.length){
+                            this.setState({
+                                balances: balances
+                            });
+                        }
+                    })
+                })
+                this.setState({
+                    defaultAccount: defaultAccount,
+                    addresses: addresses
+                });
+                
             } else {
-                console.log("No accounts available.");
+                console.log("No addresses available.");
             }
             
         })
     }
     setDefaultAccount(index) {
-        
-        var defaultAcc = this.state.accounts[index];
+        var defaultAcc = this.state.addresses[index];
         if(defaultAcc){
             web3.eth.defaultAccount = defaultAcc;
             this.setState({defaultAccount: defaultAcc });
@@ -47,9 +67,9 @@ class AccList extends React.Component {
         
         var accsTitle;
         var accsList = [];
-        if (this.state.accounts) {
+        if (this.state.addresses) {
             accsTitle = this.state.defaultAccount;
-            this.state.accounts.forEach(
+            this.state.addresses.forEach(
                 (name, index) => {
                     accsList.push(
                     <MenuItem key={index} onClick={(e) => this.setDefaultAccount(index) }>
@@ -57,9 +77,12 @@ class AccList extends React.Component {
                             <div className="accountIdenticon">
                                 <Blockies seed={name} />
                             </div>
-                            <p className="accountHexString">
+                            <div className="accountHexString">
                                 {name}
-                            </p>
+                            </div>
+                            <div className="accountBalance">
+                                 Ξ {this.state.balances[index] / (10**18)}
+                            </div>
                         </div>
                     </MenuItem>);
                 } 
@@ -74,7 +97,7 @@ class AccList extends React.Component {
                     </div>
                     <div className="accountList">
                         <Nav>
-                            <NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown">
+                            <NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown" className={ this.state.classNameNavDropdown }>
                                 {accsList}
                             </NavDropdown>
                         </Nav>

app/components/topnavbar.js

@@ -23,7 +23,7 @@ class TopNavbar extends React.Component {
               <a href="#home">Status.im Demo</a>
             </Navbar.Brand>
           </Navbar.Header>
-          <AccountList />
+          <AccountList classNameNavDropdown="pull-right" />
         </Navbar>
       </React.Fragment>
       );

app/dapp.css

@@ -1,12 +1,18 @@
-.identicon {
-  border-radius: 50%;
+.navbar {
+  
 }
 
 .accounts {
   float: right;
-  margin-left: 10px;
+  margin-right: 17px;
+  font-family: monospace;
 }
 
+.identicon {
+  border-radius: 50%;
+}
+
+
 .logs {
   background-color: black;
   font-size: 14px;