diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-10-27 06:33:56 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-27 06:33:56 +0800 |
commit | e73fceaa20738175e660caf4dee442d4c598c1b5 (patch) | |
tree | d4d870d1219d1c2c174c8aa8d04db845d8dcd81b /packages | |
parent | cc7321cb5b97ecb5dcd24134aeddc9cbdd1849d0 (diff) | |
parent | cacfcc291ac142df16866469153fb8af38606527 (diff) | |
download | dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar.gz dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar.bz2 dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar.lz dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar.xz dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.tar.zst dexon-0x-contracts-e73fceaa20738175e660caf4dee442d4c598c1b5.zip |
Merge pull request #1189 from 0xProject/feature/instant/txn-failure
[instant] View txn on failure
Diffstat (limited to 'packages')
-rw-r--r-- | packages/instant/src/components/buy_order_state_button.tsx | 26 | ||||
-rw-r--r-- | packages/instant/src/components/buy_order_state_buttons.tsx | 63 | ||||
-rw-r--r-- | packages/instant/src/components/retry_button.tsx | 11 | ||||
-rw-r--r-- | packages/instant/src/components/secondary_button.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 1 | ||||
-rw-r--r-- | packages/instant/src/components/view_transaction_button.tsx | 11 | ||||
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_buy_order_state_button.tsx | 20 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts (renamed from packages/instant/src/containers/selected_asset_buy_button.ts) | 44 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_retry_button.tsx | 26 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_view_transaction_button.tsx | 38 |
11 files changed, 105 insertions, 144 deletions
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx deleted file mode 100644 index 44115e5a1..000000000 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; - -import { PlacingOrderButton } from '../components/placing_order_button'; -import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; -import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button'; -import { SelectedAssetViewTransactionButton } from '../containers/selected_asset_view_transaction_button'; -import { OrderProcessState } from '../types'; - -export interface BuyOrderStateButtonProps { - buyOrderProcessingState: OrderProcessState; -} - -export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => { - if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { - return <SelectedAssetRetryButton />; - } else if ( - props.buyOrderProcessingState === OrderProcessState.SUCCESS || - props.buyOrderProcessingState === OrderProcessState.PROCESSING - ) { - return <SelectedAssetViewTransactionButton />; - } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { - return <PlacingOrderButton />; - } - - return <SelectedAssetBuyButton />; -}; diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx new file mode 100644 index 000000000..b9e92e763 --- /dev/null +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -0,0 +1,63 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +import * as React from 'react'; + +import { BuyButton } from '../components/buy_button'; +import { SecondaryButton } from '../components/secondary_button'; +import { Flex } from '../components/ui/flex'; + +import { PlacingOrderButton } from '../components/placing_order_button'; +import { ColorOption } from '../style/theme'; +import { OrderProcessState } from '../types'; + +import { Button } from './ui/button'; +import { Text } from './ui/text'; + +export interface BuyOrderStateButtonProps { + buyQuote?: BuyQuote; + buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; + onAwaitingSignature: (buyQuote: BuyQuote) => void; + onSignatureDenied: (buyQuote: BuyQuote, error: Error) => void; + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; + onRetry: () => void; +} + +// TODO: rename to buttons +export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => { + if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { + return ( + <Flex justify="space-between"> + <Button width="48%" onClick={props.onRetry}> + <Text fontColor={ColorOption.white} fontWeight={600} fontSize="16px"> + Back + </Text> + </Button> + <SecondaryButton width="48%" onClick={props.onViewTransaction}> + Details + </SecondaryButton> + </Flex> + ); + } else if ( + props.buyOrderProcessingState === OrderProcessState.SUCCESS || + props.buyOrderProcessingState === OrderProcessState.PROCESSING + ) { + return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>; + } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { + return <PlacingOrderButton />; + } + + return ( + <BuyButton + buyQuote={props.buyQuote} + assetBuyer={props.assetBuyer} + onAwaitingSignature={props.onAwaitingSignature} + onSignatureDenied={props.onSignatureDenied} + onBuyProcessing={props.onBuyProcessing} + onBuySuccess={props.onBuySuccess} + onBuyFailure={props.onBuyFailure} + /> + ); +}; diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx deleted file mode 100644 index 0d6188e6a..000000000 --- a/packages/instant/src/components/retry_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton } from './secondary_button'; - -export interface RetryButtonProps { - onClick: () => void; -} - -export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>; -}; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index 3c139a233..583058b5b 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -14,7 +14,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p <Button backgroundColor={ColorOption.white} borderColor={ColorOption.lightGrey} - width="100%" + width={props.width} onClick={props.onClick} {...buttonProps} > @@ -24,3 +24,6 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p </Button> ); }; +SecondaryButton.defaultProps = { + width: '100%', +}; diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index 1fcb2591c..5274d835b 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -52,6 +52,7 @@ export const Button = styled(PlainButton)` Button.defaultProps = { backgroundColor: ColorOption.primaryColor, + borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '1em 2.2em', diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx deleted file mode 100644 index 7aa44e657..000000000 --- a/packages/instant/src/components/view_transaction_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton } from './secondary_button'; - -export interface ViewTransactionButtonProps { - onClick: () => void; -} - -export const ViewTransactionButton: React.StatelessComponent<ViewTransactionButtonProps> = props => { - return <SecondaryButton onClick={props.onClick}>View Transaction</SecondaryButton>; -}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 1d17ed12a..ff19351ff 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; import { LatestError } from '../containers/latest_error'; -import { SelectedAssetBuyOrderStateButton } from '../containers/selected_asset_buy_order_state_button'; +import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; import { ColorOption } from '../style/theme'; @@ -27,7 +27,7 @@ export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantConta <SelectedAssetInstantHeading /> <LatestBuyQuoteOrderDetails /> <Container padding="20px" width="100%"> - <SelectedAssetBuyOrderStateButton /> + <SelectedAssetBuyOrderStateButtons /> </Container> </Flex> </Container> diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx deleted file mode 100644 index 7faa79912..000000000 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; - -import { State } from '../redux/reducer'; -import { OrderProcessState } from '../types'; - -import { BuyOrderStateButton } from '../components/buy_order_state_button'; - -interface ConnectedState { - buyOrderProcessingState: OrderProcessState; -} -export interface SelectedAssetButtonProps {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): ConnectedState => ({ - buyOrderProcessingState: state.buyOrderState.processState, -}); - -export const SelectedAssetBuyOrderStateButton: React.ComponentClass<SelectedAssetButtonProps> = connect( - mapStateToProps, -)(BuyOrderStateButton); diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts index adcbd61bc..8927b8954 100644 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts @@ -7,14 +7,15 @@ import { Dispatch } from 'redux'; import { Action, actions } from '../redux/actions'; import { State } from '../redux/reducer'; import { OrderProcessState, OrderState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; -import { BuyButton } from '../components/buy_button'; - -export interface SelectedAssetBuyButtonProps {} +import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; interface ConnectedState { - assetBuyer?: AssetBuyer; buyQuote?: BuyQuote; + buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; } interface ConnectedDispatch { @@ -23,14 +24,36 @@ interface ConnectedDispatch { onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => void; onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; + onRetry: () => void; } - -const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ +export interface SelectedAssetBuyOrderStateButtons {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => ({ + buyOrderProcessingState: state.buyOrderState.processState, assetBuyer: state.assetBuyer, buyQuote: state.latestBuyQuote, + onViewTransaction: () => { + if ( + state.assetBuyer && + (state.buyOrderState.processState === OrderProcessState.PROCESSING || + state.buyOrderState.processState === OrderProcessState.SUCCESS || + state.buyOrderState.processState === OrderProcessState.FAILURE) + ) { + const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( + state.buyOrderState.txHash, + state.assetBuyer.networkId, + ); + if (etherscanUrl) { + window.open(etherscanUrl, '_blank'); + return; + } + } + }, }); -const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ +const mapDispatchToProps = ( + dispatch: Dispatch<Action>, + ownProps: SelectedAssetBuyOrderStateButtons, +): ConnectedDispatch => ({ onAwaitingSignature: (buyQuote: BuyQuote) => { const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; dispatch(actions.updateBuyOrderState(newOrderState)); @@ -47,9 +70,12 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, ownProps: SelectedAssetB dispatch(actions.resetAmount()); dispatch(actions.setError(error)); }, + onRetry: () => { + dispatch(actions.resetAmount()); + }, }); -export const SelectedAssetBuyButton: React.ComponentClass<SelectedAssetBuyButtonProps> = connect( +export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect( mapStateToProps, mapDispatchToProps, -)(BuyButton); +)(BuyOrderStateButtons); diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx deleted file mode 100644 index b2b140be6..000000000 --- a/packages/instant/src/containers/selected_asset_retry_button.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { Action, actions } from '../redux/actions'; - -import { RetryButton } from '../components/retry_button'; - -export interface SelectedAssetRetryButtonProps {} - -interface ConnectedDispatch { - onClick: () => void; -} - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - _ownProps: SelectedAssetRetryButtonProps, -): ConnectedDispatch => ({ - onClick: () => dispatch(actions.resetAmount()), -}); - -export const SelectedAssetRetryButton: React.ComponentClass<SelectedAssetRetryButtonProps> = connect( - undefined, - mapDispatchToProps, -)(RetryButton); diff --git a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx deleted file mode 100644 index 064b877be..000000000 --- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx +++ /dev/null @@ -1,38 +0,0 @@ -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 { OrderProcessState } from '../types'; -import { etherscanUtil } from '../util/etherscan'; - -export interface SelectedAssetViewTransactionButtonProps {} - -interface ConnectedState { - onClick: () => void; -} - -const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ - onClick: () => { - if ( - state.assetBuyer && - (state.buyOrderState.processState === OrderProcessState.PROCESSING || - state.buyOrderState.processState === OrderProcessState.SUCCESS) - ) { - const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( - state.buyOrderState.txHash, - state.assetBuyer.networkId, - ); - if (etherscanUrl) { - window.open(etherscanUrl, '_blank'); - return; - } - } - }, -}); - -export const SelectedAssetViewTransactionButton: React.ComponentClass< - SelectedAssetViewTransactionButtonProps -> = connect(mapStateToProps)(ViewTransactionButton); |