diff options
Diffstat (limited to 'packages/instant/src/components/zero_ex_instant_container.tsx')
-rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 112 |
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' }); - } - }; -} |