feat: populate order details with information from worst buy quote

2 files changed, 27 insertions, 1 deletions

diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts
new file mode 100644
index 000000000..77d84289b
--- /dev/null
+++ b/packages/instant/src/containers/latest_buy_quote_order_details.ts
@@ -0,0 +1,26 @@
+import { BuyQuoteInfo } from '@0xproject/asset-buyer';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+
+import { OrderDetails } from '../components/order_details';
+
+export interface LatestBuyQuoteOrderDetailsProps {}
+
+interface ConnectedState {
+    buyQuoteInfo?: BuyQuoteInfo;
+    ethUsdPrice?: BigNumber;
+}
+
+const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({
+    // use the worst case quote info
+    buyQuoteInfo: _.get(state, 'latestBuyQuote.worstCaseQuoteInfo'),
+    ethUsdPrice: state.ethUsdPrice,
+});
+
+export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect(
+    mapStateToProps,
+)(OrderDetails);
diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts
index f537294e4..678c7e445 100644
--- a/packages/instant/src/containers/selected_asset_buy_button.ts
+++ b/packages/instant/src/containers/selected_asset_buy_button.ts
@@ -9,7 +9,7 @@ import { Action, ActionTypes, AsyncProcessState } from '../types';
 import { assetBuyer } from '../util/asset_buyer';
 import { web3Wrapper } from '../util/web3_wrapper';
 
-import { BuyButton } from '../components/buy_button';
+import { BuyButton, BuyButtonProps } from '../components/buy_button';
 
 export interface SelectedAssetBuyButtonProps {}