diff options
3 files changed, 13 insertions, 4 deletions
diff --git a/packages/instant/src/components/buy_order_state_button.tsx b/packages/instant/src/components/buy_order_state_button.tsx index b5b21fd1e..44115e5a1 100644 --- a/packages/instant/src/components/buy_order_state_button.tsx +++ b/packages/instant/src/components/buy_order_state_button.tsx @@ -13,12 +13,12 @@ export interface BuyOrderStateButtonProps { export const BuyOrderStateButton: React.StatelessComponent<BuyOrderStateButtonProps> = props => { if (props.buyOrderProcessingState === OrderProcessState.FAILURE) { return <SelectedAssetRetryButton />; - } else if (props.buyOrderProcessingState === OrderProcessState.SUCCESS) { - return <SelectedAssetViewTransactionButton />; } else if ( - props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE || + props.buyOrderProcessingState === OrderProcessState.SUCCESS || props.buyOrderProcessingState === OrderProcessState.PROCESSING ) { + return <SelectedAssetViewTransactionButton />; + } else if (props.buyOrderProcessingState === OrderProcessState.AWAITING_SIGNATURE) { return <PlacingOrderButton />; } diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 37d87580d..17ac65429 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -10,6 +10,7 @@ import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; import { Icon } from './ui/icon'; +import { Spinner } from './ui/spinner'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -70,6 +71,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { if (processState === OrderProcessState.FAILURE) { return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === OrderProcessState.PROCESSING) { + return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />; } else if (processState === OrderProcessState.SUCCESS) { return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } @@ -80,6 +83,8 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { const processState = this.props.buyOrderState.processState; if (processState === OrderProcessState.FAILURE) { return 'Order failed'; + } else if (processState === OrderProcessState.PROCESSING) { + return 'Processing Order...'; } else if (processState === OrderProcessState.SUCCESS) { return 'Tokens received!'; } 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 1f9bfd7a6..91e959246 100644 --- a/packages/instant/src/containers/selected_asset_view_transaction_button.tsx +++ b/packages/instant/src/containers/selected_asset_view_transaction_button.tsx @@ -16,7 +16,11 @@ interface ConnectedState { const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ onClick: () => { - if (state.assetBuyer && state.buyOrderState.processState === OrderProcessState.SUCCESS) { + if ( + state.assetBuyer && + (state.buyOrderState.processState === OrderProcessState.PROCESSING || + state.buyOrderState.processState === OrderProcessState.SUCCESS) + ) { const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( state.buyOrderState.txnHash, state.assetBuyer.networkId, |