aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/footer.tsx6
-rw-r--r--packages/website/ts/components/ui/container.tsx2
-rw-r--r--packages/website/ts/containers/launch_kit.ts27
-rw-r--r--packages/website/ts/index.tsx2
-rw-r--r--packages/website/ts/pages/documentation/docs_home.tsx26
-rw-r--r--packages/website/ts/pages/landing/landing.tsx4
-rw-r--r--packages/website/ts/pages/launch_kit/launch_kit.tsx335
-rw-r--r--packages/website/ts/types.ts14
-rw-r--r--packages/website/ts/utils/constants.ts3
9 files changed, 416 insertions, 3 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index dfedcba55..e10005a0a 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -23,6 +23,7 @@ const languageToMenuTitle = {
export interface FooterProps {
translate: Translate;
dispatcher: Dispatcher;
+ backgroundColor?: string;
}
interface FooterState {
@@ -30,6 +31,9 @@ interface FooterState {
}
export class Footer extends React.Component<FooterProps, FooterState> {
+ public static defaultProps = {
+ backgroundColor: colors.darkerGrey,
+ };
constructor(props: FooterProps) {
super(props);
this.state = {
@@ -112,7 +116,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
});
return (
- <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+ <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
<div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
<div className="col lg-col-4 md-col-4 col-12 left">
<div className="sm-mx-auto" style={{ width: 148 }}>
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index ece077563..7eab2a50f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,3 +1,4 @@
+import { TextAlignProperty } from 'csstype';
import * as React from 'react';
type StringOrNum = string | number;
@@ -26,6 +27,7 @@ export interface ContainerProps {
height?: StringOrNum;
minWidth?: StringOrNum;
minHeight?: StringOrNum;
+ textAlign?: TextAlignProperty;
isHidden?: boolean;
className?: string;
position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts
new file mode 100644
index 000000000..2557f38a5
--- /dev/null
+++ b/packages/website/ts/containers/launch_kit.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { LaunchKit as LaunchKitComponent, LaunchKitProps } from 'ts/pages/launch_kit/launch_kit';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+ translate: Translate;
+}
+
+interface ConnectedDispatch {
+ dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, _ownProps: LaunchKitProps): ConnectedState => ({
+ translate: state.translate,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+ dispatcher: new Dispatcher(dispatch),
+});
+
+export const LaunchKit: React.ComponentClass<LaunchKitProps> = connect(mapStateToProps, mapDispatchToProps)(
+ LaunchKitComponent,
+);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 21157e427..96e7184f8 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -9,6 +9,7 @@ import { DocsHome } from 'ts/containers/docs_home';
import { FAQ } from 'ts/containers/faq';
import { Jobs } from 'ts/containers/jobs';
import { Landing } from 'ts/containers/landing';
+import { LaunchKit } from 'ts/containers/launch_kit';
import { NotFound } from 'ts/containers/not_found';
import { Wiki } from 'ts/containers/wiki';
import { createLazyComponent } from 'ts/lazy_component';
@@ -87,6 +88,7 @@ render(
<Switch>
<Route exact={true} path="/" component={Landing as any} />
<Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
+ <Route path={WebsitePaths.LaunchKit} component={LaunchKit as any} />
<Route path={WebsitePaths.Careers} component={Jobs as any} />
<Route path={WebsitePaths.Portal} component={LazyPortal} />
<Route path={WebsitePaths.FAQ} component={FAQ as any} />
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,
+ });
+ }
+ }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index ce4b50a58..444a8348d 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -352,6 +352,7 @@ export enum WebsitePaths {
Home = '/',
FAQ = '/faq',
About = '/about',
+ LaunchKit = '/launch-kit',
Whitepaper = '/pdfs/0x_white_paper.pdf',
SmartContracts = '/docs/contracts',
Connect = '/docs/connect',
@@ -479,6 +480,19 @@ export enum Key {
More = 'MORE',
StartBuildOn0x = 'START_BUILDING_ON_0X',
StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION',
+ LaunchKit = 'LAUNCH_KIT',
+ LaunchKitPitch = 'LAUNCH_KIT_PITCH',
+ ExploreTheDocs = 'EXPLORE_THE_DOCS',
+ EnableTrading = 'ENABLE_TRADING',
+ ForkAndExtend = 'FORK_AND_EXTEND',
+ LocalMarket = 'LOCAL_MARKET',
+ SeemlesslyCreate = 'SEEMLESSLY_CREATE',
+ QuicklyLaunch = 'QUICKLY_LAUNCH',
+ TapIntoAndShare = 'TAP_INTO_AND_SHARE',
+ PerfectForDevelopers = 'PERFECT_FOR_DEVELOPERS',
+ GetInTouch = 'GET_IN_TOUCH',
+ LearnMore = 'LEARN_MORE',
+ GetStarted = 'GET_STARTED',
}
export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 379f28022..e9afc8763 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -72,6 +72,7 @@ export const constants = {
PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
PROJECT_URL_IDT: 'https://kinalpha.com',
URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
+ URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0',
URL_BITLY_API: 'https://api-ssl.bitly.com',
URL_BLOG: 'https://blog.0xproject.com/latest',
URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
@@ -95,6 +96,8 @@ export const constants = {
URL_TWITTER: 'https://twitter.com/0xproject',
URL_WETH_IO: 'https://weth.io/',
URL_ZEROEX_CHAT,
+ URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',
+ URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585',
URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
URL_WEB3_DECODED_LOG_ENTRY_EVENT:
'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-15 17:26:44 +0800