add dispatch and cleanup to accounts list

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-    "extends": "airbnb"
+  "extends": "airbnb",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/prop-types": 0
+  }
 }

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))
       })

app/components/accountlist.js

@@ -1,112 +1,66 @@
-import web3 from "Embark/web3"
+import web3 from 'Embark/web3'
-import EmbarkJS from 'Embark/EmbarkJS';
 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 {
+const AccList = ({
-
+  accounts, defaultAccount, changeAccount, isLoading, classNameNavDropdown,
-    constructor(props) {
+}) => (
-        super(props);
+  <React.Fragment>
-        this.state = {
+    {!isLoading ?
-            classNameNavDropdown: props.classNameNavDropdown,
+      <div className="accounts">
-            defaultAccount: "0x0000000000000000000000000000000000000000",
+        <div className="selectedIdenticon">
-            addresses: [],
+          <Blockies seed={defaultAccount} />
-            balances: []
+        </div>
-        }
+        <div className="accountList">
-        __embarkContext.execWhenReady(() => {
+          <Nav>
-            this.load()   
+            <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">
-    load() {
+                      <Blockies seed={account.address} />
-        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 } />
                     </div>
-                    <div className="accountList">
+                    <div className="accountHexString">
-                        <Nav>
+                      {account.address}
-                            <NavDropdown key={1} title={accsTitle} id="basic-nav-dropdown" className={ this.state.classNameNavDropdown }>
-                                {accsList}
-                            </NavDropdown>
-                        </Nav>
                     </div>
-                </div>
+                    <div className="accountBalance">
-            </React.Fragment>
+                      Ξ {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);

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;

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",