diff options
author | Fabio Berger <me@fabioberger.com> | 2019-01-08 21:30:38 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2019-01-08 21:30:38 +0800 |
commit | 1631031fa74894143cb6835030b7dcd44d7c3c6b (patch) | |
tree | 06dea01cc64fb42905a5f95c95f4b3e16ecfe744 /packages/website/ts/pages/launch_kit/launch_kit.tsx | |
parent | 0bcb81d3a918fbcf71d68f42fa661d884d5d74cf (diff) | |
parent | 0ac36cef288deecd36caa601c53d13517eef5ca8 (diff) | |
download | dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar.gz dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar.bz2 dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar.lz dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar.xz dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.tar.zst dexon-sol-tools-1631031fa74894143cb6835030b7dcd44d7c3c6b.zip |
Merge branch 'development' into feature/order-watcher/dockerize
* development: (898 commits)
Fixed merge conflict from development
Ran prettier
Doc generation working for changes by dutch auction wrapper
added changelog entry for monorepo-scripts
Hide dutch auction wrapper from docs -- hopefully this will prevent the "must export Web3Wrapper" error from doc generation
relaxed version on contract-extension dependencies
Added NetworkID 50 address for dutch auction wrapper
removed manual updte of package.json version
export dutch auction wrapper types from 0x.js
Export dutch auction wrapper in 0x.js
ran prettier
Minor documentation updates to dutch auction wrapper
`afterAuctionDetails` -> `auctionDetails`
Added @todo for including dutch auction addresses once deployed
Ran prettier & linter
Removed redundant assignment
removed needless newline on contract-wrappers changelog
removed timestamp from changelog for abi-gen-wrappers
added dutch auction address for testnets
removed .only
...
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 4ea56dbd4..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/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, - }); - } - } -} |