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,
});
}
}
}