add topbar

app/components/acclist.js

@@ -0,0 +1,47 @@
+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/topnavbar.js

@@ -0,0 +1,32 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Navbar, NavItem, Nav, MenuItem , NavDropdown} from 'react-bootstrap';
+import AccList from './acclist'; 
+class TopNavbar extends React.Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        
+      }
+      
+    }  
+
+    render(){
+
+      return (
+      <React.Fragment>
+          <Navbar>
+          <Navbar.Header>
+            <Navbar.Brand>
+              <a href="#home">Status.im Demo</a>
+            </Navbar.Brand>
+          </Navbar.Header>
+          <AccList />
+        </Navbar>
+      </React.Fragment>
+      );
+    }
+  }
+
+  export default TopNavbar;

app/dapp.css

@@ -1,8 +1,3 @@
-
-div {
-  margin: 15px;
-}
-
 .logs {
   background-color: black;
   font-size: 14px;

app/dapp.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Tabs, Tab } from 'react-bootstrap';
 
 import EmbarkJS from 'Embark/EmbarkJS';
+import TopNavbar from './components/topnavbar';
 import TestTokenUI from './components/testtoken';
 import ERC20TokenUI from './components/erc20token';
 
@@ -23,7 +24,7 @@ class App extends React.Component {
   }
 
 
-  _renderStatus(title, available){
+  _renderStatus(title, available) {
     let className = available ? 'pull-right status-online' : 'pull-right status-offline';
     return <React.Fragment>
       {title} 
@@ -32,16 +33,18 @@ class App extends React.Component {
   }
 
   render(){
-    return (<div><h3>Status.im Contracts</h3>
-      <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
-      <Tab eventKey={1} title="TestToken">
-          <TestTokenUI />
-      </Tab>
-      <Tab eventKey={2} title="ERC20Token">
-          <ERC20TokenUI />
-      </Tab>
-      </Tabs>
-    </div>);
+    return (
+      <div>
+        <TopNavbar />
+        <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
+          <Tab eventKey={1} title="TestToken">
+              <TestTokenUI />
+          </Tab>
+          <Tab eventKey={2} title="ERC20Token">
+              <ERC20TokenUI />
+          </Tab>
+        </Tabs>
+      </div>);
   }
 }