Merge branch 'development' into feature/instant/heap

36 files changed, 712 insertions, 124 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;
diff --git a/packages/website/public/css/basscss_responsive_custom.css b/packages/website/public/css/basscss_responsive_custom.css
index 92a681cb1..041abca6a 100644
--- a/packages/website/public/css/basscss_responsive_custom.css
+++ b/packages/website/public/css/basscss_responsive_custom.css
@@ -26,6 +26,9 @@
     .sm-right {
         float: right;
     }
+    .sm-left {
+        float: left;
+    }
     .sm-justify-end {
         ms-flex-pack: end;
         justify-content: flex-end;
@@ -58,6 +61,9 @@
     .md-right {
         float: right;
     }
+    .md-left {
+        float: left;
+    }
     .md-justify-end {
         ms-flex-pack: end;
         justify-content: flex-end;
@@ -90,6 +96,9 @@
     .lg-right {
         float: right;
     }
+    .lg-left {
+        float: left;
+    }
     .lg-justify-end {
         ms-flex-pack: end;
         justify-content: flex-end;
diff --git a/packages/website/public/images/launch_kit/0x_cupboard.svg b/packages/website/public/images/launch_kit/0x_cupboard.svg
new file mode 100644
index 000000000..4c4e6ba1b
--- /dev/null
+++ b/packages/website/public/images/launch_kit/0x_cupboard.svg
@@ -0,0 +1,53 @@
+<svg width="325" height="356" viewBox="0 0 325 356" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M74 108.5L149 85.5" stroke="white" stroke-width="3" stroke-dasharray="7 4"/>
+<path opacity="0.4" d="M32 90L107 67" stroke="white" stroke-width="3" stroke-dasharray="7 4"/>
+<path opacity="0.4" d="M71.5 161.5L122.5 146.5" stroke="white" stroke-width="3" stroke-dasharray="7 4"/>
+<path opacity="0.18" d="M235 352.304L320.3 311.604C321.4 311.104 322 310.004 322 308.804V80.5041C322 79.3041 321.3 78.204 320.2 77.604L160.8 3.30405C160.2 3.00405 159.5 2.90405 158.8 3.10405L58.8996 24.4041C56.5996 24.8041 59.4996 25.6041 61.5996 26.6041L233 107.904C234.3 108.504 235.8 108.604 237.2 108.104L322.1 78.5041" stroke="white" stroke-width="4.1573" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M55 98.6042V83.2042V28.4042C55 26.4042 56.8 25.0042 58.7 25.3042C58.9 25.4042 59.2 25.4042 59.5 25.5042L61.3 26.3042L160.1 73.1042L233 107.704L233.3 107.804C234.4 108.304 235.1 109.404 235.1 110.604V233.504V349.904C235.1 352.304 232.6 353.804 230.5 352.604L56.6 255.904C55.6 255.404 55 254.304 55 253.204V168.004V167.504" stroke="white" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M160 95.8042V73.3042" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M123.5 116.704L74 131.704" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.5 148L235 233.604" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55 253.204L73.2 246.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M235.999 257.304L212.499 245.804C211.499 245.304 210.399 245.204 209.399 245.504L181.199 254.004C179.399 254.504 178.199 256.204 178.199 258.104V305.004C178.199 306.504 178.999 308.004 180.399 308.704L215.899 328.504C216.999 329.104 218.299 329.204 219.499 328.804L236.099 322.504" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M217.699 328.504V274.104L237.599 267.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M178.199 254.904L217.699 274.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M191.6 301.405C195.7 306.505 200.8 309.405 204.8 308.705C205.9 308.505 206.9 308.105 207.7 307.405C207 305.905 206.3 304.305 205.5 302.705L204.9 301.405C204.1 302.405 202.9 303.005 201.4 302.905L199.2 299.205L191.6 301.405Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M186.899 278.805C185.899 280.205 185.399 282.005 185.199 284.205C184.999 287.205 185.699 290.705 187.199 294.205C187.899 295.905 188.799 297.505 189.799 299.005C190.799 298.805 191.799 298.505 192.799 298.205L193.599 297.905C192.299 296.205 191.199 294.205 190.599 292.205L192.699 290.905L186.899 278.805Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M204.299 283.404C200.199 278.304 195.099 275.404 191.099 276.104C189.999 276.304 188.999 276.704 188.199 277.404C188.899 278.904 189.599 280.504 190.399 282.104L190.999 283.404C191.799 282.404 192.999 281.804 194.499 281.904L196.499 285.404L204.299 283.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M208.999 306.104C211.299 302.704 211.199 296.804 208.699 290.804C207.999 289.104 207.099 287.504 206.099 286.004C205.099 286.204 204.099 286.504 203.099 286.804L202.299 287.104C203.599 288.804 204.699 290.804 205.299 292.804V292.904L203.199 294.204L208.999 306.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M197.5 249.004V237.604C197.5 236.004 196.6 234.504 195.1 233.804L159.8 216.504C158.8 216.004 157.7 215.904 156.7 216.204L128.5 224.704C126.7 225.204 125.5 226.904 125.5 228.804V275.704C125.5 277.204 126.3 278.704 127.7 279.404L163.2 299.204C164.3 299.804 165.6 299.904 166.8 299.504L178.2 295.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M165 299.204V244.804L196.5 235.004" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M125.5 225.604L165 244.804" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M138.9 272.204C143 277.304 148.1 280.204 152.1 279.504C153.2 279.304 154.2 278.904 155 278.204C154.3 276.704 153.6 275.104 152.8 273.504L152.2 272.204C151.4 273.204 150.2 273.804 148.7 273.704L146.5 270.004L138.9 272.204Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M134.2 249.504C133.2 250.904 132.7 252.704 132.5 254.904C132.3 257.904 133 261.404 134.5 264.904C135.2 266.604 136.1 268.204 137.1 269.704C138.1 269.504 139.1 269.204 140.1 268.904L140.9 268.604C139.6 266.904 138.5 264.904 137.9 262.904L140 261.604L134.2 249.504Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M151.6 254.104C147.5 249.004 142.4 246.104 138.4 246.804C137.3 247.004 136.3 247.404 135.5 248.104C136.2 249.604 136.9 251.204 137.7 252.804L138.3 254.104C139.1 253.104 140.3 252.504 141.8 252.604L143.8 256.104L151.6 254.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M156.3 276.804C158.6 273.404 158.5 267.504 156 261.504C155.3 259.804 154.4 258.204 153.4 256.704C152.4 256.904 151.4 257.204 150.4 257.504L149.6 257.804C150.9 259.504 152 261.504 152.6 263.504V263.604L150.5 264.904L156.3 276.804Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M146 220.504V208.304C146 206.704 145.1 205.204 143.6 204.504L108.3 187.204C107.3 186.704 106.2 186.604 105.2 186.904L77 195.404C75.2 195.904 74 197.604 74 199.504V246.404C74 247.904 74.8 249.404 76.2 250.104L111.7 269.904C112.8 270.504 114.1 270.604 115.3 270.204L125.8 266.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M113.5 270.004V215.504L145 205.704" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M74 196.404L113.5 215.504" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M87.3008 242.904C91.4008 248.004 96.5008 250.904 100.501 250.204C101.601 250.004 102.601 249.604 103.401 248.904C102.701 247.404 102.001 245.804 101.201 244.204L100.601 242.904C99.8008 243.904 98.6008 244.504 97.1008 244.404L94.9008 240.704L87.3008 242.904Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M82.7003 220.204C81.7003 221.604 81.2003 223.404 81.0003 225.604C80.8003 228.604 81.5003 232.104 83.0003 235.604C83.7003 237.304 84.6003 238.904 85.6003 240.404C86.6003 240.204 87.6003 239.904 88.6003 239.604L89.4003 239.304C88.1003 237.604 87.0003 235.604 86.4003 233.604L88.5003 232.304L82.7003 220.204Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M100.1 224.904C96 219.804 90.9 216.904 86.9 217.604C85.8 217.804 84.8 218.204 84 218.904C84.7 220.404 85.4 222.004 86.2 223.604L86.8 224.904C87.6 223.904 88.8 223.304 90.3 223.404L92.3 226.904L100.1 224.904Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M104.8 247.504C107.1 244.104 107 238.204 104.5 232.204C103.8 230.504 102.9 228.904 101.9 227.404C100.9 227.604 99.8996 227.904 98.8996 228.204L98.0996 228.504C99.3996 230.204 100.5 232.204 101.1 234.204V234.304L98.9996 235.604L104.8 247.504Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M234.999 133.504L211.499 122.004C210.499 121.504 209.399 121.404 208.399 121.704L180.199 130.204C178.399 130.704 177.199 132.404 177.199 134.304V181.204C177.199 182.704 177.999 184.204 179.399 184.904L214.899 204.704C215.999 205.304 217.299 205.404 218.499 205.004L235.099 198.704" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M216.699 204.804V150.304L234.999 144.604" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M177.199 131.204L216.699 150.304" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M190.6 177.704C194.7 182.804 199.8 185.704 203.8 185.004C204.9 184.804 205.9 184.404 206.7 183.704C206 182.204 205.3 180.604 204.5 179.004L203.9 177.704C203.1 178.704 201.9 179.304 200.4 179.204L198.2 175.504L190.6 177.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M185.899 155.004C184.899 156.404 184.399 158.204 184.199 160.404C183.999 163.404 184.699 166.904 186.199 170.404C186.899 172.104 187.799 173.704 188.799 175.204C189.799 175.004 190.799 174.704 191.799 174.404L192.599 174.104C191.299 172.404 190.199 170.404 189.599 168.404L191.699 167.104L185.899 155.004Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M203.299 159.704C199.199 154.604 194.099 151.704 190.099 152.404C188.999 152.604 187.999 153.004 187.199 153.704C187.899 155.204 188.599 156.804 189.399 158.404L189.999 159.704C190.799 158.704 191.999 158.104 193.499 158.204L195.499 161.704L203.299 159.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M207.999 182.304C210.299 178.904 210.199 173.004 207.699 167.004C206.999 165.304 206.099 163.704 205.099 162.204C204.099 162.404 203.099 162.704 202.099 163.004L201.299 163.304C202.599 165.004 203.699 167.004 204.299 169.004V169.104L202.199 170.404L207.999 182.304Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M195.5 125.704V115.904C195.5 114.304 194.6 112.804 193.1 112.104L157.8 94.8042C156.8 94.3042 155.7 94.2042 154.7 94.5042L126.5 103.004C124.7 103.504 123.5 105.204 123.5 107.104V154.004C123.5 155.504 124.3 157.004 125.7 157.704L161.2 177.504C162.3 178.104 163.6 178.204 164.8 177.804L177.2 173.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M163 177.504V123.104L194.5 113.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M123.5 103.904L163 123.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M136.9 150.405C141 155.505 146.1 158.405 150.1 157.705C151.2 157.505 152.2 157.105 153 156.405C152.3 154.905 151.6 153.305 150.8 151.705L150.2 150.405C149.4 151.405 148.2 152.005 146.7 151.905L144.5 148.205L136.9 150.405Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M132.2 127.705C131.2 129.105 130.7 130.905 130.5 133.105C130.3 136.105 131 139.605 132.5 143.105C133.2 144.805 134.1 146.405 135.1 147.905C136.1 147.705 137.1 147.405 138.1 147.105L138.9 146.805C137.6 145.105 136.5 143.105 135.9 141.105L138 139.805L132.2 127.705Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M149.6 132.404C145.5 127.304 140.4 124.404 136.4 125.104C135.3 125.304 134.3 125.704 133.5 126.404C134.2 127.904 134.9 129.504 135.7 131.104L136.3 132.404C137.1 131.404 138.3 130.804 139.8 130.904L141.8 134.404L149.6 132.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M154.3 155.004C156.6 151.604 156.5 145.704 154 139.704C153.3 138.004 152.4 136.404 151.4 134.904C150.4 135.104 149.4 135.404 148.4 135.704L147.6 136.004C148.9 137.704 150 139.704 150.6 141.704V141.804L148.5 143.104L154.3 155.004Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M43.3 172.504L71.2 161.904C72.9 161.304 74 159.704 74 157.904V110.504C74 108.904 73.1 107.404 71.6 106.704L36.3 89.4043C35.3 88.9043 34.2 88.8043 33.2 89.1043L5 97.7043C3.2 98.2043 2 99.9043 2 101.804V148.704C2 150.204 2.8 151.704 4.2 152.404L39.7 172.204C40.8 172.804 42.1 172.904 43.3 172.504Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M41.5 172.204V117.804L73 107.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M2 98.6045L41.5 117.804" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M15.3008 145.104C19.4008 150.204 24.5008 153.104 28.5008 152.404C29.6008 152.204 30.6008 151.804 31.4008 151.104C30.7008 149.604 30.0008 148.004 29.2008 146.404L28.6008 145.104C27.8008 146.104 26.6008 146.704 25.1008 146.604L22.9008 142.904L15.3008 145.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M10.7003 122.404C9.70027 123.804 9.20027 125.604 9.00027 127.804C8.80027 130.804 9.50027 134.304 11.0003 137.804C11.7003 139.504 12.6003 141.104 13.6003 142.604C14.6003 142.404 15.6003 142.104 16.6003 141.804L17.4003 141.504C16.1003 139.804 15.0003 137.804 14.4003 135.804L16.5003 134.504L10.7003 122.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M28.1 127.104C24 122.004 18.9 119.104 14.9 119.804C13.8 120.004 12.8 120.404 12 121.104C12.7 122.604 13.4 124.204 14.2 125.804L14.8 127.104C15.6 126.104 16.8 125.504 18.3 125.604L20.3 129.104L28.1 127.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M32.7996 149.704C35.0996 146.304 34.9996 140.404 32.4996 134.404C31.7996 132.704 30.8996 131.104 29.8996 129.604C28.8996 129.804 27.8996 130.104 26.8996 130.404L26.0996 130.704C27.3996 132.404 28.4996 134.404 29.0996 136.404V136.504L26.9996 137.804L32.7996 149.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/website/public/images/launch_kit/enable_trading.svg b/packages/website/public/images/launch_kit/enable_trading.svg
new file mode 100644
index 000000000..9fcb78c05
--- /dev/null
+++ b/packages/website/public/images/launch_kit/enable_trading.svg
@@ -0,0 +1,9 @@
+<svg width="62" height="67" viewBox="0 0 62 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle r="29" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="3"/>
+<circle cx="25.5" cy="16.5" r="12" stroke="white" stroke-width="3"/>
+<circle cx="9" cy="25" r="4.5" stroke="white" stroke-width="3"/>
+<circle cx="50" cy="31" r="7.5" stroke="white" stroke-width="3"/>
+<circle cx="19.5" cy="41.5" r="11" stroke="white" stroke-width="3"/>
+<rect x="40.5" y="12.5" width="9" height="10" stroke="white" stroke-width="3"/>
+<path d="M33.9032 56.2038L32.5823 33.8826L52.5734 43.8992L33.9032 56.2038Z" stroke="white" stroke-width="2.5"/>
+</svg>
diff --git a/packages/website/public/images/launch_kit/fork.svg b/packages/website/public/images/launch_kit/fork.svg
new file mode 100644
index 000000000..83d2f6d65
--- /dev/null
+++ b/packages/website/public/images/launch_kit/fork.svg
@@ -0,0 +1,4 @@
+<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle r="29" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="3"/>
+<path d="M31 58.5V46.5M31 1.5V24M31 46.5L42 38V3.5M31 46.5V24M31 24L19.5 16.5V3.5" stroke="white" stroke-width="3"/>
+</svg>
diff --git a/packages/website/public/images/launch_kit/in_game_marketplace.svg b/packages/website/public/images/launch_kit/in_game_marketplace.svg
new file mode 100644
index 000000000..77422a667
--- /dev/null
+++ b/packages/website/public/images/launch_kit/in_game_marketplace.svg
@@ -0,0 +1,15 @@
+<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31 60C47.0163 60 60 47.0163 60 31C60 14.9837 47.0163 2 31 2C14.9837 2 2 14.9837 2 31C2 47.0163 14.9837 60 31 60Z" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M48.3159 26.5213L31.1692 49.7925L14 26.5213L16.854 19.5693H31.1692H45.4618L48.3159 26.5213Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M31.0004 49.7925L24.0742 19.5693" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M31 49.7925L37.9261 19.5693" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M14 26.8101H48.001" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M18 20.5L8.5 12" stroke="white" stroke-width="3"/>
+<path d="M15.5 27L2.5 27" stroke="white" stroke-width="3"/>
+<path d="M44 20.5L53.5 12" stroke="white" stroke-width="3"/>
+<path d="M46.5 27L59.5 27" stroke="white" stroke-width="3"/>
+<path d="M40.9995 35.3153L55.5 46.5" stroke="white" stroke-width="3"/>
+<path d="M21.5005 35.3153L7 46.5" stroke="white" stroke-width="3"/>
+<path d="M26.8774 20.8714L22.5 4.5" stroke="white" stroke-width="3"/>
+<path d="M34.271 20.3714L38.6484 4" stroke="white" stroke-width="3"/>
+</svg>
diff --git a/packages/website/public/images/launch_kit/local_market.svg b/packages/website/public/images/launch_kit/local_market.svg
new file mode 100644
index 000000000..cf5af8bcb
--- /dev/null
+++ b/packages/website/public/images/launch_kit/local_market.svg
@@ -0,0 +1,12 @@
+<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:screen">
+<line x1="1" y1="32.5" x2="60" y2="32.5" stroke="white" stroke-width="3"/>
+<circle r="29" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="3"/>
+<mask id="path-3-inside-1" fill="white">
+<path d="M13 19.2842C13 9.73842 20.8063 2 30.4359 2H30.5641C40.1937 2 48 9.73842 48 19.2842C48 24.3185 46.0144 27.2967 44.7837 29.2892C39.8746 36.5685 33.9497 40.9315 30.5641 51H30.4359C27.0503 40.9315 21.1254 36.5685 16.2163 29.2892C14.9856 27.2967 13 24.3185 13 19.2842Z"/>
+</mask>
+<path d="M13 19.2842C13 9.73842 20.8063 2 30.4359 2H30.5641C40.1937 2 48 9.73842 48 19.2842C48 24.3185 46.0144 27.2967 44.7837 29.2892C39.8746 36.5685 33.9497 40.9315 30.5641 51H30.4359C27.0503 40.9315 21.1254 36.5685 16.2163 29.2892C14.9856 27.2967 13 24.3185 13 19.2842Z" fill="black"/>
+<path d="M13 19.2842L16 19.2843V19.2842H13ZM30.4359 51L27.5923 51.9562L28.2796 54H30.4359V51ZM16.2163 29.2892L13.664 30.8657L13.6955 30.9168L13.7291 30.9666L16.2163 29.2892ZM48 19.2842H45V19.2843L48 19.2842ZM30.5641 51V54H32.7204L33.4077 51.9562L30.5641 51ZM44.7837 29.2892L47.2709 30.9666L47.3045 30.9168L47.336 30.8657L44.7837 29.2892ZM30.4359 -1C19.1742 -1 10 8.05692 10 19.2842H16C16 11.4199 22.4384 5 30.4359 5V-1ZM33.2794 50.0438C31.4467 44.5934 28.9179 40.69 26.2714 37.2645C23.5142 33.6957 21.1115 31.1823 18.7036 27.6118L13.7291 30.9666C16.2303 34.6754 19.2445 37.9831 21.5234 40.9328C23.913 44.0258 26.0395 47.3381 27.5923 51.9562L33.2794 50.0438ZM18.7687 27.7127C17.5609 25.7573 16 23.408 16 19.2843L10 19.2842C9.99996 25.229 12.4103 28.8361 13.664 30.8657L18.7687 27.7127ZM30.5641 5C38.5616 5 45 11.4199 45 19.2842H51C51 8.05692 41.8258 -1 30.5641 -1V5ZM33.4077 51.9562C34.9605 47.3381 37.087 44.0258 39.4766 40.9328C41.7555 37.9831 44.7697 34.6754 47.2709 30.9666L42.2964 27.6118C39.8885 31.1823 37.4858 33.6957 34.7286 37.2645C32.0821 40.69 29.5533 44.5934 27.7206 50.0438L33.4077 51.9562ZM47.336 30.8657C48.5897 28.8361 51 25.229 51 19.2842L45 19.2843C45 23.408 43.4391 25.7573 42.2313 27.7127L47.336 30.8657ZM30.4359 5H30.5641V-1H30.4359V5ZM30.5641 48H30.4359V54H30.5641V48Z" fill="white" mask="url(#path-3-inside-1)"/>
+<path d="M36.5 17.9247C36.5 21.1271 33.8424 23.7747 30.5 23.7747C27.1576 23.7747 24.5 21.1271 24.5 17.9247C24.5 14.7223 27.1576 12.0747 30.5 12.0747C33.8424 12.0747 36.5 14.7223 36.5 17.9247Z" stroke="white" stroke-width="3"/>
+</g>
+</svg>
diff --git a/packages/website/public/images/launch_kit/secondary_market.svg b/packages/website/public/images/launch_kit/secondary_market.svg
new file mode 100644
index 000000000..f57152516
--- /dev/null
+++ b/packages/website/public/images/launch_kit/secondary_market.svg
@@ -0,0 +1,6 @@
+<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60 31C60 14.9837 47.0163 2 31 2C14.9837 2 2 14.9837 2 31C2 47.0163 14.9837 60 31 60C47.0163 60 60 47.0163 60 31Z" fill="#1B1B1B" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="bevel"/>
+<path d="M34.9134 41.2225C34.9134 33.4233 28.5909 27.1008 20.7917 27.1008C12.9924 27.1008 6.66992 33.4233 6.66992 41.2225C6.66992 49.0217 12.9924 55.3442 20.7917 55.3442C28.5909 55.3442 34.9134 49.0217 34.9134 41.2225Z" fill="#1B1B1B" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="bevel"/>
+<path d="M45.1361 30.9998C45.1361 23.2006 38.8135 16.8781 31.0143 16.8781C23.2151 16.8781 16.8926 23.2006 16.8926 30.9998C16.8926 38.7991 23.2151 45.1216 31.0143 45.1216C38.8135 45.1216 45.1361 38.7991 45.1361 30.9998Z" fill="#1B1B1B" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="bevel"/>
+<path d="M55.3587 20.7772C55.3587 12.978 49.0362 6.65544 41.237 6.65544C33.4378 6.65544 27.1152 12.978 27.1152 20.7772C27.1152 28.5764 33.4378 34.8989 41.237 34.8989C49.0362 34.8989 55.3587 28.5764 55.3587 20.7772Z" fill="#1B1B1B" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="bevel"/>
+</svg>
diff --git a/packages/website/public/images/launch_kit/shared_liquidity.svg b/packages/website/public/images/launch_kit/shared_liquidity.svg
new file mode 100644
index 000000000..abab3444c
--- /dev/null
+++ b/packages/website/public/images/launch_kit/shared_liquidity.svg
@@ -0,0 +1,20 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.4993 18.3314C60.2035 21.9755 62.0433 26.2995 62.7157 31M51.6681 12.5002C48.2838 9.98885 44.3133 8.22296 39.9993 7.44531M29.9993 7.44531C25.6853 8.22296 21.7147 9.98885 18.3305 12.5002M62.7157 39.0004C62.0343 43.7638 60.154 48.1404 57.3903 51.8148M51.8193 57.3872C48.4023 59.9585 44.3777 61.7658 39.9993 62.555M29.9993 62.555C25.6209 61.7658 21.5963 59.9585 18.1793 57.3872M12.6083 51.8148C9.84454 48.1404 7.96424 43.7638 7.28286 39.0004M7.25195 31.2224C7.83085 26.9301 9.38234 22.9462 11.6773 19.5" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M35 12C37.7614 12 40 9.76142 40 7C40 4.23858 37.7614 2 35 2C32.2386 2 30 4.23858 30 7C30 9.76142 32.2386 12 35 12Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M15 21C17.7614 21 20 18.7614 20 16C20 13.2386 17.7614 11 15 11C12.2386 11 10 13.2386 10 16C10 18.7614 12.2386 21 15 21Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M54 21C56.7614 21 59 18.7614 59 16C59 13.2386 56.7614 11 54 11C51.2386 11 49 13.2386 49 16C49 18.7614 51.2386 21 54 21Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M63 40C65.7614 40 68 37.7614 68 35C68 32.2386 65.7614 30 63 30C60.2386 30 58 32.2386 58 35C58 37.7614 60.2386 40 63 40Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M55 60C57.7614 60 60 57.7614 60 55C60 52.2386 57.7614 50 55 50C52.2386 50 50 52.2386 50 55C50 57.7614 52.2386 60 55 60Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M35 68C37.7614 68 40 65.7614 40 63C40 60.2386 37.7614 58 35 58C32.2386 58 30 60.2386 30 63C30 65.7614 32.2386 68 35 68Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M15 60C17.7614 60 20 57.7614 20 55C20 52.2386 17.7614 50 15 50C12.2386 50 10 52.2386 10 55C10 57.7614 12.2386 60 15 60Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M7 40C9.76142 40 12 37.7614 12 35C12 32.2386 9.76142 30 7 30C4.23858 30 2 32.2386 2 35C2 37.7614 4.23858 40 7 40Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M32.163 37.837C30.6123 36.2863 30.6123 33.7489 32.163 32.163C33.7137 30.6123 36.2511 30.6123 37.837 32.163C39.3877 33.7137 39.3877 36.2511 37.837 37.837C36.2511 39.3877 33.7137 39.3877 32.163 37.837Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M19.8722 37.1278C18.7093 35.9648 18.7093 34.0617 19.8722 32.8722C21.0352 31.7093 22.9383 31.7093 24.1278 32.8722C25.2907 34.0352 25.2907 35.9383 24.1278 37.1278C22.9383 38.2907 21.0352 38.2907 19.8722 37.1278Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M45.8722 37.1278C44.7093 35.9648 44.7093 34.0617 45.8722 32.8722C47.0352 31.7093 48.9383 31.7093 50.1278 32.8722C51.2907 34.0352 51.2907 35.9383 50.1278 37.1278C48.9383 38.2907 47.0352 38.2907 45.8722 37.1278Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M23 26C23 24.3274 24.354 23 26 23C27.6726 23 29 24.354 29 26C29 27.6726 27.646 29 26 29C24.3274 29 23 27.6726 23 26Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M41 44C41 42.3274 42.354 41 44 41C45.6726 41 47 42.354 47 44C47 45.6726 45.646 47 44 47C42.354 47 41 45.646 41 44Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M44.0002 23C45.6727 23 47 24.354 47 26C47 27.6726 45.6461 29 44.0002 29C42.3277 29 41.0004 27.646 41.0004 26C40.9738 24.3274 42.3277 23 44.0002 23Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M26 41C27.6726 41 29 42.354 29 44C29 45.6726 27.646 47 26 47C24.3274 47 23 45.646 23 44C23 42.354 24.3274 41 26 41Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M32.8891 18.8722C34.0483 17.7093 35.9451 17.7093 37.1306 18.8722C38.2898 20.0352 38.2898 21.9383 37.1306 23.1278C35.9715 24.2907 34.0746 24.2907 32.8891 23.1278C31.7036 21.9383 31.7036 20.0352 32.8891 18.8722Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M32.8891 45.8722C34.0483 44.7093 35.9451 44.7093 37.1306 45.8722C38.2898 47.0352 38.2898 48.9383 37.1306 50.1278C35.9715 51.2907 34.0746 51.2907 32.8891 50.1278C31.7036 48.9383 31.7036 47.0352 32.8891 45.8722Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json
index e3798a072..eb88b43d0 100644
--- a/packages/website/translations/chinese.json
+++ b/packages/website/translations/chinese.json
@@ -95,6 +95,19 @@
     "LIBRARIES_AND_TOOLS_DESCRIPTION":
         "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum",
     "MORE": "more",
+    "LAUNCH_KIT": "0x launch kit",
+    "LAUNCH_KIT_PITCH": "launch a relayer in under a minute.",
+    "GET_STARTED": "get started",
+    "GET_IN_TOUCH": "get in touch",
+    "EXPLORE_THE_DOCS": "explore the docs",
+    "LOCAL_MARKET": "Easily build a 0x relayer for your local market",
+    "SEEMLESSLY_CREATE": "Seamlessly create an in-game marketplace for digital items and collectables",
+    "QUICKLY_LAUNCH": "Quickly launch a market for your community token",
+    "ENABLE_TRADING": "Enable trading for any ERC-20 or ERC-721 asset",
+    "FORK_AND_EXTEND": "Fork and extend to support new modes of exchange",
+    "TAP_INTO_AND_SHARE": "Tap into and share liquidity with other relayers",
+    "PERFECT_FOR_DEVELOPERS": "Perfect for developers who need a simple drop-in marketplace",
+    "LEARN_MORE": "learn more",
     "START_BUILDING_ON_0X": "Start building on 0x",
     "START_BUILDING_ON_0X_DESCRIPTION":
         "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x."
diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index f91633492..5fba7a0ff 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -99,6 +99,19 @@
     "LIBRARIES_AND_TOOLS_DESCRIPTION":
         "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum",
     "MORE": "more",
+    "LAUNCH_KIT": "0x launch kit",
+    "LAUNCH_KIT_PITCH": "launch a relayer in under a minute.",
+    "GET_STARTED": "get started",
+    "GET_IN_TOUCH": "get in touch",
+    "EXPLORE_THE_DOCS": "explore the docs",
+    "LOCAL_MARKET": "Easily build a 0x relayer for your local market",
+    "SEEMLESSLY_CREATE": "Seamlessly create an in-game marketplace for digital items and collectables",
+    "QUICKLY_LAUNCH": "Quickly launch a market for your community token",
+    "ENABLE_TRADING": "Enable trading for any ERC-20 or ERC-721 asset",
+    "FORK_AND_EXTEND": "Fork and extend to support new modes of exchange",
+    "TAP_INTO_AND_SHARE": "Tap into and share liquidity with other relayers",
+    "PERFECT_FOR_DEVELOPERS": "Perfect for developers who need a simple drop-in marketplace",
+    "LEARN_MORE": "learn more",
     "OUR_MISSION_AND_VALUES": "our mission & values",
     "GAMING_AND_COLLECTABLES": "gaming & collectables",
     "GAMING_AND_COLLECTABLES_DESCRIPTION":
diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json
index ca8cbe3d0..e3ce74676 100644
--- a/packages/website/translations/korean.json
+++ b/packages/website/translations/korean.json
@@ -95,6 +95,19 @@
     "LIBRARIES_AND_TOOLS_DESCRIPTION":
         "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum",
     "MORE": "more",
+    "LAUNCH_KIT": "0x launch kit",
+    "LAUNCH_KIT_PITCH": "launch a relayer in under a minute.",
+    "GET_STARTED": "get started",
+    "GET_IN_TOUCH": "get in touch",
+    "EXPLORE_THE_DOCS": "explore the docs",
+    "LOCAL_MARKET": "Easily build a 0x relayer for your local market",
+    "SEEMLESSLY_CREATE": "Seamlessly create an in-game marketplace for digital items and collectables",
+    "QUICKLY_LAUNCH": "Quickly launch a market for your community token",
+    "ENABLE_TRADING": "Enable trading for any ERC-20 or ERC-721 asset",
+    "FORK_AND_EXTEND": "Fork and extend to support new modes of exchange",
+    "TAP_INTO_AND_SHARE": "Tap into and share liquidity with other relayers",
+    "PERFECT_FOR_DEVELOPERS": "Perfect for developers who need a simple drop-in marketplace",
+    "LEARN_MORE": "learn more",
     "START_BUILDING_ON_0X": "Start building on 0x",
     "START_BUILDING_ON_0X_DESCRIPTION":
         "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x."
diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json
index a43d1e7b7..c74fb5e32 100644
--- a/packages/website/translations/russian.json
+++ b/packages/website/translations/russian.json
@@ -95,6 +95,19 @@
     "LIBRARIES_AND_TOOLS_DESCRIPTION":
         "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum",
     "MORE": "more",
+    "LAUNCH_KIT": "0x launch kit",
+    "LAUNCH_KIT_PITCH": "launch a relayer in under a minute.",
+    "GET_STARTED": "get started",
+    "GET_IN_TOUCH": "get in touch",
+    "EXPLORE_THE_DOCS": "explore the docs",
+    "LOCAL_MARKET": "Easily build a 0x relayer for your local market",
+    "SEEMLESSLY_CREATE": "Seamlessly create an in-game marketplace for digital items and collectables",
+    "QUICKLY_LAUNCH": "Quickly launch a market for your community token",
+    "ENABLE_TRADING": "Enable trading for any ERC-20 or ERC-721 asset",
+    "FORK_AND_EXTEND": "Fork and extend to support new modes of exchange",
+    "TAP_INTO_AND_SHARE": "Tap into and share liquidity with other relayers",
+    "PERFECT_FOR_DEVELOPERS": "Perfect for developers who need a simple drop-in marketplace",
+    "LEARN_MORE": "learn more",
     "START_BUILDING_ON_0X": "Start building on 0x",
     "START_BUILDING_ON_0X_DESCRIPTION":
         "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x."
diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json
index 4d404ac6b..e29db711b 100644
--- a/packages/website/translations/spanish.json
+++ b/packages/website/translations/spanish.json
@@ -96,6 +96,19 @@
     "LIBRARIES_AND_TOOLS_DESCRIPTION":
         "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum",
     "MORE": "more",
+    "LAUNCH_KIT": "0x launch kit",
+    "LAUNCH_KIT_PITCH": "launch a relayer in under a minute.",
+    "GET_STARTED": "get started",
+    "GET_IN_TOUCH": "get in touch",
+    "EXPLORE_THE_DOCS": "explore the docs",
+    "LOCAL_MARKET": "Easily build a 0x relayer for your local market",
+    "SEEMLESSLY_CREATE": "Seamlessly create an in-game marketplace for digital items and collectables",
+    "QUICKLY_LAUNCH": "Quickly launch a market for your community token",
+    "ENABLE_TRADING": "Enable trading for any ERC-20 or ERC-721 asset",
+    "FORK_AND_EXTEND": "Fork and extend to support new modes of exchange",
+    "TAP_INTO_AND_SHARE": "Tap into and share liquidity with other relayers",
+    "PERFECT_FOR_DEVELOPERS": "Perfect for developers who need a simple drop-in marketplace",
+    "LEARN_MORE": "learn more",
     "START_BUILDING_ON_0X": "Start building on 0x",
     "START_BUILDING_ON_0X_DESCRIPTION":
         "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x."
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 25430c1c7..37f746f7c 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -591,7 +591,7 @@ export class Blockchain {
             }
         } else {
             const injectedWeb3IfExists = (window as any).web3;
-            if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) {
+            if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) {
                 injectedProviderIfExists = injectedWeb3IfExists.currentProvider;
             } else {
                 return undefined;
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index dfedcba55..e10005a0a 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -23,6 +23,7 @@ const languageToMenuTitle = {
 export interface FooterProps {
     translate: Translate;
     dispatcher: Dispatcher;
+    backgroundColor?: string;
 }
 
 interface FooterState {
@@ -30,6 +31,9 @@ interface FooterState {
 }
 
 export class Footer extends React.Component<FooterProps, FooterState> {
+    public static defaultProps = {
+        backgroundColor: colors.darkerGrey,
+    };
     constructor(props: FooterProps) {
         super(props);
         this.state = {
@@ -112,7 +116,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
         });
         return (
-            <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
                     <div className="col lg-col-4 md-col-4 col-12 left">
                         <div className="sm-mx-auto" style={{ width: 148 }}>
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index ece077563..7eab2a50f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,3 +1,4 @@
+import { TextAlignProperty } from 'csstype';
 import * as React from 'react';
 
 type StringOrNum = string | number;
@@ -26,6 +27,7 @@ export interface ContainerProps {
     height?: StringOrNum;
     minWidth?: StringOrNum;
     minHeight?: StringOrNum;
+    textAlign?: TextAlignProperty;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts
new file mode 100644
index 000000000..2557f38a5
--- /dev/null
+++ b/packages/website/ts/containers/launch_kit.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { LaunchKit as LaunchKitComponent, LaunchKitProps } from 'ts/pages/launch_kit/launch_kit';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, _ownProps: LaunchKitProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const LaunchKit: React.ComponentClass<LaunchKitProps> = connect(mapStateToProps, mapDispatchToProps)(
+    LaunchKitComponent,
+);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 21157e427..96e7184f8 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -9,6 +9,7 @@ import { DocsHome } from 'ts/containers/docs_home';
 import { FAQ } from 'ts/containers/faq';
 import { Jobs } from 'ts/containers/jobs';
 import { Landing } from 'ts/containers/landing';
+import { LaunchKit } from 'ts/containers/launch_kit';
 import { NotFound } from 'ts/containers/not_found';
 import { Wiki } from 'ts/containers/wiki';
 import { createLazyComponent } from 'ts/lazy_component';
@@ -87,6 +88,7 @@ render(
                             <Switch>
                                 <Route exact={true} path="/" component={Landing as any} />
                                 <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
+                                <Route path={WebsitePaths.LaunchKit} component={LaunchKit as any} />
                                 <Route path={WebsitePaths.Careers} component={Jobs as any} />
                                 <Route path={WebsitePaths.Portal} component={LazyPortal} />
                                 <Route path={WebsitePaths.FAQ} component={FAQ as any} />
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx
index 017573304..9faa930fc 100644
--- a/packages/website/ts/pages/documentation/docs_home.tsx
+++ b/packages/website/ts/pages/documentation/docs_home.tsx
@@ -67,6 +67,23 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = {
         },
         {
             description:
+                'Launch a 0x relayer in under a minute with Launch Kit. `0x-launch-kit` is an open-source, free-to-use 0x relayer template that you can use as a starting point for your own project.',
+            link: {
+                title: '0x launch kit',
+                to: 'https://github.com/0xProject/0x-launch-kit',
+                shouldOpenInNewTab: true,
+            },
+        },
+        {
+            description:
+                'Reference documentation for the 0x smart contracts. Helpful for dApp developer wanting to integrate 0x at the smart contract level.',
+            link: {
+                title: '0x smart contracts',
+                to: WebsitePaths.SmartContracts,
+            },
+        },
+        {
+            description:
                 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)',
             link: {
                 title: '@0x/connect',
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
new file mode 100644
index 000000000..4ea56dbd4
--- /dev/null
+++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx
@@ -0,0 +1,335 @@
+import { colors, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle from 'react-document-title';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar/top_bar';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+export interface LaunchKitProps {
+    location: Location;
+    translate: Translate;
+    dispatcher: Dispatcher;
+}
+
+interface LaunchKitState {
+    screenWidth: ScreenWidths;
+}
+
+const THROTTLE_TIMEOUT = 100;
+const lighterBackgroundColor = '#222222';
+const darkerBackgroundColor = '#1B1B1B';
+const grayText = '#999999';
+
+interface Benefit {
+    icon: string;
+    description: string;
+}
+
+export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> {
+    private readonly _throttledScreenWidthUpdate: () => void;
+    constructor(props: LaunchKitProps) {
+        super(props);
+        this.state = {
+            screenWidth: utils.getScreenWidth(),
+        };
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+    }
+    public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
+        window.scrollTo(0, 0);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+    }
+    public render(): React.ReactNode {
+        return (
+            <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}>
+                <DocumentTitle title="0x Launch Kit" />
+                <TopBar
+                    blockchainIsLoaded={false}
+                    location={this.props.location}
+                    isNightVersion={true}
+                    style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }}
+                    translate={this.props.translate}
+                />
+                {this._renderHero()}
+                {this._renderSection()}
+                {this._renderCallToAction()}
+                {this._renderDisclaimer()}
+                <Footer
+                    backgroundColor={darkerBackgroundColor}
+                    translate={this.props.translate}
+                    dispatcher={this.props.dispatcher}
+                />
+            </div>
+        );
+    }
+    private _renderHero(): React.ReactNode {
+        const BENEFITS_1: Benefit[] = [
+            {
+                icon: '/images/launch_kit/shared_liquidity.svg',
+                description: this.props.translate.get(Key.TapIntoAndShare, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/fork.svg',
+                description: this.props.translate.get(Key.ForkAndExtend, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/enable_trading.svg',
+                description: this.props.translate.get(Key.EnableTrading, Deco.Cap),
+            },
+        ];
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const smallButtonPadding = '12px 30px 12px 30px';
+        const largeButtonPadding = '14px 60px 14px 60px';
+        const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center';
+        const flexClassName = isSmallScreen
+            ? 'flex items-center flex-column justify-center'
+            : 'flex items-center justify-center';
+        return (
+            <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}>
+                <div className="mx-auto max-width-4 clearfix">
+                    <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}>
+                        <div className={left} style={{ color: colors.white }}>
+                            <div
+                                className="inline-block lg-align-middle md-align-middle sm-align-top"
+                                style={{
+                                    paddingLeft: isSmallScreen ? 0 : 12,
+                                    lineHeight: '36px',
+                                }}
+                            >
+                                <Text
+                                    className="sm-pb2"
+                                    fontFamily="Roboto"
+                                    display="inline-block"
+                                    fontColor={colors.white}
+                                    fontWeight="bold"
+                                    lineHeight="1.3em"
+                                    letterSpacing="1px"
+                                    fontSize={isSmallScreen ? '38px' : '46px'}
+                                >
+                                    {this.props.translate.get(Key.LaunchKit, Deco.CapWords)}
+                                </Text>
+                                <Container paddingTop="18px">
+                                    <Text fontColor={colors.linkSectionGrey} fontSize="18px">
+                                        {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)}
+                                    </Text>
+                                </Container>
+                                <Container
+                                    paddingTop="54px"
+                                    className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
+                                >
+                                    <Container paddingRight="20px">
+                                        <Link to={constants.URL_LAUNCH_KIT} shouldOpenInNewTab={true}>
+                                            <Button
+                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                                borderRadius="4px"
+                                                borderColor={colors.white}
+                                            >
+                                                <Text fontSize="16px" fontWeight="bold">
+                                                    {this.props.translate.get(Key.GetStarted, Deco.Cap)}
+                                                </Text>
+                                            </Button>
+                                        </Link>
+                                    </Container>
+                                    <div>
+                                        <Link to={constants.URL_LAUNCH_KIT_BLOG_POST} shouldOpenInNewTab={true}>
+                                            <Button
+                                                backgroundColor={lighterBackgroundColor}
+                                                borderColor={colors.white}
+                                                fontColor={colors.white}
+                                                padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                                borderRadius="4px"
+                                            >
+                                                <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
+                                                    {this.props.translate.get(Key.LearnMore, Deco.Cap)}
+                                                </Text>
+                                            </Button>
+                                        </Link>
+                                    </div>
+                                </Container>
+                            </div>
+                        </div>
+                        <Container
+                            marginTop={isSmallScreen ? '60px' : '30px'}
+                            marginBottom="30px"
+                            marginLeft="15px"
+                            marginRight="15px"
+                        >
+                            <Image
+                                src="/images/launch_kit/0x_cupboard.svg"
+                                maxWidth={isSmallScreen ? '75%' : '100%'}
+                                height="auto"
+                            />
+                        </Container>
+                    </div>
+                </div>
+                {this._renderBenefits(BENEFITS_1)}
+            </div>
+        );
+    }
+    private _renderSection(): React.ReactNode {
+        const BENEFITS_2: Benefit[] = [
+            {
+                icon: '/images/launch_kit/secondary_market.svg',
+                description: this.props.translate.get(Key.QuicklyLaunch, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/in_game_marketplace.svg',
+                description: this.props.translate.get(Key.SeemlesslyCreate, Deco.Cap),
+            },
+            {
+                icon: '/images/launch_kit/local_market.svg',
+                description: this.props.translate.get(Key.LocalMarket, Deco.Cap),
+            },
+        ];
+        return (
+            <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}>
+                <Container
+                    className="mx-auto"
+                    textAlign="center"
+                    paddingTop="89px"
+                    paddingBottom="89px"
+                    maxWidth="421px"
+                    paddingLeft="10px"
+                    paddingRight="10px"
+                >
+                    <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}>
+                        {this.props.translate.get(Key.PerfectForDevelopers, Deco.Cap)}
+                    </Text>
+                </Container>
+                {this._renderBenefits(BENEFITS_2)}
+            </div>
+        );
+    }
+    private _renderCallToAction(): React.ReactNode {
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const smallButtonPadding = '8px 14px 8px 14px';
+        const largeButtonPadding = '8px 14px 8px 14px';
+        return (
+            <Container
+                className="clearfix"
+                backgroundColor={lighterBackgroundColor}
+                paddingTop="90px"
+                paddingBottom="90px"
+            >
+                <Container className="clearfix mx-auto" maxWidth="850px">
+                    <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px">
+                        <Text fontColor={colors.white} fontSize="18px">
+                            View our comprehensive documentation to start building today.
+                        </Text>
+                    </Container>
+                    <Container
+                        className={`lg-right md-right flex clearfix sm-mx-auto ${
+                            isSmallScreen ? 'justify-center' : ''
+                        }`}
+                        paddingTop="5px"
+                    >
+                        <Container paddingRight="20px">
+                            <Link to={`${constants.URL_LAUNCH_KIT}/#table-of-contents`} shouldOpenInNewTab={true}>
+                                <Button
+                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                    borderRadius="4px"
+                                    backgroundColor={lighterBackgroundColor}
+                                    borderColor={colors.white}
+                                >
+                                    <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}>
+                                        {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)}
+                                    </Text>
+                                </Button>
+                            </Link>
+                        </Container>
+                        <div>
+                            <Link to={constants.URL_ZEROEX_CHAT} shouldOpenInNewTab={true}>
+                                <Button
+                                    padding={isSmallScreen ? smallButtonPadding : largeButtonPadding}
+                                    borderRadius="4px"
+                                >
+                                    <Text fontSize="16px" fontWeight="bold">
+                                        {this.props.translate.get(Key.GetInTouch, Deco.Cap)}
+                                    </Text>
+                                </Button>
+                            </Link>
+                        </div>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _renderBenefits(benefits: Benefit[]): React.ReactNode {
+        return (
+            <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px">
+                {_.map(benefits, benefit => {
+                    return (
+                        <Container className="mx-auto sm-pb4" width="240px">
+                            <Container textAlign="center">
+                                <img src={benefit.icon} />
+                            </Container>
+                            <Container paddingTop="26px">
+                                <Text
+                                    fontSize="18px"
+                                    lineHeight="28px"
+                                    textAlign="center"
+                                    fontColor={colors.linkSectionGrey}
+                                >
+                                    {benefit.description}
+                                </Text>
+                            </Container>
+                        </Container>
+                    );
+                })}
+            </Container>
+        );
+    }
+    private _renderDisclaimer(): React.ReactNode {
+        return (
+            <Container
+                className="clearfix"
+                backgroundColor={darkerBackgroundColor}
+                paddingTop="70px"
+                paddingBottom="70px"
+            >
+                <Container className="mx-auto" maxWidth="850px" paddingLeft="20px" paddingRight="20px">
+                    <Text fontColor={grayText} fontSize="10px">
+                        <b>Disclaimer:</b> The laws and regulations applicable to the use and exchange of digital assets
+                        and blockchain-native tokens, including through any software developed using the licensed work
+                        created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License,
+                        Version 2.0 applicable to the Work, developers are “solely responsible for determining the
+                        appropriateness of using or redistributing the Work,” which includes responsibility for ensuring
+                        compliance with any such applicable laws and regulations.
+                    </Text>
+                    <Container paddingTop="15px">
+                        <Text fontColor={grayText} fontSize="10px">
+                            See the{' '}
+                            <Link
+                                to={constants.URL_APACHE_LICENSE}
+                                shouldOpenInNewTab={true}
+                                textDecoration="underline"
+                            >
+                                Apache License, Version 2.0
+                            </Link>{' '}
+                            for the specific language governing all applicable permissions and limitations.
+                        </Text>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        if (newScreenWidth !== this.state.screenWidth) {
+            this.setState({
+                screenWidth: newScreenWidth,
+            });
+        }
+    }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index ce4b50a58..444a8348d 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -352,6 +352,7 @@ export enum WebsitePaths {
     Home = '/',
     FAQ = '/faq',
     About = '/about',
+    LaunchKit = '/launch-kit',
     Whitepaper = '/pdfs/0x_white_paper.pdf',
     SmartContracts = '/docs/contracts',
     Connect = '/docs/connect',
@@ -479,6 +480,19 @@ export enum Key {
     More = 'MORE',
     StartBuildOn0x = 'START_BUILDING_ON_0X',
     StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION',
+    LaunchKit = 'LAUNCH_KIT',
+    LaunchKitPitch = 'LAUNCH_KIT_PITCH',
+    ExploreTheDocs = 'EXPLORE_THE_DOCS',
+    EnableTrading = 'ENABLE_TRADING',
+    ForkAndExtend = 'FORK_AND_EXTEND',
+    LocalMarket = 'LOCAL_MARKET',
+    SeemlesslyCreate = 'SEEMLESSLY_CREATE',
+    QuicklyLaunch = 'QUICKLY_LAUNCH',
+    TapIntoAndShare = 'TAP_INTO_AND_SHARE',
+    PerfectForDevelopers = 'PERFECT_FOR_DEVELOPERS',
+    GetInTouch = 'GET_IN_TOUCH',
+    LearnMore = 'LEARN_MORE',
+    GetStarted = 'GET_STARTED',
 }
 
 export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 379f28022..e9afc8763 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -72,6 +72,7 @@ export const constants = {
     PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
     PROJECT_URL_IDT: 'https://kinalpha.com',
     URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
+    URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0',
     URL_BITLY_API: 'https://api-ssl.bitly.com',
     URL_BLOG: 'https://blog.0xproject.com/latest',
     URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
@@ -95,6 +96,8 @@ export const constants = {
     URL_TWITTER: 'https://twitter.com/0xproject',
     URL_WETH_IO: 'https://weth.io/',
     URL_ZEROEX_CHAT,
+    URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',
+    URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585',
     URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
     URL_WEB3_DECODED_LOG_ENTRY_EVENT:
         'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index ec265be93..33d5f648b 100644
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@@ -100,7 +100,6 @@ module.exports = (_env, argv) => {
             new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
             new webpack.DefinePlugin({
                 'process.env': {
-                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
                     GIT_SHA: JSON.stringify(GIT_SHA),
                 },
             }),