Merge pull request #1159 from 0xProject/feature/instant/beta-render-et-al

[instant] Pass in liquiditySource, assetData and other settings from render

3 files changed, 79 insertions, 26 deletions

diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
index 730e6396f..c03ef1cf3 100644
--- a/packages/instant/src/components/asset_amount_input.tsx
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -2,17 +2,18 @@ import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { assetDataUtil } from '../util/asset_data';
-
 import { ColorOption } from '../style/theme';
+import { ERC20Asset } from '../types';
+import { assetUtils } from '../util/asset';
 import { util } from '../util/util';
 
 import { AmountInput, AmountInputProps } from './amount_input';
 import { Container, Text } from './ui';
 
+// Asset amounts only apply to ERC20 assets
 export interface AssetAmountInputProps extends AmountInputProps {
-    assetData?: string;
-    onChange: (value?: BigNumber, assetData?: string) => void;
+    asset?: ERC20Asset;
+    onChange: (value?: BigNumber, asset?: ERC20Asset) => void;
 }
 
 export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
@@ -20,19 +21,19 @@ export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
         onChange: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const { assetData, onChange, ...rest } = this.props;
+        const { asset, onChange, ...rest } = this.props;
         return (
             <Container>
                 <AmountInput {...rest} onChange={this._handleChange} />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
-                        {assetDataUtil.bestNameForAsset(this.props.assetData, '???')}
+                        {assetUtils.bestNameForAsset(asset)}
                     </Text>
                 </Container>
             </Container>
         );
     }
     private readonly _handleChange = (value?: BigNumber): void => {
-        this.props.onChange(value, this.props.assetData);
+        this.props.onChange(value, this.props.asset);
     };
 }
diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx
index d2a8bd07a..adc32f071 100644
--- a/packages/instant/src/components/buy_button.tsx
+++ b/packages/instant/src/components/buy_button.tsx
@@ -1,9 +1,8 @@
-import { BuyQuote } from '@0x/asset-buyer';
+import { AssetBuyer, BuyQuote } from '@0x/asset-buyer';
 import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
-import { assetBuyer } from '../util/asset_buyer';
 import { util } from '../util/util';
 import { web3Wrapper } from '../util/web3_wrapper';
 
@@ -11,6 +10,7 @@ import { Button, Container, Text } from './ui';
 
 export interface BuyButtonProps {
     buyQuote?: BuyQuote;
+    assetBuyer?: AssetBuyer;
     onClick: (buyQuote: BuyQuote) => void;
     onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void;
     onBuyFailure: (buyQuote: BuyQuote, tnxHash?: string) => void;
@@ -24,7 +24,7 @@ export class BuyButton extends React.Component<BuyButtonProps> {
         onBuyFailure: util.boundNoop,
     };
     public render(): React.ReactNode {
-        const shouldDisableButton = _.isUndefined(this.props.buyQuote);
+        const shouldDisableButton = _.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer);
         return (
             <Container padding="20px" width="100%">
                 <Button width="100%" onClick={this._handleClick} isDisabled={shouldDisableButton}>
@@ -37,13 +37,13 @@ export class BuyButton extends React.Component<BuyButtonProps> {
     }
     private readonly _handleClick = async () => {
         // The button is disabled when there is no buy quote anyway.
-        if (_.isUndefined(this.props.buyQuote)) {
+        if (_.isUndefined(this.props.buyQuote) || _.isUndefined(this.props.assetBuyer)) {
             return;
         }
         this.props.onClick(this.props.buyQuote);
         let txnHash;
         try {
-            txnHash = await assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
+            txnHash = await this.props.assetBuyer.executeBuyQuoteAsync(this.props.buyQuote);
             await web3Wrapper.awaitTransactionSuccessAsync(txnHash);
             this.props.onBuySuccess(this.props.buyQuote, txnHash);
         } catch {
diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx
index f6472e811..ffa5a8250 100644
--- a/packages/instant/src/components/zero_ex_instant.tsx
+++ b/packages/instant/src/components/zero_ex_instant.tsx
@@ -1,23 +1,75 @@
+import { AssetBuyer } from '@0x/asset-buyer';
+import { ObjectMap } from '@0x/types';
 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 { store } from '../redux/store';
+import { INITIAL_STATE, State } from '../redux/reducer';
+import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { theme, ThemeProvider } from '../style/theme';
+import { AssetMetaData, Network } from '../types';
+import { assetUtils } from '../util/asset';
+import { getProvider } from '../util/provider';
 
 import { ZeroExInstantContainer } from './zero_ex_instant_container';
 
 fonts.include();
-// tslint:disable-next-line:no-floating-promises
-asyncData.fetchAndDispatchToStore();
-
-export interface ZeroExInstantProps {}
-
-export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => (
-    <Provider store={store}>
-        <ThemeProvider theme={theme}>
-            <ZeroExInstantContainer />
-        </ThemeProvider>
-    </Provider>
-);
+
+export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
+
+export interface ZeroExInstantRequiredProps {
+    // TODO: Change API when we allow the selection of different assetDatas
+    assetData: string;
+    // TODO: Allow for a function that returns orders
+    liquiditySource: string;
+}
+
+export interface ZeroExInstantOptionalProps {
+    additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
+    network: Network;
+}
+
+export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
+    private readonly _store: Store;
+    private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
+        // Create merged object such that properties in props override default settings
+        const optionalPropsWithDefaults: ZeroExInstantOptionalProps = {
+            additionalAssetMetaDataMap: props.additionalAssetMetaDataMap || {},
+            network: props.network || state.network,
+        };
+        const { network } = optionalPropsWithDefaults;
+        // TODO: Provider needs to not be hard-coded to injected web3.
+        const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.liquiditySource, {
+            networkId: network,
+        });
+        const completeAssetMetaDataMap = {
+            ...props.additionalAssetMetaDataMap,
+            ...state.assetMetaDataMap,
+        };
+        const storeStateFromProps: State = {
+            ...state,
+            assetBuyer,
+            network,
+            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network),
+            assetMetaDataMap: completeAssetMetaDataMap,
+        };
+        return storeStateFromProps;
+    }
+    constructor(props: ZeroExInstantProps) {
+        super(props);
+        this._store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
+        // tslint:disable-next-line:no-floating-promises
+        asyncData.fetchAndDispatchToStore(this._store);
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Provider store={this._store}>
+                <SelectedAssetThemeProvider>
+                    <ZeroExInstantContainer />
+                </SelectedAssetThemeProvider>
+            </Provider>
+        );
+    }
+}