add topbar

This commit is contained in:
Ricardo Guilherme Schmidt 2018-05-17 16:53:23 -03:00
parent 4b43dba374
commit 082c1d19b7
4 changed files with 93 additions and 16 deletions

47
app/components/acclist.js Normal file
View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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>);
}
}