crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge https://github.com/0xProject/0x-monorepo into feature/website/update-portal-v2

Browse Source
This commit is contained in:
fragosti
2018-09-04 10:53:18 -07:00
parent 11df29fa8e 6a619a4084
commit e61dbbb6cf
103 changed files with 1437 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/website/ts/components/top_bar/top_bar.tsx
View File

@@ -19,7 +19,7 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
import { DropDown } from 'ts/components/ui/drop_down';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -238,7 +238,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
const menuClasses = `col col-${
isExpandedDisplayType ? '4' : '5'
isExpandedDisplayType ? '4' : '6'
} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
const menuIconStyle = {
fontSize: 25,
@@ -301,6 +301,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
isNightVersion={isNightVersion}
isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Careers, Deco.Cap)}
path={`${WebsitePaths.Careers}`}
style={styles.menuItem}
isNightVersion={isNightVersion}
isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
path={`${WebsitePaths.Portal}`}
@@ -406,6 +413,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.About}`} className="text-decoration-none">
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
<Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
<MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
</Link>
<a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
</a>

1
packages/website/ts/components/ui/button.tsx
View File

@@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
CallToAction.defaultProps = {
type: 'dark',
fontSize: '14px',
padding: '0.9em 1.6em',
};

2
packages/website/ts/components/ui/text.tsx
View File

@@ -20,6 +20,7 @@ export interface TextProps {
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
hoverColor?: string;
noWrap?: boolean;
display?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -41,6 +42,7 @@ export const Text = styled(PlainText)`
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
${props => (props.noWrap ? 'white-space: nowrap' : '')};
${props => (props.display ? `display: ${props.display}` : '')};
&:hover {
${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
}

75
packages/website/ts/components/ui/typed_text.tsx Normal file
View File

@@ -0,0 +1,75 @@
import * as _ from 'lodash';
import * as React from 'react';
import Typist from 'react-typist';
import { Text, TextProps } from 'ts/components/ui/text';
import 'react-typist/dist/Typist.css';
export interface TypedTextProps extends TextProps {
textList: string[];
shouldRepeat?: boolean;
wordDelayMs?: number;
avgKeystrokeDelayMs?: number;
stdKeystrokeDelay?: number;
}
export interface TypedTextState {
cycleCount: number;
}
export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
public static defaultProps = {
shouldRepeat: false,
avgKeystrokeDelayMs: 90,
wordDelayMs: 1000,
};
public state = {
cycleCount: 0,
};
public render(): React.ReactNode {
const {
textList,
shouldRepeat,
wordDelayMs,
avgKeystrokeDelayMs,
stdKeystrokeDelay,
// tslint:disable-next-line
...textProps
} = this.props;
const { cycleCount } = this.state;
if (_.isEmpty(textList)) {
return null;
}
const typistChildren: React.ReactNode[] = [];
_.forEach(textList, text => {
typistChildren.push(
<Text key={`text-${text}-${cycleCount}`} {...textProps}>
{text}
</Text>,
);
if (wordDelayMs) {
typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
}
typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
});
return (
<Typist
avgTypingDelay={avgKeystrokeDelayMs}
stdTypingDelay={stdKeystrokeDelay}
className="inline"
key={`typist-key-${cycleCount}`}
onTypingDone={this._onTypingDone.bind(this)}
>
{typistChildren}
</Typist>
);
}
private _onTypingDone(): void {
if (this.props.shouldRepeat) {
this.setState({
cycleCount: this.state.cycleCount + 1,
});
}
}
}

2
packages/website/ts/containers/connect_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';

3
packages/website/ts/containers/contract_wrappers_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

1
packages/website/ts/containers/ethereum_types_documentation.ts
View File

@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

1
packages/website/ts/containers/order_utils_documentation.ts
View File

@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

1
packages/website/ts/containers/order_watcher_documentation.ts
View File

@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

2
packages/website/ts/containers/sol_compiler_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';

2
packages/website/ts/containers/sol_cov_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';

3
packages/website/ts/containers/subproviders_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

3
packages/website/ts/containers/web3_wrapper_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

3
packages/website/ts/containers/zero_ex_js_documentation.ts
View File

@@ -1,4 +1,4 @@
import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */

1
packages/website/ts/globals.d.ts vendored
View File

@@ -10,6 +10,7 @@ declare module '*.json' {
export default json;
/* tslint:enable */
}
declare module 'web3-provider-engine/subproviders/filters';
// This will be defined by default in TS 2.4
// Source: https://github.com/Microsoft/TypeScript/issues/12364

532
packages/website/ts/pages/landing/landing.tsx
View File

@@ -8,6 +8,9 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { CallToAction } 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 { TypedText } from 'ts/components/ui/typed_text';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -19,11 +22,7 @@ interface BoxContent {
description: string;
imageUrl: string;
classNames: string;
}
interface AssetType {
title: string;
imageUrl: string;
style?: React.CSSProperties;
maxWidth: number;
}
interface UseCase {
imageUrl: string;
@@ -31,7 +30,6 @@ interface UseCase {
description: string;
classNames: string;
style?: React.CSSProperties;
projectIconUrls: string[];
}
interface Project {
logoFileName: string;
@@ -41,72 +39,22 @@ interface Project {
const THROTTLE_TIMEOUT = 100;
const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
const relayersAndDappProjects: Project[] = [
{
logoFileName: 'ercdex.png',
projectUrl: constants.PROJECT_URL_ERC_DEX,
},
{
logoFileName: 'radar_relay.png',
projectUrl: constants.PROJECT_URL_RADAR_RELAY,
},
{
logoFileName: 'paradex.png',
projectUrl: constants.PROJECT_URL_PARADEX,
},
{
logoFileName: 'the_ocean.png',
projectUrl: constants.PROJECT_URL_0CEAN,
},
{
logoFileName: 'dydx.png',
projectUrl: constants.PROJECT_URL_DYDX,
},
{
logoFileName: 'ethfinex.png',
projectUrl: constants.PROJECT_URL_ETHFINEX,
},
{
logoFileName: 'melonport.png',
projectUrl: constants.PROJECT_URL_MELONPORT,
},
{
logoFileName: 'maker.png',
projectUrl: constants.PROJECT_URL_MAKER,
},
{
logoFileName: 'dharma.png',
projectUrl: constants.PROJECT_URL_DHARMA,
},
{
logoFileName: 'lendroid.png',
projectUrl: constants.PROJECT_URL_LENDROID,
},
{
logoFileName: 'district0x.png',
projectUrl: constants.PROJECT_URL_DISTRICT_0X,
},
{
logoFileName: 'aragon.png',
projectUrl: constants.PROJECT_URL_ARAGON,
},
{
logoFileName: 'blocknet.png',
projectUrl: constants.PROJECT_URL_BLOCKNET,
},
{
logoFileName: 'imtoken.png',
projectUrl: constants.PROJECT_URL_IMTOKEN,
},
{
logoFileName: 'augur.png',
projectUrl: constants.PROJECT_URL_AUGUR,
},
{
logoFileName: 'anx.png',
projectUrl: constants.PROJECT_URL_OPEN_ANX,
},
const TITLE_STYLE: React.CSSProperties = {
fontFamily: 'Roboto Mono',
color: colors.grey,
fontWeight: 300,
letterSpacing: 3,
};
const ROTATING_LIST = [
'tokens',
'game items',
'digital art',
'futures',
'stocks',
'derivatives',
'loans',
'cats',
'everything',
];
const relayerProjects: Project[] = [
@@ -198,22 +146,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
translate={this.props.translate}
/>
{this._renderHero()}
{this._renderProjects(
relayersAndDappProjects,
this.props.translate.get(Key.ProjectsHeader, Deco.Upper),
colors.projectsGrey,
false,
)}
{this._renderTokenizationSection()}
{this._renderProtocolSection()}
{this._renderProjects(
relayerProjects,
this.props.translate.get(Key.RelayersHeader, Deco.Upper),
colors.heroGrey,
colors.projectsGrey,
true,
)}
{this._renderInfoBoxes()}
{this._renderBuildingBlocksSection()}
{this._renderTokenizationSection()}
{this._renderUseCases()}
{this._renderCallToAction()}
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
@@ -222,15 +162,18 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
private _renderHero(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 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 py4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 clearfix">
{this._renderWhatsNew()}
<div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4 clearfix">
<div className="col lg-col-5 md-col-5 col-12 sm-center">
<img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
</div>
<div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}>
<Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px">
<Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" />
</Container>
<div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
<div
className="inline-block lg-align-middle md-align-middle sm-align-top"
@@ -239,37 +182,46 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: '36px',
}}
>
<div
<Text
className="sm-pb2"
style={{
fontFamily: 'Roboto Mono',
fontSize: isSmallScreen ? 26 : 34,
}}
fontFamily="Roboto"
display="inline-block"
fontColor={colors.grey300}
fontWeight={500}
lineHeight="1.3em"
fontSize={isSmallScreen ? '28px' : '36px'}
>
{this.props.translate.get(Key.TopHeader, Deco.Cap)}
</div>
<div
className="pt2 h5 sm-mx-auto"
style={{
maxWidth: 446,
fontFamily: 'Roboto Mono',
lineHeight: 1.7,
fontWeight: 300,
}}
{this.props.translate.getLanguage() === Language.English && (
<React.Fragment>
{' '}
for{' '}
<TypedText
fontFamily="Roboto"
display="inline-block"
fontColor={colors.white}
fontWeight={700}
lineHeight="1.3em"
fontSize={isSmallScreen ? '28px' : '36px'}
textList={ROTATING_LIST}
shouldRepeat={true}
/>
</React.Fragment>
)}
</Text>
<Container
className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
>
{this.props.translate.get(Key.TopTagline)}
</div>
<Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
<div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
<Container paddingRight="20px">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
<CallToAction width="175px" type="light">
<CallToAction type="light">
{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
</CallToAction>
</Link>
</div>
<div className="lg-col lg-col-6 sm-center sm-col sm-col-12">
</Container>
<div>
<Link to={WebsitePaths.Portal} className="text-decoration-none">
<CallToAction width="175px">
<CallToAction>
{this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
</CallToAction>
</Link>
@@ -287,19 +239,24 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div className="sm-center sm-px1">
<a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none">
<div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}>
<div
className="mr1 px1"
style={{
backgroundColor: colors.white,
borderRadius: 3,
color: colors.heroGrey,
height: 23,
}}
<div className="flex items-center sm-pl0 md-pl2 lg-pl0">
<Container
paddingTop="3px"
paddingLeft="8px"
paddingBottom="3px"
paddingRight="8px"
backgroundColor={colors.white}
borderRadius={6}
>
New
</div>
<div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div>
<Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}>
New
</Text>
</Container>
<Container marginLeft="12px">
<Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}>
{WHATS_NEW_TITLE}
</Text>
</Container>
</div>
</a>
</div>
@@ -344,16 +301,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
});
const titleStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
color: colors.grey,
fontWeight: 300,
letterSpacing: 3,
};
return (
<div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}>
<div className="mx-auto max-width-4 clearfix sm-px3">
<div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}>
<div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
{title}
</div>
<div className="clearfix">{projectList}</div>
@@ -368,7 +319,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
{this.props.translate.get(Key.FullListPrompt)}{' '}
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
to={WebsitePaths.Portal}
className="text-decoration-none underline"
style={{ color: colors.landingLinkGrey }}
>
@@ -402,7 +353,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
{this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)}
</div>
<div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
<div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div>
</div>
</div>
{!isSmallScreen && this._renderTokenCloud()}
@@ -410,116 +361,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private _renderProtocolSection(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 pt4 clearfix">
<div className="col lg-col-6 md-col-6 col-12 sm-center">
<img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
</div>
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
style={{
color: colors.beigeWhite,
maxWidth: isSmallScreen ? 'none' : 445,
height: 430,
lineHeight: '430px',
}}
>
<div
className="inline-block lg-align-middle md-align-middle sm-align-top"
style={{ lineHeight: '43px' }}
>
<div
className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
style={{ fontFamily: 'Roboto Mono' }}
>
<div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div>
<div> {this.props.translate.get(Key.OnChainSettlement, Deco.Cap)}</div>
</div>
<div
className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto"
style={{
fontFamily: 'Roboto Mono',
lineHeight: 1.7,
fontWeight: 300,
maxWidth: 445,
}}
>
{this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)}
</div>
</div>
</div>
</div>
</div>
);
}
private _renderBuildingBlocksSection(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const descriptionStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
lineHeight: isSmallScreen ? 1.5 : 2,
fontWeight: 300,
fontSize: 15,
maxWidth: isSmallScreen ? 375 : 'none',
};
const callToActionStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
fontSize: 15,
fontWeight: 300,
maxWidth: isSmallScreen ? 375 : 441,
};
return (
<div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
{isSmallScreen && this._renderBlockChipImage()}
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
style={{ color: colors.beigeWhite }}
>
<div
className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
style={{ fontFamily: 'Roboto Mono' }}
>
{this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)}
</div>
<div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}>
{this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)}
</div>
<div className="sm-mx-auto sm-center" style={callToActionStyle}>
{this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '}
<Link
to={WebsitePaths.ZeroExJs}
className="text-decoration-none underline"
style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
>
0x.js
</Link>{' '}
{this.props.translate.get(Key.And)}{' '}
<Link
to={WebsitePaths.SmartContracts}
className="text-decoration-none underline"
style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
>
{this.props.translate.get(Key.SmartContract)}
</Link>{' '}
{this.props.translate.get(Key.Docs)}
</div>
</div>
{!isSmallScreen && this._renderBlockChipImage()}
</div>
</div>
);
}
private _renderBlockChipImage(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 sm-center">
<img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} />
</div>
);
}
private _renderTokenCloud(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
@@ -528,48 +369,16 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private _renderAssetTypes(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const assetTypes: AssetType[] = [
{
title: this.props.translate.get(Key.Currency, Deco.Cap),
imageUrl: '/images/landing/currency.png',
},
{
title: this.props.translate.get(Key.TraditionalAssets, Deco.Cap),
imageUrl: '/images/landing/stocks.png',
style: {
paddingLeft: isSmallScreen ? 41 : 56,
paddingRight: isSmallScreen ? 41 : 56,
},
},
{
title: this.props.translate.get(Key.DigitalGoods, Deco.Cap),
imageUrl: '/images/landing/digital_goods.png',
},
];
const assets = _.map(assetTypes, (assetType: AssetType) => {
const style = _.isUndefined(assetType.style) ? {} : assetType.style;
return (
<div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}>
<div>
<img src={assetType.imageUrl} height="80" />
</div>
<div
style={{
fontFamily: 'Roboto Mono',
fontSize: 13.5,
fontWeight: 400,
color: colors.darkestGrey,
lineHeight: 1.4,
}}
>
{assetType.title}
</div>
</div>
);
});
return assets;
private _renderMissionAndValuesButton(): React.ReactNode {
return (
<a
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
target="_blank"
className="inline-block text-decoration-none"
>
<CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction>
</a>
);
}
private _renderInfoBoxes(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
@@ -586,27 +395,34 @@ export class Landing extends React.Component<LandingProps, LandingState> {
description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap),
imageUrl: '/images/landing/distributed_network.png',
classNames: '',
maxWidth: 160,
},
{
title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap),
description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap),
imageUrl: '/images/landing/liquidity.png',
classNames: 'mx-auto',
maxWidth: 160,
},
{
title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap),
description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap),
imageUrl: '/images/landing/open_source.png',
imageUrl: '/images/landing/exchange_everywhere.png',
classNames: 'right',
maxWidth: 130,
},
];
const boxes = _.map(boxContents, (boxContent: BoxContent) => {
return (
<div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
<div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
<div>
<img src={boxContent.imageUrl} style={{ height: 210 }} />
</div>
<Container className="flex items-center" height="210px">
<img
className="mx-auto"
src={boxContent.imageUrl}
style={{ height: 'auto', maxWidth: boxContent.maxWidth }}
/>
</Container>
<div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
{boxContent.title}
</div>
@@ -617,15 +433,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
});
const titleStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
color: colors.grey,
fontWeight: 300,
letterSpacing: 3,
};
return (
<div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
<div className="center pb3 pt4" style={titleStyle}>
<div className="center pb3 pt4" style={TITLE_STYLE}>
{this.props.translate.get(Key.BenefitsHeader, Deco.Upper)}
</div>
<div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
@@ -634,53 +444,92 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
private _getUseCases(): UseCase[] {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const isEnglish = this.props.translate.getLanguage() === Language.English;
if (isEnglish) {
return [
{
imageUrl: '/images/landing/governance_icon.png',
type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper),
description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/prediction_market_icon.png',
type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/fund_management_icon.png',
type: this.props.translate.get(Key.OrderBooks, Deco.Upper),
description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/loans_icon.png',
type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
style: {
width: 291,
float: 'right',
marginTop: !isSmallScreen ? 38 : 0,
},
},
{
imageUrl: '/images/landing/stable_tokens_icon.png',
type: this.props.translate.get(Key.StableTokens, Deco.Upper),
description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
},
];
} else {
return [
{
imageUrl: '/images/landing/governance_icon.png',
type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper),
description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/prediction_market_icon.png',
type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/stable_tokens_icon.png',
type: this.props.translate.get(Key.StableTokens, Deco.Upper),
description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/loans_icon.png',
type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
style: {
width: 291,
float: 'right',
marginTop: !isSmallScreen ? 38 : 0,
},
},
{
imageUrl: '/images/landing/fund_management_icon.png',
type: this.props.translate.get(Key.FundManagement, Deco.Upper),
description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap),
classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
},
];
}
}
private _renderUseCases(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const useCases: UseCase[] = [
{
imageUrl: '/images/landing/governance_icon.png',
type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper),
description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap),
projectIconUrls: ['/images/landing/aragon.png'],
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/prediction_market_icon.png',
type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
projectIconUrls: ['/images/landing/augur.png'],
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/stable_tokens_icon.png',
type: this.props.translate.get(Key.StableTokens, Deco.Upper),
description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
projectIconUrls: ['/images/landing/maker.png'],
classNames: 'lg-px2 md-px2',
},
{
imageUrl: '/images/landing/loans_icon.png',
type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'],
classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
style: {
width: 291,
float: 'right',
marginTop: !isSmallScreen ? 38 : 0,
},
},
{
imageUrl: '/images/landing/fund_management_icon.png',
type: this.props.translate.get(Key.FundManagement, Deco.Upper),
description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap),
projectIconUrls: ['/images/landing/melonport.png'],
classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
},
];
const useCases = this._getUseCases();
const cases = _.map(useCases, (useCase: UseCase) => {
const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
const useCaseBoxStyle = {
@@ -715,7 +564,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: 1.5,
fontSize: 14,
overflow: 'hidden',
height: 104,
height: 124,
}}
>
{useCase.description}
@@ -725,7 +574,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
});
return (
<div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
<div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
<div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
{this.props.translate.get(Key.UseCasesHeader, Deco.Upper)}
</div>
<div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
{cases}
</div>

6
packages/website/ts/types.ts
View File

@@ -399,6 +399,7 @@ export enum Key {
OffChainOnChainDescription = 'OFFCHAIN_ONCHAIN_DESCRIPTION',
RelayersHeader = 'RELAYERS_HEADER',
BenefitsHeader = 'BENEFITS_HEADER',
UseCasesHeader = 'USE_CASES_HEADER',
BenefitOneTitle = 'BENEFIT_ONE_TITLE',
BenefitOneDescription = 'BENEFIT_ONE_DESCRIPTION',
BenefitTwoTitle = 'BENEFIT_TWO_TITLE',
@@ -420,6 +421,10 @@ export enum Key {
DecentralizedLoansDescription = 'DECENTRALIZED_LOANS_DESCRIPTION',
FundManagement = 'FUND_MANAGEMENT',
FundManagementDescription = 'FUND_MANAGEMENT_DESCRIPTION',
GamingAndCollectables = 'GAMING_AND_COLLECTABLES',
GamingAndCollectablesDescription = 'GAMING_AND_COLLECTABLES_DESCRIPTION',
OrderBooks = 'ORDER_BOOKS',
OrderBooksDescription = 'ORDER_BOOKS_DESCRIPTION',
FinalCallToAction = 'FINAL_CALL_TO_ACTION',
Documentation = 'DOCUMENTATION',
Community = 'COMMUNITY',
@@ -452,6 +457,7 @@ export enum Key {
Home = 'HOME',
RocketChat = 'ROCKETCHAT',
TradeCallToAction = 'TRADE_CALL_TO_ACTION',
OurMissionAndValues = 'OUR_MISSION_AND_VALUES',
}
export enum SmartContractDocSections {