add dispatch and cleanup to accounts list
This commit is contained in:
Barry Gitarts
parent
6bb9181810
commit
3477b7b24c
|
|
@ -1,3 +1,9 @@
|
|||
{
|
||||
"extends": "airbnb"
|
||||
}
|
||||
"extends": "airbnb",
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"rules": {
|
||||
"react/prop-types": 0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ export const fetchAndDispatchAccountsWithBalances = (web3, dispatch) => {
|
|||
const balance = await web3.eth.getBalance(address, 'latest')
|
||||
return { address, balance }
|
||||
})
|
||||
console.log('accounts page', Promise.all(accounts), accounts.length)
|
||||
Promise.all(accounts).then(accounts => {
|
||||
dispatch(receiveAccounts(defaultAccount, accounts))
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,112 +1,66 @@
|
|||
import web3 from "Embark/web3"
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import web3 from 'Embark/web3'
|
||||
import React from 'react';
|
||||
import { Nav, MenuItem , NavDropdown} from 'react-bootstrap';
|
||||
import { connect } from 'react-redux';
|
||||
import { Nav, MenuItem, NavDropdown } from 'react-bootstrap';
|
||||
import Blockies from 'react-blockies';
|
||||
|
||||
import { string, bool, func, arrayOf, shape } from 'prop-types';
|
||||
import { getAccounts, getDefaultAccount, accountsIsLoading, actions as accountActions } from '../reducers/accounts';
|
||||
import './accountlist.css';
|
||||
|
||||
class AccList extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
classNameNavDropdown: props.classNameNavDropdown,
|
||||
defaultAccount: "0x0000000000000000000000000000000000000000",
|
||||
addresses: [],
|
||||
balances: []
|
||||
}
|
||||
__embarkContext.execWhenReady(() => {
|
||||
this.load()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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 addresses available.");
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
setDefaultAccount(index) {
|
||||
var defaultAcc = this.state.addresses[index];
|
||||
if(defaultAcc){
|
||||
web3.eth.defaultAccount = defaultAcc;
|
||||
this.setState({defaultAccount: defaultAcc });
|
||||
} else {
|
||||
console.log("invalid account")
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
var accsTitle;
|
||||
var accsList = [];
|
||||
if (this.state.addresses) {
|
||||
accsTitle = this.state.defaultAccount;
|
||||
this.state.addresses.forEach(
|
||||
(name, index) => {
|
||||
accsList.push(
|
||||
<MenuItem key={index} onClick={(e) => this.setDefaultAccount(index) }>
|
||||
<div className="account">
|
||||
<div className="accountIdenticon">
|
||||
<Blockies seed={name} />
|
||||
</div>
|
||||
<div className="accountHexString">
|
||||
{name}
|
||||
</div>
|
||||
<div className="accountBalance">
|
||||
Ξ {this.state.balances[index] / (10**18)}
|
||||
</div>
|
||||
</div>
|
||||
</MenuItem>);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="accounts">
|
||||
<div className="selectedIdenticon">
|
||||
<Blockies seed={ this.state.defaultAccount } />
|
||||
const AccList = ({
|
||||
accounts, defaultAccount, changeAccount, isLoading, classNameNavDropdown,
|
||||
}) => (
|
||||
<React.Fragment>
|
||||
{!isLoading ?
|
||||
<div className="accounts">
|
||||
<div className="selectedIdenticon">
|
||||
<Blockies seed={defaultAccount} />
|
||||
</div>
|
||||
<div className="accountList">
|
||||
<Nav>
|
||||
<NavDropdown key={1} title={defaultAccount} id="basic-nav-dropdown" className={classNameNavDropdown}>
|
||||
{accounts.map(account => (
|
||||
<MenuItem key={account.address} onClick={() => changeAccount(account.address)}>
|
||||
<div className="account">
|
||||
<div className="accountIdenticon">
|
||||
<Blockies seed={account.address} />
|
||||
</div>
|
||||
<div className="accountList">
|
||||
<Nav>
|
||||
<NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown" className={ this.state.classNameNavDropdown }>
|
||||
{accsList}
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
<div className="accountHexString">
|
||||
{account.address}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
<div className="accountBalance">
|
||||
Ξ {account.balance / (10 ** 18)}
|
||||
</div>
|
||||
</div>
|
||||
</MenuItem>
|
||||
))}
|
||||
</NavDropdown>
|
||||
</Nav>
|
||||
</div>
|
||||
</div>
|
||||
: <div>Loading...</div>}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
}
|
||||
AccList.propTypes = {
|
||||
accounts: arrayOf(shape({ address: string, balance: string })).isRequired,
|
||||
defaultAccount: string,
|
||||
changeAccount: func.isRequired,
|
||||
isLoading: bool.isRequired,
|
||||
classNameNavDropdown: string
|
||||
}
|
||||
|
||||
export default AccList;
|
||||
const mapStateToProps = state => ({
|
||||
accounts: getAccounts(state),
|
||||
defaultAccount: getDefaultAccount(state),
|
||||
isLoading: accountsIsLoading(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
changeAccount(address) {
|
||||
web3.eth.defaultAccount = address;
|
||||
dispatch(accountActions.updateDefaultAccount(address));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AccList);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import { createTypes, actionCreator } from 'redux-action-creator'
|
||||
|
||||
export const types = createTypes([
|
||||
'RECEIVE_ACCOUNTS'
|
||||
'RECEIVE_ACCOUNTS',
|
||||
'UPDATE_DEFAULT_ACCOUNT'
|
||||
], 'ACCOUNTS')
|
||||
export const actions = {
|
||||
receiveAccounts: actionCreator(types.RECEIVE_ACCOUNTS, 'defaultAccount','accounts')
|
||||
receiveAccounts: actionCreator(types.RECEIVE_ACCOUNTS, 'defaultAccount','accounts'),
|
||||
updateDefaultAccount: actionCreator(types.UPDATE_DEFAULT_ACCOUNT, 'defaultAccount')
|
||||
}
|
||||
|
||||
export default function(state = { loading: true, accounts: [] }, action) {
|
||||
switch (action.type) {
|
||||
case types.RECEIVE_ACCOUNTS:
|
||||
case types.RECEIVE_ACCOUNTS: {
|
||||
const { defaultAccount, accounts } = action.payload
|
||||
return {
|
||||
...state,
|
||||
|
|
@ -17,10 +19,17 @@ export default function(state = { loading: true, accounts: [] }, action) {
|
|||
defaultAccount,
|
||||
accounts
|
||||
}
|
||||
}
|
||||
case types.UPDATE_DEFAULT_ACCOUNT: {
|
||||
const { defaultAccount } = action.payload
|
||||
return { ...state, defaultAccount }
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export const getAccountState = state => state.acounts;
|
||||
export const getAccounts = state => state.accounts.accounts;
|
||||
export const getDefaultAccount = state => state.accounts.defaultAccount;
|
||||
export const accountsIsLoading = state => state.accounts.loading;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/status-im/contracts#readme",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.1",
|
||||
"react": "^16.3.2",
|
||||
"react-blockies": "^1.3.0",
|
||||
"react-bootstrap": "^0.32.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue