329 lines
15 KiB
TypeScript
329 lines
15 KiB
TypeScript
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.CapWords)}
|
|
</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" width="890px">
|
|
<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 Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0) 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,
|
|
});
|
|
}
|
|
}
|
|
}
|