feat: add network to state and use it where relevant

packages/instant/public/index.html

@@ -25,7 +25,7 @@
     <div id="zeroExInstantContainer"></div>
     <script>
         zeroExInstant.render({
-            sraApiUrl: 'https://api.radarrelay.com/0x/v2/',
+            liquiditySource: 'https://api.radarrelay.com/0x/v2/',
             assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
         });
     </script>

packages/instant/src/components/zero_ex_instant.tsx

@@ -4,12 +4,11 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 
 import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
-import { assetMetaDataMap } from '../data/asset_meta_data_map';
 import { asyncData } from '../redux/async_data';
-import { State } from '../redux/reducer';
+import { INITIAL_STATE, State } from '../redux/reducer';
 import { store, Store } from '../redux/store';
 import { fonts } from '../style/fonts';
-import { AssetMetaData } from '../types';
+import { AssetMetaData, Network } from '../types';
 import { assetUtils } from '../util/asset';
 import { getProvider } from '../util/provider';
 
@@ -17,35 +16,49 @@ import { ZeroExInstantContainer } from './zero_ex_instant_container';
 
 fonts.include();
 
-export interface ZeroExInstantProps {
+export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
+
+export interface ZeroExInstantRequiredProps {
     // TODO: Change API when we allow the selection of different assetDatas
     assetData: string;
-    sraApiUrl: 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> {
-    public static defaultProps = {
-        additionalAssetMetaDataMap: {},
-    };
     public store: Store;
-    private static _createPartialStoreStateFromProps(props: ZeroExInstantProps): Partial<State> {
+    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.sraApiUrl);
+        const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(getProvider(), props.liquiditySource, {
+            networkId: network,
+        });
         const completeAssetMetaDataMap = {
             ...props.additionalAssetMetaDataMap,
-            ...assetMetaDataMap,
+            ...state.assetMetaDataMap,
         };
-        const storeStateFromProps: Partial<State> = {
+        const storeStateFromProps: State = {
+            ...state,
             assetBuyer,
-            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap),
+            network,
+            selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, network),
             assetMetaDataMap: completeAssetMetaDataMap,
         };
         return storeStateFromProps;
     }
     constructor(props: ZeroExInstantProps) {
         super(props);
-        this.store = store.create(ZeroExInstant._createPartialStoreStateFromProps(this.props));
+        this.store = store.create(ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE));
         // tslint:disable-next-line:no-floating-promises
         asyncData.fetchAndDispatchToStore(this.store);
     }

packages/instant/src/redux/reducer.ts

@@ -3,7 +3,8 @@ import { ObjectMap } from '@0x/types';
 import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
-import { Asset, AssetMetaData, AsyncProcessState } from '../types';
+import { assetMetaDataMap } from '../data/asset_meta_data_map';
+import { Asset, AssetMetaData, AsyncProcessState, Network } from '../types';
 import { assetUtils } from '../util/asset';
 
 import { Action, ActionTypes } from './actions';
@@ -13,6 +14,7 @@ export enum LatestErrorDisplay {
     Hidden,
 }
 export interface State {
+    network: Network;
     assetBuyer?: AssetBuyer;
     assetMetaDataMap: ObjectMap<AssetMetaData>;
     selectedAsset?: Asset;
@@ -26,8 +28,9 @@ export interface State {
 }
 
 export const INITIAL_STATE: State = {
+    network: Network.Mainnet,
     selectedAssetAmount: undefined,
-    assetMetaDataMap: {},
+    assetMetaDataMap,
     buyOrderState: AsyncProcessState.NONE,
     ethUsdPrice: undefined,
     latestBuyQuote: undefined,
@@ -92,7 +95,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State =>
             const newSelectedAssetData = action.data;
             let newSelectedAsset: Asset | undefined;
             if (!_.isUndefined(newSelectedAssetData)) {
-                newSelectedAsset = assetUtils.createAssetFromAssetData(newSelectedAssetData, state.assetMetaDataMap);
+                newSelectedAsset = assetUtils.createAssetFromAssetData(
+                    newSelectedAssetData,
+                    state.assetMetaDataMap,
+                    state.network,
+                );
             }
             return {
                 ...state,

packages/instant/src/redux/store.ts

@@ -2,16 +2,12 @@ import * as _ from 'lodash';
 import { createStore, Store as ReduxStore } from 'redux';
 import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';
 
-import { INITIAL_STATE, reducer, State } from './reducer';
+import { reducer, State } from './reducer';
 
 export type Store = ReduxStore<State>;
 
 export const store = {
-    create: (withState: Partial<State>): Store => {
-        const allInitialState = {
-            ...INITIAL_STATE,
-            ...withState,
-        };
-        return createStore(reducer, allInitialState, devToolsEnhancer({}));
+    create: (state: State): Store => {
+        return createStore(reducer, state, devToolsEnhancer({}));
     },
 };

packages/instant/src/util/asset.ts

@@ -6,17 +6,17 @@ import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
 import { Asset, AssetMetaData, Network, ZeroExInstantError } from '../types';
 
 export const assetUtils = {
-    createAssetFromAssetData: (assetData: string, assetMetaDataMap: ObjectMap<AssetMetaData>): Asset => {
+    createAssetFromAssetData: (
+        assetData: string,
+        assetMetaDataMap: ObjectMap<AssetMetaData>,
+        network: Network,
+    ): Asset => {
         return {
             assetData,
-            metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap),
+            metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network),
         };
     },
-    getMetaDataOrThrow: (
-        assetData: string,
-        metaDataMap: ObjectMap<AssetMetaData>,
-        network: Network = Network.Mainnet,
-    ): AssetMetaData => {
+    getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap<AssetMetaData>, network: Network): AssetMetaData => {
         let mainnetAssetData: string | undefined = assetData;
         if (network !== Network.Mainnet) {
             mainnetAssetData = assetUtils.getAssociatedAssetDataIfExists(assetData, network);