Merge branch 'development' into feature/instant/prod-env-switches-cdn

29 files changed, 419 insertions, 82 deletions

diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index 8b6121e43..eeb42d6fc 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -8,6 +8,7 @@ import { oc } from 'ts-optchain';
 import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants';
 import { ColorOption } from '../style/theme';
 import { AffiliateInfo, ZeroExInstantError } from '../types';
+import { analytics } from '../util/analytics';
 import { gasPriceEstimator } from '../util/gas_price_estimator';
 import { util } from '../util/util';
 
@@ -59,6 +60,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         // if we don't have a balance for the user, let the transaction through, it will be handled by the wallet
         const hasSufficientEth = _.isUndefined(accountEthBalanceInWei) || accountEthBalanceInWei.gte(ethNeededForBuy);
         if (!hasSufficientEth) {
+            analytics.trackBuyNotEnoughEth(buyQuote);
             this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH);
             return;
         }
@@ -66,6 +68,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         const gasInfo = await gasPriceEstimator.getGasInfoAsync();
         const feeRecipient = oc(affiliateInfo).feeRecipient();
         try {
+            analytics.trackBuyStarted(buyQuote);
             txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, {
                 feeRecipient,
                 takerAddress: accountAddress,
@@ -74,9 +77,11 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         } catch (e) {
             if (e instanceof Error) {
                 if (e.message === AssetBuyerError.SignatureRequestDenied) {
+                    analytics.trackBuySignatureDenied(buyQuote);
                     this.props.onSignatureDenied(buyQuote);
                     return;
                 } else if (e.message === AssetBuyerError.TransactionValueTooLow) {
+                    analytics.trackBuySimulationFailed(buyQuote);
                     this.props.onValidationFail(buyQuote, AssetBuyerError.TransactionValueTooLow);
                     return;
                 }
@@ -87,14 +92,17 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs;
         this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
         try {
+            analytics.trackBuyTxSubmitted(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
             await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         } catch (e) {
             if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) {
+                analytics.trackBuyTxFailed(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
                 this.props.onBuyFailure(buyQuote, txHash);
                 return;
             }
             throw e;
         }
+        analytics.trackBuyTxSucceeded(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix);
         this.props.onBuySuccess(buyQuote, txHash);
     };
 }
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b825255c4..ff900842a 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -64,6 +64,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
                         maxFontSizePx={this.props.startingFontSizePx}
                         onAmountChange={this._handleChange}
                         onFontSizeChange={this._handleFontSizeChange}
+                        hasAutofocus={true}
+                        /* We send in a key of asset data to force a rerender of this component when the user selects a new asset.  We do this so the autofocus attribute will bring focus onto this input */
+                        key={asset.assetData}
                     />
                 </Container>
                 <Container
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index 1b1921acb..f7d5a4fe4 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 import { ERC20Asset } from '../types';
+import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
@@ -18,12 +19,12 @@ export interface ERC20TokenSelectorProps {
 }
 
 export interface ERC20TokenSelectorState {
-    searchQuery?: string;
+    searchQuery: string;
 }
 
 export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> {
     public state: ERC20TokenSelectorState = {
-        searchQuery: undefined,
+        searchQuery: '',
     };
     public render(): React.ReactNode {
         const { tokens, onTokenSelect } = this.props;
@@ -57,13 +58,14 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps>
         this.setState({
             searchQuery,
         });
+        analytics.trackTokenSelectorSearched(searchQuery);
     };
     private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => {
         const { searchQuery } = this.state;
-        if (_.isUndefined(searchQuery)) {
+        const searchQueryLowerCase = searchQuery.toLowerCase().trim();
+        if (searchQueryLowerCase === '') {
             return true;
         }
-        const searchQueryLowerCase = searchQuery.toLowerCase();
         const tokenName = token.metaData.name.toLowerCase();
         const tokenSymbol = token.metaData.symbol.toLowerCase();
         return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase);
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 88c26f59c..481d82da0 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -8,7 +8,9 @@ import {
 } from '../constants';
 import { ColorOption } from '../style/theme';
 import { Browser } from '../types';
+import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
+import { util } from '../util/util';
 
 import { MetaMaskLogo } from './meta_mask_logo';
 import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content';
@@ -45,6 +47,10 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
             default:
                 break;
         }
+        const onActionClick = () => {
+            analytics.trackInstallWalletModalClickedGet();
+            util.createOpenUrlInNewWindow(actionUrl)();
+        };
         return {
             image: <MetaMaskLogo width={85} height={80} />,
             title: 'Install MetaMask',
@@ -52,10 +58,11 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
             moreInfoSettings: {
                 href: META_MASK_SITE_URL,
                 text: 'What is MetaMask?',
+                onClick: analytics.trackInstallWalletModalClickedExplanation,
             },
             action: (
                 <Button
-                    href={actionUrl}
+                    onClick={onActionClick}
                     width="100%"
                     fontColor={ColorOption.white}
                     backgroundColor={ColorOption.darkOrange}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 002695269..808c6dc7f 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -107,7 +107,14 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private readonly _renderEthAmount = (): React.ReactNode => {
         return (
-            <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+            <Text
+                fontSize="16px"
+                textAlign="right"
+                width="100%"
+                fontColor={ColorOption.white}
+                fontWeight={500}
+                noWrap={true}
+            >
                 {format.ethBaseUnitAmount(
                     this.props.totalEthBaseUnitAmount,
                     4,
@@ -119,7 +126,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
 
     private readonly _renderDollarAmount = (): React.ReactNode => {
         return (
-            <Text fontSize="16px" fontColor={ColorOption.white}>
+            <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} noWrap={true}>
                 {format.ethBaseUnitAmountInUsd(
                     this.props.totalEthBaseUnitAmount,
                     this.props.ethUsdPrice,
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index ebcd62f35..c23b43267 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -26,7 +26,7 @@ export interface PaymentMethodProps {
 export class PaymentMethod extends React.Component<PaymentMethodProps> {
     public render(): React.ReactNode {
         return (
-            <Container padding="20px" width="100%">
+            <Container padding="20px" width="100%" height="133px">
                 <Container marginBottom="12px">
                     <Flex justify="space-between">
                         <Text
@@ -83,8 +83,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
         const colors = { primaryColor, secondaryColor };
         switch (account.state) {
             case AccountState.Loading:
-                // Just take up the same amount of space as the other states.
-                return <Container height="52px" />;
+                return null;
             case AccountState.Locked:
                 return (
                     <WalletPrompt
diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx
index b330dbcd6..872ac0831 100644
--- a/packages/instant/src/components/payment_method_dropdown.tsx
+++ b/packages/instant/src/components/payment_method_dropdown.tsx
@@ -1,8 +1,9 @@
 import { BigNumber } from '@0x/utils';
-import copy from 'copy-to-clipboard';
+import * as copy from 'copy-to-clipboard';
 import * as React from 'react';
 
 import { Network } from '../types';
+import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
 import { etherscanUtil } from '../util/etherscan';
 import { format } from '../util/format';
@@ -20,7 +21,14 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
         const { accountAddress, accountEthBalanceInWei } = this.props;
         const value = format.ethAddress(accountAddress);
         const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string;
-        return <Dropdown value={value} label={label} items={this._getDropdownItemConfigs()} />;
+        return (
+            <Dropdown
+                value={value}
+                label={label}
+                items={this._getDropdownItemConfigs()}
+                onOpen={analytics.trackPaymentMethodDropdownOpened}
+            />
+        );
     }
     private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => {
         if (envUtil.isMobileOperatingSystem()) {
@@ -37,11 +45,15 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown
         return [viewOnEtherscan, copyAddressToClipboard];
     };
     private readonly _handleEtherscanClick = (): void => {
+        analytics.trackPaymentMethodOpenedEtherscan();
+
         const { accountAddress, network } = this.props;
         const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(accountAddress, network);
         window.open(etherscanUrl, '_blank');
     };
     private readonly _handleCopyToClipboardClick = (): void => {
+        analytics.trackPaymentMethodCopiedAddress();
+
         const { accountAddress } = this.props;
         copy(accountAddress);
     };
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 5dc719293..0861bbe05 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -18,6 +18,7 @@ export interface ScalingAmountInputProps {
     value?: BigNumber;
     onAmountChange: (value?: BigNumber) => void;
     onFontSizeChange: (fontSizePx: number) => void;
+    hasAutofocus: boolean;
 }
 interface ScalingAmountInputState {
     stringValue: string;
@@ -29,6 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         onAmountChange: util.boundNoop,
         onFontSizeChange: util.boundNoop,
         isDisabled: false,
+        hasAutofocus: false,
     };
     public constructor(props: ScalingAmountInputProps) {
         super(props);
@@ -64,6 +66,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
                 placeholder="0.00"
                 emptyInputWidthCh={3.5}
                 isDisabled={this.props.isDisabled}
+                hasAutofocus={this.props.hasAutofocus}
             />
         );
     }
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index e1599a316..791692257 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -28,6 +28,7 @@ export interface ScalingInputProps {
     maxLength?: number;
     scalingSettings: ScalingSettings;
     isDisabled: boolean;
+    hasAutofocus: boolean;
 }
 
 export interface ScalingInputState {
@@ -51,6 +52,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         maxLength: 7,
         scalingSettings: defaultScalingSettings,
         isDisabled: false,
+        hasAutofocus: false,
     };
     public state: ScalingInputState = {
         inputWidthPxAtPhaseChange: undefined,
@@ -96,6 +98,12 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
             inputWidthPx: this._getInputWidthInPx(),
         };
     }
+    public componentDidMount(): void {
+        // Trigger an initial notification of the calculated fontSize.
+        const currentPhase = ScalingInput.getPhaseFromProps(this.props);
+        const currentFontSize = ScalingInput.calculateFontSizeFromProps(this.props, currentPhase);
+        this.props.onFontSizeChange(currentFontSize);
+    }
     public componentDidUpdate(
         prevProps: ScalingInputProps,
         prevState: ScalingInputState,
@@ -123,7 +131,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
         }
     }
     public render(): React.ReactNode {
-        const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+        const { hasAutofocus, isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
         const phase = ScalingInput.getPhaseFromProps(this.props);
         return (
             <Input
@@ -136,6 +144,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
                 width={this._calculateWidth(phase)}
                 maxLength={maxLength}
                 disabled={isDisabled}
+                autoFocus={hasAutofocus}
             />
         );
     }
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index 582b3318e..79b7bff24 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
 
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -9,6 +10,7 @@ import { Text } from './ui/text';
 export interface MoreInfoSettings {
     text: string;
     href: string;
+    onClick?: () => void;
 }
 
 export interface StandardPanelContentProps {
@@ -21,6 +23,15 @@ export interface StandardPanelContentProps {
 
 const SPACING_BETWEEN_PX = '20px';
 
+const onMoreInfoClick = (href: string, onClick?: () => void) => {
+    return () => {
+        if (onClick) {
+            onClick();
+        }
+        util.createOpenUrlInNewWindow(href)();
+    };
+};
+
 export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
     image,
     title,
@@ -50,7 +61,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
                         fontSize="13px"
                         textDecorationLine="underline"
                         fontColor={ColorOption.lightGrey}
-                        href={moreInfoSettings.href}
+                        onClick={onMoreInfoClick(moreInfoSettings.href, moreInfoSettings.onClick)}
                     >
                         {moreInfoSettings.text}
                     </Text>
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index 8465b9cd0..fb3927088 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -1,8 +1,9 @@
 import * as _ from 'lodash';
+import { transparentize } from 'polished';
 import * as React from 'react';
 
 import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants';
-import { ColorOption, css, keyframes, styled } from '../style/theme';
+import { ColorOption, css, keyframes, styled, ThemeConsumer } from '../style/theme';
 
 import { Container } from './ui/container';
 
@@ -93,8 +94,16 @@ export interface ProgressBarProps extends ProgressProps {}
 
 export const ProgressBar: React.ComponentType<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef(
     (props, ref) => (
-        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
-            <Progress {...props} ref={ref as any} />
-        </Container>
+        <ThemeConsumer>
+            {theme => (
+                <Container
+                    width="100%"
+                    borderRadius="6px"
+                    rawBackgroundColor={transparentize(0.5, theme[ColorOption.primaryColor])}
+                >
+                    <Progress {...props} ref={ref as any} />
+                </Container>
+            )}
+        </ThemeConsumer>
     ),
 );
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 4dafe1386..e7d909d92 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -27,7 +27,9 @@ export interface ContainerProps {
     borderBottom?: string;
     className?: string;
     backgroundColor?: ColorOption;
+    rawBackgroundColor?: string;
     hasBoxShadow?: boolean;
+    isHidden?: boolean;
     zIndex?: number;
     whiteSpace?: string;
     opacity?: number;
@@ -38,6 +40,16 @@ export interface ContainerProps {
     flexGrow?: string | number;
 }
 
+const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgroundColor?: string): string => {
+    if (backgroundColor) {
+        return theme[backgroundColor] as string;
+    }
+    if (rawBackgroundColor) {
+        return rawBackgroundColor;
+    }
+    return 'none';
+};
+
 export const Container =
     styled.div <
     ContainerProps >
@@ -70,7 +82,8 @@ export const Container =
         ${props => props.width && stylesForMedia<string>('width', props.width)}
         ${props => props.height && stylesForMedia<string>('height', props.height)}
         ${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)}
-        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        ${props => (props.isHidden ? 'visibility: hidden;' : '')}
+        background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)};
         border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
         &:hover {
             ${props =>
diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index 3a23f456d..02e87d639 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -19,6 +19,7 @@ export interface DropdownProps {
     value: string;
     label?: string;
     items: DropdownItemConfig[];
+    onOpen?: () => void;
 }
 
 export interface DropdownState {
@@ -97,9 +98,14 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (_.isEmpty(this.props.items)) {
             return;
         }
+        const isOpen = !this.state.isOpen;
         this.setState({
-            isOpen: !this.state.isOpen,
+            isOpen,
         });
+
+        if (isOpen && this.props.onOpen) {
+            this.props.onOpen();
+        }
     };
     private readonly _closeDropdown = (): void => {
         this.setState({
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index fd14cc4d1..282477758 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -1,4 +1,3 @@
-import { darken } from 'polished';
 import * as React from 'react';
 
 import { ColorOption, styled } from '../../style/theme';
@@ -11,6 +10,7 @@ export interface TextProps {
     fontSize?: string;
     opacity?: number;
     letterSpacing?: string;
+    textAlign?: string;
     textTransform?: string;
     lineHeight?: string;
     className?: string;
@@ -22,6 +22,7 @@ export interface TextProps {
     noWrap?: boolean;
     display?: string;
     href?: string;
+    width?: string;
 }
 
 export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
@@ -29,7 +30,7 @@ export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...re
     return <StyledText {...rest} onClick={computedOnClick} />;
 };
 
-const darkenOnHoverAmount = 0.3;
+const opacityOnHoverAmount = 0.5;
 export const StyledText =
     styled.div <
     TextProps >
@@ -51,9 +52,10 @@ export const StyledText =
         ${props => (props.display ? `display: ${props.display}` : '')};
         ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
         ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
+        ${props => (props.textAlign ? `text-align: ${props.textAlign}` : '')};
+        ${props => (props.width ? `width: ${props.width}` : '')};
         &:hover {
-            ${props =>
-                props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
+            ${props => (props.onClick ? `opacity: ${opacityOnHoverAmount};` : '')};
         }
     }
 `;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 47c938472..8a809ee31 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -11,21 +11,20 @@ import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_
 import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
-import { OrderProcessState, SlideAnimationState } from '../types';
+import { SlideAnimationState } from '../types';
+import { analytics, TokenSelectorClosedVia } from '../util/analytics';
 
 import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 
-export interface ZeroExInstantContainerProps {
-    orderProcessState: OrderProcessState;
-}
+export interface ZeroExInstantContainerProps {}
 export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
 }
 
-export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantContainerState> {
+export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
     public state = {
         tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
     };
@@ -60,9 +59,9 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
                         </Flex>
                         <SlidingPanel
                             animationState={this.state.tokenSelectionPanelAnimationState}
-                            onClose={this._handlePanelClose}
+                            onClose={this._handlePanelCloseClickedX}
                         >
-                            <AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
+                            <AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
                         </SlidingPanel>
                         <CurrentStandardSlidingPanel />
                     </Container>
@@ -82,11 +81,19 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
         );
     }
     private readonly _handleSymbolClick = (): void => {
+        analytics.trackTokenSelectorOpened();
         this.setState({
             tokenSelectionPanelAnimationState: 'slidIn',
         });
     };
-    private readonly _handlePanelClose = (): void => {
+    private readonly _handlePanelCloseClickedX = (): void => {
+        this._handlePanelClose(TokenSelectorClosedVia.ClickedX);
+    };
+    private readonly _handlePanelCloseAfterChose = (): void => {
+        this._handlePanelClose(TokenSelectorClosedVia.TokenChose);
+    };
+    private readonly _handlePanelClose = (closedVia: TokenSelectorClosedVia): void => {
+        analytics.trackTokenSelectorClosed(closedVia);
         this.setState({
             tokenSelectionPanelAnimationState: 'slidOut',
         });
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index 2856ea3e3..b3fb57dd6 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
+import { MAIN_CONTAINER_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
@@ -18,7 +19,7 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
     const { onClose, zIndex, ...rest } = props;
     return (
         <ZeroExInstantProvider {...rest}>
-            <Overlay zIndex={zIndex}>
+            <Overlay zIndex={zIndex} className={OVERLAY_DIV_CLASS}>
                 <Flex height="100vh">
                     <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
                         <Icon
@@ -30,7 +31,11 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
                             padding="2em 2em"
                         />
                     </Container>
-                    <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}>
+                    <Container
+                        width={{ default: 'auto', sm: '100%' }}
+                        height={{ default: 'auto', sm: '100%' }}
+                        className={MAIN_CONTAINER_DIV_CLASS}
+                    >
                         <ZeroExInstantContainer />
                     </Container>
                 </Flex>
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index dc57513d1..a4a03bbf4 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -5,17 +5,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
-import {
-    ACCOUNT_UPDATE_INTERVAL_TIME_MS,
-    BUY_QUOTE_UPDATE_INTERVAL_TIME_MS,
-    INSTANT_DISCHARGE_TARGET,
-} from '../constants';
+import { ACCOUNT_UPDATE_INTERVAL_TIME_MS, BUY_QUOTE_UPDATE_INTERVAL_TIME_MS } from '../constants';
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
 import { asyncData } from '../redux/async_data';
 import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
+import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource, QuoteFetchOrigin } from '../types';
 import { analytics, disableAnalytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
@@ -119,7 +115,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
         // Trigger first buyquote fetch
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, { updateSilently: false });
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, QuoteFetchOrigin.Manual, {
+            updateSilently: false,
+        });
         // warm up the gas price estimator cache just in case we can't
         // grab the gas price estimate when submitting the transaction
         // tslint:disable-next-line:no-floating-promises
@@ -129,15 +127,16 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
 
         // Analytics
         disableAnalytics(this.props.shouldDisableAnalyticsTracking || false);
-        analytics.addEventProperties({
-            embeddedHost: window.location.host,
-            embeddedUrl: window.location.href,
-            networkId: state.network,
-            providerName: state.providerState.name,
-            gitSha: process.env.GIT_SHA,
-            npmVersion: process.env.NPM_PACKAGE_VERSION,
-            instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
-        });
+        analytics.addEventProperties(
+            analytics.generateEventProperties(
+                state.network,
+                this.props.orderSource,
+                state.providerState,
+                window,
+                state.selectedAsset,
+                this.props.affiliateInfo,
+            ),
+        );
         analytics.trackInstantOpened();
     }
     public componentWillUnmount(): void {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index b37a3a844..0dd770ec6 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -7,6 +7,8 @@ export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
 export const INJECTED_DIV_CLASS = 'zeroExInstantResetRoot';
 export const INJECTED_DIV_ID = 'zeroExInstant';
+export const OVERLAY_DIV_CLASS = 'zeroExInstantOverlay';
+export const MAIN_CONTAINER_DIV_CLASS = 'zeroExInstantMainContainer';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index cdeb49a25..e9327a288 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -11,7 +11,7 @@ import {
 import { Action, actions } from '../redux/actions';
 import { asyncData } from '../redux/async_data';
 import { State } from '../redux/reducer';
-import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types';
+import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent, WalletSuggestion } from '../types';
 import { analytics } from '../util/analytics';
 import { envUtil } from '../util/env';
 
@@ -60,23 +60,28 @@ const mergeProps = (
     onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
     onInstallWalletClick: () => {
         const isMobile = envUtil.isMobileOperatingSystem();
-        if (!isMobile) {
+        const walletSuggestion: WalletSuggestion = isMobile
+            ? WalletSuggestion.CoinbaseWallet
+            : WalletSuggestion.MetaMask;
+
+        analytics.trackInstallWalletClicked(walletSuggestion);
+        if (walletSuggestion === WalletSuggestion.MetaMask) {
             connectedDispatch.openInstallWalletPanel();
-            return;
-        }
-        const operatingSystem = envUtil.getOperatingSystem();
-        let url = COINBASE_WALLET_SITE_URL;
-        switch (operatingSystem) {
-            case OperatingSystem.Android:
-                url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
-                break;
-            case OperatingSystem.iOS:
-                url = COINBASE_WALLET_IOS_APP_STORE_URL;
-                break;
-            default:
-                break;
+        } else {
+            const operatingSystem = envUtil.getOperatingSystem();
+            let url = COINBASE_WALLET_SITE_URL;
+            switch (operatingSystem) {
+                case OperatingSystem.Android:
+                    url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
+                    break;
+                case OperatingSystem.iOS:
+                    url = COINBASE_WALLET_IOS_APP_STORE_URL;
+                    break;
+                default:
+                    break;
+            }
+            window.open(url, '_blank');
         }
-        window.open(url, '_blank');
     },
 });
 
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index b7cfdb504..0d4349124 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
 import { SlidingError } from '../components/sliding_error';
+import { Container } from '../components/ui/container';
 import { Overlay } from '../components/ui/overlay';
 import { Action } from '../redux/actions';
 import { State } from '../redux/reducer';
@@ -23,7 +24,12 @@ export interface LatestErrorComponentProps {
 
 export const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => {
     if (!props.latestErrorMessage) {
-        return <div />;
+        // Render a hidden SlidingError such that instant does not move when a real error is rendered.
+        return (
+            <Container isHidden={true}>
+                <SlidingError animationState="slidIn" icon="😢" message="" />
+            </Container>
+        );
     }
     return (
         <React.Fragment>
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index a39bc46a2..cb9df527e 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -10,7 +10,7 @@ import { ERC20AssetAmountInput, ERC20AssetAmountInputProps } from '../components
 import { Action, actions } from '../redux/actions';
 import { State } from '../redux/reducer';
 import { ColorOption } from '../style/theme';
-import { AffiliateInfo, ERC20Asset, Omit, OrderProcessState } from '../types';
+import { AffiliateInfo, ERC20Asset, Omit, OrderProcessState, QuoteFetchOrigin } from '../types';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
 
 export interface SelectedERC20AssetAmountInputProps {
@@ -88,7 +88,7 @@ const mapDispatchToProps = (
             // even if it's debounced, give them the illusion it's loading
             dispatch(actions.setQuoteRequestStatePending());
             // tslint:disable-next-line:no-floating-promises
-            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, {
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, QuoteFetchOrigin.Manual, {
                 setPending: true,
                 dispatchErrors: true,
                 affiliateInfo,
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 45369d9ee..95080f829 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -112,5 +112,5 @@ export const render = (config: ZeroExInstantConfig, selector: string = DEFAULT_Z
 };
 
 // Write version info to the exported object for debugging
-export const GitSha = process.env.GIT_SHA;
-export const NpmVersion = process.env.NPM_PACKAGE_VERSION;
+export const GIT_SHA = process.env.GIT_SHA;
+export const NPM_VERSION = process.env.NPM_PACKAGE_VERSION;
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
index 299c2560e..3dc5fe924 100644
--- a/packages/instant/src/redux/analytics_middleware.ts
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { Middleware } from 'redux';
 
 import { ETH_DECIMALS } from '../constants';
-import { Account, AccountState } from '../types';
+import { Account, AccountState, StandardSlidingPanelContent } from '../types';
 import { analytics } from '../util/analytics';
 
 import { Action, ActionTypes } from './actions';
@@ -53,6 +53,42 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                 ).toString();
                 analytics.addUserProperties({ ethBalanceInUnitAmount });
             }
+            break;
+        case ActionTypes.UPDATE_SELECTED_ASSET:
+            const selectedAsset = curState.selectedAsset;
+            if (selectedAsset) {
+                const assetName = selectedAsset.metaData.name;
+                const assetData = selectedAsset.assetData;
+                analytics.trackTokenSelectorChose({
+                    assetName,
+                    assetData,
+                });
+                analytics.addEventProperties({
+                    selectedAssetName: assetName,
+                    selectedAssetData: assetData,
+                });
+            }
+            break;
+        case ActionTypes.SET_AVAILABLE_ASSETS:
+            const availableAssets = curState.availableAssets;
+            if (availableAssets) {
+                analytics.addEventProperties({
+                    numberAvailableAssets: availableAssets.length,
+                });
+            }
+            break;
+        case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+            const openSlidingContent = curState.standardSlidingPanelSettings.content;
+            if (openSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+                analytics.trackInstallWalletModalOpened();
+            }
+            break;
+        case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+            const closeSlidingContent = curState.standardSlidingPanelSettings.content;
+            if (closeSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+                analytics.trackInstallWalletModalClosed();
+            }
+            break;
     }
 
     return nextAction;
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index 6feb760e7..9fdcea3ca 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -4,7 +4,7 @@ import * as _ from 'lodash';
 import { Dispatch } from 'redux';
 
 import { BIG_NUMBER_ZERO } from '../constants';
-import { AccountState, ERC20Asset, OrderProcessState, ProviderState } from '../types';
+import { AccountState, ERC20Asset, OrderProcessState, ProviderState, QuoteFetchOrigin } from '../types';
 import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { buyQuoteUpdater } from '../util/buy_quote_updater';
@@ -84,6 +84,7 @@ export const asyncData = {
     fetchCurrentBuyQuoteAndDispatchToStore: async (
         state: State,
         dispatch: Dispatch,
+        fetchOrigin: QuoteFetchOrigin,
         options: { updateSilently: boolean },
     ) => {
         const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state;
@@ -99,7 +100,12 @@ export const asyncData = {
                 dispatch,
                 selectedAsset as ERC20Asset,
                 selectedAssetUnitAmount,
-                { setPending: !options.updateSilently, dispatchErrors: !options.updateSilently, affiliateInfo },
+                fetchOrigin,
+                {
+                    setPending: !options.updateSilently,
+                    dispatchErrors: !options.updateSilently,
+                    affiliateInfo,
+                },
             );
         }
     },
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index a0751286b..71e4b7052 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,14 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents;
+const {
+    default: styled,
+    css,
+    keyframes,
+    withTheme,
+    createGlobalStyle,
+    ThemeConsumer,
+    ThemeProvider,
+} = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -45,4 +53,4 @@ export const generateOverlayBlack = (opacity = 0.6) => {
     return `rgba(0, 0, 0, ${opacity})`;
 };
 
-export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider };
+export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeConsumer, ThemeProvider };
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 999d50fed..2d73ba29e 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -21,6 +21,11 @@ export enum OrderProcessState {
     Failure = 'FAILURE',
 }
 
+export enum QuoteFetchOrigin {
+    Manual = 'Manual',
+    Heartbeat = 'Heartbeat',
+}
+
 export interface SimulatedProgress {
     startTimeUnix: number;
     expectedEndTimeUnix: number;
@@ -149,6 +154,11 @@ export enum Browser {
     Other = 'OTHER',
 }
 
+export enum WalletSuggestion {
+    CoinbaseWallet = 'Coinbase Wallet',
+    MetaMask = 'MetaMask',
+}
+
 export enum OperatingSystem {
     Android = 'ANDROID',
     iOS = 'IOS',
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 45ce4dbd4..c4a007de6 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -1,3 +1,18 @@
+import { BuyQuote } from '@0x/asset-buyer';
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { INSTANT_DISCHARGE_TARGET } from '../constants';
+import {
+    AffiliateInfo,
+    Asset,
+    Network,
+    OrderSource,
+    ProviderState,
+    QuoteFetchOrigin,
+    WalletSuggestion,
+} from '../types';
+
 import { EventProperties, heapUtil } from './heap';
 
 let isDisabled = false;
@@ -18,7 +33,29 @@ enum EventNames {
     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',
+    QUOTE_FETCHED = 'Quote - Fetched',
+    QUOTE_ERROR = 'Quote - Error',
 }
+
 const track = (eventName: EventNames, eventProperties: EventProperties = {}): void => {
     evaluateIfEnabled(() => {
         heapUtil.evaluateHeapCall(heap => heap.track(eventName, eventProperties));
@@ -36,6 +73,23 @@ 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;
@@ -48,8 +102,17 @@ export interface AnalyticsEventOptions {
     gitSha?: string;
     npmVersion?: string;
     instantEnvironment?: string;
+    orderSource?: string;
+    affiliateAddress?: string;
+    affiliateFeePercent?: number;
+    numberAvailableAssets?: number;
+    selectedAssetName?: string;
+    selectedAssetData?: string;
+}
+export enum TokenSelectorClosedVia {
+    ClickedX = 'Clicked X',
+    TokenChose = 'Token Chose',
 }
-
 export const analytics = {
     addUserProperties: (properties: AnalyticsUserOptions): void => {
         evaluateIfEnabled(() => {
@@ -61,6 +124,33 @@ export const analytics = {
             heapUtil.evaluateHeapCall(heap => heap.addEventProperties(properties));
         });
     },
+    generateEventProperties: (
+        network: Network,
+        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';
+        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,
+            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),
     trackAccountLocked: trackingEventFnWithoutPayload(EventNames.ACCOUNT_LOCKED),
     trackAccountReady: (address: string) => trackingEventFnWithPayload(EventNames.ACCOUNT_READY)({ address }),
@@ -68,4 +158,62 @@ export const analytics = {
     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 }),
+    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/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index 2fd16d781..c1899f8c1 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -6,7 +6,8 @@ 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';
 
@@ -16,7 +17,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);
@@ -31,6 +37,7 @@ export const buyQuoteUpdater = {
         } catch (error) {
             if (options.dispatchErrors) {
                 dispatch(actions.setQuoteRequestStateFailure());
+                analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
                 let errorMessage;
                 if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
                     const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
@@ -58,5 +65,6 @@ export const buyQuoteUpdater = {
         errorFlasher.clearError(dispatch);
         // invalidate the last buy quote.
         dispatch(actions.updateLatestBuyQuote(newBuyQuote));
+        analytics.trackQuoteFetched(newBuyQuote, fetchOrigin);
     },
 };
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);
 };