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(-) (limited to 'packages/instant') 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 v1.2.3