diff options
Diffstat (limited to 'packages/website/ts/pages')
| -rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/launch_kit/launch_kit.tsx | 335 |
3 files changed, 363 insertions, 2 deletions
diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 017573304..e3328f3fa 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -67,6 +67,32 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { }, { description: + 'Launch a 0x relayer in under a minute with Launch Kit. `0x-launch-kit` is an open-source, free-to-use 0x relayer template that you can use as a starting point for your own project.', + link: { + title: '0x launch kit', + to: 'https://github.com/0xProject/0x-launch-kit', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Reference documentation for the 0x smart contracts. Helpful for dApp developer wanting to integrate 0x at the smart contract level.', + link: { + title: '0x smart contracts', + to: WebsitePaths.SmartContracts, + }, + }, + { + description: + "A Python library for interacting with 0x orders. Generate an orderHash, sign an order, validate it's signature and more.", + link: { + title: '0x-order-utils.py', + to: 'http://0x-order-utils-py.s3-website-us-east-1.amazonaws.com/', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', link: { title: '@0x/connect', diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index e2af40c8d..bb76efe21 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -36,8 +36,8 @@ interface Project { } const THROTTLE_TIMEOUT = 100; -const WHATS_NEW_TITLE = '0x Protocol v2 is Live!'; -const WHATS_NEW_URL = 'https://blog.0xproject.com/0x-protocol-v2-0-is-live-183aac180149'; +const WHATS_NEW_TITLE = 'Introducing the 0x Launch Kit'; +const WHATS_NEW_URL = 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585'; const TITLE_STYLE: React.CSSProperties = { fontFamily: 'Roboto Mono', color: colors.grey, diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx new file mode 100644 index 000000000..4ea56dbd4 --- /dev/null +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -0,0 +1,335 @@ +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, + }); + } + } +} |