From 3477b7b24c214a9fce36fb69b1f249831242340b Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Fri, 1 Jun 2018 16:06:27 -0400 Subject: [PATCH] add dispatch and cleanup to accounts list --- .eslintrc.json | 10 ++- app/actions/accounts.js | 1 - app/components/accountlist.js | 162 ++++++++++++---------------------- app/reducers/accounts.js | 15 +++- package.json | 1 + 5 files changed, 79 insertions(+), 110 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 44cbe88..f8ab647 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,9 @@ { - "extends": "airbnb" -} \ No newline at end of file + "extends": "airbnb", + "plugins": [ + "react" + ], + "rules": { + "react/prop-types": 0 + } +} diff --git a/app/actions/accounts.js b/app/actions/accounts.js index a018c48..4f731c8 100644 --- a/app/actions/accounts.js +++ b/app/actions/accounts.js @@ -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)) }) diff --git a/app/components/accountlist.js b/app/components/accountlist.js index fbd3cc7..adcd873 100644 --- a/app/components/accountlist.js +++ b/app/components/accountlist.js @@ -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( - this.setDefaultAccount(index) }> -
-
- -
-
- {name} -
-
- Ξ {this.state.balances[index] / (10**18)} -
-
- ); - } - ) - } - - return ( - -
-
- +const AccList = ({ + accounts, defaultAccount, changeAccount, isLoading, classNameNavDropdown, +}) => ( + + {!isLoading ? +
+
+ +
+
+ +
+
+ :
Loading...
} + +); - } +AccList.propTypes = { + accounts: arrayOf(shape({ address: string, balance: string })).isRequired, + defaultAccount: string, + changeAccount: func.isRequired, + isLoading: bool.isRequired, + classNameNavDropdown: string +} - export default AccList; \ No newline at end of file +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); diff --git a/app/reducers/accounts.js b/app/reducers/accounts.js index 8c06e66..4e7795d 100644 --- a/app/reducers/accounts.js +++ b/app/reducers/accounts.js @@ -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; diff --git a/package.json b/package.json index 33f8d11..18b3c28 100644 --- a/package.json +++ b/package.json @@ -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",