feat(instant): pass in provider through props, fallback to injected provider

packages/instant/src/components/buy_button.tsx

@@ -1,4 +1,5 @@
 import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { oc } from 'ts-optchain';
@@ -10,7 +11,6 @@ import { getBestAddress } from '../util/address';
 import { balanceUtil } from '../util/balance';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { Button, Text } from './ui';
 
@@ -50,7 +50,8 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         }
 
         this.props.onValidationPending(buyQuote);
-        const takerAddress = await getBestAddress();
+        const web3Wrapper = new Web3Wrapper(assetBuyer.provider);
+        const takerAddress = await getBestAddress(web3Wrapper);
 
         const hasSufficientEth = await balanceUtil.hasSufficientEth(takerAddress, buyQuote, web3Wrapper);
         if (!hasSufficientEth) {

packages/instant/src/components/zero_ex_instant_provider.tsx

@@ -1,8 +1,11 @@
 import { AssetBuyer } from '@0x/asset-buyer';
 import { ObjectMap, SignedOrder } from '@0x/types';
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Provider } from 'react-redux';
+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';
@@ -14,8 +17,7 @@ import { assetUtils } from '../util/asset';
 import { BigNumberInput } from '../util/big_number_input';
 import { errorFlasher } from '../util/error_flasher';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getProvider } from '../util/provider';
-import { web3Wrapper } from '../util/web3_wrapper';
+import { getInjectedProvider } from '../util/injected_provider';
 
 fonts.include();
 
@@ -29,6 +31,7 @@ export interface ZeroExInstantProviderRequiredProps {
 }
 
 export interface ZeroExInstantProviderOptionalProps {
+    provider: Provider;
     defaultAssetBuyAmount: number;
     additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
     networkId: Network;
@@ -39,8 +42,8 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
     private readonly _store: Store;
     private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
         const networkId = props.networkId || state.network;
-        // TODO: Provider needs to not be hard-coded to injected web3.
-        const provider = getProvider();
+        // TODO: Proper wallet connect flow
+        const provider = props.provider || getInjectedProvider();
         const assetBuyerOptions = {
             networkId,
         };
@@ -92,19 +95,24 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
 
     public render(): React.ReactNode {
         return (
-            <Provider store={this._store}>
+            <ReduxProvider store={this._store}>
                 <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
-            </Provider>
+            </ReduxProvider>
         );
     }
 
     private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
         const msToShowError = 30000; // 30 seconds
         const network = this._store.getState().network;
-        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 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);
+            }
         }
     };
 }

packages/instant/src/index.umd.ts

@@ -25,8 +25,12 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
         assert.isNumber('props.zIndex', props.zIndex);
     }
     if (!_.isUndefined(props.affiliateInfo)) {
-        assert.isValidaffiliateInfo('props.affiliateInfo', props.affiliateInfo);
+        assert.isValidAffiliateInfo('props.affiliateInfo', props.affiliateInfo);
     }
+    if (!_.isUndefined(props.provider)) {
+        assert.isWeb3Provider('props.provider', props.provider);
+    }
+    assert.isString('selector', selector);
     const appendToIfExists = document.querySelector(selector);
     assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
     const appendTo = appendToIfExists as Element;

packages/instant/src/util/address.ts

@@ -1,6 +1,6 @@
-import { web3Wrapper } from '../util/web3_wrapper';
+import { Web3Wrapper } from '@0x/web3-wrapper';
 
-export const getBestAddress = async (): Promise<string | undefined> => {
+export const getBestAddress = async (web3Wrapper: Web3Wrapper): Promise<string | undefined> => {
     const addresses = await web3Wrapper.getAvailableAddressesAsync();
     return addresses[0];
 };

packages/instant/src/util/assert.ts

@@ -41,7 +41,7 @@ export const assert = {
             assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl);
         }
     },
-    isValidaffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
+    isValidAffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void {
         assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient);
         assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage);
         assert.assert(

packages/instant/src/util/injected_provider.ts

@@ -0,0 +1,16 @@
+import { Provider } from 'ethereum-types';
+import * as _ from 'lodash';
+
+export const getInjectedProvider = (): Provider => {
+    const injectedProviderIfExists = (window as any).ethereum;
+    if (!_.isUndefined(injectedProviderIfExists)) {
+        // TODO: call enable here when implementing wallet connection flow
+        return injectedProviderIfExists;
+    }
+    const injectedWeb3IfExists = (window as any).web3;
+    if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+        return injectedWeb3IfExists.currentProvider;
+    } else {
+        throw new Error(`No injected web3 found`);
+    }
+};

packages/instant/src/util/provider.ts

@@ -1,12 +0,0 @@
-import { Provider } from 'ethereum-types';
-
-export const getProvider = (): Provider => {
-    const injectedWeb3 = (window as any).web3 || undefined;
-    try {
-        // Use MetaMask/Mist provider
-        return injectedWeb3.currentProvider;
-    } catch (err) {
-        // Throws when user doesn't have MetaMask/Mist running
-        throw new Error(`No injected web3 found: ${err}`);
-    }
-};

packages/instant/src/util/web3_wrapper.ts

@@ -1,5 +0,0 @@
-import { Web3Wrapper } from '@0x/web3-wrapper';
-
-import { getProvider } from './provider';
-
-export const web3Wrapper = new Web3Wrapper(getProvider());