Merge pull request #1232 from 0xProject/feature/instant/account-state-change

[instant] Request account address and balance at mount

3 files changed, 93 insertions, 3 deletions

diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts
index c41c5054b..fc89e3d0e 100644
--- a/packages/instant/src/redux/actions.ts
+++ b/packages/instant/src/redux/actions.ts
@@ -2,7 +2,7 @@ import { BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { ActionsUnion, Asset } from '../types';
+import { ActionsUnion, AddressAndEthBalanceInWei, Asset } from '../types';
 
 export interface PlainAction<T extends string> {
     type: T;
@@ -21,6 +21,11 @@ function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> |
 }
 
 export enum ActionTypes {
+    SET_ACCOUNT_STATE_LOADING = 'SET_ACCOUNT_STATE_LOADING',
+    SET_ACCOUNT_STATE_LOCKED = 'SET_ACCOUNT_STATE_LOCKED',
+    SET_ACCOUNT_STATE_ERROR = 'SET_ACCOUNT_STATE_ERROR',
+    SET_ACCOUNT_STATE_READY = 'SET_ACCOUNT_STATE_READY',
+    UPDATE_ACCOUNT_ETH_BALANCE = 'UPDATE_ACCOUNT_ETH_BALANCE',
     UPDATE_ETH_USD_PRICE = 'UPDATE_ETH_USD_PRICE',
     UPDATE_SELECTED_ASSET_AMOUNT = 'UPDATE_SELECTED_ASSET_AMOUNT',
     SET_BUY_ORDER_STATE_NONE = 'SET_BUY_ORDER_STATE_NONE',
@@ -40,6 +45,12 @@ export enum ActionTypes {
 }
 
 export const actions = {
+    setAccountStateLoading: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOADING),
+    setAccountStateLocked: () => createAction(ActionTypes.SET_ACCOUNT_STATE_LOCKED),
+    setAccountStateError: () => createAction(ActionTypes.SET_ACCOUNT_STATE_ERROR),
+    setAccountStateReady: (address: string) => createAction(ActionTypes.SET_ACCOUNT_STATE_READY, address),
+    updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) =>
+        createAction(ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE, addressAndBalance),
     updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UPDATE_ETH_USD_PRICE, price),
     updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, amount),
     setBuyOrderStateNone: () => createAction(ActionTypes.SET_BUY_ORDER_STATE_NONE),
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 839a90778..a8f632009 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -2,7 +2,7 @@ import { AssetProxyId } from '@0x/types';
 import * as _ from 'lodash';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { ERC20Asset } from '../types';
+import { AccountState, ERC20Asset } from '../types';
 import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 import { coinbaseApi } from '../util/coinbase_api';
@@ -36,6 +36,44 @@ export const asyncData = {
             store.dispatch(actions.setAvailableAssets([]));
         }
     },
+    fetchAccountInfoAndDispatchToStore: async (store: Store) => {
+        const { providerState } = store.getState();
+        const web3Wrapper = providerState.web3Wrapper;
+        if (providerState.account.state !== AccountState.Loading) {
+            store.dispatch(actions.setAccountStateLoading());
+        }
+        let availableAddresses: string[];
+        try {
+            availableAddresses = await web3Wrapper.getAvailableAddressesAsync();
+        } catch (e) {
+            store.dispatch(actions.setAccountStateError());
+            return;
+        }
+        if (!_.isEmpty(availableAddresses)) {
+            const activeAddress = availableAddresses[0];
+            store.dispatch(actions.setAccountStateReady(activeAddress));
+            // tslint:disable-next-line:no-floating-promises
+            asyncData.fetchAccountBalanceAndDispatchToStore(store);
+        } else {
+            store.dispatch(actions.setAccountStateLocked());
+        }
+    },
+    fetchAccountBalanceAndDispatchToStore: async (store: Store) => {
+        const { providerState } = store.getState();
+        const web3Wrapper = providerState.web3Wrapper;
+        const account = providerState.account;
+        if (account.state !== AccountState.Ready) {
+            return;
+        }
+        try {
+            const address = account.address;
+            const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address);
+            store.dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei }));
+        } catch (e) {
+            // leave balance as is
+            return;
+        }
+    },
     fetchCurrentBuyQuoteAndDispatchToStore: async (store: Store) => {
         const { providerState, selectedAsset, selectedAssetAmount, affiliateInfo } = store.getState();
         const assetBuyer = providerState.assetBuyer;
diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts
index 4a939839a..a5a1b6f7d 100644
--- a/packages/instant/src/redux/reducer.ts
+++ b/packages/instant/src/redux/reducer.ts
@@ -4,8 +4,12 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
+import { ERROR_ACCOUNT, LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants';
 import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import {
+    Account,
+    AccountReady,
+    AccountState,
     AffiliateInfo,
     Asset,
     AssetMetaData,
@@ -57,6 +61,32 @@ export const DEFAULT_STATE: DefaultState = {
 export const createReducer = (initialState: State) => {
     const reducer = (state: State = initialState, action: Action): State => {
         switch (action.type) {
+            case ActionTypes.SET_ACCOUNT_STATE_LOADING:
+                return reduceStateWithAccount(state, LOADING_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_LOCKED:
+                return reduceStateWithAccount(state, LOCKED_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_ERROR:
+                return reduceStateWithAccount(state, ERROR_ACCOUNT);
+            case ActionTypes.SET_ACCOUNT_STATE_READY: {
+                const account: AccountReady = {
+                    state: AccountState.Ready,
+                    address: action.data,
+                };
+                return reduceStateWithAccount(state, account);
+            }
+            case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE: {
+                const { address, ethBalanceInWei } = action.data;
+                const currentAccount = state.providerState.account;
+                if (currentAccount.state !== AccountState.Ready || currentAccount.address !== address) {
+                    return state;
+                } else {
+                    const newAccount: AccountReady = {
+                        ...currentAccount,
+                        ethBalanceInWei,
+                    };
+                    return reduceStateWithAccount(state, newAccount);
+                }
+            }
             case ActionTypes.UPDATE_ETH_USD_PRICE:
                 return {
                     ...state,
@@ -80,7 +110,6 @@ export const createReducer = (initialState: State) => {
                 } else {
                     return state;
                 }
-
             case ActionTypes.SET_QUOTE_REQUEST_STATE_PENDING:
                 return {
                     ...state,
@@ -191,6 +220,18 @@ export const createReducer = (initialState: State) => {
     return reducer;
 };
 
+const reduceStateWithAccount = (state: State, account: Account) => {
+    const oldProviderState = state.providerState;
+    const newProviderState: ProviderState = {
+        ...oldProviderState,
+        account,
+    };
+    return {
+        ...state,
+        providerState: newProviderState,
+    };
+};
+
 const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => {
     const selectedAssetIfExists = state.selectedAsset;
     const selectedAssetAmountIfExists = state.selectedAssetAmount;