aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/instant_heading.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/instant_heading.tsx')
-rw-r--r--packages/instant/src/components/instant_heading.tsx25
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';