add topbar
This commit is contained in:
parent
4b43dba374
commit
082c1d19b7
|
@ -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;
|
|
@ -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;
|
|
@ -1,8 +1,3 @@
|
|||
|
||||
div {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.logs {
|
||||
background-color: black;
|
||||
font-size: 14px;
|
||||
|
|
25
app/dapp.js
25
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>);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue