add account list

app/components/acclist.js

@@ -1,47 +0,0 @@
-import EmbarkJS from 'Embark/EmbarkJS';
-import React from 'react';
-import { Nav, MenuItem , NavDropdown} from 'react-bootstrap';
-import web3 from "Embark/web3"
-
-class AccList extends React.Component {
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        accounts: []
-      }
-      __embarkContext.execWhenReady(() => {
-           this.loadAccs()   
-      });
-    }  
-
-    loadAccs() {
-        let result = web3.eth.getAccounts().then((accounts) => {
-            console.log(accounts);
-            this.setState({accounts: accounts});
-        })
-        console.log(result)
-    }
-    render(){
-    var len = this.state.accounts.length;
-      var fulllist = this.state.accounts.map(
-        function(name, index){
-            return <MenuItem eventKey={2.+index/10}>{name}</MenuItem>;
-        } 
-      )
-      return (
-        <React.Fragment>
-            <Nav>
-                <NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
-                    {fulllist}
-                    <MenuItem divider />
-                    <MenuItem eventKey={2.+len/10} onClick={(e) => this.loadAccs()} >Update</MenuItem>
-                </NavDropdown>
-            </Nav>
-        </React.Fragment>
-      )
-    }
-
-  }
-
-  export default AccList;

app/components/accountlist.css

@@ -0,0 +1,31 @@
+.accounts {
+    
+}
+
+.identicon {
+    border-radius: 50%;
+}
+
+.selectedIdenticon {
+    border-radius: 50%;
+    overflow: hidden;
+    float: left;
+    margin: 8px 0;
+}
+
+.accountIdenticon {
+    margin-right: 5px;
+}
+
+.accountHexString {
+    
+}
+
+.accountList {
+    float: left;
+}
+
+.account {
+    display: flex;
+    align-items: center;
+}

app/components/accountlist.js

@@ -0,0 +1,89 @@
+import web3 from "Embark/web3"
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Nav, MenuItem , NavDropdown} from 'react-bootstrap';
+import Blockies from 'react-blockies';
+
+import './accountlist.css';
+
+class AccList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            accounts: [],
+            defaultAccount: "0x0000000000000000000000000000000000000000"
+        }
+        __embarkContext.execWhenReady(() => {
+            this.loadAccs()   
+        });
+    }  
+    
+
+    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});
+            } else {
+                console.log("No accounts available.");
+            }
+            
+        })
+    }
+    setDefaultAccount(index) {
+        
+        var defaultAcc = this.state.accounts[index];
+        if(defaultAcc){
+            web3.eth.defaultAccount = defaultAcc;
+            this.setState({defaultAccount: defaultAcc });
+        } else { 
+            console.log("invalid account")
+        }
+    }
+
+    render() {
+        
+        var accsTitle;
+        var accsList = [];
+        if (this.state.accounts) {
+            accsTitle = this.state.defaultAccount;
+            this.state.accounts.forEach(
+                (name, index) => {
+                    accsList.push(
+                    <MenuItem key={index} onClick={(e) => this.setDefaultAccount(index) }>
+                        <div className="account">
+                            <div className="accountIdenticon">
+                                <Blockies seed={name} />
+                            </div>
+                            <p className="accountHexString">
+                                {name}
+                            </p>
+                        </div>
+                    </MenuItem>);
+                } 
+            )
+        }
+        
+        return (
+            <React.Fragment>
+                <div className="accounts"> 
+                    <div className="selectedIdenticon">
+                        <Blockies seed={ this.state.defaultAccount } />
+                    </div>
+                    <div className="accountList">
+                        <Nav>
+                            <NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown">
+                                {accsList}
+                            </NavDropdown>
+                        </Nav>
+                    </div>
+                </div>
+            </React.Fragment>
+        )
+    }
+
+  }
+
+  export default AccList;

app/components/topnavbar.js

@@ -1,7 +1,8 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import React from 'react';
 import { Navbar, NavItem, Nav, MenuItem , NavDropdown} from 'react-bootstrap';
-import AccList from './acclist'; 
+import AccountList from './accountList'; 
+
 class TopNavbar extends React.Component {
 
     constructor(props) {
@@ -22,7 +23,7 @@ class TopNavbar extends React.Component {
               <a href="#home">Status.im Demo</a>
             </Navbar.Brand>
           </Navbar.Header>
-          <AccList />
+          <AccountList />
         </Navbar>
       </React.Fragment>
       );

app/dapp.css

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

package.json

@@ -16,8 +16,9 @@
     "url": "https://github.com/status-im/contracts/issues"
   },
   "homepage": "https://github.com/status-im/contracts#readme",
-  "dependencies": { 
+  "dependencies": {
     "react": "^16.3.2",
+    "react-blockies": "^1.3.0",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.3.2"
   }