add reducer state and actions

app/actions/accounts.js

@@ -0,0 +1,18 @@
+import { actions as accountActions } from '../reducers/accounts'
+
+const { receiveAccounts } = accountActions
+export const fetchAndDispatchAccountsWithBalances = (web3, dispatch) => {
+  web3.eth.getAccounts((err, addresses) => {
+    if (addresses) {
+      const defaultAccount = web3.eth.defaultAccount || addresses[0]
+      const accounts = addresses.map(async address => {
+        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/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import configureStore from './store/configureStore';
+import store from './store/configureStore';
 import App from './dapp';
+import init from './store/init'
 import './dapp.css';
 
-const store = configureStore();
+init();
 
 render(
   <Provider store={store}>

app/reducers/accounts.js

@@ -4,16 +4,23 @@ export const types = createTypes([
   'RECEIVE_ACCOUNTS'
 ], 'ACCOUNTS')
 export const actions = {
-  receiveAccounts: actionCreator(types.RECEIVE_ACCOUNTS, 'accounts')
+  receiveAccounts: actionCreator(types.RECEIVE_ACCOUNTS, 'defaultAccount','accounts')
 }
 
-export default function accounts(state = [], action) {
+export default function(state = { loading: true, accounts: [] }, action) {
   switch (action.type) {
   case types.RECEIVE_ACCOUNTS:
-    return { ...state, ...action.accounts }
+    const { defaultAccount, accounts } = action.payload
+    return {
+      ...state,
+      loading: false,
+      defaultAccount,
+      accounts
+    }
   default:
     return state;
   }
 }
 
-export const getAccounts = state => state.accounts;
+export const getAccounts = state => state.accounts.accounts;
+export const accountsIsLoading = state => state.accounts.loading;

app/store/configureStore.js

@@ -2,10 +2,10 @@ import { createStore, applyMiddleware } from 'redux';
 import rootReducer from '../reducers/rootReducer';
 import thunk from 'redux-thunk';
 
-export default function configureStore() {
-  return createStore(
-    rootReducer,
-    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
-    applyMiddleware(thunk)
-  );
-}
+const store = createStore(
+  rootReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+  applyMiddleware(thunk)
+);
+
+export default store;

app/store/init.js

@@ -0,0 +1,12 @@
+import web3 from "Embark/web3"
+import EmbarkJS from 'Embark/EmbarkJS'
+import store from './configureStore'
+import { fetchAndDispatchAccountsWithBalances } from '../actions/accounts'
+
+const dispatch = action => store.dispatch(action)
+
+export default () => {
+  __embarkContext.execWhenReady(async () => {
+    fetchAndDispatchAccountsWithBalances(web3, dispatch)
+  })
+}