Merge branch 'development' into feature/instant/simulated-progress-bar

20 files changed, 426 insertions, 147 deletions

diff --git a/packages/asset-buyer/CHANGELOG.json b/packages/asset-buyer/CHANGELOG.json
index ce4effa7e..6ba2a0fd9 100644
--- a/packages/asset-buyer/CHANGELOG.json
+++ b/packages/asset-buyer/CHANGELOG.json
@@ -7,6 +7,11 @@
                 "pr": 1187
             },
             {
+                "note":
+                    "the `OrderProvider` now requires a new method `getAvailableMakerAssetDatasAsync` and the `StandardRelayerAPIOrderProvider` requires the network id at init.",
+                "pr": 1203
+            },
+            {
                 "note": "No longer require that provided orders all have the same maker and taker asset data",
                 "pr": 1197
             }
diff --git a/packages/asset-buyer/src/asset_buyer.ts b/packages/asset-buyer/src/asset_buyer.ts
index ed52f2d9d..49743404f 100644
--- a/packages/asset-buyer/src/asset_buyer.ts
+++ b/packages/asset-buyer/src/asset_buyer.ts
@@ -76,7 +76,8 @@ export class AssetBuyer {
     ): AssetBuyer {
         assert.isWeb3Provider('provider', provider);
         assert.isWebUri('sraApiUrl', sraApiUrl);
-        const orderProvider = new StandardRelayerAPIOrderProvider(sraApiUrl);
+        const networkId = options.networkId || constants.DEFAULT_ASSET_BUYER_OPTS.networkId;
+        const orderProvider = new StandardRelayerAPIOrderProvider(sraApiUrl, networkId);
         const assetBuyer = new AssetBuyer(provider, orderProvider, options);
         return assetBuyer;
     }
@@ -240,6 +241,15 @@ export class AssetBuyer {
         }
     }
     /**
+     * Get the asset data of all assets that are purchaseable with ether token (wETH) in the order provider passed in at init.
+     *
+     * @return  An array of asset data strings that can be purchased using wETH.
+     */
+    public async getAvailableAssetDatasAsync(): Promise<string[]> {
+        const etherTokenAssetData = this._getEtherTokenAssetDataOrThrow();
+        return this.orderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData);
+    }
+    /**
      * Grab orders from the map, if there is a miss or it is time to refresh, fetch and process the orders
      */
     private async _getOrdersAndFillableAmountsAsync(
diff --git a/packages/asset-buyer/src/constants.ts b/packages/asset-buyer/src/constants.ts
index c912253bd..cc415102c 100644
--- a/packages/asset-buyer/src/constants.ts
+++ b/packages/asset-buyer/src/constants.ts
@@ -36,6 +36,5 @@ export const constants = {
     DEFAULT_ASSET_BUYER_OPTS,
     DEFAULT_BUY_QUOTE_EXECUTION_OPTS,
     DEFAULT_BUY_QUOTE_REQUEST_OPTS,
-    MAX_PER_PAGE: 10000,
     EMPTY_ORDERS_AND_FILLABLE_AMOUNTS,
 };
diff --git a/packages/asset-buyer/src/order_providers/basic_order_provider.ts b/packages/asset-buyer/src/order_providers/basic_order_provider.ts
index 68406f19b..76685f27a 100644
--- a/packages/asset-buyer/src/order_providers/basic_order_provider.ts
+++ b/packages/asset-buyer/src/order_providers/basic_order_provider.ts
@@ -29,4 +29,13 @@ export class BasicOrderProvider implements OrderProvider {
         });
         return { orders };
     }
+    /**
+     * Given a taker asset data string, return all availabled paired maker asset data strings.
+     * @param   takerAssetData   A string representing the taker asset data.
+     * @return  An array of asset data strings that can be purchased using takerAssetData.
+     */
+    public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise<string[]> {
+        const ordersWithTakerAssetData = _.filter(this.orders, { takerAssetData });
+        return _.map(ordersWithTakerAssetData, order => order.makerAssetData);
+    }
 }
diff --git a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
index 41fd1fb30..be1fc55d6 100644
--- a/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
+++ b/packages/asset-buyer/src/order_providers/standard_relayer_api_order_provider.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@0x/connect';
-import { APIOrder, OrderbookResponse } from '@0x/types';
+import { APIOrder, AssetPairsResponse, OrderbookResponse } from '@0x/types';
 import * as _ from 'lodash';
 
 import {
@@ -14,6 +14,7 @@ import { orderUtils } from '../utils/order_utils';
 
 export class StandardRelayerAPIOrderProvider implements OrderProvider {
     public readonly apiUrl: string;
+    public readonly networkId: number;
     private readonly _sraClient: HttpClient;
     /**
      * Given an array of APIOrder objects from a standard relayer api, return an array
@@ -44,12 +45,15 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
     }
     /**
      * Instantiates a new StandardRelayerAPIOrderProvider instance
-     * @param   apiUrl  The standard relayer API base HTTP url you would like to source orders from.
+     * @param   apiUrl      The standard relayer API base HTTP url you would like to source orders from.
+     * @param   networkId   The ethereum network id.
      * @return  An instance of StandardRelayerAPIOrderProvider
      */
-    constructor(apiUrl: string) {
+    constructor(apiUrl: string, networkId: number) {
         assert.isWebUri('apiUrl', apiUrl);
+        assert.isNumber('networkId', networkId);
         this.apiUrl = apiUrl;
+        this.networkId = networkId;
         this._sraClient = new HttpClient(apiUrl);
     }
     /**
@@ -59,9 +63,9 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
      */
     public async getOrdersAsync(orderProviderRequest: OrderProviderRequest): Promise<OrderProviderResponse> {
         assert.isValidOrderProviderRequest('orderProviderRequest', orderProviderRequest);
-        const { makerAssetData, takerAssetData, networkId } = orderProviderRequest;
+        const { makerAssetData, takerAssetData } = orderProviderRequest;
         const orderbookRequest = { baseAssetData: makerAssetData, quoteAssetData: takerAssetData };
-        const requestOpts = { networkId };
+        const requestOpts = { networkId: this.networkId };
         let orderbook: OrderbookResponse;
         try {
             orderbook = await this._sraClient.getOrderbookAsync(orderbookRequest, requestOpts);
@@ -76,4 +80,26 @@ export class StandardRelayerAPIOrderProvider implements OrderProvider {
             orders,
         };
     }
+    /**
+     * Given a taker asset data string, return all availabled paired maker asset data strings.
+     * @param   takerAssetData   A string representing the taker asset data.
+     * @return  An array of asset data strings that can be purchased using takerAssetData.
+     */
+    public async getAvailableMakerAssetDatasAsync(takerAssetData: string): Promise<string[]> {
+        // Return a maximum of 1000 asset datas
+        const maxPerPage = 1000;
+        const requestOpts = { networkId: this.networkId, perPage: maxPerPage };
+        const assetPairsRequest = { assetDataA: takerAssetData };
+        const fullRequest = {
+            ...requestOpts,
+            ...assetPairsRequest,
+        };
+        let response: AssetPairsResponse;
+        try {
+            response = await this._sraClient.getAssetPairsAsync(fullRequest);
+        } catch (err) {
+            throw new Error(AssetBuyerError.StandardRelayerApiError);
+        }
+        return _.map(response.records, item => item.assetDataB.assetData);
+    }
 }
diff --git a/packages/asset-buyer/src/types.ts b/packages/asset-buyer/src/types.ts
index f15e7e934..3f1e6ff21 100644
--- a/packages/asset-buyer/src/types.ts
+++ b/packages/asset-buyer/src/types.ts
@@ -9,7 +9,6 @@ import { BigNumber } from '@0x/utils';
 export interface OrderProviderRequest {
     makerAssetData: string;
     takerAssetData: string;
-    networkId: number;
 }
 
 /**
@@ -27,10 +26,12 @@ export interface SignedOrderWithRemainingFillableMakerAssetAmount extends Signed
     remainingFillableMakerAssetAmount?: BigNumber;
 }
 /**
- * Given an OrderProviderRequest, get an OrderProviderResponse.
+ * gerOrdersAsync: Given an OrderProviderRequest, get an OrderProviderResponse.
+ * getAvailableMakerAssetDatasAsync: Given a taker asset data string, return all availabled paired maker asset data strings.
  */
 export interface OrderProvider {
     getOrdersAsync: (orderProviderRequest: OrderProviderRequest) => Promise<OrderProviderResponse>;
+    getAvailableMakerAssetDatasAsync: (takerAssetData: string) => Promise<string[]>;
 }
 
 /**
diff --git a/packages/asset-buyer/src/utils/assert.ts b/packages/asset-buyer/src/utils/assert.ts
index 0f39fb4a5..2466f53a4 100644
--- a/packages/asset-buyer/src/utils/assert.ts
+++ b/packages/asset-buyer/src/utils/assert.ts
@@ -28,7 +28,6 @@ export const assert = {
     isValidOrderProviderRequest(variableName: string, orderFetcherRequest: OrderProviderRequest): void {
         sharedAssert.isHexString(`${variableName}.makerAssetData`, orderFetcherRequest.makerAssetData);
         sharedAssert.isHexString(`${variableName}.takerAssetData`, orderFetcherRequest.takerAssetData);
-        sharedAssert.isNumber(`${variableName}.networkId`, orderFetcherRequest.networkId);
     },
     isValidPercentage(variableName: string, percentage: number): void {
         assert.isNumber(variableName, percentage);
diff --git a/packages/instant/public/index.html b/packages/instant/public/index.html
index 62532dad9..7580ab132 100644
--- a/packages/instant/public/index.html
+++ b/packages/instant/public/index.html
@@ -74,6 +74,7 @@
         const renderOptionsDefaults = {
             liquiditySource: 'https://api.radarrelay.com/0x/v2/',
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
+            onClose: () => { console.log('0x Instant Closed') }
         }
         const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
         const renderOptionsOverrides = {
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx
index 61b382760..f12059cff 100644
--- a/packages/instant/src/components/ui/icon.tsx
+++ b/packages/instant/src/components/ui/icon.tsx
@@ -1,5 +1,8 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
+import { styled } from '../../style/theme';
+
 type svgRule = 'evenodd' | 'nonzero' | 'inherit';
 interface IconInfo {
     viewBox: string;
@@ -13,11 +16,19 @@ interface IconInfo {
     strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
 }
 interface IconInfoMapping {
+    closeX: IconInfo;
     failed: IconInfo;
     success: IconInfo;
     chevron: IconInfo;
 }
 const ICONS: IconInfoMapping = {
+    closeX: {
+        viewBox: '0 0 11 11',
+        fillRule: 'evenodd',
+        clipRule: 'evenodd',
+        path:
+            'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z',
+    },
     failed: {
         viewBox: '0 0 34 34',
         fillRule: 'evenodd',
@@ -44,33 +55,57 @@ const ICONS: IconInfoMapping = {
 };
 
 export interface IconProps {
+    className?: string;
     width: number;
     height?: number;
     color?: string;
     icon: keyof IconInfoMapping;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    padding?: string;
 }
-export const Icon: React.SFC<IconProps> = props => {
+const PlainIcon: React.SFC<IconProps> = props => {
     const iconInfo = ICONS[props.icon];
-
     return (
-        <svg
-            width={props.width}
-            height={props.height}
-            viewBox={iconInfo.viewBox}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d={iconInfo.path}
-                fill={props.color}
-                fillRule={iconInfo.fillRule || 'nonzero'}
-                clipRule={iconInfo.clipRule || 'nonzero'}
-                stroke={iconInfo.stroke}
-                strokeOpacity={iconInfo.strokeOpacity}
-                strokeWidth={iconInfo.strokeWidth}
-                strokeLinecap={iconInfo.strokeLinecap}
-                strokeLinejoin={iconInfo.strokeLinejoin}
-            />
-        </svg>
+        <div onClick={props.onClick} className={props.className}>
+            <svg
+                width={props.width}
+                height={props.height}
+                viewBox={iconInfo.viewBox}
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d={iconInfo.path}
+                    fill={props.color}
+                    fillRule={iconInfo.fillRule || 'nonzero'}
+                    clipRule={iconInfo.clipRule || 'nonzero'}
+                    stroke={iconInfo.stroke}
+                    strokeOpacity={iconInfo.strokeOpacity}
+                    strokeWidth={iconInfo.strokeWidth}
+                    strokeLinecap={iconInfo.strokeLinecap}
+                    strokeLinejoin={iconInfo.strokeLinejoin}
+                />
+            </svg>
+        </div>
     );
 };
+
+export const Icon = styled(PlainIcon)`
+    cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')};
+    transition: opacity 0.5s ease;
+    padding: ${props => props.padding};
+    opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)};
+    &:hover {
+        opacity: 1;
+    }
+    &:active {
+        opacity: 1;
+    }
+`;
+
+Icon.defaultProps = {
+    color: 'white',
+    padding: '0em 0em',
+};
+
+Icon.displayName = 'Icon';
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index 28f76c262..0efabdb85 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -1,7 +1,8 @@
-export { Text, Title } from './text';
+export { Text, TextProps, Title } from './text';
 export { Button, ButtonProps } from './button';
 export { Flex, FlexProps } from './flex';
 export { Container, ContainerProps } from './container';
 export { Input, InputProps } from './input';
 export { Icon, IconProps } from './icon';
 export { Spinner, SpinnerProps } from './spinner';
+export { Overlay, OverlayProps } from './overlay';
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
new file mode 100644
index 000000000..c5258b031
--- /dev/null
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -0,0 +1,38 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { overlayBlack, styled } from '../../style/theme';
+
+import { Container } from './container';
+import { Flex } from './flex';
+import { Icon } from './icon';
+
+export interface OverlayProps {
+    className?: string;
+    onClose?: () => void;
+    zIndex?: number;
+}
+
+const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
+    <Flex height="100vh" className={className}>
+        <Container position="absolute" top="0px" right="0px">
+            <Icon height={18} width={18} color="white" icon="closeX" onClick={onClose} padding="2em 2em" />
+        </Container>
+        <div>{children}</div>
+    </Flex>
+);
+export const Overlay = styled(PlainOverlay)`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: ${props => props.zIndex}
+    background-color: ${overlayBlack};
+`;
+
+Overlay.defaultProps = {
+    zIndex: 100,
+};
+
+Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index 365c1610f..907c42e7a 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,111 +1,14 @@
-import { AssetBuyer } from '@0x/asset-buyer';
-import { ObjectMap, SignedOrder } from '@0x/types';
-import * as _ from 'lodash';
 import * as React from 'react';
-import { Provider } from 'react-redux';
-
-import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
-import { asyncData } from '../redux/async_data';
-import { INITIAL_STATE, State } from '../redux/reducer';
-import { store, Store } from '../redux/store';
-import { fonts } from '../style/fonts';
-import { AssetMetaData, Network } from '../types';
-import { assetUtils } from '../util/asset';
-import { BigNumberInput } from '../util/big_number_input';
-import { errorFlasher } from '../util/error_flasher';
-import { gasPriceEstimator } from '../util/gas_price_estimator';
-import { getProvider } from '../util/provider';
-import { web3Wrapper } from '../util/web3_wrapper';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
+import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
 
-fonts.include();
-
-export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
-
-export interface ZeroExInstantRequiredProps {
-    // TODO: Change API when we allow the selection of different assetDatas
-    assetData: string;
-    liquiditySource: string | SignedOrder[];
-}
-
-export interface ZeroExInstantOptionalProps {
-    defaultAssetBuyAmount?: number;
-    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
-    networkId: Network;
-}
-
-export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
-    private readonly _store: Store;
-    private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
-        const networkId = props.networkId || state.network;
-        // TODO: Provider needs to not be hard-coded to injected web3.
-        const provider = getProvider();
-        const assetBuyerOptions = {
-            networkId,
-        };
-        let assetBuyer;
-        if (_.isString(props.liquiditySource)) {
-            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
-                provider,
-                props.liquiditySource,
-                assetBuyerOptions,
-            );
-        } else {
-            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
-        }
-        const completeAssetMetaDataMap = {
-            ...props.additionalAssetMetaDataMap,
-            ...state.assetMetaDataMap,
-        };
-        const storeStateFromProps: State = {
-            ...state,
-            assetBuyer,
-            network: networkId,
-            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
-            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
-                ? state.selectedAssetAmount
-                : new BigNumberInput(props.defaultAssetBuyAmount),
-            assetMetaDataMap: completeAssetMetaDataMap,
-        };
-        return storeStateFromProps;
-    }
-    constructor(props: ZeroExInstantProps) {
-        super(props);
-        const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE);
-        this._store = store.create(initialAppState);
-    }
-
-    public componentDidMount(): void {
-        // tslint:disable-next-line:no-floating-promises
-        asyncData.fetchAndDispatchToStore(this._store);
-
-        // 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
-        gasPriceEstimator.getGasInfoAsync();
-
-        // tslint:disable-next-line:no-floating-promises
-        this._flashErrorIfWrongNetwork();
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <Provider store={this._store}>
-                <SelectedAssetThemeProvider>
-                    <ZeroExInstantContainer />
-                </SelectedAssetThemeProvider>
-            </Provider>
-        );
-    }
+export type ZeroExInstantProps = ZeroExInstantProviderProps;
 
-    private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
-        const msToShowError = 30000; // 30 seconds
-        const network = this._store.getState().network;
-        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
-        if (network !== networkOfProvider) {
-            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
-            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
-        }
-    };
-}
+export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => {
+    return (
+        <ZeroExInstantProvider {...props}>
+            <ZeroExInstantContainer />
+        </ZeroExInstantProvider>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
new file mode 100644
index 000000000..8f872f896
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { Overlay } from './ui';
+import { ZeroExInstantContainer } from './zero_ex_instant_container';
+import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
+
+export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {
+    onClose?: () => void;
+    zIndex?: number;
+}
+
+export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlayProps> = props => {
+    const { onClose, zIndex, ...rest } = props;
+    return (
+        <ZeroExInstantProvider {...rest}>
+            <Overlay onClose={onClose} zIndex={zIndex}>
+                <ZeroExInstantContainer />
+            </Overlay>
+        </ZeroExInstantProvider>
+    );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
new file mode 100644
index 000000000..a7aecab9c
--- /dev/null
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -0,0 +1,108 @@
+import { AssetBuyer } from '@0x/asset-buyer';
+import { ObjectMap, SignedOrder } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Provider } from 'react-redux';
+
+import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
+import { asyncData } from '../redux/async_data';
+import { INITIAL_STATE, State } from '../redux/reducer';
+import { store, Store } from '../redux/store';
+import { fonts } from '../style/fonts';
+import { AssetMetaData, Network } from '../types';
+import { assetUtils } from '../util/asset';
+import { BigNumberInput } from '../util/big_number_input';
+import { errorFlasher } from '../util/error_flasher';
+import { gasPriceEstimator } from '../util/gas_price_estimator';
+import { getProvider } from '../util/provider';
+import { web3Wrapper } from '../util/web3_wrapper';
+
+fonts.include();
+
+export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
+    Partial<ZeroExInstantProviderOptionalProps>;
+
+export interface ZeroExInstantProviderRequiredProps {
+    // TODO: Change API when we allow the selection of different assetDatas
+    assetData: string;
+    liquiditySource: string | SignedOrder[];
+}
+
+export interface ZeroExInstantProviderOptionalProps {
+    defaultAssetBuyAmount?: number;
+    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
+    networkId: Network;
+}
+
+export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
+    private readonly _store: Store;
+    private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
+        const networkId = props.networkId || state.network;
+        // TODO: Provider needs to not be hard-coded to injected web3.
+        const provider = getProvider();
+        const assetBuyerOptions = {
+            networkId,
+        };
+        let assetBuyer;
+        if (_.isString(props.liquiditySource)) {
+            assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
+                provider,
+                props.liquiditySource,
+                assetBuyerOptions,
+            );
+        } else {
+            assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
+        }
+        const completeAssetMetaDataMap = {
+            ...props.additionalAssetMetaDataMap,
+            ...state.assetMetaDataMap,
+        };
+        const storeStateFromProps: State = {
+            ...state,
+            assetBuyer,
+            network: networkId,
+            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
+            selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
+                ? state.selectedAssetAmount
+                : new BigNumberInput(props.defaultAssetBuyAmount),
+            assetMetaDataMap: completeAssetMetaDataMap,
+        };
+        return storeStateFromProps;
+    }
+    constructor(props: ZeroExInstantProviderProps) {
+        super(props);
+        const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE);
+        this._store = store.create(initialAppState);
+    }
+
+    public componentDidMount(): void {
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchAndDispatchToStore(this._store);
+
+        // 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
+        gasPriceEstimator.getGasInfoAsync();
+
+        // tslint:disable-next-line:no-floating-promises
+        this._flashErrorIfWrongNetwork();
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Provider store={this._store}>
+                <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
+            </Provider>
+        );
+    }
+
+    private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
+        const msToShowError = 30000; // 30 seconds
+        const network = this._store.getState().network;
+        const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
+        if (network !== networkOfProvider) {
+            const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
+            errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
+        }
+    };
+}
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index e811d3d13..15105b65c 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils';
 export const BIG_NUMBER_ZERO = new BigNumber(0);
 export const ETH_DECIMALS = 18;
 export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
+export const INJECTED_DIV_ID = 'zeroExInstant';
 export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
 export const GWEI_IN_WEI = new BigNumber(1000000000);
 export const ONE_SECOND_MS = 1000;
diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts
index 28a04eb8a..a7bc6a967 100644
--- a/packages/instant/src/data/asset_data_network_mapping.ts
+++ b/packages/instant/src/data/asset_data_network_mapping.ts
@@ -8,10 +8,55 @@ interface AssetDataByNetwork {
 }
 
 export const assetDataNetworkMapping: AssetDataByNetwork[] = [
+    // ZRX
     {
         [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa',
     },
+    // SPANK
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18',
+        [Network.Kovan]: '0xf47261b00000000000000000000000007c9eee8448f3a7d1193389652d863b27e543272d',
+    },
+    // OMG
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18',
+        [Network.Kovan]: '0xf47261b000000000000000000000000046096d8ec059dbaae2950b30e01634ff0dc652ec',
+    },
+    // MKR
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2',
+        [Network.Kovan]: '0xf47261b00000000000000000000000000xbf5e8e38659562fda594fbb3ec5a3576d02a9e0a',
+    },
+    // BAT
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef',
+        [Network.Kovan]: '0xf47261b0000000000000000000000000c87faa7a58f0adf306bad9e7d892fb045a20e5af',
+    },
+    // SNT
+    {
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e',
+        [Network.Kovan]: '0xf47261b00000000000000000000000009cfe76a718ea75e3e8ce4fc7ad0fef84be70919b',
+    },
+    // MANA
+    {
+        [Network.Mainnet]: '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942',
+        [Network.Kovan]: '0xf47261b0000000000000000000000000c64edfc78321673435fbeebdaaa7f9d755963542',
+    },
+    // GNT
+    {
+        [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d',
+        [Network.Kovan]: '0xf47261b00000000000000000000000006986fa3646f408905ecb1876bfd355d25039ee3a',
+    },
+    // SUB
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a',
+    },
+    // Dentacoin
+    {
+        [Network.Mainnet]: '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6',
+    },
+    // REP
     {
         [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c',
         [Network.Mainnet]: '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6',
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 4e6e15d38..d7cf2c0d8 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -11,6 +11,60 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
         primaryColor: 'rgb(54, 50, 60)',
         symbol: 'zrx',
     },
+    '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#ec3e6c',
+        symbol: 'spank',
+    },
+    '0xf47261b0000000000000000000000000d26114cd6EE289AccF82350c8d8487fedB8A0C07': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#2e61ea',
+        symbol: 'omg',
+    },
+    '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: 'white',
+        symbol: 'mkr',
+    },
+    '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#9c326c',
+        symbol: 'bat',
+    },
+    '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#5663b0',
+        symbol: 'snt',
+    },
+    '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#f08839',
+        symbol: 'mana',
+    },
+    '0xf47261b0000000000000000000000000a74476443119A942dE498590Fe1f2454d7D4aC0d': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#263469',
+        symbol: 'gnt',
+    },
+    '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#de5445',
+        symbol: 'sub',
+    },
+    '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6': {
+        assetProxyId: AssetProxyId.ERC20,
+        decimals: 18,
+        primaryColor: '#000',
+        symbol: 'dentacoin',
+    },
     '0xf47261b0000000000000000000000000e94327d07fc17907b4db788e5adf2ed424addff6': {
         assetProxyId: AssetProxyId.ERC20,
         decimals: 18,
diff --git a/packages/instant/src/index.ts b/packages/instant/src/index.ts
index 54059cdad..6e611dae8 100644
--- a/packages/instant/src/index.ts
+++ b/packages/instant/src/index.ts
@@ -1 +1,2 @@
 export { ZeroExInstant, ZeroExInstantProps } from './components/zero_ex_instant';
+export { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './components/zero_ex_instant_overlay';
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index dabd45cae..b12e65485 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -2,21 +2,42 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
-import { ZeroExInstant, ZeroExInstantProps } from './index';
+import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants';
+import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
 import { assert } from './util/assert';
 
-export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
-    assert.isHexString('assetData', props.assetData);
-    assert.isValidLiquiditySource('liquiditySource', props.liquiditySource);
+export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
+    assert.isHexString('props.assetData', props.assetData);
+    assert.isValidLiquiditySource('props.liquiditySource', props.liquiditySource);
     if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
-        assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
+        assert.isValidAssetMetaDataMap('props.additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
     }
     if (!_.isUndefined(props.defaultAssetBuyAmount)) {
-        assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount);
+        assert.isNumber('props.defaultAssetBuyAmount', props.defaultAssetBuyAmount);
     }
     if (!_.isUndefined(props.networkId)) {
-        assert.isNumber('networkId', props.networkId);
+        assert.isNumber('props.networkId', props.networkId);
     }
-    ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
+    if (!_.isUndefined(props.onClose)) {
+        assert.isFunction('props.onClose', props.onClose);
+    }
+    if (!_.isUndefined(props.zIndex)) {
+        assert.isNumber('props.zIndex', props.zIndex);
+    }
+    const appendToIfExists = document.querySelector(selector);
+    assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
+    const appendTo = appendToIfExists as Element;
+    const injectedDiv = document.createElement('div');
+    injectedDiv.setAttribute('id', INJECTED_DIV_ID);
+    appendTo.appendChild(injectedDiv);
+    const instantOverlayProps = {
+        ...props,
+        onClose: () => {
+            appendTo.removeChild(injectedDiv);
+            if (!_.isUndefined(props.onClose)) {
+                props.onClose();
+            }
+        },
+    };
+    ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 6575ff9f4..e81694620 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -29,5 +29,6 @@ export const theme: Theme = {
 };
 
 export const transparentWhite = 'rgba(255,255,255,0.3)';
+export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
 
 export { styled, css, keyframes, ThemeProvider };