diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:32:00 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:32:00 +0800 |
commit | ea781b8850cda274d24e4cc5f196dfb7e5b37732 (patch) | |
tree | 4d34321adf0bebe9d1b8a65815dc053b485dbf14 /packages/website/ts/pages/launch_kit/launch_kit.tsx | |
parent | ba7c8d924429a96f6d2b3280faa6b508b582f557 (diff) | |
download | dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.gz dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.bz2 dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.lz dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.xz dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.zst dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.zip |
feat: remove unused files
Diffstat (limited to 'packages/website/ts/pages/launch_kit/launch_kit.tsx')
-rw-r--r-- | packages/website/ts/pages/launch_kit/launch_kit.tsx | 335 |
1 files changed, 0 insertions, 335 deletions
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx deleted file mode 100644 index 37794e887..000000000 --- a/packages/website/ts/pages/launch_kit/launch_kit.tsx +++ /dev/null @@ -1,335 +0,0 @@ -import { colors, Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/old_footer'; -import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -export interface LaunchKitProps { - location: Location; - translate: Translate; - dispatcher: Dispatcher; -} - -interface LaunchKitState { - screenWidth: ScreenWidths; -} - -const THROTTLE_TIMEOUT = 100; -const lighterBackgroundColor = '#222222'; -const darkerBackgroundColor = '#1B1B1B'; -const grayText = '#999999'; - -interface Benefit { - icon: string; - description: string; -} - -export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> { - private readonly _throttledScreenWidthUpdate: () => void; - constructor(props: LaunchKitProps) { - super(props); - this.state = { - screenWidth: utils.getScreenWidth(), - }; - this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); - } - public componentDidMount(): void { - window.addEventListener('resize', this._throttledScreenWidthUpdate); - window.scrollTo(0, 0); - } - public componentWillUnmount(): void { - window.removeEventListener('resize', this._throttledScreenWidthUpdate); - } - public render(): React.ReactNode { - return ( - <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}> - <DocumentTitle title="0x Launch Kit" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - isNightVersion={true} - style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }} - translate={this.props.translate} - /> - {this._renderHero()} - {this._renderSection()} - {this._renderCallToAction()} - {this._renderDisclaimer()} - <Footer - backgroundColor={darkerBackgroundColor} - translate={this.props.translate} - dispatcher={this.props.dispatcher} - /> - </div> - ); - } - private _renderHero(): React.ReactNode { - const BENEFITS_1: Benefit[] = [ - { - icon: '/images/launch_kit/shared_liquidity.svg', - description: this.props.translate.get(Key.TapIntoAndShare, Deco.Cap), - }, - { - icon: '/images/launch_kit/fork.svg', - description: this.props.translate.get(Key.ForkAndExtend, Deco.Cap), - }, - { - icon: '/images/launch_kit/enable_trading.svg', - description: this.props.translate.get(Key.EnableTrading, Deco.Cap), - }, - ]; - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const smallButtonPadding = '12px 30px 12px 30px'; - const largeButtonPadding = '14px 60px 14px 60px'; - const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center'; - const flexClassName = isSmallScreen - ? 'flex items-center flex-column justify-center' - : 'flex items-center justify-center'; - return ( - <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}> - <div className="mx-auto max-width-4 clearfix"> - <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}> - <div className={left} style={{ color: colors.white }}> - <div - className="inline-block lg-align-middle md-align-middle sm-align-top" - style={{ - paddingLeft: isSmallScreen ? 0 : 12, - lineHeight: '36px', - }} - > - <Text - className="sm-pb2" - fontFamily="Roboto" - display="inline-block" - fontColor={colors.white} - fontWeight="bold" - lineHeight="1.3em" - letterSpacing="1px" - fontSize={isSmallScreen ? '38px' : '46px'} - > - {this.props.translate.get(Key.LaunchKit, Deco.CapWords)} - </Text> - <Container paddingTop="18px"> - <Text fontColor={colors.linkSectionGrey} fontSize="18px"> - {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)} - </Text> - </Container> - <Container - paddingTop="54px" - className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} - > - <Container paddingRight="20px"> - <Link to={constants.URL_LAUNCH_KIT} shouldOpenInNewTab={true}> - <Button - padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} - borderRadius="4px" - borderColor={colors.white} - > - <Text fontSize="16px" fontWeight="bold"> - {this.props.translate.get(Key.GetStarted, Deco.Cap)} - </Text> - </Button> - </Link> - </Container> - <div> - <Link to={constants.URL_LAUNCH_KIT_BLOG_POST} shouldOpenInNewTab={true}> - <Button - backgroundColor={lighterBackgroundColor} - borderColor={colors.white} - fontColor={colors.white} - padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} - borderRadius="4px" - > - <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}> - {this.props.translate.get(Key.LearnMore, Deco.Cap)} - </Text> - </Button> - </Link> - </div> - </Container> - </div> - </div> - <Container - marginTop={isSmallScreen ? '60px' : '30px'} - marginBottom="30px" - marginLeft="15px" - marginRight="15px" - > - <Image - src="/images/launch_kit/0x_cupboard.svg" - maxWidth={isSmallScreen ? '75%' : '100%'} - height="auto" - /> - </Container> - </div> - </div> - {this._renderBenefits(BENEFITS_1)} - </div> - ); - } - private _renderSection(): React.ReactNode { - const BENEFITS_2: Benefit[] = [ - { - icon: '/images/launch_kit/secondary_market.svg', - description: this.props.translate.get(Key.QuicklyLaunch, Deco.Cap), - }, - { - icon: '/images/launch_kit/in_game_marketplace.svg', - description: this.props.translate.get(Key.SeemlesslyCreate, Deco.Cap), - }, - { - icon: '/images/launch_kit/local_market.svg', - description: this.props.translate.get(Key.LocalMarket, Deco.Cap), - }, - ]; - return ( - <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}> - <Container - className="mx-auto" - textAlign="center" - paddingTop="89px" - paddingBottom="89px" - maxWidth="421px" - paddingLeft="10px" - paddingRight="10px" - > - <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}> - {this.props.translate.get(Key.PerfectForDevelopers, Deco.Cap)} - </Text> - </Container> - {this._renderBenefits(BENEFITS_2)} - </div> - ); - } - private _renderCallToAction(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const smallButtonPadding = '8px 14px 8px 14px'; - const largeButtonPadding = '8px 14px 8px 14px'; - return ( - <Container - className="clearfix" - backgroundColor={lighterBackgroundColor} - paddingTop="90px" - paddingBottom="90px" - > - <Container className="clearfix mx-auto" maxWidth="850px"> - <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px"> - <Text fontColor={colors.white} fontSize="18px"> - View our comprehensive documentation to start building today. - </Text> - </Container> - <Container - className={`lg-right md-right flex clearfix sm-mx-auto ${ - isSmallScreen ? 'justify-center' : '' - }`} - paddingTop="5px" - > - <Container paddingRight="20px"> - <Link to={`${constants.URL_LAUNCH_KIT}/#table-of-contents`} shouldOpenInNewTab={true}> - <Button - padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} - borderRadius="4px" - backgroundColor={lighterBackgroundColor} - borderColor={colors.white} - > - <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}> - {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)} - </Text> - </Button> - </Link> - </Container> - <div> - <Link to={constants.URL_ZEROEX_CHAT} shouldOpenInNewTab={true}> - <Button - padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} - borderRadius="4px" - > - <Text fontSize="16px" fontWeight="bold"> - {this.props.translate.get(Key.GetInTouch, Deco.Cap)} - </Text> - </Button> - </Link> - </div> - </Container> - </Container> - </Container> - ); - } - private _renderBenefits(benefits: Benefit[]): React.ReactNode { - return ( - <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px"> - {_.map(benefits, benefit => { - return ( - <Container className="mx-auto sm-pb4" width="240px"> - <Container textAlign="center"> - <img src={benefit.icon} /> - </Container> - <Container paddingTop="26px"> - <Text - fontSize="18px" - lineHeight="28px" - textAlign="center" - fontColor={colors.linkSectionGrey} - > - {benefit.description} - </Text> - </Container> - </Container> - ); - })} - </Container> - ); - } - private _renderDisclaimer(): React.ReactNode { - return ( - <Container - className="clearfix" - backgroundColor={darkerBackgroundColor} - paddingTop="70px" - paddingBottom="70px" - > - <Container className="mx-auto" maxWidth="850px" paddingLeft="20px" paddingRight="20px"> - <Text fontColor={grayText} fontSize="10px"> - <b>Disclaimer:</b> The laws and regulations applicable to the use and exchange of digital assets - and blockchain-native tokens, including through any software developed using the licensed work - created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, - Version 2.0 applicable to the Work, developers are “solely responsible for determining the - appropriateness of using or redistributing the Work,” which includes responsibility for ensuring - compliance with any such applicable laws and regulations. - </Text> - <Container paddingTop="15px"> - <Text fontColor={grayText} fontSize="10px"> - See the{' '} - <Link - to={constants.URL_APACHE_LICENSE} - shouldOpenInNewTab={true} - textDecoration="underline" - > - Apache License, Version 2.0 - </Link>{' '} - for the specific language governing all applicable permissions and limitations. - </Text> - </Container> - </Container> - </Container> - ); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - if (newScreenWidth !== this.state.screenWidth) { - this.setState({ - screenWidth: newScreenWidth, - }); - } - } -} |