Remove dep on Web3 in Website. Introduced InjectedWeb3 type.

packages/website/package.json

@@ -58,7 +58,6 @@
         "styled-components": "^3.3.0",
         "thenby": "^1.2.3",
         "truffle-contract": "2.0.1",
-        "web3": "^0.20.0",
         "web3-provider-engine": "14.0.6",
         "whatwg-fetch": "^2.0.3",
         "xml-js": "^1.6.4"

packages/website/ts/blockchain.ts

@@ -46,6 +46,7 @@ import {
     Fill,
     InjectedProviderObservable,
     InjectedProviderUpdate,
+    InjectedWeb3,
     Order as PortalOrder,
     Providers,
     ProviderType,
@@ -59,7 +60,6 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
-import Web3 = require('web3');
 import ProviderEngine = require('web3-provider-engine');
 import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
 import RpcSubprovider = require('web3-provider-engine/subproviders/rpc');
@@ -97,8 +97,18 @@ export class Blockchain {
         }
         return providerNameIfExists;
     }
-    private static _getInjectedWeb3(): any {
-        return (window as any).web3;
+    private static _getInjectedWeb3(): InjectedWeb3 {
+        const injectedWeb3IfExists = (window as any).web3;
+        // Our core assumptions about the injected web3 object is that it has the following
+        // properties and methods.
+        if (
+            !_.isUndefined(injectedWeb3IfExists.version) &&
+            !_.isUndefined(injectedWeb3IfExists.version.getNetwork) &&
+            !_.isUndefined(injectedWeb3IfExists.currentProvider)
+        ) {
+            return undefined;
+        }
+        return injectedWeb3IfExists;
     }
     private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise<number | undefined> {
         // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
@@ -119,7 +129,7 @@ export class Blockchain {
         return networkIdIfExists;
     }
     private static async _getProviderAsync(
-        injectedWeb3: Web3,
+        injectedWeb3: InjectedWeb3,
         networkIdIfExists: number,
         shouldUserLedgerProvider: boolean = false,
     ): Promise<[Provider, LedgerSubprovider | undefined]> {
@@ -834,10 +844,10 @@ export class Blockchain {
         this._dispatcher.updateNetworkId(networkId);
         await this._rehydrateStoreWithContractEventsAsync();
     }
-    private _updateProviderName(injectedWeb3: Web3): void {
-        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
+    private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void {
+        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists);
         const providerName = doesInjectedWeb3Exist
-            ? Blockchain._getNameGivenProvider(injectedWeb3.currentProvider)
+            ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider)
             : constants.PROVIDER_NAME_PUBLIC;
         this._dispatcher.updateInjectedProviderName(providerName);
     }

packages/website/ts/types.ts

@@ -1,5 +1,6 @@
 import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
+import { Provider } from 'ethereum-types';
 import * as React from 'react';
 
 export enum Side {
@@ -573,4 +574,12 @@ export enum AccountState {
     Loading = 'Loading',
     Locked = 'Locked',
 }
+
+// Minimal interface expected for an injected web3 object
+export interface InjectedWeb3 {
+    currentProvider: Provider;
+    version: {
+        getNetwork(cd: (err: Error, networkId: string) => void): void;
+    };
+}
 // tslint:disable:max-file-line-count

packages/website/ts/utils/analytics.ts

@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
 import * as ReactGA from 'react-ga';
+import { InjectedWeb3 } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { utils } from 'ts/utils/utils';
-import * as Web3 from 'web3';
 
 export const analytics = {
     init(): void {
@@ -16,11 +16,12 @@ export const analytics = {
             value,
         });
     },
-    async logProviderAsync(web3IfExists: Web3): Promise<void> {
+    async logProviderAsync(web3IfExists: InjectedWeb3): Promise<void> {
         await utils.onPageLoadAsync();
-        const providerType = !_.isUndefined(web3IfExists)
-            ? utils.getProviderType(web3IfExists.currentProvider)
-            : 'NONE';
+        const providerType =
+            !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider)
+                ? utils.getProviderType(web3IfExists.currentProvider)
+                : 'NONE';
         ReactGA.ga('set', 'dimension1', providerType);
     },
 };