diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 03:57:25 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-25 03:57:25 +0800 |
commit | 11f7f2d29fb0a32cfb65e6206747a8ea35ad0744 (patch) | |
tree | 51507b8e5a834b6f8816dbba84d8cf7b8477fc5b /packages/instant/src/components/instant_heading.tsx | |
parent | c5554fe30c199155d4e020028aa4aa1f808918b9 (diff) | |
parent | 059868e9942fed4616750d212e706f09d17f397b (diff) | |
download | dexon-0x-contracts-11f7f2d29fb0a32cfb65e6206747a8ea35ad0744.tar.gz dexon-0x-contracts-11f7f2d29fb0a32cfb65e6206747a8ea35ad0744.tar.zst dexon-0x-contracts-11f7f2d29fb0a32cfb65e6206747a8ea35ad0744.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/input-fees-rounding
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 29 |
1 files changed, 20 insertions, 9 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 0efb58360..f0a22bccb 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AsyncProcessState } from '../types'; +import { AsyncProcessState, OrderState } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; @@ -16,10 +16,14 @@ export interface InstantHeadingProps { totalEthBaseAmount?: BigNumber; ethUsdPrice?: BigNumber; quoteRequestState: AsyncProcessState; - buyOrderState: AsyncProcessState; + buyOrderState: OrderState; } -const placeholderColor = ColorOption.white; +const PLACEHOLDER_COLOR = ColorOption.white; +const ICON_WIDTH = 34; +const ICON_HEIGHT = 34; +const ICON_COLOR = ColorOption.white; + export class InstantHeading extends React.Component<InstantHeadingProps, {}> { public render(): React.ReactNode { const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); @@ -64,15 +68,22 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { } private _renderIcon(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { - return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />; + const processState = this.props.buyOrderState.processState; + + if (processState === AsyncProcessState.FAILURE) { + return <Icon icon={'failed'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; + } else if (processState === AsyncProcessState.SUCCESS) { + return <Icon icon={'success'} width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; } return undefined; } private _renderTopText(): React.ReactNode { - if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + const processState = this.props.buyOrderState.processState; + if (processState === AsyncProcessState.FAILURE) { return 'Order failed'; + } else if (processState === AsyncProcessState.SUCCESS) { + return 'Tokens received!'; } return 'I want to buy'; @@ -80,10 +91,10 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { private _placeholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { if (this.props.quoteRequestState === AsyncProcessState.PENDING) { - return <AmountPlaceholder isPulsating={true} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; } if (_.isUndefined(this.props.selectedAssetAmount)) { - return <AmountPlaceholder isPulsating={false} color={placeholderColor} />; + return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />; } return amountFunction(); } @@ -94,7 +105,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { {format.ethBaseAmount( this.props.totalEthBaseAmount, 4, - <AmountPlaceholder isPulsating={false} color={placeholderColor} />, + <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />, )} </Text> ); |