diff options
| -rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 25 |
1 files changed, 23 insertions, 2 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 5d39e4048..7ae509e3a 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -9,6 +9,7 @@ import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; import { Container, Flex, Text } from './ui'; +import { Icon } from './ui/icon'; export interface InstantHeadingProps { selectedAssetAmount?: BigNumber; @@ -43,14 +44,34 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> { <Flex direction="row" justify="space-between"> <SelectedAssetAmountInput fontSize="45px" /> <Flex direction="column" justify="space-between"> - <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container> - <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container> + {this._renderIconOrAmounts()} </Flex> </Flex> </Container> ); } + private _renderIconOrAmounts(): React.ReactNode { + const icon = this._renderIcon(); + if (icon) { + return icon; + } + + return ( + <Container> + <Container marginBottom="5px">{this._placeholderOrAmount(this._ethAmount)}</Container> + <Container opacity={0.7}>{this._placeholderOrAmount(this._dollarAmount)}</Container> + </Container> + ); + } + + private _renderIcon(): React.ReactNode { + if (this.props.buyOrderState === AsyncProcessState.FAILURE) { + return <Icon icon={'failed'} width={34} height={34} color={ColorOption.white} />; + } + return undefined; + } + private _renderTopText(): React.ReactNode { if (this.props.buyOrderState === AsyncProcessState.FAILURE) { return 'Order failed'; |