blob: 5c2055a8a82497fe4cba0ad78381f11e06c7af6a (
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
|
import * as React from 'react';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
import { ConnectedAccountPaymentMethod } from '../containers/connected_account_payment_method';
import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
import { LatestError } from '../containers/latest_error';
import { SelectedAssetBuyOrderProgress } from '../containers/selected_asset_buy_order_progress';
import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons';
import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading';
import { ColorOption } from '../style/theme';
import { zIndex } from '../style/z_index';
import { OrderProcessState, SlideAnimationState } from '../types';
import { CSSReset } from './css_reset';
import { SlidingPanel } from './sliding_panel';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
export interface ZeroExInstantContainerProps {
orderProcessState: OrderProcessState;
}
export interface ZeroExInstantContainerState {
tokenSelectionPanelAnimationState: SlideAnimationState;
}
export class ZeroExInstantContainer extends React.Component<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
public state = {
tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
};
public render(): React.ReactNode {
return (
<React.Fragment>
<CSSReset />
<Container
width={{ default: '350px', sm: '100%' }}
height={{ default: 'auto', sm: '100%' }}
position="relative"
>
<Container position="relative">
<LatestError />
</Container>
<Container
zIndex={zIndex.mainContainer}
position="relative"
backgroundColor={ColorOption.white}
borderRadius="3px"
hasBoxShadow={true}
overflow="hidden"
height="100%"
>
<Flex direction="column" justify="flex-start" height="100%">
<SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
{this._renderPaymentMethodOrBuyOrderProgress()}
<LatestBuyQuoteOrderDetails />
<Container padding="20px" width="100%">
<SelectedAssetBuyOrderStateButtons />
</Container>
</Flex>
<SlidingPanel
animationState={this.state.tokenSelectionPanelAnimationState}
onClose={this._handlePanelClose}
>
<AvailableERC20TokenSelector onTokenSelect={this._handlePanelClose} />
</SlidingPanel>
<CurrentStandardSlidingPanel />
</Container>
</Container>
</React.Fragment>
);
}
private readonly _handleSymbolClick = (): void => {
this.setState({
tokenSelectionPanelAnimationState: 'slidIn',
});
};
private readonly _handlePanelClose = (): void => {
this.setState({
tokenSelectionPanelAnimationState: 'slidOut',
});
};
private readonly _renderPaymentMethodOrBuyOrderProgress = (): React.ReactNode => {
const { orderProcessState } = this.props;
if (
orderProcessState === OrderProcessState.Processing ||
orderProcessState === OrderProcessState.Success ||
orderProcessState === OrderProcessState.Failure
) {
return <SelectedAssetBuyOrderProgress />;
} else {
return <ConnectedAccountPaymentMethod />;
}
return null;
};
}
|
