Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into bug/website/txhash-error

4 files changed, 91 insertions, 36 deletions

diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts
index f4bfa083f..e5a1ddfa4 100644
--- a/packages/website/ts/utils/analytics.ts
+++ b/packages/website/ts/utils/analytics.ts
@@ -1,27 +1,83 @@
 import * as _ from 'lodash';
-import * as ReactGA from 'react-ga';
-import { InjectedWeb3 } from 'ts/types';
-import { configs } from 'ts/utils/configs';
+import { ObjectMap, Order } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
-export const analytics = {
-    init(): void {
-        ReactGA.initialize(configs.GOOGLE_ANALYTICS_ID);
-    },
-    logEvent(category: string, action: string, label: string, value?: any): void {
-        ReactGA.event({
-            category,
-            action,
-            label,
-            value,
-        });
-    },
-    async logProviderAsync(web3IfExists: InjectedWeb3): Promise<void> {
-        await utils.onPageLoadAsync();
-        const providerType =
-            !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider)
-                ? utils.getProviderType(web3IfExists.currentProvider)
-                : 'NONE';
-        ReactGA.ga('set', 'dimension1', providerType);
-    },
-};
+export interface HeapAnalytics {
+    loaded: boolean;
+    identify(id: string, idType: string): void;
+    track(eventName: string, eventProperties?: ObjectMap<string | number>): void;
+    resetIdentity(): void;
+    addUserProperties(properties: ObjectMap<string | number>): void;
+    addEventProperties(properties: ObjectMap<string | number>): void;
+    removeEventProperty(property: string): void;
+    clearEventProperties(): void;
+}
+export class Analytics {
+    private _heap: HeapAnalytics;
+    public static init(): Analytics {
+        return new Analytics(Analytics.getHeap());
+    }
+    public static getHeap(): HeapAnalytics {
+        const heap = (window as any).heap;
+        if (!_.isUndefined(heap)) {
+            return heap;
+        } else {
+            throw new Error('Could not find the Heap SDK on the page.');
+        }
+    }
+    constructor(heap: HeapAnalytics) {
+        this._heap = heap;
+    }
+    // tslint:disable:no-floating-promises
+    // HeapAnalytics Wrappers
+    public identify(id: string, idType: string): void {
+        this._heapLoadedGuardAsync(() => this._heap.identify(id, idType));
+    }
+    public track(eventName: string, eventProperties?: ObjectMap<string | number>): void {
+        this._heapLoadedGuardAsync(() => this._heap.track(eventName, eventProperties));
+    }
+    public resetIdentity(): void {
+        this._heapLoadedGuardAsync(() => this._heap.resetIdentity());
+    }
+    public addUserProperties(properties: ObjectMap<string | number>): void {
+        this._heapLoadedGuardAsync(() => this._heap.addUserProperties(properties));
+    }
+    public addEventProperties(properties: ObjectMap<string | number>): void {
+        this._heapLoadedGuardAsync(() => this._heap.addEventProperties(properties));
+    }
+    public removeEventProperty(property: string): void {
+        this._heapLoadedGuardAsync(() => this._heap.removeEventProperty(property));
+    }
+    public clearEventProperties(): void {
+        this._heapLoadedGuardAsync(() => this._heap.clearEventProperties());
+    }
+    // tslint:enable:no-floating-promises
+    // Custom methods
+    public trackOrderEvent(eventName: string, order: Order): void {
+        const orderLoggingData = {
+            takerTokenAmount: order.signedOrder.takerTokenAmount,
+            makeTokenAmount: order.signedOrder.makerTokenAmount,
+            takerToken: order.metadata.takerToken.symbol,
+            makerToken: order.metadata.makerToken.symbol,
+        };
+        this.track(eventName, orderLoggingData);
+    }
+    /**
+     * Heap is not available as a UMD module, and additionally has the strange property of replacing itself with
+     * a different object once it's loaded.
+     * Instead of having an await call before every analytics use, we opt to have the awaiting logic in here by
+     * guarding every API call with the guard below.
+     */
+    private async _heapLoadedGuardAsync(callback: () => void): Promise<void> {
+        if (this._heap.loaded) {
+            callback();
+            return undefined;
+        }
+        await utils.onPageLoadPromise;
+        // HACK: Reset heap to loaded heap
+        this._heap = (window as any).heap;
+        callback();
+    }
+}
+
+export const analytics = Analytics.init();
diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts
index 7768835fb..1627b9b0c 100644
--- a/packages/website/ts/utils/doc_utils.ts
+++ b/packages/website/ts/utils/doc_utils.ts
@@ -1,5 +1,5 @@
 import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs';
-import { logUtils } from '@0xproject/utils';
+import { fetchAsync, logUtils } from '@0xproject/utils';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import { S3FileObject, VersionToFilePath } from 'ts/types';
@@ -16,7 +16,7 @@ export const docUtils = {
         return versionToFilePath;
     },
     async getVersionFileNamesAsync(s3DocJsonRoot: string, folderName: string): Promise<string[]> {
-        const response = await fetch(s3DocJsonRoot);
+        const response = await fetchAsync(s3DocJsonRoot);
         if (response.status !== 200) {
             // TODO: Show the user an error message when the docs fail to load
             const errMsg = await response.text();
@@ -73,7 +73,7 @@ export const docUtils = {
     },
     async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<TypeDocNode | DoxityDocObj> {
         const endpoint = `${s3DocJsonRoot}/${filePath}`;
-        const response = await fetch(endpoint);
+        const response = await fetchAsync(endpoint);
         if (response.status !== 200) {
             // TODO: Show the user an error message when the docs fail to load
             const errMsg = await response.text();
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts
index a56d89262..e9a88b6b3 100644
--- a/packages/website/ts/utils/fetch_utils.ts
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -1,4 +1,4 @@
-import { logUtils } from '@0xproject/utils';
+import { fetchAsync, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as queryString from 'query-string';
 
@@ -18,14 +18,14 @@ export const fetchUtils = {
     async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
         const query = queryStringFromQueryParams(queryParams);
         const url = `${baseUrl}${path}${query}`;
-        const response = await fetch(url);
+        const response = await fetchAsync(url);
         logErrorIfPresent(response, url);
         const result = await response.json();
         return result;
     },
     async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
         const url = `${baseUrl}${path}`;
-        const response = await fetch(url, {
+        const response = await fetchAsync(url, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index f2baeb849..739bb7b66 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -299,14 +299,13 @@ export const utils = {
         const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
         return baseUrl;
     },
-    async onPageLoadAsync(): Promise<void> {
+    onPageLoadPromise: new Promise((resolve, _reject) => {
         if (document.readyState === 'complete') {
-            return; // Already loaded
+            resolve();
+            return;
         }
-        return new Promise<void>((resolve, _reject) => {
-            window.onload = () => resolve();
-        });
-    },
+        window.onload = resolve;
+    }),
     getProviderType(provider: Provider): Providers | string {
         const constructorName = provider.constructor.name;
         let parsedProviderName = constructorName;