aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/launch_kit/launch_kit.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2019-01-08 21:30:38 +0800
committerFabio Berger <me@fabioberger.com>2019-01-08 21:30:38 +0800
commit1631031fa74894143cb6835030b7dcd44d7c3c6b (patch)
tree06dea01cc64fb42905a5f95c95f4b3e16ecfe744 /packages/website/ts/pages/launch_kit/launch_kit.tsx
parent0bcb81d3a918fbcf71d68f42fa661d884d5d74cf (diff)
parent0ac36cef288deecd36caa601c53d13517eef5ca8 (diff)
downloaddexon-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.tsx335
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,
- });
- }
- }
-}