Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/website/instant-configurator

19 files changed, 70 insertions, 30 deletions

diff --git a/packages/instant/.DS_Store b/packages/instant/.DS_Store
new file mode 100644
index 000000000..9a0cceca6
--- /dev/null
+++ b/packages/instant/.DS_Store
diff --git a/packages/instant/.dogfood.discharge.json b/packages/instant/.dogfood.discharge.json
index 5d6a09a16..651b3daa6 100644
--- a/packages/instant/.dogfood.discharge.json
+++ b/packages/instant/.dogfood.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "0x-instant-dogfood",
-    "build_command": "WEBPACK_OUTPUT_PATH=public dotenv yarn build --env.discharge_target=dogfood",
+    "build_command": "WEBPACK_OUTPUT_PATH=public dotenv yarn build -- --env.discharge_target=dogfood",
     "upload_directory": "public",
     "index_key": "index.html",
     "error_key": "index.html",
diff --git a/packages/instant/.production.discharge.json b/packages/instant/.production.discharge.json
index 947f68b1a..1ce39fdd8 100644
--- a/packages/instant/.production.discharge.json
+++ b/packages/instant/.production.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "instant.0xproject.com",
-    "build_command": "dotenv yarn build --env.discharge_target=production",
+    "build_command": "dotenv yarn build -- --env.discharge_target=production",
     "upload_directory": "umd",
     "index_key": "instant.js",
     "error_key": "404.html",
diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json
index bd5f28ba8..844e3ca4e 100644
--- a/packages/instant/.staging.discharge.json
+++ b/packages/instant/.staging.discharge.json
@@ -1,6 +1,6 @@
 {
     "domain": "0x-instant-staging",
-    "build_command": "dotenv WEBPACK_OUTPUT_PATH=public yarn build --env.discharge_target=staging",
+    "build_command": "WEBPACK_OUTPUT_PATH=public dotenv yarn build -- --env.discharge_target=staging",
     "upload_directory": "public",
     "index_key": "index.html",
     "error_key": "index.html",
diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
index 6568de91b..a19f5a4d0 100644
--- a/packages/instant/src/components/buy_order_progress.tsx
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -21,7 +21,7 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
         const hasEnded = buyOrderState.processState !== OrderProcessState.Processing;
         const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
-            <Container padding="20px 20px 0px 20px" width="100%">
+            <Container width="100%" padding="20px 20px 0px 20px">
                 <Container marginBottom="5px">
                     <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
                 </Container>
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 808c6dc7f..117f9dd5f 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -32,7 +32,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
         return (
-            <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+            <Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
                 <Container marginBottom="5px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 5fc956e1c..a8e0e2513 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -34,7 +34,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                 ? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
                 : undefined;
         return (
-            <Container padding="20px" width="100%" flexGrow={1}>
+            <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
                 <Container marginBottom="10px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 4efe5b28e..7c93f1d1c 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%" height="133px">
+            <Container width="100%" height="120px" padding="20px 20px 0px 20px">
                 <Container marginBottom="12px">
                     <Flex justify="space-between">
                         <Text
@@ -88,10 +88,14 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                 return (
                     <WalletPrompt
                         onClick={this.props.onUnlockWalletClick}
-                        image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                        image={
+                            <Container position="relative" top="2px">
+                                <Icon width={13} icon="lock" color={ColorOption.black} />
+                            </Container>
+                        }
                         {...colors}
                     >
-                        Please Unlock {this.props.walletDisplayName}
+                        Click to Connect {this.props.walletDisplayName}
                     </WalletPrompt>
                 );
             case AccountState.None:
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 0861bbe05..86aca5a65 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { Maybe } from '../types';
 
+import { GIT_SHA, MAGIC_TRIGGER_ERROR_INPUT, MAGIC_TRIGGER_ERROR_MESSAGE, NPM_PACKAGE_VERSION } from '../constants';
 import { ColorOption } from '../style/theme';
 import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
@@ -71,6 +72,10 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         );
     }
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        if (event.target.value === MAGIC_TRIGGER_ERROR_INPUT) {
+            throw new Error(`${MAGIC_TRIGGER_ERROR_MESSAGE} git: ${GIT_SHA}, npm: ${NPM_PACKAGE_VERSION}`);
+        }
+
         const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "."
         this.setState({
             stringValue: sanitizedValue,
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 7d311dc2f..0b5eaf299 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -33,7 +33,7 @@ export const Overlay =
 
 Overlay.defaultProps = {
     zIndex: zIndex.overlayDefault,
-    backgroundColor: generateOverlayBlack(0.9),
+    backgroundColor: generateOverlayBlack(0.7),
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
index a0b3ae457..c07cfe7b5 100644
--- a/packages/instant/src/components/wallet_prompt.tsx
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -21,7 +21,7 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
     primaryColor,
 }) => (
     <Container
-        padding="14.5px"
+        padding="10px"
         border={`1px solid ${primaryColor}`}
         backgroundColor={secondaryColor}
         width="100%"
@@ -33,7 +33,7 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
         <Flex>
             {image}
             <Container marginLeft="10px">
-                <Text fontSize="16px" fontColor={primaryColor}>
+                <Text fontSize="16px" fontColor={primaryColor} fontWeight="500">
                     {children}
                 </Text>
             </Container>
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 8a809ee31..0337c7714 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -70,7 +70,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         marginTop="10px"
                         marginLeft="auto"
                         marginRight="auto"
-                        width="140px"
+                        width="108px"
                     >
                         <a href={ZERO_EX_SITE_URL} target="_blank">
                             <PoweredByLogo />
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index b3fb57dd6..96e560691 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,7 +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 { MAIN_CONTAINER_DIV_CLASS, OVERLAY_CLOSE_BUTTON_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
@@ -21,7 +21,13 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
         <ZeroExInstantProvider {...rest}>
             <Overlay zIndex={zIndex} className={OVERLAY_DIV_CLASS}>
                 <Flex height="100vh">
-                    <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
+                    <Container
+                        className={OVERLAY_CLOSE_BUTTON_DIV_CLASS}
+                        position="absolute"
+                        top="0px"
+                        right="0px"
+                        display={{ default: 'initial', sm: 'none' }}
+                    >
                         <Icon
                             height={18}
                             width={18}
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 2439c7349..506348092 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,15 +8,20 @@ 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 OVERLAY_CLOSE_BUTTON_DIV_CLASS = 'zeroExInstantOverlayCloseButton';
 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;
 export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
+export const GIT_SHA = process.env.GIT_SHA;
+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;
 export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
 export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
+export const MAGIC_TRIGGER_ERROR_INPUT = '0€';
+export const MAGIC_TRIGGER_ERROR_MESSAGE = 'Triggered error';
 export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
 export const HEAP_ANALYTICS_ID = process.env.HEAP_ANALYTICS_ID;
 export const HEAP_ENABLED = process.env.HEAP_ENABLED;
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index b92fa3a7c..d172f4145 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -2,7 +2,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants';
+import {
+    DEFAULT_ZERO_EX_CONTAINER_SELECTOR,
+    GIT_SHA as GIT_SHA_FROM_CONSTANT,
+    INJECTED_DIV_CLASS,
+    INJECTED_DIV_ID,
+    NPM_PACKAGE_VERSION,
+} from './constants';
 import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
 import { analytics } from './util/analytics';
 import { assert } from './util/assert';
@@ -117,5 +123,5 @@ export const render = (config: ZeroExInstantConfig, selector: string = DEFAULT_Z
 };
 
 // Write version info to the exported object for debugging
-export const GIT_SHA = process.env.GIT_SHA;
-export const NPM_VERSION = process.env.NPM_PACKAGE_VERSION;
+export const GIT_SHA = GIT_SHA_FROM_CONSTANT;
+export const NPM_VERSION = NPM_PACKAGE_VERSION;
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
index 47876ca2d..3f7a51707 100644
--- a/packages/instant/src/redux/analytics_middleware.ts
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -1,10 +1,11 @@
+import { AssetProxyId } from '@0x/types';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 import { Middleware } from 'redux';
 
 import { ETH_DECIMALS } from '../constants';
 import { AccountState, StandardSlidingPanelContent } from '../types';
-import { analytics } from '../util/analytics';
+import { analytics, AnalyticsEventOptions } from '../util/analytics';
 
 import { Action, ActionTypes } from './actions';
 
@@ -29,9 +30,11 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                 if (didJustTurnReady) {
                     analytics.trackAccountReady(ethAddress);
                     analytics.addUserProperties({ lastKnownEthAddress: ethAddress });
+                    analytics.addEventProperties({ ethAddress });
                 } else if (didJustUpdateAddress) {
                     analytics.trackAccountAddressChanged(ethAddress);
                     analytics.addUserProperties({ lastKnownEthAddress: ethAddress });
+                    analytics.addEventProperties({ ethAddress });
                 }
             }
             break;
@@ -51,7 +54,8 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                     curAccount.ethBalanceInWei,
                     ETH_DECIMALS,
                 ).toString();
-                analytics.addUserProperties({ ethBalanceInUnitAmount });
+                analytics.addUserProperties({ lastEthBalanceInUnitAmount: ethBalanceInUnitAmount });
+                analytics.addEventProperties({ ethBalanceInUnitAmount });
             }
             break;
         case ActionTypes.UPDATE_SELECTED_ASSET:
@@ -63,10 +67,16 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
                     assetName,
                     assetData,
                 });
-                analytics.addEventProperties({
+
+                const selectedAssetEventProperties: AnalyticsEventOptions = {
                     selectedAssetName: assetName,
                     selectedAssetData: assetData,
-                });
+                };
+                if (selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20) {
+                    selectedAssetEventProperties.selectedAssetDecimals = selectedAsset.metaData.decimals;
+                    selectedAssetEventProperties.selectedAssetSymbol = selectedAsset.metaData.symbol;
+                }
+                analytics.addEventProperties(selectedAssetEventProperties);
             }
             break;
         case ActionTypes.SET_AVAILABLE_ASSETS:
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 71e4b7052..fd3f03c3f 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -38,8 +38,8 @@ export const theme: Theme = {
     lightestGrey: '#EEEEEE',
     darkGrey: '#333333',
     white: 'white',
-    lightOrange: '#F9F2ED',
-    darkOrange: '#F2994C',
+    lightOrange: '#FFF8F2',
+    darkOrange: '#F7A24F',
     green: '#3CB34F',
     red: '#D00000',
     darkBlue: '#135df6',
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 760ec8b5c..6da37bedb 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 { HEAP_ENABLED, INSTANT_DISCHARGE_TARGET } from '../constants';
+import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NPM_PACKAGE_VERSION } from '../constants';
 import {
     AffiliateInfo,
     Asset,
@@ -97,11 +97,13 @@ const buyQuoteEventProperties = (buyQuote: BuyQuote) => {
 
 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;
@@ -112,7 +114,9 @@ export interface AnalyticsEventOptions {
     affiliateFeePercent?: number;
     numberAvailableAssets?: number;
     selectedAssetName?: string;
+    selectedAssetSymbol?: string;
     selectedAssetData?: string;
+    selectedAssetDecimals?: number;
 }
 export enum TokenSelectorClosedVia {
     ClickedX = 'Clicked X',
@@ -145,8 +149,8 @@ export const analytics = {
             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,
diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts
index 3ec7b6daa..b1824eaf9 100644
--- a/packages/instant/src/util/error_reporter.ts
+++ b/packages/instant/src/util/error_reporter.ts
@@ -1,7 +1,7 @@
 import { logUtils } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { HOST_DOMAINS, INSTANT_DISCHARGE_TARGET, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants';
+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
@@ -24,7 +24,7 @@ export const setupRollbar = (): any => {
                 client: {
                     javascript: {
                         source_map_enabled: true,
-                        code_version: process.env.GIT_SHA,
+                        code_version: GIT_SHA,
                         guess_uncaught_frames: true,
                     },
                 },