fix initial loading

apps/simple-wallet/client/src/components/App.tsx

@@ -12,7 +12,6 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Avatar from '@material-ui/core/Avatar';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
-import { newWalletSelectIcon } from "../actions"
 import { compressedAddress } from '../utils';
 import { Props } from '../containers/App';
 
@@ -54,7 +53,7 @@ const App = (props: Props) => {
   let body = loading;
 
   //FIXME: check if loading
-  if (props.web3Initialized) {
+  if (!props.loading) {
     body = <>
       <TopPanel />
       <TransactionsList />

apps/simple-wallet/client/src/containers/App.ts

@@ -4,7 +4,7 @@ import { RootState } from '../reducers';
 import { Dispatch } from 'redux';
 
 export interface StateProps {
-  web3Initialized: boolean
+  loading: boolean
   web3Error: string | undefined
   walletAddress: string | undefined
   networkID: number | undefined
@@ -16,13 +16,17 @@ export interface DispatchProps {
 
 export type Props = StateProps & DispatchProps;
 
-const mapStateToProps = (state: RootState): StateProps => ({
-  web3Initialized: state.web3.initialized,
+const mapStateToProps = (state: RootState): StateProps => {
+  const ready = state.web3.initialized && state.wallet.ready;
+
+  return {
+    loading: !ready,
     web3Error: state.web3.error,
     networkID: state.web3.networkID,
     walletAddress: state.wallet.walletAddress,
     walletError: state.wallet.error,
-});
+  }
+};
 
 const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
 });

apps/simple-wallet/client/src/reducers/wallet.ts

@@ -10,6 +10,7 @@ import {
 } from '../actions/wallet';
 
 export interface WalletState {
+  ready: boolean
   loading: boolean
   keycardAddress: string | undefined
   walletAddress: string | undefined
@@ -20,6 +21,7 @@ export interface WalletState {
 }
 
 const initialState = {
+  ready: false,
   loading: false,
   keycardAddress: undefined,
   walletAddress: undefined,
@@ -56,14 +58,23 @@ export const walletReducer = (state: WalletState = initialState, action: WalletA
     case WALLET_FACTORY_WALLET_ADDRESS_LOADED: {
       return {
         ...state,
+        loading: false,
         walletFound: true,
         walletAddress: action.walletAddress,
       }
     }
 
+    case WALLET_LOADING_BALANCE: {
+      return {
+        ...state,
+        loading: true,
+      }
+    }
+
     case WALLET_BALANCE_LOADED: {
       return {
         ...state,
+        ready: true,
         loading: false,
         balance: action.balance,
       }