From 579a49ba918ef3c10f3eee0c63ff8d8f8be61fdf Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 22 Oct 2018 14:28:22 -0700 Subject: Placing order button --- packages/instant/src/containers/selected_asset_button.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index 8c617804e..6fad365fa 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -6,6 +6,8 @@ import { SecondaryButton } from '../components/secondary_button'; import { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; +import { PlacingOrderButton } from '../components/placing_order_button'; + import { SelectedAssetBuyButton } from './selected_asset_buy_button'; import { SelectedAssetRetryButton } from './selected_asset_retry_button'; @@ -23,9 +25,9 @@ const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ if (props.buyOrderState === AsyncProcessState.FAILURE) { return ; } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { - return ; + return Success; } else if (props.buyOrderState === AsyncProcessState.PENDING) { - return ; + return ; } return ; -- cgit v1.2.3 From 4c4286ac662d3dba928bf16b83ade5e5476f4614 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 23 Oct 2018 17:06:45 -0700 Subject: feat(instant): Procesing and Success states --- .../src/containers/selected_asset_amount_input.ts | 2 +- .../src/containers/selected_asset_button.tsx | 15 +++++----- .../src/containers/selected_asset_buy_button.ts | 9 +++--- .../containers/selected_asset_instant_heading.ts | 4 +-- .../selected_asset_view_transaction_button.tsx | 35 ++++++++++++++++++++++ 5 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_view_transaction_button.tsx (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_amount_input.ts b/packages/instant/src/containers/selected_asset_amount_input.ts index 0d847cf02..f23b2010e 100644 --- a/packages/instant/src/containers/selected_asset_amount_input.ts +++ b/packages/instant/src/containers/selected_asset_amount_input.ts @@ -90,7 +90,7 @@ const mapDispatchToProps = ( // invalidate the last buy quote. dispatch(actions.updateLatestBuyQuote(undefined)); // reset our buy state - dispatch(actions.updateBuyOrderState(AsyncProcessState.NONE)); + dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.NONE })); if (!_.isUndefined(value) && !_.isUndefined(asset) && !_.isUndefined(assetBuyer)) { // even if it's debounced, give them the illusion it's loading diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index 6fad365fa..d368d05e1 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -4,15 +4,16 @@ import { connect } from 'react-redux'; import { SecondaryButton } from '../components/secondary_button'; import { State } from '../redux/reducer'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { PlacingOrderButton } from '../components/placing_order_button'; import { SelectedAssetBuyButton } from './selected_asset_buy_button'; import { SelectedAssetRetryButton } from './selected_asset_retry_button'; +import { SelectedAssetViewTransactionButton } from './selected_asset_view_transaction_button'; interface ConnectedState { - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } export interface SelectedAssetButtonProps {} const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ @@ -20,13 +21,13 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): Con }); const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; }> = props => { - if (props.buyOrderState === AsyncProcessState.FAILURE) { + if (props.buyOrderState.processState === AsyncProcessState.FAILURE) { return ; - } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { - return Success; - } else if (props.buyOrderState === AsyncProcessState.PENDING) { + } else if (props.buyOrderState.processState === AsyncProcessState.SUCCESS) { + return ; + } else if (props.buyOrderState.processState === AsyncProcessState.PENDING) { return ; } diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts index 208bb2582..71d2b8cf0 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_button.ts @@ -19,7 +19,7 @@ interface ConnectedState { interface ConnectedDispatch { onClick: (buyQuote: BuyQuote) => void; - onBuySuccess: (buyQuote: BuyQuote) => void; + onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => void; onBuyFailure: (buyQuote: BuyQuote) => void; } @@ -29,9 +29,10 @@ const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): }); const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onClick: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.PENDING)), - onBuySuccess: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.SUCCESS)), - onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState(AsyncProcessState.FAILURE)), + onClick: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.PENDING })), + onBuySuccess: (buyQuote: BuyQuote, txnHash: string) => + dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.SUCCESS, txnHash })), + onBuyFailure: buyQuote => dispatch(actions.updateBuyOrderState({ processState: AsyncProcessState.FAILURE })), }); export const SelectedAssetBuyButton: React.ComponentClass = connect( diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts index 24efed32e..6b2a29b07 100644 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ b/packages/instant/src/containers/selected_asset_instant_heading.ts @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { oc } from 'ts-optchain'; import { State } from '../redux/reducer'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { InstantHeading } from '../components/instant_heading'; @@ -16,7 +16,7 @@ interface ConnectedState { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx new file mode 100644 index 000000000..44de16c4a --- /dev/null +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -0,0 +1,35 @@ +import { EtherscanLinkSuffixes, utils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { State } from '../redux/reducer'; + +import { ViewTransactionButton } from '../components/view_transaction_button'; +import { AsyncProcessState } from '../types'; + +export interface SelectedAssetViewTransactionButtonProps {} + +interface ConnectedState { + onClick: () => void; +} + +const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ + onClick: () => { + if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) { + const etherscanUrl = utils.getEtherScanLinkIfExists( + state.buyOrderState.txnHash, + state.assetBuyer.networkId, + EtherscanLinkSuffixes.Tx, + ); + if (etherscanUrl) { + window.open(etherscanUrl, '_blank'); + return; + } + } + }, +}); + +export const SelectedAssetViewTransactionButton: React.ComponentClass< + SelectedAssetViewTransactionButtonProps +> = connect(mapStateToProps)(ViewTransactionButton); -- cgit v1.2.3 From 09f0bf7f0062bba51380ae904bff96baddf5f0f2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 24 Oct 2018 11:50:05 -0700 Subject: Get rid of react-shared as a dependency, write own etherscanUtil --- .../src/containers/selected_asset_view_transaction_button.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/containers') diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx index 44de16c4a..6f42b9f85 100644 --- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -1,4 +1,3 @@ -import { EtherscanLinkSuffixes, utils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; @@ -7,6 +6,7 @@ import { State } from '../redux/reducer'; import { ViewTransactionButton } from '../components/view_transaction_button'; import { AsyncProcessState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; export interface SelectedAssetViewTransactionButtonProps {} @@ -17,10 +17,9 @@ interface ConnectedState { const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ onClick: () => { if (state.assetBuyer && state.buyOrderState.processState === AsyncProcessState.SUCCESS) { - const etherscanUrl = utils.getEtherScanLinkIfExists( + const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( state.buyOrderState.txnHash, state.assetBuyer.networkId, - EtherscanLinkSuffixes.Tx, ); if (etherscanUrl) { window.open(etherscanUrl, '_blank'); -- cgit v1.2.3