Merge branch 'development' into feature/contracts-monorepo-7

17 files changed, 127 insertions, 59 deletions

diff --git a/packages/instant/.DS_Store b/packages/instant/.DS_Store
index 9a0cceca6..c86c5cbcd 100644
--- a/packages/instant/.DS_Store
+++ b/packages/instant/.DS_Store
diff --git a/packages/instant/README.md b/packages/instant/README.md
index 2092b45d9..7f6ee7c46 100644
--- a/packages/instant/README.md
+++ b/packages/instant/README.md
@@ -1,5 +1,9 @@
 ## @0x/instant
 
+## Integration
+
+Looking to integrate 0x Instant into your web application or site? Check out the dedicated [instant documentation](https://0xproject.com/wiki#Get-Started-With-Instant) to get started. The documentation covers instant and related topics in depth. For a more "drag and drop" experience, check out our [configurator tool](https://0xproject.com/instant#configure). For on demand developer support, join our [Discord](https://discordapp.com/invite/d3FTX3M).
+
 ## Installation
 
 The package is available as a UMD module named `zeroExInstant` at https://instant.0xproject.com/instant.js.
diff --git a/packages/instant/package.json b/packages/instant/package.json
index f1515065e..e3452e3b8 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -10,7 +10,7 @@
     "scripts": {
         "build": "webpack --mode production",
         "build:ci": "yarn build",
-        "dev": "webpack-dev-server --mode development",
+        "dev": "dotenv webpack-dev-server -- --mode development",
         "lint": "tslint --format stylish --project .",
         "test": "jest",
         "test:coverage": "jest --coverage",
@@ -24,10 +24,7 @@
     },
     "config": {
         "postpublish": {
-            "assets": [
-                "packages/instant/umd/instant.js",
-                "packages/instant/umd/instant.js.map"
-            ]
+            "assets": ["packages/instant/umd/instant.js", "packages/instant/umd/instant.js.map"]
         }
     },
     "repository": {
diff --git a/packages/instant/public/external.css b/packages/instant/public/external.css
index cab11112a..21278577e 100644
--- a/packages/instant/public/external.css
+++ b/packages/instant/public/external.css
@@ -15,6 +15,10 @@ input {
     height: 100px;
 }
 
+input::-webkit-input-placeholder {
+    color: #b4b4b4 !important;
+}
+
 div {
     padding: 3px;
 }
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index f7d5a4fe4..cb8a8c797 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -7,7 +7,6 @@ import { analytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 
 import { SearchInput } from './search_input';
-
 import { Circle } from './ui/circle';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
@@ -123,10 +122,20 @@ interface TokenSelectorRowIconProps {
     token: ERC20Asset;
 }
 
+const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
+    try {
+        return require(`../assets/icons/${symbol}.svg`) as React.StatelessComponent;
+    } catch (e) {
+        // Can't find icon
+        return undefined;
+    }
+};
+
 const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
     const { token } = props;
     const iconUrlIfExists = token.metaData.iconUrl;
-    const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
+
+    const TokenIcon = getTokenIcon(token.metaData.symbol);
     const displaySymbol = assetUtils.bestNameForAsset(token);
     if (!_.isUndefined(iconUrlIfExists)) {
         return <img src={iconUrlIfExists} />;
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 117f9dd5f..816cc5c33 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -61,12 +61,19 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     }
 
     private _renderAmountsSection(): React.ReactNode {
-        return (
-            <Container>
-                <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
-                <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
-            </Container>
-        );
+        if (
+            _.isUndefined(this.props.totalEthBaseUnitAmount) &&
+            this.props.quoteRequestState !== AsyncProcessState.Pending
+        ) {
+            return null;
+        } else {
+            return (
+                <Container>
+                    <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
+                    <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
+                </Container>
+            );
+        }
     }
 
     private _renderIcon(): React.ReactNode {
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 863c970ef..62c70f9e1 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -29,8 +29,8 @@ export const Input =
         outline: none;
         border: none;
         &::placeholder {
-            color: ${props => props.theme[props.fontColor || 'white']};
-            opacity: 0.5;
+            color: ${props => props.theme[props.fontColor || 'white']} !important;
+            opacity: 0.5 !important;
         }
     }
 `;
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index dae9124c6..204115fa9 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -1,6 +1,4 @@
-import { ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
-import { Provider } from 'ethereum-types';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
@@ -11,7 +9,7 @@ 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, QuoteFetchOrigin } from '../types';
+import { AccountState, Network, QuoteFetchOrigin, ZeroExInstantBaseConfig } from '../types';
 import { analytics, disableAnalytics } from '../util/analytics';
 import { assetUtils } from '../util/asset';
 import { errorFlasher } from '../util/error_flasher';
@@ -21,24 +19,7 @@ import { Heartbeater } from '../util/heartbeater';
 import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory';
 import { providerStateFactory } from '../util/provider_state_factory';
 
-export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
-    Partial<ZeroExInstantProviderOptionalProps>;
-
-export interface ZeroExInstantProviderRequiredProps {
-    orderSource: OrderSource;
-}
-
-export interface ZeroExInstantProviderOptionalProps {
-    provider: Provider;
-    walletDisplayName: string;
-    availableAssetDatas: string[];
-    defaultAssetBuyAmount: number;
-    defaultSelectedAssetData: string;
-    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
-    networkId: Network;
-    affiliateInfo: AffiliateInfo;
-    shouldDisableAnalyticsTracking: boolean;
-}
+export type ZeroExInstantProviderProps = ZeroExInstantBaseConfig;
 
 export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
     private readonly _store: Store;
@@ -57,10 +38,12 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             props.orderSource,
             networkId,
             props.provider,
+            props.walletDisplayName,
         );
         // merge the additional additionalAssetMetaDataMap with our default map
         const completeAssetMetaDataMap = {
-            ...props.additionalAssetMetaDataMap,
+            // Make sure the passed in assetDatas are lower case
+            ..._.mapKeys(props.additionalAssetMetaDataMap || {}, (value, key) => key.toLowerCase()),
             ...defaultState.assetMetaDataMap,
         };
         // construct the final state
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 506348092..f83eb4ac7 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -15,6 +15,7 @@ export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
 export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
 export const GIT_SHA = process.env.GIT_SHA;
+export const NODE_ENV = process.env.NODE_ENV;
 export const NPM_PACKAGE_VERSION = process.env.NPM_PACKAGE_VERSION;
 export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
 export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
@@ -28,14 +29,12 @@ export const HEAP_ENABLED = process.env.HEAP_ENABLED;
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
-export const HOST_DOMAINS = [
+export const HOST_DOMAINS_EXTERNAL = [
     '0x-instant-staging.s3-website-us-east-1.amazonaws.com',
     '0x-instant-dogfood.s3-website-us-east-1.amazonaws.com',
-    'localhost',
-    '127.0.0.1',
-    '0.0.0.0',
     'instant.0xproject.com',
 ];
+export const HOST_DOMAINS_LOCAL = ['localhost', '127.0.0.1', '0.0.0.0'];
 export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN;
 export const ROLLBAR_ENABLED = process.env.ROLLBAR_ENABLED;
 export const INSTANT_DISCHARGE_TARGET = process.env.INSTANT_DISCHARGE_TARGET as
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index bb68fdd57..f648f0b54 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -58,7 +58,7 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    walletDisplayName: connectedState.walletDisplayName || connectedState.providerState.name,
+    walletDisplayName: connectedState.providerState.displayName,
     onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
     onInstallWalletClick: () => {
         const isMobile = envUtil.isMobileOperatingSystem();
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 2d73ba29e..1c7490e63 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -102,6 +102,7 @@ export interface AffiliateInfo {
 
 export interface ProviderState {
     name: string;
+    displayName: string;
     provider: Provider;
     assetBuyer: AssetBuyer;
     web3Wrapper: Web3Wrapper;
@@ -177,3 +178,21 @@ export enum ProviderType {
     Cipher = 'CIPHER',
     Fallback = 'FALLBACK',
 }
+
+export interface ZeroExInstantRequiredBaseConfig {
+    orderSource: OrderSource;
+}
+
+export interface ZeroExInstantOptionalBaseConfig {
+    provider: Provider;
+    walletDisplayName: string;
+    availableAssetDatas: string[];
+    defaultAssetBuyAmount: number;
+    defaultSelectedAssetData: string;
+    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
+    networkId: Network;
+    affiliateInfo: AffiliateInfo;
+    shouldDisableAnalyticsTracking: boolean;
+}
+
+export type ZeroExInstantBaseConfig = ZeroExInstantRequiredBaseConfig & Partial<ZeroExInstantOptionalBaseConfig>;
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 6da37bedb..e6128f857 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -2,7 +2,7 @@ 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 { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NODE_ENV, NPM_PACKAGE_VERSION } from '../constants';
 import {
     AffiliateInfo,
     Asset,
@@ -106,6 +106,7 @@ export interface AnalyticsEventOptions {
     ethAddress?: string;
     networkId?: number;
     providerName?: string;
+    providerDisplayName?: string;
     gitSha?: string;
     npmVersion?: string;
     instantEnvironment?: string;
@@ -149,6 +150,7 @@ export const analytics = {
             embeddedUrl: window.location.href,
             networkId: network,
             providerName: providerState.name,
+            providerDisplayName: providerState.displayName,
             gitSha: GIT_SHA,
             npmVersion: NPM_PACKAGE_VERSION,
             orderSource: orderSourceName,
@@ -156,7 +158,7 @@ export const analytics = {
             affiliateFeePercent,
             selectedAssetName: selectedAsset ? selectedAsset.metaData.name : 'none',
             selectedAssetData: selectedAsset ? selectedAsset.assetData : 'none',
-            instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+            instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`,
         };
         return eventOptions;
     },
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index 08f3642e3..13f84ef74 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -26,7 +26,7 @@ export const assetUtils = {
             return;
         }
         return {
-            assetData,
+            assetData: assetData.toLowerCase(),
             metaData,
         };
     },
@@ -36,7 +36,7 @@ export const assetUtils = {
         network: Network,
     ): Asset => {
         return {
-            assetData,
+            assetData: assetData.toLowerCase(),
             metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network),
         };
     },
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index 4229f2735..6191c92e3 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -38,14 +38,11 @@ export const buyQuoteUpdater = {
         } catch (error) {
             const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error);
 
-            if (_.isUndefined(errorMessage)) {
-                // This is an unknown error, report it to rollbar
-                errorReporter.report(error);
-            }
+            errorReporter.report(error);
+            analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
 
             if (options.dispatchErrors) {
                 dispatch(actions.setQuoteRequestStateFailure());
-                analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin);
                 errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again');
             }
             return;
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index 4a32f9cb1..0fda0cc0e 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -62,4 +62,11 @@ export const envUtil = {
         }
         return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
     },
+    getProviderDisplayName(provider: Provider): string {
+        const providerTypeIfExists = envUtil.getProviderType(provider);
+        if (_.isUndefined(providerTypeIfExists)) {
+            return 'Wallet';
+        }
+        return PROVIDER_TYPE_TO_NAME[providerTypeIfExists];
+    },
 };
diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts
index b1824eaf9..8d7481684 100644
--- a/packages/instant/src/util/error_reporter.ts
+++ b/packages/instant/src/util/error_reporter.ts
@@ -1,17 +1,34 @@
 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 {
+    GIT_SHA,
+    HOST_DOMAINS_EXTERNAL,
+    HOST_DOMAINS_LOCAL,
+    INSTANT_DISCHARGE_TARGET,
+    NODE_ENV,
+    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');
 
+const getRollbarHostDomains = (): string[] => {
+    if (NODE_ENV === 'development') {
+        return HOST_DOMAINS_EXTERNAL.concat(HOST_DOMAINS_LOCAL);
+    } else {
+        return HOST_DOMAINS_EXTERNAL;
+    }
+};
+
 let rollbar: any;
 // Configures rollbar and sets up error catching
 export const setupRollbar = (): any => {
     if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENABLED) {
+        const hostDomains = getRollbarHostDomains();
         rollbar = new Rollbar({
             accessToken: ROLLBAR_CLIENT_TOKEN,
             captureUncaught: true,
@@ -20,7 +37,7 @@ export const setupRollbar = (): any => {
             itemsPerMinute: 10,
             maxItems: 500,
             payload: {
-                environment: INSTANT_DISCHARGE_TARGET || `Local ${process.env.NODE_ENV}`,
+                environment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`,
                 client: {
                     javascript: {
                         source_map_enabled: true,
@@ -29,7 +46,7 @@ export const setupRollbar = (): any => {
                     },
                 },
             },
-            hostWhiteList: HOST_DOMAINS,
+            hostWhiteList: hostDomains,
             uncaughtErrorLevel: 'error',
             ignoredMessages: [
                 // Errors from the third-party scripts
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 7c788dff2..bd2d6dad5 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -10,27 +10,40 @@ import { assetBuyerFactory } from './asset_buyer_factory';
 import { providerFactory } from './provider_factory';
 
 export const providerStateFactory = {
-    getInitialProviderState: (orderSource: OrderSource, network: Network, provider?: Provider): ProviderState => {
+    getInitialProviderState: (
+        orderSource: OrderSource,
+        network: Network,
+        provider?: Provider,
+        walletDisplayName?: string,
+    ): ProviderState => {
         if (!_.isUndefined(provider)) {
-            return providerStateFactory.getInitialProviderStateFromProvider(orderSource, network, provider);
+            return providerStateFactory.getInitialProviderStateFromProvider(
+                orderSource,
+                network,
+                provider,
+                walletDisplayName,
+            );
         }
         const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists(
             orderSource,
             network,
+            walletDisplayName,
         );
         if (providerStateFromWindowIfExits) {
             return providerStateFromWindowIfExits;
         } else {
-            return providerStateFactory.getInitialProviderStateFallback(orderSource, network);
+            return providerStateFactory.getInitialProviderStateFallback(orderSource, network, walletDisplayName);
         }
     },
     getInitialProviderStateFromProvider: (
         orderSource: OrderSource,
         network: Network,
         provider: Provider,
+        walletDisplayName?: string,
     ): ProviderState => {
         const providerState: ProviderState = {
             name: envUtil.getProviderName(provider),
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),
@@ -38,11 +51,16 @@ export const providerStateFactory = {
         };
         return providerState;
     },
-    getInitialProviderStateFromWindowIfExists: (orderSource: OrderSource, network: Network): Maybe<ProviderState> => {
+    getInitialProviderStateFromWindowIfExists: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): Maybe<ProviderState> => {
         const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists();
         if (!_.isUndefined(injectedProviderIfExists)) {
             const providerState: ProviderState = {
                 name: envUtil.getProviderName(injectedProviderIfExists),
+                displayName: walletDisplayName || envUtil.getProviderDisplayName(injectedProviderIfExists),
                 provider: injectedProviderIfExists,
                 web3Wrapper: new Web3Wrapper(injectedProviderIfExists),
                 assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network),
@@ -53,10 +71,15 @@ export const providerStateFactory = {
             return undefined;
         }
     },
-    getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
+    getInitialProviderStateFallback: (
+        orderSource: OrderSource,
+        network: Network,
+        walletDisplayName?: string,
+    ): ProviderState => {
         const provider = providerFactory.getFallbackNoSigningProvider(network);
         const providerState: ProviderState = {
             name: 'Fallback',
+            displayName: walletDisplayName || envUtil.getProviderDisplayName(provider),
             provider,
             web3Wrapper: new Web3Wrapper(provider),
             assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),