Merge branch 'development' into feature/instant/heap

13 files changed, 113 insertions, 121 deletions

diff --git a/packages/instant/package.json b/packages/instant/package.json
index 3ad043c2b..6caa3902b 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -52,9 +52,9 @@
         "@0x/subproviders": "^2.1.4",
         "@0x/types": "^1.2.1",
         "@0x/typescript-typings": "^3.0.4",
-        "bowser": "^2.0.0-beta.3",
         "@0x/utils": "^2.0.5",
         "@0x/web3-wrapper": "^3.1.4",
+        "bowser": "^1.9.4",
         "copy-to-clipboard": "^3.0.8",
         "ethereum-types": "^1.1.2",
         "lodash": "^4.17.10",
@@ -83,6 +83,7 @@
         "awesome-typescript-loader": "^5.2.1",
         "enzyme": "^3.6.0",
         "enzyme-adapter-react-16": "^1.5.0",
+        "ip": "^1.1.5",
         "jest": "^23.6.0",
         "make-promises-safe": "^1.1.0",
         "npm-run-all": "^4.1.2",
diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx
index f3c9ccdc2..845b96d73 100644
--- a/packages/instant/src/components/coinbase_wallet_logo.tsx
+++ b/packages/instant/src/components/coinbase_wallet_logo.tsx
@@ -5,22 +5,13 @@ export interface CoinbaseWalletLogoProps {
 }
 
 export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => (
-    <svg width={width} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M49.576172.545441h-2.9453v19.595c1.3398.4742 3.0058.8594 4.9101.8594 4.8809 0 7.7071-2.8458 7.7071-7.0846 0-4.20983-2.8555-6.64028-6.666-6.64028-1.1602 0-2.3809.32621-3.0059.65241V.545441zm-21.0176 1.18585c-.9824 0-1.8457.80039-1.8457 1.80802 0 1.03784.8633 1.8684 1.8457 1.8684.9824 0 1.8457-.83056 1.8457-1.8684 0-1.00763-.8633-1.80802-1.8457-1.80802zm-18.2324 16.30675c-.64258.251-1.32031.3832-2.05273.3832-2.56055 0-4.34766-1.6602-4.34766-4.2689 0-2.7568 1.8457-4.26886 4.22656-4.26886.70117 0 1.38086.11985 2.04102.38318.31836-.77942.74023-1.48746 1.25001-2.11145-1.09376-.58255-2.1797-.88037-3.55665-.88037-3.8711 0-6.93555 2.6377-6.93555 6.8775 0 4.2099 2.91602 6.8476 6.93555 6.8476 1.35156 0 2.58984-.2827 3.77345-.9166-.5371-.6008-.98634-1.2863-1.334-2.0453zm8.084-10.76317c3.957 0 6.8144 2.78684 6.8144 6.87757 0 4.0616-2.8574 6.8475-6.8144 6.8475-3.9278 0-6.7852-2.7859-6.7852-6.8475 0-4.09073 2.8574-6.87757 6.7852-6.87757zm-3.8125 6.87757c0-2.6677 1.6074-4.35792 3.8086-4.35792 2.2637 0 3.8398 1.69022 3.8398 4.35792 0 2.6388-1.5761 4.3279-3.8398 4.3279-2.2012 0-3.8086-1.6891-3.8086-4.3279zm12.5 6.5512h2.9453V7.571011h-2.9453v13.13263zm5.5176-12.302c1.8457-.71139 4.1074-1.1268 6.041-1.1268 3.3633 0 5.5058 1.27481 5.5058 4.9803v8.4486h-2.916v-8.1814c0-1.8973-1.1894-2.57984-2.8281-2.57984-1.041 0-2.082.14823-2.8555.38544v10.3758h-2.9472v-12.3021zm16.9609 9.8125c.5664.1771 1.3105.2661 2.0527.2661 2.709 0 4.6446-1.4819 4.6446-4.5059 0-2.5498-1.8164-4.06165-4.0489-4.06165-1.1601 0-2.0527.29712-2.6484.62332v7.67813zm15.6523-8.38946c1.459 0 2.5293.65127 2.5293 2.07426v1.0978h-1.457c-3.8105 0-6.1016 1.3039-6.1016 3.9715 0 2.965 2.5 4.0026 5.9239 4.0026 1.4863 0 3.2715-.2081 4.5215-.5343v-8.6858c0-3.29008-2.0528-4.4759-4.9395-4.4759-1.6367 0-3.125.41541-4.2851 1.06665v2.54985c1.1015-.62242 2.291-1.06666 3.8085-1.06666zm2.5313 5.12836h-1.25c-2.0527 0-3.3926.5922-3.3926 1.9263 0 1.3638 1.25 1.8972 3.0352 1.8972.4472 0 1.0722-.059 1.6074-.1482v-3.6753zm9.0449 3.6754c-1.3379 0-2.7949-.5634-4.0156-1.482v2.7868c.9824.6524 2.5293 1.0667 4.0762 1.0667 2.8574 0 4.9707-1.2449 4.9707-4.0015 0-2.3717-1.3086-3.4985-4.3164-4.1509-1.5176-.4143-2.0821-.8596-2.0821-1.719 0-.85965.6836-1.48209 1.9649-1.48209 1.3965 0 2.5293.5044 3.6894 1.33379v-2.69759c-1.1015-.68142-2.2929-1.00763-3.7793-1.00763-2.6797 0-4.7031 1.30365-4.7031 3.97242 0 2.2827 1.1621 3.3793 3.8984 4.0017 1.6973.4443 2.4707.8295 2.4707 1.8973 0 1.0376-.8632 1.482-2.1738 1.482zm9.0625-3.8236v.0591c.1778 2.3414 2.2012 3.6163 4.2559 3.6163 1.8144 0 3.125-.4152 4.4336-1.2749v2.5798c-1.1914.8295-2.9473 1.2147-4.6426 1.2147-4.1074 0-6.9043-2.6086-6.9043-6.7584 0-4.17964 2.7383-6.96648 6.3691-6.96648 3.8379 0 5.6543 2.46064 5.6543 6.04698v1.4829h-9.166zm3.4238-5.06921c1.9043 0 2.9161 1.12571 2.9747 3.17201h-6.3086c.3867-1.9862 1.6367-3.17201 3.3339-3.17201z"
-            fill="#1452F5"
-        />
+    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
         <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M105.543.479151c0-.264628.214523-.479151.479151-.479151s.479151.214523.479151.479151V27.0663c0 .2646-.214523.4792-.479151.4792s-.479151-.2146-.479151-.4792V.479151z"
-            fill="#AAB4C0"
-        />
-        <path
-            d="M123.76075 7.60523l-2.94965 11.86278-3.08272-11.86278H116.309l3.57063 13.12198h1.81859l2.83876-11.55353 2.83872 11.55353h1.8186l3.5707-13.12198h-1.3529l-3.1049 11.86278-2.92746-11.86278h-1.61899zM138.3712 15.16032h-1.0867c-2.9496 0-4.7017.99409-4.7017 2.89389 0 2.0324 1.7521 2.8497 4.3691 2.8497.8205 0 1.8629-.1104 2.75-.3534v-6.64937c0-2.16491-1.2641-3.02646-3.2158-3.02646-1.131 0-2.1734.30928-2.994.75109v1.25919c.8871-.46391 1.7299-.77319 2.8388-.77319 1.2419 0 2.0403.64064 2.0403 1.87773v1.17082zm0 4.50659c-.4657.0883-.9536.1325-1.3528.1325-1.7742 0-3.1049-.4639-3.1049-1.7452s1.4637-1.8114 3.4597-1.8114h.998v3.4241zM143.1294 5.70541h-1.3307v15.0218h1.3307V5.70541zM146.7177 5.70541h-1.3307v15.0218h1.3307V5.70541zM156.8928 15.97771v-.90575c0-2.73928-1.619-4.19728-4.0586-4.19728-2.5948 0-4.5908 2.14282-4.5908 5.03673 0 3.1369 2.1291 5.0367 4.9235 5.0367 1.1976 0 2.4396-.2872 3.3045-.9278v-1.3254c-.9758.729-1.9295 1.0824-3.3045 1.0824-1.8851 0-3.5928-1.3917-3.5928-3.7554v-.0442h7.3187zm-7.23-1.10457c.377-1.81146 1.5968-2.82764 3.1049-2.82764 1.619 0 2.7057.81737 2.7944 2.82764h-5.8993zM157.1456 12.22223h1.4859v6.00868c0 1.9882 1.0423 2.7172 2.4395 2.7172.8428 0 1.5081-.1988 2.0848-.486v-1.1708c-.6654.3314-1.1755.5302-1.7965.5302-.9092 0-1.3972-.486-1.3972-1.7231v-5.87618h2.7279v-1.12664h-2.7279V8.75395h-1.3306v2.34164h-1.4859v1.12664z"
-            fill="#202A36"
+            d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
+            fill="white"
         />
     </svg>
 );
@@ -30,19 +21,3 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo';
 CoinbaseWalletLogo.defaultProps = {
     width: 164,
 };
-
-export interface CoinbaseWalletAppLogoProps {
-    width?: number;
-}
-
-export const CoinbaseWalletAppLogo: React.StatelessComponent<CoinbaseWalletAppLogoProps> = ({ width }) => (
-    <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z"
-            fill="white"
-        />
-    </svg>
-);
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 5cba8d996..88c26f59c 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -1,19 +1,15 @@
 import * as React from 'react';
 
 import {
-    COINBASE_WALLET_ANDROID_APP_STORE_URL,
-    COINBASE_WALLET_IOS_APP_STORE_URL,
-    COINBASE_WALLET_SITE_URL,
     META_MASK_CHROME_STORE_URL,
     META_MASK_FIREFOX_STORE_URL,
     META_MASK_OPERA_STORE_URL,
     META_MASK_SITE_URL,
 } from '../constants';
 import { ColorOption } from '../style/theme';
-import { Browser, OperatingSystem } from '../types';
+import { Browser } from '../types';
 import { envUtil } from '../util/env';
 
-import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
 import { MetaMaskLogo } from './meta_mask_logo';
 import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content';
 import { Button } from './ui/button';
@@ -26,14 +22,6 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
         return <StandardPanelContent {...panelProps} />;
     }
     private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => {
-        const isMobileOS = envUtil.isMobileOperatingSystem();
-        if (isMobileOS) {
-            return this._getMobilePanelContentProps();
-        } else {
-            return this._getDesktopPanelContentProps();
-        }
-    };
-    private readonly _getDesktopPanelContentProps = (): StandardPanelContentProps => {
         const browser = envUtil.getBrowser();
         let description = 'Please install the MetaMask wallet browser extension.';
         let actionText = 'Learn More';
@@ -77,37 +65,4 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
             ),
         };
     };
-    private readonly _getMobilePanelContentProps = (): StandardPanelContentProps => {
-        const operatingSystem = envUtil.getOperatingSystem();
-        let description = 'Please install the Coinbase Wallet app.';
-        let actionText = 'Learn More';
-        let actionUrl = COINBASE_WALLET_SITE_URL;
-        switch (operatingSystem) {
-            case OperatingSystem.Android:
-                description = 'Please install the Coinbase Wallet app from the Google Play Store.';
-                actionText = 'Get Coinbase Wallet';
-                actionUrl = COINBASE_WALLET_ANDROID_APP_STORE_URL;
-                break;
-            case OperatingSystem.iOS:
-                description = 'Please install the Coinbase Wallet app from the iOS App Store.';
-                actionText = 'Get Coinbase Wallet';
-                actionUrl = COINBASE_WALLET_IOS_APP_STORE_URL;
-                break;
-            default:
-                break;
-        }
-        return {
-            image: <CoinbaseWalletLogo width={246} />,
-            description,
-            moreInfoSettings: {
-                href: COINBASE_WALLET_SITE_URL,
-                text: 'What is Coinbase Wallet?',
-            },
-            action: (
-                <Button href={actionUrl} width="100%" fontColor={ColorOption.white} backgroundColor={ColorOption.blue}>
-                    {actionText}
-                </Button>
-            ),
-        };
-    };
 }
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index f9d02ec5b..ebcd62f35 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme';
 import { Account, AccountState, Network } from '../types';
 import { envUtil } from '../util/env';
 
-import { CoinbaseWalletAppLogo } from './coinbase_wallet_logo';
+import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
 import { MetaMaskLogo } from './meta_mask_logo';
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
@@ -77,7 +77,10 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
     private readonly _renderMainContent = (): React.ReactNode => {
         const { account, network } = this.props;
         const isMobile = envUtil.isMobileOperatingSystem();
-        const logo = isMobile ? <CoinbaseWalletAppLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+        const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
+        const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange;
+        const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
+        const colors = { primaryColor, secondaryColor };
         switch (account.state) {
             case AccountState.Loading:
                 // Just take up the same amount of space as the other states.
@@ -87,13 +90,14 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                     <WalletPrompt
                         onClick={this.props.onUnlockWalletClick}
                         image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                        {...colors}
                     >
                         Please Unlock {this.props.walletName}
                     </WalletPrompt>
                 );
             case AccountState.None:
                 return (
-                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}>
+                    <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}>
                         {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
                     </WalletPrompt>
                 );
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
index bcf66ee81..a0b3ae457 100644
--- a/packages/instant/src/components/wallet_prompt.tsx
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -9,13 +9,21 @@ import { Text } from './ui/text';
 export interface WalletPromptProps {
     image: React.ReactNode;
     onClick?: () => void;
+    primaryColor: ColorOption;
+    secondaryColor: ColorOption;
 }
 
-export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
+export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
+    onClick,
+    image,
+    children,
+    secondaryColor,
+    primaryColor,
+}) => (
     <Container
         padding="14.5px"
-        border={`1px solid ${ColorOption.darkOrange}`}
-        backgroundColor={ColorOption.lightOrange}
+        border={`1px solid ${primaryColor}`}
+        backgroundColor={secondaryColor}
         width="100%"
         borderRadius="4px"
         onClick={onClick}
@@ -25,10 +33,15 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onCl
         <Flex>
             {image}
             <Container marginLeft="10px">
-                <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+                <Text fontSize="16px" fontColor={primaryColor}>
                     {children}
                 </Text>
             </Container>
         </Flex>
     </Container>
 );
+
+WalletPrompt.defaultProps = {
+    primaryColor: ColorOption.darkOrange,
+    secondaryColor: ColorOption.lightOrange,
+};
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index e85efb422..5fa64aa45 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -113,8 +113,9 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
             shouldPerformImmediatelyOnStart: false,
         });
         this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS);
+        // Trigger first buyquote fetch
         // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, true);
+        asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, { 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
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index 69c2ddf19..eacbadfca 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -3,10 +3,16 @@ import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
 import { PaymentMethod, PaymentMethodProps } from '../components/payment_method';
+import {
+    COINBASE_WALLET_ANDROID_APP_STORE_URL,
+    COINBASE_WALLET_IOS_APP_STORE_URL,
+    COINBASE_WALLET_SITE_URL,
+} from '../constants';
 import { Action, actions } from '../redux/actions';
 import { asyncData } from '../redux/async_data';
 import { State } from '../redux/reducer';
-import { Network, Omit, ProviderState, StandardSlidingPanelContent } from '../types';
+import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types';
+import { envUtil } from '../util/env';
 
 export interface ConnectedAccountPaymentMethodProps {}
 
@@ -16,7 +22,7 @@ interface ConnectedState {
 }
 
 interface ConnectedDispatch {
-    onInstallWalletClick: () => void;
+    openInstallWalletPanel: () => void;
     unlockWalletAndDispatchToStore: (providerState: ProviderState) => void;
 }
 
@@ -33,7 +39,7 @@ const mapDispatchToProps = (
     dispatch: Dispatch<Action>,
     ownProps: ConnectedAccountPaymentMethodProps,
 ): ConnectedDispatch => ({
-    onInstallWalletClick: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
+    openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)),
     unlockWalletAndDispatchToStore: async (providerState: ProviderState) =>
         asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true),
 });
@@ -46,10 +52,27 @@ const mergeProps = (
     ...ownProps,
     network: connectedState.network,
     account: connectedState.providerState.account,
-    onInstallWalletClick: connectedDispatch.onInstallWalletClick,
     walletName: connectedState.providerState.name,
-    onUnlockWalletClick: () => {
-        connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState);
+    onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
+    onInstallWalletClick: () => {
+        const isMobile = envUtil.isMobileOperatingSystem();
+        if (!isMobile) {
+            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;
+        }
+        window.open(url, '_blank');
     },
 });
 
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 8b0070228..2c2661e1a 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -81,7 +81,11 @@ 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, true, affiliateInfo);
+            debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, {
+                setPending: true,
+                dispatchErrors: true,
+                affiliateInfo,
+            });
         }
     },
 });
diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts
index a1952e429..5d30388b8 100644
--- a/packages/instant/src/redux/async_data.ts
+++ b/packages/instant/src/redux/async_data.ts
@@ -82,7 +82,7 @@ export const asyncData = {
     fetchCurrentBuyQuoteAndDispatchToStore: async (
         state: State,
         dispatch: Dispatch,
-        shouldSetPending: boolean = false,
+        options: { updateSilently: boolean },
     ) => {
         const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state;
         const assetBuyer = providerState.assetBuyer;
@@ -97,8 +97,7 @@ export const asyncData = {
                 dispatch,
                 selectedAsset as ERC20Asset,
                 selectedAssetUnitAmount,
-                shouldSetPending,
-                affiliateInfo,
+                { setPending: !options.updateSilently, dispatchErrors: !options.updateSilently, affiliateInfo },
             );
         }
     },
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 489f11dc3..a0751286b 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -17,7 +17,8 @@ export enum ColorOption {
     darkOrange = 'darkOrange',
     green = 'green',
     red = 'red',
-    blue = 'blue',
+    darkBlue = 'darkBlue',
+    lightBlue = 'lightBlue',
 }
 
 export const theme: Theme = {
@@ -33,7 +34,8 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
     green: '#3CB34F',
     red: '#D00000',
-    blue: '#135df6',
+    darkBlue: '#135df6',
+    lightBlue: '#F2F7FF',
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index fcdded0a9..2fd16d781 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -16,39 +16,42 @@ export const buyQuoteUpdater = {
         dispatch: Dispatch<Action>,
         asset: ERC20Asset,
         assetUnitAmount: BigNumber,
-        setPending = true,
-        affiliateInfo?: AffiliateInfo,
+        options: { setPending: boolean; dispatchErrors: boolean; affiliateInfo?: AffiliateInfo },
     ): Promise<void> => {
         // get a new buy quote.
         const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals);
-        if (setPending) {
+        if (options.setPending) {
             // mark quote as pending
             dispatch(actions.setQuoteRequestStatePending());
         }
-        const feePercentage = oc(affiliateInfo).feePercentage();
+        const feePercentage = oc(options.affiliateInfo).feePercentage();
         let newBuyQuote: BuyQuote | undefined;
         try {
             newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
         } catch (error) {
-            dispatch(actions.setQuoteRequestStateFailure());
-            let errorMessage;
-            if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
-                const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
-                errorMessage = `Not enough ${assetName} available`;
-            } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
-                errorMessage = 'Not enough ZRX available';
-            } else if (
-                error.message === AssetBuyerError.StandardRelayerApiError ||
-                error.message.startsWith(AssetBuyerError.AssetUnavailable)
-            ) {
-                const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
-                errorMessage = `${assetName} is currently unavailable`;
-            }
-            if (!_.isUndefined(errorMessage)) {
-                errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
-            } else {
-                throw error;
+            if (options.dispatchErrors) {
+                dispatch(actions.setQuoteRequestStateFailure());
+                let errorMessage;
+                if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
+                    const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+                    errorMessage = `Not enough ${assetName} available`;
+                } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
+                    errorMessage = 'Not enough ZRX available';
+                } else if (
+                    error.message === AssetBuyerError.StandardRelayerApiError ||
+                    error.message.startsWith(AssetBuyerError.AssetUnavailable)
+                ) {
+                    const assetName = assetUtils.bestNameForAsset(asset, 'This asset');
+                    errorMessage = `${assetName} is currently unavailable`;
+                }
+                if (!_.isUndefined(errorMessage)) {
+                    errorFlasher.flashNewErrorMessage(dispatch, errorMessage);
+                } else {
+                    throw error;
+                }
             }
+            // TODO: report to error reporter on else
+
             return;
         }
         // We have a successful new buy quote
diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts
index 06fcdb8bb..2b852fb0d 100644
--- a/packages/instant/src/util/heartbeater_factory.ts
+++ b/packages/instant/src/util/heartbeater_factory.ts
@@ -17,6 +17,8 @@ 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, false);
+        await asyncData.fetchCurrentBuyQuoteAndDispatchToStore(store.getState(), store.dispatch, {
+            updateSilently: true,
+        });
     }, shouldPerformImmediatelyOnStart);
 };
diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js
index 43c149b3e..ccbbe7359 100644
--- a/packages/instant/webpack.config.js
+++ b/packages/instant/webpack.config.js
@@ -9,8 +9,8 @@ const GIT_SHA = childProcess
     .execSync('git rev-parse HEAD')
     .toString()
     .trim();
-
-module.exports = {
+const ip = require('ip');
+const config = {
     entry: './src/index.umd.ts',
     output: {
         filename: '[name].bundle.js',
@@ -43,5 +43,15 @@ module.exports = {
     devServer: {
         contentBase: path.join(__dirname, 'public'),
         port: 5000,
+        host: '0.0.0.0',
+        after: () => {
+            if (config.devServer.host === '0.0.0.0') {
+                console.log(
+                    `webpack-dev-server can be accessed externally at: http://${ip.address()}:${config.devServer.port}`,
+                );
+            }
+        },
     },
 };
+
+module.exports = config;