diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:57:11 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-10-20 06:57:11 +0800 |
commit | 092d010c2dcdeffa7c44c147d380255c33649679 (patch) | |
tree | 2aa96fd265ec29e1b00faf44cf0f97e80fb9cb37 /packages/instant/src/components | |
parent | 30b077099306b8f2b522d0bc462da49fa9ee42e2 (diff) | |
download | dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar.gz dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar.bz2 dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar.lz dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar.xz dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.tar.zst dexon-0x-contracts-092d010c2dcdeffa7c44c147d380255c33649679.zip |
Render failure icon
Diffstat (limited to 'packages/instant/src/components')
-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'; |