aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/zero_ex_instant_container.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_container.tsx')
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx112
1 files changed, 0 insertions, 112 deletions
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
deleted file mode 100644
index e8c64d5d1..000000000
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from 'react';
-
-import PoweredByLogo from '../assets/powered_by_0x.svg';
-import { ZERO_EX_SITE_URL } from '../constants';
-import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
-import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_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 { 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 { SlideAnimationState } from '../types';
-import { analytics, TokenSelectorClosedVia } from '../util/analytics';
-
-import { CSSReset } from './css_reset';
-import { SlidingPanel } from './sliding_panel';
-import { Container } from './ui/container';
-import { Flex } from './ui/flex';
-
-export interface ZeroExInstantContainerProps {}
-export interface ZeroExInstantContainerState {
- tokenSelectionPanelAnimationState: SlideAnimationState;
-}
-
-export class ZeroExInstantContainer extends React.PureComponent<
- 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={{ default: '3px', sm: '0px' }}
- hasBoxShadow={true}
- overflow="hidden"
- height="100%"
- >
- <Flex direction="column" justify="flex-start" height="100%">
- <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} />
- <ConnectedBuyOrderProgressOrPaymentMethod />
- <LatestBuyQuoteOrderDetails />
- <Container padding="20px" width="100%">
- <SelectedAssetBuyOrderStateButtons />
- </Container>
- </Flex>
- <SlidingPanel
- animationState={this.state.tokenSelectionPanelAnimationState}
- onClose={this._handlePanelCloseClickedX}
- onAnimationEnd={this._handleSlidingPanelAnimationEnd}
- >
- <AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
- </SlidingPanel>
- <CurrentStandardSlidingPanel />
- </Container>
- <Container
- display={{ sm: 'none', default: 'block' }}
- marginTop="10px"
- marginLeft="auto"
- marginRight="auto"
- width="108px"
- >
- <a href={ZERO_EX_SITE_URL} target="_blank">
- <PoweredByLogo />
- </a>
- </Container>
- </Container>
- </React.Fragment>
- );
- }
- private readonly _handleSymbolClick = (): void => {
- analytics.trackTokenSelectorOpened();
- this.setState({
- tokenSelectionPanelAnimationState: 'slidIn',
- });
- };
- private readonly _handlePanelCloseClickedX = (): void => {
- this._handlePanelClose(TokenSelectorClosedVia.ClickedX);
- };
- private readonly _handlePanelCloseAfterChose = (): void => {
- this._handlePanelClose(TokenSelectorClosedVia.TokenChose);
- };
- private readonly _handlePanelClose = (closedVia: TokenSelectorClosedVia): void => {
- analytics.trackTokenSelectorClosed(closedVia);
- this.setState({
- tokenSelectionPanelAnimationState: 'slidOut',
- });
- };
- private readonly _handleSlidingPanelAnimationEnd = (): void => {
- if (this.state.tokenSelectionPanelAnimationState === 'slidOut') {
- // When the slidOut animation completes, don't keep the panel mounted.
- // Performance optimization
- this.setState({ tokenSelectionPanelAnimationState: 'none' });
- }
- };
-}