diff --git a/app/components/accountlist.css b/app/components/accountlist.css index 9431632..35b9ddd 100644 --- a/app/components/accountlist.css +++ b/app/components/accountlist.css @@ -1,7 +1,3 @@ -.accounts { - -} - .identicon { border-radius: 50%; } @@ -10,19 +6,29 @@ border-radius: 50%; overflow: hidden; float: left; - margin: 8px 0; -} - -.accountIdenticon { - margin-right: 5px; + margin: 7px 0; } .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 { float: left; + margin-left: 10px; } .account { diff --git a/app/components/accountlist.js b/app/components/accountlist.js index 17d2c7e..fbd3cc7 100644 --- a/app/components/accountlist.js +++ b/app/components/accountlist.js @@ -11,30 +11,50 @@ class AccList extends React.Component { constructor(props) { super(props); this.state = { - accounts: [], - defaultAccount: "0x0000000000000000000000000000000000000000" + classNameNavDropdown: props.classNameNavDropdown, + defaultAccount: "0x0000000000000000000000000000000000000000", + addresses: [], + balances: [] } __embarkContext.execWhenReady(() => { - this.loadAccs() + this.load() }); } - loadAccs() { - let result = web3.eth.getAccounts().then((accs) => { - if (accs) { - var defaultAcc = web3.eth.defaultAccount; - this.setState({defaultAccount: defaultAcc ? accs[0] : defaultAcc }); - this.setState({accounts: accs}); + load() { + web3.eth.getAccounts((err, addresses) => { + if (addresses) { + var defaultAccount = web3.eth.defaultAccount; + if(!defaultAccount){ + 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 { - console.log("No accounts available."); + console.log("No addresses available."); } }) } setDefaultAccount(index) { - - var defaultAcc = this.state.accounts[index]; + var defaultAcc = this.state.addresses[index]; if(defaultAcc){ web3.eth.defaultAccount = defaultAcc; this.setState({defaultAccount: defaultAcc }); @@ -47,9 +67,9 @@ class AccList extends React.Component { var accsTitle; var accsList = []; - if (this.state.accounts) { + if (this.state.addresses) { accsTitle = this.state.defaultAccount; - this.state.accounts.forEach( + this.state.addresses.forEach( (name, index) => { accsList.push( this.setDefaultAccount(index) }> @@ -57,9 +77,12 @@ class AccList extends React.Component {
-

+

{name} -

+
+
+ Ξ {this.state.balances[index] / (10**18)} +
); } @@ -74,7 +97,7 @@ class AccList extends React.Component {
diff --git a/app/components/topnavbar.js b/app/components/topnavbar.js index 0969980..d8bc689 100644 --- a/app/components/topnavbar.js +++ b/app/components/topnavbar.js @@ -23,7 +23,7 @@ class TopNavbar extends React.Component { Status.im Demo - + ); diff --git a/app/dapp.css b/app/dapp.css index 8adfaef..0fd02eb 100644 --- a/app/dapp.css +++ b/app/dapp.css @@ -1,12 +1,18 @@ -.identicon { - border-radius: 50%; +.navbar { + } .accounts { float: right; - margin-left: 10px; + margin-right: 17px; + font-family: monospace; } +.identicon { + border-radius: 50%; +} + + .logs { background-color: black; font-size: 14px;