From 082c1d19b72ed17411611827e9f82b1a36e1ef91 Mon Sep 17 00:00:00 2001
From: Ricardo Guilherme Schmidt <3esmit@gmail.com>
Date: Thu, 17 May 2018 16:53:23 -0300
Subject: [PATCH] add topbar

---
 app/components/acclist.js   | 47 +++++++++++++++++++++++++++++++++++++
 app/components/topnavbar.js | 32 +++++++++++++++++++++++++
 app/dapp.css                |  5 ----
 app/dapp.js                 | 25 +++++++++++---------
 4 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 app/components/acclist.js
 create mode 100644 app/components/topnavbar.js

diff --git a/app/components/acclist.js b/app/components/acclist.js
new file mode 100644
index 0000000..12fbe2b
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/app/components/topnavbar.js b/app/components/topnavbar.js
new file mode 100644
index 0000000..f24e228
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/app/dapp.css b/app/dapp.css
index 49f1976..b291767 100644
--- a/app/dapp.css
+++ b/app/dapp.css
@@ -1,8 +1,3 @@
-
-div {
-  margin: 15px;
-}
-
 .logs {
   background-color: black;
   font-size: 14px;
diff --git a/app/dapp.js b/app/dapp.js
index 6df03e3..a0744b3 100644
--- a/app/dapp.js
+++ b/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>);
   }
 }