Merge remote-tracking branch 'upstream/development' into website

# Conflicts:
#	packages/website/package.json
#	packages/website/ts/style/colors.ts

7 files changed, 258 insertions, 38 deletions

diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index cec99dd1b..6da37bedb 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -1,26 +1,66 @@
-import { AffiliateInfo, Network, OrderSource, ProviderState } from '../types';
+import { BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NPM_PACKAGE_VERSION } from '../constants';
+import {
+    AffiliateInfo,
+    Asset,
+    Network,
+    OrderProcessState,
+    OrderSource,
+    ProviderState,
+    QuoteFetchOrigin,
+    WalletSuggestion,
+} from '../types';
 
 import { EventProperties, heapUtil } from './heap';
 
-let isDisabled = false;
+let isDisabledViaConfig = false;
 export const disableAnalytics = (shouldDisableAnalytics: boolean) => {
-    isDisabled = shouldDisableAnalytics;
+    isDisabledViaConfig = shouldDisableAnalytics;
 };
 export const evaluateIfEnabled = (fnCall: () => void) => {
-    if (isDisabled) {
+    if (isDisabledViaConfig) {
         return;
     }
-    fnCall();
+    if (HEAP_ENABLED) {
+        fnCall();
+    }
 };
 
 enum EventNames {
     INSTANT_OPENED = 'Instant - Opened',
+    INSTANT_CLOSED = 'Instant - Closed',
     ACCOUNT_LOCKED = 'Account - Locked',
     ACCOUNT_READY = 'Account - Ready',
     ACCOUNT_UNLOCK_REQUESTED = 'Account - Unlock Requested',
     ACCOUNT_UNLOCK_DENIED = 'Account - Unlock Denied',
     ACCOUNT_ADDRESS_CHANGED = 'Account - Address Changed',
+    PAYMENT_METHOD_DROPDOWN_OPENED = 'Payment Method - Dropdown Opened',
+    PAYMENT_METHOD_OPENED_ETHERSCAN = 'Payment Method - Opened Etherscan',
+    PAYMENT_METHOD_COPIED_ADDRESS = 'Payment Method - Copied Address',
+    BUY_NOT_ENOUGH_ETH = 'Buy - Not Enough Eth',
+    BUY_STARTED = 'Buy - Started',
+    BUY_SIGNATURE_DENIED = 'Buy - Signature Denied',
+    BUY_SIMULATION_FAILED = 'Buy - Simulation Failed',
+    BUY_TX_SUBMITTED = 'Buy - Tx Submitted',
+    BUY_TX_SUCCEEDED = 'Buy - Tx Succeeded',
+    BUY_TX_FAILED = 'Buy - Tx Failed',
+    INSTALL_WALLET_CLICKED = 'Install Wallet - Clicked',
+    INSTALL_WALLET_MODAL_OPENED = 'Install Wallet - Modal - Opened',
+    INSTALL_WALLET_MODAL_CLICKED_EXPLANATION = 'Install Wallet - Modal - Clicked Explanation',
+    INSTALL_WALLET_MODAL_CLICKED_GET = 'Install Wallet - Modal - Clicked Get',
+    INSTALL_WALLET_MODAL_CLOSED = 'Install Wallet - Modal - Closed',
+    TOKEN_SELECTOR_OPENED = 'Token Selector - Opened',
+    TOKEN_SELECTOR_CLOSED = 'Token Selector - Closed',
+    TOKEN_SELECTOR_CHOSE = 'Token Selector - Chose',
+    TOKEN_SELECTOR_SEARCHED = 'Token Selector - Searched',
+    TRANSACTION_VIEWED = 'Transaction - Viewed',
+    QUOTE_FETCHED = 'Quote - Fetched',
+    QUOTE_ERROR = 'Quote - Error',
 }
+
 const track = (eventName: EventNames, eventProperties: EventProperties = {}): void => {
     evaluateIfEnabled(() => {
         heapUtil.evaluateHeapCall(heap => heap.track(eventName, eventProperties));
@@ -38,22 +78,50 @@ function trackingEventFnWithPayload(eventName: EventNames): (eventProperties: Ev
     };
 }
 
+const buyQuoteEventProperties = (buyQuote: BuyQuote) => {
+    const assetBuyAmount = buyQuote.assetBuyAmount.toString();
+    const assetEthAmount = buyQuote.worstCaseQuoteInfo.assetEthAmount.toString();
+    const feeEthAmount = buyQuote.worstCaseQuoteInfo.feeEthAmount.toString();
+    const totalEthAmount = buyQuote.worstCaseQuoteInfo.totalEthAmount.toString();
+    const feePercentage = !_.isUndefined(buyQuote.feePercentage) ? buyQuote.feePercentage.toString() : 0;
+    const hasFeeOrders = !_.isEmpty(buyQuote.feeOrders) ? 'true' : 'false';
+    return {
+        assetBuyAmount,
+        assetEthAmount,
+        feeEthAmount,
+        totalEthAmount,
+        feePercentage,
+        hasFeeOrders,
+    };
+};
+
 export interface AnalyticsUserOptions {
     lastKnownEthAddress?: string;
-    ethBalanceInUnitAmount?: string;
+    lastEthBalanceInUnitAmount?: string;
 }
 export interface AnalyticsEventOptions {
     embeddedHost?: string;
     embeddedUrl?: string;
+    ethBalanceInUnitAmount?: string;
+    ethAddress?: string;
     networkId?: number;
     providerName?: string;
     gitSha?: string;
     npmVersion?: string;
+    instantEnvironment?: string;
     orderSource?: string;
     affiliateAddress?: string;
     affiliateFeePercent?: number;
+    numberAvailableAssets?: number;
+    selectedAssetName?: string;
+    selectedAssetSymbol?: string;
+    selectedAssetData?: string;
+    selectedAssetDecimals?: number;
+}
+export enum TokenSelectorClosedVia {
+    ClickedX = 'Clicked X',
+    TokenChose = 'Token Chose',
 }
-
 export const analytics = {
     addUserProperties: (properties: AnalyticsUserOptions): void => {
         evaluateIfEnabled(() => {
@@ -70,28 +138,94 @@ export const analytics = {
         orderSource: OrderSource,
         providerState: ProviderState,
         window: Window,
+        selectedAsset?: Asset,
         affiliateInfo?: AffiliateInfo,
     ): AnalyticsEventOptions => {
         const affiliateAddress = affiliateInfo ? affiliateInfo.feeRecipient : 'none';
         const affiliateFeePercent = affiliateInfo ? parseFloat(affiliateInfo.feePercentage.toFixed(4)) : 0;
         const orderSourceName = typeof orderSource === 'string' ? orderSource : 'provided';
-        return {
+        const eventOptions: AnalyticsEventOptions = {
             embeddedHost: window.location.host,
             embeddedUrl: window.location.href,
             networkId: network,
             providerName: providerState.name,
-            gitSha: process.env.GIT_SHA,
-            npmVersion: process.env.NPM_PACKAGE_VERSION,
+            gitSha: GIT_SHA,
+            npmVersion: NPM_PACKAGE_VERSION,
             orderSource: orderSourceName,
             affiliateAddress,
             affiliateFeePercent,
+            selectedAssetName: selectedAsset ? selectedAsset.metaData.name : 'none',
+            selectedAssetData: selectedAsset ? selectedAsset.assetData : 'none',
+            instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
         };
+        return eventOptions;
     },
     trackInstantOpened: trackingEventFnWithoutPayload(EventNames.INSTANT_OPENED),
+    trackInstantClosed: trackingEventFnWithoutPayload(EventNames.INSTANT_CLOSED),
     trackAccountLocked: trackingEventFnWithoutPayload(EventNames.ACCOUNT_LOCKED),
     trackAccountReady: (address: string) => trackingEventFnWithPayload(EventNames.ACCOUNT_READY)({ address }),
     trackAccountUnlockRequested: trackingEventFnWithoutPayload(EventNames.ACCOUNT_UNLOCK_REQUESTED),
     trackAccountUnlockDenied: trackingEventFnWithoutPayload(EventNames.ACCOUNT_UNLOCK_DENIED),
     trackAccountAddressChanged: (address: string) =>
         trackingEventFnWithPayload(EventNames.ACCOUNT_ADDRESS_CHANGED)({ address }),
+    trackPaymentMethodDropdownOpened: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_DROPDOWN_OPENED),
+    trackPaymentMethodOpenedEtherscan: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_OPENED_ETHERSCAN),
+    trackPaymentMethodCopiedAddress: trackingEventFnWithoutPayload(EventNames.PAYMENT_METHOD_COPIED_ADDRESS),
+    trackBuyNotEnoughEth: (buyQuote: BuyQuote) =>
+        trackingEventFnWithPayload(EventNames.BUY_NOT_ENOUGH_ETH)(buyQuoteEventProperties(buyQuote)),
+    trackBuyStarted: (buyQuote: BuyQuote) =>
+        trackingEventFnWithPayload(EventNames.BUY_STARTED)(buyQuoteEventProperties(buyQuote)),
+    trackBuySignatureDenied: (buyQuote: BuyQuote) =>
+        trackingEventFnWithPayload(EventNames.BUY_SIGNATURE_DENIED)(buyQuoteEventProperties(buyQuote)),
+    trackBuySimulationFailed: (buyQuote: BuyQuote) =>
+        trackingEventFnWithPayload(EventNames.BUY_SIMULATION_FAILED)(buyQuoteEventProperties(buyQuote)),
+    trackBuyTxSubmitted: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        trackingEventFnWithPayload(EventNames.BUY_TX_SUBMITTED)({
+            ...buyQuoteEventProperties(buyQuote),
+            txHash,
+            expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix,
+        }),
+    trackBuyTxSucceeded: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        trackingEventFnWithPayload(EventNames.BUY_TX_SUCCEEDED)({
+            ...buyQuoteEventProperties(buyQuote),
+            txHash,
+            expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix,
+            actualTxTimeMs: new Date().getTime() - startTimeUnix,
+        }),
+    trackBuyTxFailed: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) =>
+        trackingEventFnWithPayload(EventNames.BUY_TX_FAILED)({
+            ...buyQuoteEventProperties(buyQuote),
+            txHash,
+            expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix,
+            actualTxTimeMs: new Date().getTime() - startTimeUnix,
+        }),
+    trackInstallWalletClicked: (walletSuggestion: WalletSuggestion) =>
+        trackingEventFnWithPayload(EventNames.INSTALL_WALLET_CLICKED)({ walletSuggestion }),
+    trackInstallWalletModalClickedExplanation: trackingEventFnWithoutPayload(
+        EventNames.INSTALL_WALLET_MODAL_CLICKED_EXPLANATION,
+    ),
+    trackInstallWalletModalClickedGet: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLICKED_GET),
+    trackInstallWalletModalOpened: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_OPENED),
+    trackInstallWalletModalClosed: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLOSED),
+    trackTokenSelectorOpened: trackingEventFnWithoutPayload(EventNames.TOKEN_SELECTOR_OPENED),
+    trackTokenSelectorClosed: (closedVia: TokenSelectorClosedVia) =>
+        trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CLOSED)({ closedVia }),
+    trackTokenSelectorChose: (payload: { assetName: string; assetData: string }) =>
+        trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CHOSE)(payload),
+    trackTokenSelectorSearched: (searchText: string) =>
+        trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_SEARCHED)({ searchText }),
+    trackTransactionViewed: (orderProcesState: OrderProcessState) =>
+        trackingEventFnWithPayload(EventNames.TRANSACTION_VIEWED)({ orderState: orderProcesState }),
+    trackQuoteFetched: (buyQuote: BuyQuote, fetchOrigin: QuoteFetchOrigin) =>
+        trackingEventFnWithPayload(EventNames.QUOTE_FETCHED)({
+            ...buyQuoteEventProperties(buyQuote),
+            fetchOrigin,
+        }),
+    trackQuoteError: (errorMessage: string, assetBuyAmount: BigNumber, fetchOrigin: QuoteFetchOrigin) => {
+        trackingEventFnWithPayload(EventNames.QUOTE_ERROR)({
+            errorMessage,
+            assetBuyAmount: assetBuyAmount.toString(),
+            fetchOrigin,
+        });
+    },
 };
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 40560d3eb..08f3642e3 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -1,3 +1,4 @@
+import { AssetBuyerError } from '@0x/asset-buyer';
 import { AssetProxyId, ObjectMap } from '@0x/types';
 import * as _ from 'lodash';
 
@@ -106,4 +107,20 @@ export const assetUtils = {
         );
         return _.compact(erc20sOrUndefined);
     },
+    assetBuyerErrorMessage: (asset: ERC20Asset, error: Error): string | undefined => {
+        if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+            return `Not enough ${assetName} available`;
+        } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+            return 'Not enough ZRX available';
+        } else if (
+            error.message === AssetBuyerError.StandardRelayerApiError ||
+            error.message.startsWith(AssetBuyerError.AssetUnavailable)
+        ) {
+            const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+            return `${assetName} is currently unavailable`;
+        }
+
+        return undefined;
+    },
 };
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index 2fd16d781..4229f2735 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -1,4 +1,4 @@
-import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
@@ -6,9 +6,11 @@ import { Dispatch } from 'redux';
 import { oc } from 'ts-optchain';
 
 import { Action, actions } from '../redux/actions';
-import { AffiliateInfo, ERC20Asset } from '../types';
+import { AffiliateInfo, ERC20Asset, QuoteFetchOrigin } from '../types';
+import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
+import { errorReporter } from '../util/error_reporter';
 
 export const buyQuoteUpdater = {
     updateBuyQuoteAsync: async (
@@ -16,7 +18,12 @@ export const buyQuoteUpdater = {
         dispatch: Dispatch<Action>,
         asset: ERC20Asset,
         assetUnitAmount: BigNumber,
-        options: { setPending: boolean; dispatchErrors: boolean; affiliateInfo?: AffiliateInfo },
+        fetchOrigin: QuoteFetchOrigin,
+        options: {
+            setPending: boolean;
+            dispatchErrors: boolean;
+            affiliateInfo?: AffiliateInfo;
+        },
     ): Promise<void> => {
         // get a new buy quote.
         const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals);
@@ -29,34 +36,24 @@ export const buyQuoteUpdater = {
         try {
             newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
         } catch (error) {
+            const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error);
+
+            if (_.isUndefined(errorMessage)) {
+                // This is an unknown error, report it to rollbar
+                errorReporter.report(error);
+            }
+
             if (options.dispatchErrors) {
                 dispatch(actions.setQuoteRequestStateFailure());
-                let errorMessage;
-                if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-                    const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-                    errorMessage = `Not enough ${assetName} available`;
-                } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-                    errorMessage = 'Not enough ZRX available';
-                } else if (
-                    error.message === AssetBuyerError.StandardRelayerApiError ||
-                    error.message.startsWith(AssetBuyerError.AssetUnavailable)
-                ) {
-                    const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-                    errorMessage = `${assetName} is currently unavailable`;
-                }
-                if (!_.isUndefined(errorMessage)) {
-                    errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-                } else {
-                    throw error;
-                }
+                analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
+                errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again');
             }
-            // TODO: report to error reporter on else
-
             return;
         }
         // We have a successful new buy quote
         errorFlasher.clearError(dispatch);
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+        analytics.trackQuoteFetched(newBuyQuote, fetchOrigin);
     },
 };
diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts
new file mode 100644
index 000000000..b1824eaf9
--- /dev/null
+++ b/packages/instant/src/util/error_reporter.ts
@@ -0,0 +1,62 @@
+import { logUtils } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { GIT_SHA, HOST_DOMAINS, INSTANT_DISCHARGE_TARGET, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants';
+
+// Import version of Rollbar designed for embedded components
+// See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component
+// tslint:disable-next-line:no-var-requires
+const Rollbar = require('rollbar/dist/rollbar.noconflict.umd');
+
+let rollbar: any;
+// Configures rollbar and sets up error catching
+export const setupRollbar = (): any => {
+    if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENABLED) {
+        rollbar = new Rollbar({
+            accessToken: ROLLBAR_CLIENT_TOKEN,
+            captureUncaught: true,
+            captureUnhandledRejections: true,
+            enabled: true,
+            itemsPerMinute: 10,
+            maxItems: 500,
+            payload: {
+                environment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+                client: {
+                    javascript: {
+                        source_map_enabled: true,
+                        code_version: GIT_SHA,
+                        guess_uncaught_frames: true,
+                    },
+                },
+            },
+            hostWhiteList: HOST_DOMAINS,
+            uncaughtErrorLevel: 'error',
+            ignoredMessages: [
+                // Errors from the third-party scripts
+                'Script error',
+                // Network errors or ad-blockers
+                'TypeError: Failed to fetch',
+                'Exchange has not been deployed to detected network (network/artifact mismatch)',
+                // Source: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE
+                "undefined is not an object (evaluating '__gCrWeb.autofill.extractForms')",
+                // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
+                'SecurityError (DOM Exception 18)',
+            ],
+        });
+    }
+};
+
+export const errorReporter = {
+    report(err: Error): void {
+        if (!rollbar) {
+            logUtils.log('Not reporting to rollbar because not configured', err);
+            return;
+        }
+
+        rollbar.error(err, (rollbarErr: Error) => {
+            if (rollbarErr) {
+                logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`);
+            }
+        });
+    },
+};
diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts
index 6b15809a3..332c8d00a 100644
--- a/packages/instant/src/util/gas_price_estimator.ts
+++ b/packages/instant/src/util/gas_price_estimator.ts
@@ -7,6 +7,8 @@ import {
     GWEI_IN_WEI,
 } from '../constants';
 
+import { errorReporter } from './error_reporter';
+
 interface EthGasStationResult {
     average: number;
     fastestWait: number;
@@ -42,8 +44,9 @@ export class GasPriceEstimator {
         let fetchedAmount: GasInfo | undefined;
         try {
             fetchedAmount = await fetchFastAmountInWeiAsync();
-        } catch {
+        } catch (e) {
             fetchedAmount = undefined;
+            errorReporter.report(e);
         }
 
         if (fetchedAmount) {
diff --git a/packages/instant/src/util/heap.ts b/packages/instant/src/util/heap.ts
index 7c53c9918..279ff3059 100644
--- a/packages/instant/src/util/heap.ts
+++ b/packages/instant/src/util/heap.ts
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import { HEAP_ANALYTICS_ID } from '../constants';
 
 import { AnalyticsEventOptions, AnalyticsUserOptions } from './analytics';
+import { errorReporter } from './error_reporter';
 
 export type EventProperties = ObjectMap<string | number>;
 
@@ -107,8 +108,8 @@ export const heapUtil = {
                 heapFunctionCall(curHeap);
             } catch (e) {
                 // We never want analytics to crash our React component
-                // TODO(sk): error reporter here
                 logUtils.log('Analytics error', e);
+                errorReporter.report(e);
             }
         }
     },
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 2b852fb0d..cf29bf3ea 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -1,5 +1,6 @@
 import { asyncData } from '../redux/async_data';
 import { Store } from '../redux/store';
+import { QuoteFetchOrigin } from '../types';
 
 import { Heartbeater } from './heartbeater';
 
@@ -17,8 +18,13 @@ export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): He
 export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => {
     const { store, shouldPerformImmediatelyOnStart } = options;
     return new Heartbeater(async () => {
-        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, {
-            updateSilently: true,
-        });
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(
+            store.getState(),
+            store.dispatch,
+            QuoteFetchOrigin.Heartbeat,
+            {
+                updateSilently: true,
+            },
+        );
     }, shouldPerformImmediatelyOnStart);
 };