Merge pull request #817 from 0xProject/remove-web3

Remove Web3 Dependencies (exept for in web3-wrapper)

5 files changed, 42 insertions, 15 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index 1bfc385b5..a5768a60b 100644
--- a/packages/website/package.json
+++ b/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"
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index b59306974..cc2afa28a 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -12,10 +12,10 @@ import {
 import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils';
 import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
-    InjectedWeb3Subprovider,
     ledgerEthereumBrowserClientFactoryAsync,
     LedgerSubprovider,
     RedundantSubprovider,
+    SignerSubprovider,
     Subprovider,
 } from '@0xproject/subproviders';
 import {
@@ -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,19 @@ 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) ||
+            _.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 +130,7 @@ export class Blockchain {
         return networkIdIfExists;
     }
     private static async _getProviderAsync(
-        injectedWeb3: Web3,
+        injectedWeb3: InjectedWeb3,
         networkIdIfExists: number,
         shouldUserLedgerProvider: boolean = false,
     ): Promise<[Provider, LedgerSubprovider | undefined]> {
@@ -153,7 +164,7 @@ export class Blockchain {
             // We catch all requests involving a users account and send it to the injectedWeb3
             // instance. All other requests go to the public hosted node.
             const provider = new ProviderEngine();
-            provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3.currentProvider));
+            provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider));
             provider.addProvider(new FilterSubprovider());
             const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => {
                 return new RpcSubprovider({
@@ -834,10 +845,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);
     }
diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts
index 6d4230e53..567f6a37e 100644
--- a/packages/website/ts/containers/subproviders_documentation.ts
+++ b/packages/website/ts/containers/subproviders_documentation.ts
@@ -25,6 +25,7 @@ const docSections = {
     emptyWalletSubprovider: 'emptyWalletSubprovider',
     fakeGasEstimateSubprovider: 'fakeGasEstimateSubprovider',
     injectedWeb3Subprovider: 'injectedWeb3Subprovider',
+    signerSubprovider: 'signerSubprovider',
     redundantRPCSubprovider: 'redundantRPCSubprovider',
     ganacheSubprovider: 'ganacheSubprovider',
     nonceTrackerSubprovider: 'nonceTrackerSubprovider',
@@ -50,6 +51,7 @@ const docsInfoConfig: DocsInfoConfig = {
         ['emptyWallet-subprovider']: [docSections.emptyWalletSubprovider],
         ['fakeGasEstimate-subprovider']: [docSections.fakeGasEstimateSubprovider],
         ['injectedWeb3-subprovider']: [docSections.injectedWeb3Subprovider],
+        ['signer-subprovider']: [docSections.signerSubprovider],
         ['redundantRPC-subprovider']: [docSections.redundantRPCSubprovider],
         ['ganache-subprovider']: [docSections.ganacheSubprovider],
         ['nonceTracker-subprovider']: [docSections.nonceTrackerSubprovider],
@@ -69,6 +71,7 @@ const docsInfoConfig: DocsInfoConfig = {
         [docSections.emptyWalletSubprovider]: ['"subproviders/src/subproviders/empty_wallet_subprovider"'],
         [docSections.fakeGasEstimateSubprovider]: ['"subproviders/src/subproviders/fake_gas_estimate_subprovider"'],
         [docSections.injectedWeb3Subprovider]: ['"subproviders/src/subproviders/injected_web3"'],
+        [docSections.signerSubprovider]: ['"subproviders/src/subproviders/signer"'],
         [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'],
         [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'],
         [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'],
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 14e777d1a..d9b2ef618 100644
--- a/packages/website/ts/types.ts
+++ b/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 {
@@ -574,4 +575,16 @@ export enum AccountState {
     Loading = 'Loading',
     Locked = 'Locked',
 }
+
+export interface InjectedProvider extends Provider {
+    publicConfigStore?: InjectedProviderObservable;
+}
+
+// Minimal expected interface for an injected web3 object
+export interface InjectedWeb3 {
+    currentProvider: InjectedProvider;
+    version: {
+        getNetwork(cd: (err: Error, networkId: string) => void): void;
+    };
+}
 // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts
index 928e45bc3..f4bfa083f 100644
--- a/packages/website/ts/utils/analytics.ts
+++ b/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);
     },
 };