add placement of dropdown, balances, addresses are accounts
This commit is contained in:
parent
70b7d13ffc
commit
204892e3ce
|
@ -1,7 +1,3 @@
|
||||||
.accounts {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.identicon {
|
.identicon {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
@ -10,19 +6,29 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 8px 0;
|
margin: 7px 0;
|
||||||
}
|
|
||||||
|
|
||||||
.accountIdenticon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.accountHexString {
|
.accountHexString {
|
||||||
|
margin-left: 7px;
|
||||||
|
width: 267px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accountBalance {
|
||||||
|
margin-left: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
width:77px;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accountList {
|
.accountList {
|
||||||
float: left;
|
float: left;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account {
|
.account {
|
||||||
|
|
|
@ -11,30 +11,50 @@ class AccList extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
accounts: [],
|
classNameNavDropdown: props.classNameNavDropdown,
|
||||||
defaultAccount: "0x0000000000000000000000000000000000000000"
|
defaultAccount: "0x0000000000000000000000000000000000000000",
|
||||||
|
addresses: [],
|
||||||
|
balances: []
|
||||||
}
|
}
|
||||||
__embarkContext.execWhenReady(() => {
|
__embarkContext.execWhenReady(() => {
|
||||||
this.loadAccs()
|
this.load()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
loadAccs() {
|
load() {
|
||||||
let result = web3.eth.getAccounts().then((accs) => {
|
web3.eth.getAccounts((err, addresses) => {
|
||||||
if (accs) {
|
if (addresses) {
|
||||||
var defaultAcc = web3.eth.defaultAccount;
|
var defaultAccount = web3.eth.defaultAccount;
|
||||||
this.setState({defaultAccount: defaultAcc ? accs[0] : defaultAcc });
|
if(!defaultAccount){
|
||||||
this.setState({accounts: accs});
|
web3.eth.defaultAccount = addresses[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var balances = [];
|
||||||
|
balances.length == addresses.length;
|
||||||
|
addresses.forEach((address, index) => {
|
||||||
|
web3.eth.getBalance(address, 'latest', (err, balance) => {
|
||||||
|
balances[index] = balance;
|
||||||
|
if(index+1 == balances.length){
|
||||||
|
this.setState({
|
||||||
|
balances: balances
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.setState({
|
||||||
|
defaultAccount: defaultAccount,
|
||||||
|
addresses: addresses
|
||||||
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
console.log("No accounts available.");
|
console.log("No addresses available.");
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
setDefaultAccount(index) {
|
setDefaultAccount(index) {
|
||||||
|
var defaultAcc = this.state.addresses[index];
|
||||||
var defaultAcc = this.state.accounts[index];
|
|
||||||
if(defaultAcc){
|
if(defaultAcc){
|
||||||
web3.eth.defaultAccount = defaultAcc;
|
web3.eth.defaultAccount = defaultAcc;
|
||||||
this.setState({defaultAccount: defaultAcc });
|
this.setState({defaultAccount: defaultAcc });
|
||||||
|
@ -47,9 +67,9 @@ class AccList extends React.Component {
|
||||||
|
|
||||||
var accsTitle;
|
var accsTitle;
|
||||||
var accsList = [];
|
var accsList = [];
|
||||||
if (this.state.accounts) {
|
if (this.state.addresses) {
|
||||||
accsTitle = this.state.defaultAccount;
|
accsTitle = this.state.defaultAccount;
|
||||||
this.state.accounts.forEach(
|
this.state.addresses.forEach(
|
||||||
(name, index) => {
|
(name, index) => {
|
||||||
accsList.push(
|
accsList.push(
|
||||||
<MenuItem key={index} onClick={(e) => this.setDefaultAccount(index) }>
|
<MenuItem key={index} onClick={(e) => this.setDefaultAccount(index) }>
|
||||||
|
@ -57,9 +77,12 @@ class AccList extends React.Component {
|
||||||
<div className="accountIdenticon">
|
<div className="accountIdenticon">
|
||||||
<Blockies seed={name} />
|
<Blockies seed={name} />
|
||||||
</div>
|
</div>
|
||||||
<p className="accountHexString">
|
<div className="accountHexString">
|
||||||
{name}
|
{name}
|
||||||
</p>
|
</div>
|
||||||
|
<div className="accountBalance">
|
||||||
|
Ξ {this.state.balances[index] / (10**18)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</MenuItem>);
|
</MenuItem>);
|
||||||
}
|
}
|
||||||
|
@ -74,7 +97,7 @@ class AccList extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
<div className="accountList">
|
<div className="accountList">
|
||||||
<Nav>
|
<Nav>
|
||||||
<NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown">
|
<NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown" className={ this.state.classNameNavDropdown }>
|
||||||
{accsList}
|
{accsList}
|
||||||
</NavDropdown>
|
</NavDropdown>
|
||||||
</Nav>
|
</Nav>
|
||||||
|
|
|
@ -23,7 +23,7 @@ class TopNavbar extends React.Component {
|
||||||
<a href="#home">Status.im Demo</a>
|
<a href="#home">Status.im Demo</a>
|
||||||
</Navbar.Brand>
|
</Navbar.Brand>
|
||||||
</Navbar.Header>
|
</Navbar.Header>
|
||||||
<AccountList />
|
<AccountList classNameNavDropdown="pull-right" />
|
||||||
</Navbar>
|
</Navbar>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
12
app/dapp.css
12
app/dapp.css
|
@ -1,12 +1,18 @@
|
||||||
.identicon {
|
.navbar {
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.accounts {
|
.accounts {
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: 10px;
|
margin-right: 17px;
|
||||||
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.identicon {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.logs {
|
.logs {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
Loading…
Reference in New Issue