From cd06c0e913bf8f4a1d7b29eecb01c87f92a76e89 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 14:44:25 -0700 Subject: Added string to constants --- packages/instant/src/components/buy_button.tsx | 3 ++- packages/instant/src/constants.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx index 6fe333dc7..a7a22e3bc 100644 --- a/packages/instant/src/components/buy_button.tsx +++ b/packages/instant/src/components/buy_button.tsx @@ -2,6 +2,7 @@ import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; import * as _ from 'lodash'; import * as React from 'react'; +import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; import { ColorOption } from '../style/theme'; import { util } from '../util/util'; import { web3Wrapper } from '../util/web3_wrapper'; @@ -62,7 +63,7 @@ export class BuyButton extends React.Component { try { await web3Wrapper.awaitTransactionSuccessAsync(txHash); } catch (e) { - if (e instanceof Error && e.message.startsWith('Transaction failed')) { + if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) { this.props.onBuyFailure(buyQuote, txHash); return; } diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 31491c80a..48d0d4aa2 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -2,3 +2,4 @@ import { BigNumber } from '@0x/utils'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ethDecimals = 18; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; +export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; -- cgit From ced4c893ba412ca401430a66694e194806d46e6b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 15:42:35 -0700 Subject: Show View Transaction button on failure, and allow setting of width for Try Again button and View Txn button --- packages/instant/src/components/buy_order_state_button.tsx | 10 +++++++++- packages/instant/src/components/retry_button.tsx | 6 +++--- packages/instant/src/components/secondary_button.tsx | 6 +++++- packages/instant/src/components/view_transaction_button.tsx | 6 +++--- .../instant/src/containers/selected_asset_retry_button.tsx | 6 ++++-- .../src/containers/selected_asset_view_transaction_button.tsx | 11 ++++++++--- 6 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index 44115e5a1..73a4d62e2 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { Flex } from '../components/ui/flex'; + import { PlacingOrderButton } from '../components/placing_order_button'; import { SelectedAssetBuyButton } from '../containers/selected_asset_buy_button'; import { SelectedAssetRetryButton } from '../containers/selected_asset_retry_button'; @@ -10,9 +12,15 @@ export interface BuyOrderStateButtonProps { buyOrderProcessingState: OrderProcessState; } +// TODO: rename to buttons export const BuyOrderStateButton: React.StatelessComponent = props => { if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { - return ; + return ( + + + + + ); } else if ( props.buyOrderProcessingState === OrderProcessState.SUCCESS || props.buyOrderProcessingState === OrderProcessState.PROCESSING diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx index 0d6188e6a..36ae55e72 100644 --- a/packages/instant/src/components/retry_button.tsx +++ b/packages/instant/src/components/retry_button.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { SecondaryButton } from './secondary_button'; +import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; -export interface RetryButtonProps { +export interface RetryButtonProps extends SecondaryButtonProps { onClick: () => void; } export const RetryButton: React.StatelessComponent = props => { - return Try Again; + return Try Again; }; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index 3c139a233..849003d0a 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -8,13 +8,14 @@ import { Text } from './ui/text'; export interface SecondaryButtonProps extends ButtonProps {} +// TODO: don't hard code this export const SecondaryButton: React.StatelessComponent = props => { const buttonProps = _.omit(props, 'text'); return ( ); }; +SecondaryButton.defaultProps = { + width: '100%', +}; diff --git a/packages/instant/src/components/view_transaction_button.tsx b/packages/instant/src/components/view_transaction_button.tsx index 7aa44e657..8d11bf132 100644 --- a/packages/instant/src/components/view_transaction_button.tsx +++ b/packages/instant/src/components/view_transaction_button.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { SecondaryButton } from './secondary_button'; +import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; -export interface ViewTransactionButtonProps { +export interface ViewTransactionButtonProps extends SecondaryButtonProps { onClick: () => void; } export const ViewTransactionButton: React.StatelessComponent = props => { - return View Transaction; + return View Transaction; }; diff --git a/packages/instant/src/containers/selected_asset_retry_button.tsx b/packages/instant/src/containers/selected_asset_retry_button.tsx index b2b140be6..30e564c7b 100644 --- a/packages/instant/src/containers/selected_asset_retry_button.tsx +++ b/packages/instant/src/containers/selected_asset_retry_button.tsx @@ -7,7 +7,9 @@ import { Action, actions } from '../redux/actions'; import { RetryButton } from '../components/retry_button'; -export interface SelectedAssetRetryButtonProps {} +export interface SelectedAssetRetryButtonProps { + width?: string; +} interface ConnectedDispatch { onClick: () => void; @@ -21,6 +23,6 @@ const mapDispatchToProps = ( }); export const SelectedAssetRetryButton: React.ComponentClass = connect( - undefined, + _.noop, 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 index 064b877be..c74f07209 100644 --- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -8,18 +8,22 @@ import { ViewTransactionButton } from '../components/view_transaction_button'; import { OrderProcessState } from '../types'; import { etherscanUtil } from '../util/etherscan'; -export interface SelectedAssetViewTransactionButtonProps {} +export interface SelectedAssetViewTransactionButtonProps { + width?: string; +} interface ConnectedState { onClick: () => void; + width?: string; } -const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ +const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({ onClick: () => { if ( state.assetBuyer && (state.buyOrderState.processState === OrderProcessState.PROCESSING || - state.buyOrderState.processState === OrderProcessState.SUCCESS) + state.buyOrderState.processState === OrderProcessState.SUCCESS || + state.buyOrderState.processState === OrderProcessState.FAILURE) ) { const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( state.buyOrderState.txHash, @@ -31,6 +35,7 @@ const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ } } }, + width: ownProps.width, }); export const SelectedAssetViewTransactionButton: React.ComponentClass< -- cgit From 39f92e4c958590a58ac5c48db197f98fdd9723e1 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 25 Oct 2018 18:46:33 -0700 Subject: Get BuyOrderState one big connected component, and let user view failure --- .../src/components/buy_order_state_button.tsx | 43 +++++++++++++--- packages/instant/src/components/retry_button.tsx | 11 ---- .../instant/src/components/secondary_button.tsx | 1 - packages/instant/src/components/ui/button.tsx | 1 + .../src/components/view_transaction_button.tsx | 11 ---- .../src/containers/selected_asset_buy_button.ts | 55 -------------------- .../selected_asset_buy_order_state_button.tsx | 60 +++++++++++++++++++++- .../src/containers/selected_asset_retry_button.tsx | 28 ---------- .../selected_asset_view_transaction_button.tsx | 43 ---------------- 9 files changed, 96 insertions(+), 157 deletions(-) delete mode 100644 packages/instant/src/components/retry_button.tsx delete mode 100644 packages/instant/src/components/view_transaction_button.tsx delete mode 100644 packages/instant/src/containers/selected_asset_buy_button.ts delete mode 100644 packages/instant/src/containers/selected_asset_retry_button.tsx delete mode 100644 packages/instant/src/containers/selected_asset_view_transaction_button.tsx diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index 73a4d62e2..17aa46df5 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -1,15 +1,28 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as React from 'react'; import { Flex } from '../components/ui/flex'; +import { SecondaryButton } from '../components/secondary_button'; +import { BuyButton } from '../components/buy_button'; 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 { 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 @@ -17,18 +30,34 @@ export const BuyOrderStateButton: React.StatelessComponent - - + + + Details + ); } else if ( props.buyOrderProcessingState === OrderProcessState.SUCCESS || props.buyOrderProcessingState === OrderProcessState.PROCESSING ) { - return ; + return View Transaction; } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { return ; } - return ; + return ( + + ); }; diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx deleted file mode 100644 index 36ae55e72..000000000 --- a/packages/instant/src/components/retry_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; - -export interface RetryButtonProps extends SecondaryButtonProps { - onClick: () => void; -} - -export const RetryButton: React.StatelessComponent = props => { - return Try Again; -}; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index 849003d0a..583058b5b 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -8,7 +8,6 @@ import { Text } from './ui/text'; export interface SecondaryButtonProps extends ButtonProps {} -// TODO: don't hard code this export const SecondaryButton: React.StatelessComponent = props => { const buttonProps = _.omit(props, 'text'); return ( 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 8d11bf132..000000000 --- a/packages/instant/src/components/view_transaction_button.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; - -import { SecondaryButton, SecondaryButtonProps } from './secondary_button'; - -export interface ViewTransactionButtonProps extends SecondaryButtonProps { - onClick: () => void; -} - -export const ViewTransactionButton: React.StatelessComponent = props => { - return View Transaction; -}; diff --git a/packages/instant/src/containers/selected_asset_buy_button.ts b/packages/instant/src/containers/selected_asset_buy_button.ts deleted file mode 100644 index adcbd61bc..000000000 --- a/packages/instant/src/containers/selected_asset_buy_button.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -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 { State } from '../redux/reducer'; -import { OrderProcessState, OrderState } from '../types'; - -import { BuyButton } from '../components/buy_button'; - -export interface SelectedAssetBuyButtonProps {} - -interface ConnectedState { - assetBuyer?: AssetBuyer; - buyQuote?: BuyQuote; -} - -interface ConnectedDispatch { - 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; -} - -const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyButtonProps): ConnectedState => ({ - assetBuyer: state.assetBuyer, - buyQuote: state.latestBuyQuote, -}); - -const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetBuyButtonProps): ConnectedDispatch => ({ - onAwaitingSignature: (buyQuote: BuyQuote) => { - const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { - const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), - onSignatureDenied: (buyQuote, error) => { - dispatch(actions.resetAmount()); - dispatch(actions.setError(error)); - }, -}); - -export const SelectedAssetBuyButton: React.ComponentClass = connect( - mapStateToProps, - mapDispatchToProps, -)(BuyButton); 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 index 7faa79912..fa5de4e68 100644 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx +++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx @@ -1,20 +1,78 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; 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 { State } from '../redux/reducer'; -import { OrderProcessState } from '../types'; +import { OrderProcessState, OrderState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; import { BuyOrderStateButton } from '../components/buy_order_state_button'; interface ConnectedState { + buyQuote?: BuyQuote; buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; +} + +interface ConnectedDispatch { + 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; } export interface SelectedAssetButtonProps {} const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): 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, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({ + onAwaitingSignature: (buyQuote: BuyQuote) => { + const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { + const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), + onSignatureDenied: (buyQuote, error) => { + dispatch(actions.resetAmount()); + dispatch(actions.setError(error)); + }, + onRetry: () => { + dispatch(actions.resetAmount()); + }, }); export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( mapStateToProps, + mapDispatchToProps, )(BuyOrderStateButton); 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 30e564c7b..000000000 --- a/packages/instant/src/containers/selected_asset_retry_button.tsx +++ /dev/null @@ -1,28 +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 { - width?: string; -} - -interface ConnectedDispatch { - onClick: () => void; -} - -const mapDispatchToProps = ( - dispatch: Dispatch, - _ownProps: SelectedAssetRetryButtonProps, -): ConnectedDispatch => ({ - onClick: () => dispatch(actions.resetAmount()), -}); - -export const SelectedAssetRetryButton: React.ComponentClass = connect( - _.noop, - 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 c74f07209..000000000 --- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx +++ /dev/null @@ -1,43 +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 { - width?: string; -} - -interface ConnectedState { - onClick: () => void; - width?: string; -} - -const mapStateToProps = (state: State, ownProps: SelectedAssetViewTransactionButtonProps): ConnectedState => ({ - onClick: () => { - 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; - } - } - }, - width: ownProps.width, -}); - -export const SelectedAssetViewTransactionButton: React.ComponentClass< - SelectedAssetViewTransactionButtonProps -> = connect(mapStateToProps)(ViewTransactionButton); -- cgit From 68182fb6c41256f9886c7aa0269746b3a9ac632f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 26 Oct 2018 09:17:40 -0700 Subject: tsx -> ts --- .../selected_asset_buy_order_state_button.ts | 78 ++++++++++++++++++++++ .../selected_asset_buy_order_state_button.tsx | 78 ---------------------- 2 files changed, 78 insertions(+), 78 deletions(-) create mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.ts delete mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.tsx diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts new file mode 100644 index 000000000..fa5de4e68 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts @@ -0,0 +1,78 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +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 { State } from '../redux/reducer'; +import { OrderProcessState, OrderState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; + +import { BuyOrderStateButton } from '../components/buy_order_state_button'; + +interface ConnectedState { + buyQuote?: BuyQuote; + buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; +} + +interface ConnectedDispatch { + 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; +} +export interface SelectedAssetButtonProps {} +const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): 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, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({ + onAwaitingSignature: (buyQuote: BuyQuote) => { + const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { + const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), + onSignatureDenied: (buyQuote, error) => { + dispatch(actions.resetAmount()); + dispatch(actions.setError(error)); + }, + onRetry: () => { + dispatch(actions.resetAmount()); + }, +}); + +export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( + mapStateToProps, + mapDispatchToProps, +)(BuyOrderStateButton); 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 fa5de4e68..000000000 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -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 { State } from '../redux/reducer'; -import { OrderProcessState, OrderState } from '../types'; -import { etherscanUtil } from '../util/etherscan'; - -import { BuyOrderStateButton } from '../components/buy_order_state_button'; - -interface ConnectedState { - buyQuote?: BuyQuote; - buyOrderProcessingState: OrderProcessState; - assetBuyer?: AssetBuyer; - onViewTransaction: () => void; -} - -interface ConnectedDispatch { - 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; -} -export interface SelectedAssetButtonProps {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): 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, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({ - onAwaitingSignature: (buyQuote: BuyQuote) => { - const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { - const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), - onSignatureDenied: (buyQuote, error) => { - dispatch(actions.resetAmount()); - dispatch(actions.setError(error)); - }, - onRetry: () => { - dispatch(actions.resetAmount()); - }, -}); - -export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( - mapStateToProps, - mapDispatchToProps, -)(BuyOrderStateButton); -- cgit From 7fa1f25e065c737e7589b57fb0249db5c1ceb4fb Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 26 Oct 2018 12:53:04 -0700 Subject: buy order state button -> buy order state buttons --- .../src/components/buy_order_state_button.tsx | 63 ---------------------- .../src/components/buy_order_state_buttons.tsx | 63 ++++++++++++++++++++++ .../selected_asset_buy_order_state_button.ts | 4 +- 3 files changed, 65 insertions(+), 65 deletions(-) delete mode 100644 packages/instant/src/components/buy_order_state_button.tsx create mode 100644 packages/instant/src/components/buy_order_state_buttons.tsx 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 17aa46df5..000000000 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -import * as React from 'react'; - -import { Flex } from '../components/ui/flex'; -import { SecondaryButton } from '../components/secondary_button'; -import { BuyButton } from '../components/buy_button'; - -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 BuyOrderStateButton: React.StatelessComponent = props => { - if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { - return ( - - - - Details - - - ); - } else if ( - props.buyOrderProcessingState === OrderProcessState.SUCCESS || - props.buyOrderProcessingState === OrderProcessState.PROCESSING - ) { - return View Transaction; - } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { - return ; - } - - return ( - - ); -}; 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..2330f84f9 --- /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 { Flex } from '../components/ui/flex'; +import { SecondaryButton } from '../components/secondary_button'; +import { BuyButton } from '../components/buy_button'; + +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 = props => { + if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { + return ( + + + + Details + + + ); + } else if ( + props.buyOrderProcessingState === OrderProcessState.SUCCESS || + props.buyOrderProcessingState === OrderProcessState.PROCESSING + ) { + return View Transaction; + } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { + return ; + } + + return ( + + ); +}; diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts index fa5de4e68..43c62c773 100644 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts +++ b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts @@ -9,7 +9,7 @@ import { State } from '../redux/reducer'; import { OrderProcessState, OrderState } from '../types'; import { etherscanUtil } from '../util/etherscan'; -import { BuyOrderStateButton } from '../components/buy_order_state_button'; +import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; interface ConnectedState { buyQuote?: BuyQuote; @@ -75,4 +75,4 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: SelectedAssetB export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( mapStateToProps, mapDispatchToProps, -)(BuyOrderStateButton); +)(BuyOrderStateButtons); -- cgit From 03007e420cbb330fd82a28b26324658c747d3dd3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 26 Oct 2018 12:54:44 -0700 Subject: selected asset buy order state button -> selected asset buy order state buttons --- .../src/components/zero_ex_instant_container.tsx | 4 +- .../selected_asset_buy_order_state_button.ts | 78 --------------------- .../selected_asset_buy_order_state_buttons.ts | 81 ++++++++++++++++++++++ 3 files changed, 83 insertions(+), 80 deletions(-) delete mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_button.ts create mode 100644 packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts 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 - + diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts b/packages/instant/src/containers/selected_asset_buy_order_state_button.ts deleted file mode 100644 index 43c62c773..000000000 --- a/packages/instant/src/containers/selected_asset_buy_order_state_button.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -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 { State } from '../redux/reducer'; -import { OrderProcessState, OrderState } from '../types'; -import { etherscanUtil } from '../util/etherscan'; - -import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; - -interface ConnectedState { - buyQuote?: BuyQuote; - buyOrderProcessingState: OrderProcessState; - assetBuyer?: AssetBuyer; - onViewTransaction: () => void; -} - -interface ConnectedDispatch { - 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; -} -export interface SelectedAssetButtonProps {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetButtonProps): 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, ownProps: SelectedAssetButtonProps): ConnectedDispatch => ({ - onAwaitingSignature: (buyQuote: BuyQuote) => { - const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { - const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; - dispatch(actions.updateBuyOrderState(newOrderState)); - }, - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => - dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), - onSignatureDenied: (buyQuote, error) => { - dispatch(actions.resetAmount()); - dispatch(actions.setError(error)); - }, - onRetry: () => { - dispatch(actions.resetAmount()); - }, -}); - -export const SelectedAssetBuyOrderStateButton: React.ComponentClass = connect( - mapStateToProps, - mapDispatchToProps, -)(BuyOrderStateButtons); diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts new file mode 100644 index 000000000..8927b8954 --- /dev/null +++ b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts @@ -0,0 +1,81 @@ +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; +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 { State } from '../redux/reducer'; +import { OrderProcessState, OrderState } from '../types'; +import { etherscanUtil } from '../util/etherscan'; + +import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; + +interface ConnectedState { + buyQuote?: BuyQuote; + buyOrderProcessingState: OrderProcessState; + assetBuyer?: AssetBuyer; + onViewTransaction: () => void; +} + +interface ConnectedDispatch { + 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; +} +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, + ownProps: SelectedAssetBuyOrderStateButtons, +): ConnectedDispatch => ({ + onAwaitingSignature: (buyQuote: BuyQuote) => { + const newOrderState: OrderState = { processState: OrderProcessState.AWAITING_SIGNATURE }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuyProcessing: (buyQuote: BuyQuote, txHash: string) => { + const newOrderState: OrderState = { processState: OrderProcessState.PROCESSING, txHash }; + dispatch(actions.updateBuyOrderState(newOrderState)); + }, + onBuySuccess: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.SUCCESS, txHash })), + onBuyFailure: (buyQuote: BuyQuote, txHash: string) => + dispatch(actions.updateBuyOrderState({ processState: OrderProcessState.FAILURE, txHash })), + onSignatureDenied: (buyQuote, error) => { + dispatch(actions.resetAmount()); + dispatch(actions.setError(error)); + }, + onRetry: () => { + dispatch(actions.resetAmount()); + }, +}); + +export const SelectedAssetBuyOrderStateButtons: React.ComponentClass = connect( + mapStateToProps, + mapDispatchToProps, +)(BuyOrderStateButtons); -- cgit From cacfcc291ac142df16866469153fb8af38606527 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 26 Oct 2018 15:22:28 -0700 Subject: linting imports --- packages/instant/src/components/buy_order_state_buttons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx index 2330f84f9..b9e92e763 100644 --- a/packages/instant/src/components/buy_order_state_buttons.tsx +++ b/packages/instant/src/components/buy_order_state_buttons.tsx @@ -1,9 +1,9 @@ import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import * as React from 'react'; -import { Flex } from '../components/ui/flex'; -import { SecondaryButton } from '../components/secondary_button'; 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'; -- cgit