blob: 5b1f9592dcf61bb9e5dcf6e229e423433f36da61 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input';
import { ColorOption } from '../style/theme';
import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types';
import { format } from '../util/format';
import { AmountPlaceholder } from './amount_placeholder';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Icon } from './ui/icon';
import { Spinner } from './ui/spinner';
import { Text } from './ui/text';
export interface InstantHeadingProps {
selectedAssetUnitAmount?: BigNumber;
totalEthBaseUnitAmount?: BigNumber;
ethUsdPrice?: BigNumber;
quoteRequestState: AsyncProcessState;
buyOrderState: OrderState;
onSelectAssetClick?: (asset?: ERC20Asset) => void;
}
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();
return (
<Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
<Container marginBottom="5px">
<Text
letterSpacing="1px"
fontColor={ColorOption.white}
opacity={0.7}
fontWeight={500}
textTransform="uppercase"
fontSize="12px"
>
{this._renderTopText()}
</Text>
</Container>
<Flex direction="row" justify="space-between">
<Flex height="60px">
<SelectedERC20AssetAmountInput
startingFontSizePx={38}
onSelectAssetClick={this.props.onSelectAssetClick}
/>
</Flex>
<Flex direction="column" justify="space-between">
{iconOrAmounts}
</Flex>
</Flex>
</Container>
);
}
private _renderAmountsSection(): React.ReactNode {
if (
_.isUndefined(this.props.totalEthBaseUnitAmount) &&
this.props.quoteRequestState !== AsyncProcessState.Pending
) {
return null;
} else {
return (
<Container>
<Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container>
<Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container>
</Container>
);
}
}
private _renderIcon(): React.ReactNode {
const processState = this.props.buyOrderState.processState;
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} />;
}
return undefined;
}
private _renderTopText(): React.ReactNode {
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!';
}
return 'I want to buy';
}
private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode {
if (this.props.quoteRequestState === AsyncProcessState.Pending) {
return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />;
}
if (_.isUndefined(this.props.selectedAssetUnitAmount)) {
return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />;
}
return amountFunction();
}
private readonly _renderEthAmount = (): React.ReactNode => {
const ethAmount = format.ethBaseUnitAmount(
this.props.totalEthBaseUnitAmount,
4,
<AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
);
const fontSize = _.isString(ethAmount) && ethAmount.length >= 13 ? '14px' : '16px';
return (
<Text
fontSize={fontSize}
textAlign="right"
width="100%"
fontColor={ColorOption.white}
fontWeight={500}
noWrap={true}
>
{ethAmount}
</Text>
);
};
private readonly _renderDollarAmount = (): React.ReactNode => {
return (
<Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} noWrap={true}>
{format.ethBaseUnitAmountInUsd(
this.props.totalEthBaseUnitAmount,
this.props.ethUsdPrice,
2,
<AmountPlaceholder isPulsating={false} color={ColorOption.white} />,
)}
</Text>
);
};
}
|
