feat(instant): fallback to an empty wallet provider when none is injected

3 files changed, 52 insertions, 44 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index e6d50de96..515cd18e9 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -17,7 +17,7 @@ import { Text } from './ui/text';
 
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
     onValidationPending: (buyQuote: BuyQuote) => void;
     onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void;
@@ -34,7 +34,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer);
+        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
         return (
             <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
                 <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px">
@@ -46,11 +46,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
         const { buyQuote, assetBuyer, affiliateInfo } = this.props;
-        if (_.isUndefined(buyQuote) || _.isUndefined(assetBuyer)) {
+        if (_.isUndefined(buyQuote)) {
             return;
         }
 
         this.props.onValidationPending(buyQuote);
+
+        // TODO(bmillman): move address and balance fetching to the async state
         const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
         const takerAddress = await getBestAddress(web3Wrapper);
 
diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx
index 2759ba341..3d0ede7b1 100644
--- a/packages/instant/src/components/buy_order_state_buttons.tsx
+++ b/packages/instant/src/components/buy_order_state_buttons.tsx
@@ -15,7 +15,7 @@ import { Text } from './ui/text';
 export interface BuyOrderStateButtonProps {
     buyQuote?: BuyQuote;
     buyOrderProcessingState: OrderProcessState;
-    assetBuyer?: AssetBuyer;
+    assetBuyer: AssetBuyer;
     affiliateInfo?: AffiliateInfo;
     onViewTransaction: () => void;
     onValidationPending: (buyQuote: BuyQuote) => void;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 0b9408329..ed0fabdf3 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,23 +1,22 @@
-import { AssetBuyer } from '@0x/asset-buyer';
-import { ObjectMap, SignedOrder } from '@0x/types';
+import { ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
-import { oc } from 'ts-optchain';
 
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
-import { INITIAL_STATE, State } from '../redux/reducer';
+import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AffiliateInfo, AssetMetaData, Network } from '../types';
+import { AffiliateInfo, AssetMetaData, Network, OrderSource, ProviderState, ProviderType } from '../types';
 import { assetUtils } from '../util/asset';
+import { assetBuyerFactory } from '../util/asset_buyer_factory';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getInjectedProvider } from '../util/injected_provider';
+import { providerFactory } from '../util/provider_factory';
 
 fonts.include();
 
@@ -25,7 +24,7 @@ export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
     Partial<ZeroExInstantProviderOptionalProps>;
 
 export interface ZeroExInstantProviderRequiredProps {
-    orderSource: string | SignedOrder[];
+    orderSource: OrderSource;
 }
 
 export interface ZeroExInstantProviderOptionalProps {
@@ -41,30 +40,43 @@ export interface ZeroExInstantProviderOptionalProps {
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
     // TODO(fragosti): Write tests for this beast once we inject a provider.
-    private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
-        const networkId = props.networkId || state.network;
-        // TODO: Proper wallet connect flow
-        const provider = props.provider || getInjectedProvider();
-        const assetBuyerOptions = {
-            networkId,
-        };
-        let assetBuyer;
-        if (_.isString(props.orderSource)) {
-            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
-                provider,
-                props.orderSource,
-                assetBuyerOptions,
-            );
+    private static _mergeDefaultStateWithProps(
+        props: ZeroExInstantProviderProps,
+        defaultState: DefaultState = DEFAULT_STATE,
+    ): State {
+        // use the networkId passed in with the props, otherwise default to that of the default state (1, mainnet)
+        const networkId = props.networkId || defaultState.network;
+        // construct the ProviderState
+        let provider: Provider;
+        let providerType: ProviderType;
+        if (!_.isUndefined(props.provider)) {
+            provider = props.provider;
+            providerType = ProviderType.Props;
         } else {
-            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.orderSource, assetBuyerOptions);
+            const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
+            if (!_.isUndefined(injectedProviderIfExists)) {
+                provider = injectedProviderIfExists;
+                providerType = ProviderType.Injected;
+            } else {
+                provider = providerFactory.getFallbackNoSigningProvider(networkId);
+                providerType = ProviderType.FallbackEmptyWallet;
+            }
         }
+        const providerState: ProviderState = {
+            provider,
+            type: providerType,
+            web3Wrapper: new Web3Wrapper(provider),
+            assetBuyer: assetBuyerFactory.getAssetBuyer(provider, props.orderSource, networkId),
+        };
+        // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
-            ...state.assetMetaDataMap,
+            ...defaultState.assetMetaDataMap,
         };
+        // construct the final state
         const storeStateFromProps: State = {
-            ...state,
-            assetBuyer,
+            ...defaultState,
+            providerState,
             network: networkId,
             selectedAsset: _.isUndefined(props.defaultSelectedAssetData)
                 ? undefined
@@ -74,7 +86,7 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
                       networkId,
                   ),
             selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
-                ? state.selectedAssetAmount
+                ? undefined
                 : new BigNumber(props.defaultAssetBuyAmount),
             availableAssets: _.isUndefined(props.availableAssetDatas)
                 ? undefined
@@ -86,10 +98,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     }
     constructor(props: ZeroExInstantProviderProps) {
         super(props);
-        const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        const initialAppState = ZeroExInstantProvider._mergeDefaultStateWithProps(this.props);
         this._store = store.create(initialAppState);
     }
-
     public componentDidMount(): void {
         const state = this._store.getState();
         // tslint:disable-next-line:no-floating-promises
@@ -108,7 +119,6 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         // tslint:disable-next-line:no-floating-promises
         this._flashErrorIfWrongNetwork();
     }
-
     public render(): React.ReactNode {
         return (
             <ReduxProvider store={this._store}>
@@ -116,19 +126,15 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             </ReduxProvider>
         );
     }
-
     private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
-        const network = this._store.getState().network;
-        const assetBuyerIfExists = this._store.getState().assetBuyer;
-        const providerIfExists = oc(assetBuyerIfExists).provider();
-        if (!_.isUndefined(providerIfExists)) {
-            const web3Wrapper = new Web3Wrapper(providerIfExists);
-            const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-            if (network !== networkOfProvider) {
-                const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-                errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
-            }
+        const state = this._store.getState();
+        const network = state.network;
+        const web3Wrapper = state.providerState.web3Wrapper;
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
         }
     };
 }