diff options
Diffstat (limited to 'packages/website')
29 files changed, 1 insertions, 2818 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index bb97ea4e8..527a2c955 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -9,7 +9,7 @@ "scripts": { "build": "yarn build:dev", "build:prod": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", - "build:dev": "../../node_modules/.bin/webpack --mode development", + "build:dev": "../../node_modules/.bin/webpack --mode development --json", "clean": "shx rm -f public/bundle*", "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'", "dev": "webpack-dev-server --mode development --content-base public --https", diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx deleted file mode 100644 index bbec1d649..000000000 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { colors } from '@0x/react-shared'; -import Dialog from 'material-ui/Dialog'; -import FlatButton from 'material-ui/FlatButton'; -import * as React from 'react'; -import { constants } from 'ts/utils/constants'; - -interface U2fNotSupportedDialogProps { - isOpen: boolean; - onToggleDialog: () => void; -} - -export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => { - return ( - <Dialog - title="U2F Not Supported" - titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]} - open={props.isOpen} - onRequestClose={props.onToggleDialog} - autoScrollBodyContent={true} - > - <div className="pt2" style={{ color: colors.grey700 }}> - <div> - It looks like your browser does not support U2F connections required for us to communicate with your - hardware wallet. Please use a browser that supports U2F connections and try again. - </div> - <div> - <ul> - <li className="pb1">Chrome version 38 or later</li> - <li className="pb1">Opera version 40 of later</li> - <li> - Firefox with{' '} - <a - href={constants.URL_FIREFOX_U2F_ADDON} - target="_blank" - style={{ textDecoration: 'underline' }} - > - this extension - </a>. - </li> - </ul> - </div> - </div> - </Dialog> - ); -}; diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx deleted file mode 100644 index cf2c4dda5..000000000 --- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Dialog from 'material-ui/Dialog'; -import FlatButton from 'material-ui/FlatButton'; -import { colors } from 'material-ui/styles'; -import * as React from 'react'; - -interface WrappedEthSectionNoticeDialogProps { - isOpen: boolean; - onToggleDialog: () => void; -} - -export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDialogProps) => { - return ( - <Dialog - title="Dedicated Wrapped Ether Section" - titleStyle={{ fontWeight: 100 }} - actions={[ - <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />, - ]} - open={props.isOpen} - onRequestClose={props.onToggleDialog} - autoScrollBodyContent={true} - modal={true} - > - <div className="pt2" style={{ color: colors.grey700 }}> - <div> - We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping - Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH" - section in the menu to the left. - </div> - </div> - </Dialog> - ); -}; diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx deleted file mode 100644 index f5560cfa7..000000000 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { Input } from 'ts/components/ui/input'; -import { Text } from 'ts/components/ui/text'; -import { analytics } from 'ts/utils/analytics'; -import { backendClient } from 'ts/utils/backend_client'; - -export interface SubscribeFormProps {} - -export enum SubscribeFormStatus { - None, - Error, - Success, - Loading, - Other, -} - -export interface SubscribeFormState { - emailText: string; - lastSubmittedEmail: string; - status: SubscribeFormStatus; -} - -const FORM_FONT_SIZE = '15px'; - -// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001 -export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> { - public state = { - emailText: '', - lastSubmittedEmail: '', - status: SubscribeFormStatus.None, - }; - public render(): React.ReactNode { - return ( - <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2"> - <Container marginBottom="15px"> - <Text fontFamily="Roboto Mono" fontColor={colors.grey} center={true}> - Subscribe to our newsletter for 0x relayer and dApp updates - </Text> - </Container> - <form onSubmit={this._handleFormSubmitAsync.bind(this)}> - <Container className="flex flex-wrap justify-center items-center"> - <Container marginTop="15px"> - <Input - placeholder="you@email.com" - value={this.state.emailText} - fontColor={colors.white} - fontSize={FORM_FONT_SIZE} - backgroundColor={colors.projectsGrey} - width="300px" - onChange={this._handleEmailInputChange.bind(this)} - /> - </Container> - <Container marginLeft="15px" marginTop="15px"> - <Button - type="submit" - backgroundColor={colors.darkestGrey} - fontColor={colors.white} - fontSize={FORM_FONT_SIZE} - > - Subscribe - </Button> - </Container> - </Container> - </form> - {this._renderMessage()} - </Container> - ); - } - private _renderMessage(): React.ReactNode { - let message = null; - switch (this.state.status) { - case SubscribeFormStatus.Error: - message = 'Sorry, something went wrong. Try again later.'; - break; - case SubscribeFormStatus.Loading: - message = 'One second...'; - break; - case SubscribeFormStatus.Success: - message = `Thanks! ${this.state.lastSubmittedEmail} is now on the mailing list.`; - break; - case SubscribeFormStatus.None: - break; - default: - throw new Error( - 'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.', - ); - } - return ( - <Container isHidden={!message} marginTop="30px"> - <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}> - {message || 'spacer text (never shown to user)'} - </Text> - </Container> - ); - } - private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void { - this.setState({ emailText: event.target.value }); - } - private async _handleFormSubmitAsync(event: React.FormEvent<HTMLInputElement>): Promise<void> { - event.preventDefault(); - if (_.isUndefined(this.state.emailText) || _.isEmpty(this.state.emailText)) { - return; - } - this.setState({ - status: SubscribeFormStatus.Loading, - lastSubmittedEmail: this.state.emailText, - }); - try { - const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText); - const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; - if (status === SubscribeFormStatus.Success) { - analytics.identify(this.state.emailText, 'email'); - } - this.setState({ status, emailText: '' }); - } catch (error) { - this._setStatus(SubscribeFormStatus.Error); - } - } - private _setStatus(status: SubscribeFormStatus): void { - this.setState({ status }); - } -} diff --git a/packages/website/ts/components/layout.tsx b/packages/website/ts/components/layout.tsx deleted file mode 100644 index 9563f80f8..000000000 --- a/packages/website/ts/components/layout.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import styled from 'styled-components'; -import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/constants/utilities'; - -interface WrapWidths { - default: string; - full: string; - medium: string; - narrow: string; - [key: string]: string; -} - -interface ColumnWidths { - [key: string]: string; -} - -interface SectionProps { - isNoPadding?: boolean; - isPadLarge?: boolean; - isNoMargin?: boolean; - bgColor?: string; - isFullWidth?: boolean; - isRelative?: boolean; -} - -interface WrapProps extends PaddingInterface { - width?: 'default' | 'full' | 'medium' | 'narrow'; - bgColor?: string; - isWrapped?: boolean; - isCentered?: boolean; - isReversed?: boolean; -} - -interface ColumnProps { - colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - isNoPadding?: boolean; - isNoMargin?: boolean; - isPadLarge?: boolean; - isFlexGrow?: boolean; - isMobileCentered?: boolean; - bgColor?: string; -} - -interface GetColWidthArgs { - span?: number; - columns: number; -} - -export interface WrapStickyInterface { - offsetTop?: string; -} - -const _getColumnWidth = (args: GetColWidthArgs): string => { - const { span = 1, columns } = args; - const percentWidth = span / columns * 100; - const gutterDiff = GUTTER * (columns - 1) / columns; - return `calc(${percentWidth}% - ${gutterDiff}px)`; -}; - -const GUTTER = 30 as number; -const MAX_WIDTH = 1500; -export const BREAKPOINTS = { - mobile: '768px', -}; -const WRAPPER_WIDTHS: WrapWidths = { - default: `${MAX_WIDTH}px`, // tbd - full: '100%', - medium: '1136px', - narrow: '930px', -}; -const COLUMN_WIDTHS: ColumnWidths = { - '1/4': _getColumnWidth({ columns: 4 }), - '1/3': _getColumnWidth({ columns: 3 }), - '1/2': _getColumnWidth({ columns: 2 }), - '2/3': _getColumnWidth({ span: 2, columns: 3 }), -}; - -export const Main = styled.main` - max-width: ${MAX_WIDTH}px; - margin: 0 auto; - - @media (min-width: ${BREAKPOINTS.mobile}) { - width: calc(100% - 60px); - } -`; - -// We can also turn Section into a stateless comp, -// passing a asElement (same patter nas Heading) so we dont have to -// make a const on every route to withComponent-size it. -// just <Section asElement?="div/section/footer/header/whatever" /> ? -export const Section = - styled.section < - SectionProps > - ` - width: ${props => (props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%')}; - padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large}` : PADDING_SIZES.default)}; - background-color: ${props => props.bgColor}; - position: ${props => props.isRelative && 'relative'}; - overflow: ${props => props.isRelative && 'hidden'}; - margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; - - @media (min-width: 1560px) { - width: ${props => props.isFullWidth && '100vw'}; - margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`}; - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`}; - padding: ${props => - props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default}; - } -`; - -const WrapBase = - styled.div < - WrapProps > - ` - max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - padding: ${props => props.padding && getCSSPadding(props.padding)}; - background-color: ${props => props.bgColor}; - margin: 0 auto; -`; - -export const Wrap = styled(WrapBase)` - @media (min-width: ${BREAKPOINTS.mobile}) { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - flex-direction: ${props => props.isReversed && 'row-reverse'}; - } -`; - -export const WrapCentered = styled(WrapBase)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; -`; - -export const WrapSticky = - styled.div < - WrapStickyInterface > - ` - position: sticky; - top: ${props => props.offsetTop || '60px'}; -`; - -export const WrapGrid = styled(WrapBase)` - display: flex; - flex-wrap: ${props => props.isWrapped && `wrap`}; - justify-content: ${props => (props.isCentered ? `center` : 'space-between')}; -`; - -export const Column = - styled.div < - ColumnProps > - ` - background-color: ${props => props.bgColor}; - flex-grow: ${props => props.isFlexGrow && 1}; - - @media (min-width: ${BREAKPOINTS.mobile}) { - padding: ${props => - !props.isNoPadding && - (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)}; - width: ${props => (props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%')}; - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : 0)}; - margin-bottom: 20px; - text-align: ${props => props.isMobileCentered && 'center'}; - } -`; - -WrapGrid.defaultProps = { - isCentered: true, -}; diff --git a/packages/website/ts/components/redirector.tsx b/packages/website/ts/components/redirector.tsx deleted file mode 100644 index a02693003..000000000 --- a/packages/website/ts/components/redirector.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { constants } from 'ts/utils/constants'; - -interface RedirectorProps { - location: string; -} - -export function Redirector(_props: RedirectorProps): void { - window.location.href = constants.URL_ANGELLIST; -} diff --git a/packages/website/ts/components/separator.tsx b/packages/website/ts/components/separator.tsx deleted file mode 100644 index 0b8b8d766..000000000 --- a/packages/website/ts/components/separator.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; - -export const Separator = styled.hr` - background: #eaeaea; - height: 1px; - border: 0; -`; diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx deleted file mode 100644 index 7f58ee5b9..000000000 --- a/packages/website/ts/components/ui/filled_image.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -export interface FilledImageProps { - src: string; -} -export const FilledImage = (props: FilledImageProps) => ( - <div - style={{ - width: '100%', - height: '100%', - objectFit: 'cover', - backgroundImage: `url(${props.src})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: 'cover', - }} - /> -); diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx deleted file mode 100644 index d21b9fd0e..000000000 --- a/packages/website/ts/components/ui/input.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export interface InputProps { - className?: string; - value?: string; - width?: string; - fontSize?: string; - fontColor?: string; - border?: string; - padding?: string; - placeholderColor?: string; - placeholder?: string; - backgroundColor?: string; - onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; -} - -const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( - <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> -); - -export const Input = styled(PlainInput)` - font-size: ${props => props.fontSize}; - width: ${props => props.width}; - padding: ${props => props.padding}; - border-radius: 3px; - box-sizing: border-box; - font-family: 'Roboto Mono'; - color: ${props => props.fontColor}; - border: ${props => props.border}; - outline: none; - background-color: ${props => props.backgroundColor}; - &::placeholder { - color: ${props => props.placeholderColor}; - } -`; - -Input.defaultProps = { - width: 'auto', - backgroundColor: colors.white, - fontColor: colors.darkestGrey, - placeholderColor: colors.darkGrey, - fontSize: '12px', - border: 'none', - padding: '0.8em 1.2em', -}; - -Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx deleted file mode 100644 index 81744196d..000000000 --- a/packages/website/ts/components/ui/simple_loading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; - -export interface SimpleLoadingProps { - message: string; -} - -export const SimpleLoading = (props: SimpleLoadingProps) => { - return ( - <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}> - <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}> - <CircularProgress /> - <div className="pt3 pb3">{props.message}</div> - </div> - </div> - ); -}; diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx deleted file mode 100644 index 6d38580b9..000000000 --- a/packages/website/ts/components/ui/typed_text.tsx +++ /dev/null @@ -1,75 +0,0 @@ -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, - }); - } - } -} diff --git a/packages/website/ts/containers/about.ts b/packages/website/ts/containers/about.ts deleted file mode 100644 index 3b1c99d79..000000000 --- a/packages/website/ts/containers/about.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { About as AboutComponent, AboutProps } from 'ts/pages/about/about'; -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: AboutProps): ConnectedState => ({ - translate: state.translate, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); - -export const About: React.ComponentClass<AboutProps> = connect(mapStateToProps, mapDispatchToProps)(AboutComponent); diff --git a/packages/website/ts/containers/jobs.ts b/packages/website/ts/containers/jobs.ts deleted file mode 100644 index b18485882..000000000 --- a/packages/website/ts/containers/jobs.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { Jobs as JobsComponent, JobsProps } from 'ts/pages/jobs/jobs'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; - -interface ConnectedState { - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: JobsProps): ConnectedState => ({ - translate: state.translate, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); - -export const Jobs: React.ComponentClass<JobsProps> = connect(mapStateToProps, mapDispatchToProps)(JobsComponent); diff --git a/packages/website/ts/containers/landing.ts b/packages/website/ts/containers/landing.ts deleted file mode 100644 index 972ed4c23..000000000 --- a/packages/website/ts/containers/landing.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { Landing as LandingComponent, LandingProps } from 'ts/pages/landing/landing'; -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: LandingProps): ConnectedState => ({ - translate: state.translate, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); - -export const Landing: React.ComponentClass<LandingProps> = connect(mapStateToProps, mapDispatchToProps)( - LandingComponent, -); diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts deleted file mode 100644 index 2557f38a5..000000000 --- a/packages/website/ts/containers/launch_kit.ts +++ /dev/null @@ -1,27 +0,0 @@ -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/icons/form-arrow.svg b/packages/website/ts/icons/form-arrow.svg deleted file mode 100644 index 2070a6d48..000000000 --- a/packages/website/ts/icons/form-arrow.svg +++ /dev/null @@ -1 +0,0 @@ -<svg width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/></svg>
\ No newline at end of file diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx deleted file mode 100644 index 39bbc584f..000000000 --- a/packages/website/ts/pages/about/about.tsx +++ /dev/null @@ -1,421 +0,0 @@ -import { colors, Link, Styles } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import * as DocumentTitle from 'react-document-title'; -import { Footer } from 'ts/components/old_footer'; -import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Profile } from 'ts/pages/about/profile'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { ProfileInfo, WebsitePaths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const teamRow1: ProfileInfo[] = [ - { - name: 'Will Warren', - title: 'Co-founder & CEO', - description: `Smart contract R&D. Previously applied physics at Los Alamos \ - Nat Lab. Mechanical engineering at UC San Diego. PhD dropout.`, - image: '/images/team/will.jpg', - linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/', - github: 'https://github.com/willwarren89', - medium: 'https://medium.com/@willwarren89', - }, - { - name: 'Amir Bandeali', - title: 'Co-founder & CTO', - description: `Smart contract R&D. Previously fixed income trader at DRW. \ - Finance at University of Illinois, Urbana-Champaign.`, - image: '/images/team/amir.png', - linkedIn: 'https://www.linkedin.com/in/abandeali1/', - github: 'https://github.com/abandeali1', - medium: 'https://medium.com/@abandeali1', - }, - { - name: 'Fabio Berger', - title: 'Senior Engineer', - description: `Full-stack blockchain engineer. Previously software engineer \ - at Airtable and founder of WealthLift. Computer Science at Duke.`, - image: '/images/team/fabio.jpg', - linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/', - github: 'https://github.com/fabioberger', - medium: 'https://medium.com/@fabioberger', - }, -]; - -const teamRow2: ProfileInfo[] = [ - { - name: 'Alex Xu', - title: 'Director of Operations', - description: `Strategy and operations. Previously digital marketing at Google \ - and vendor management at Amazon. Economics at UC San Diego.`, - image: '/images/team/alex.jpg', - linkedIn: 'https://www.linkedin.com/in/alex-xu/', - github: '', - medium: 'https://medium.com/@aqxu', - }, - { - name: 'Leonid Logvinov', - title: 'Engineer', - description: `Full-stack blockchain engineer. Previously blockchain engineer \ - at Neufund. Computer Science at University of Warsaw.`, - image: '/images/team/leonid.png', - linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/', - github: 'https://github.com/LogvinovLeon', - medium: 'https://medium.com/@Logvinov', - }, - { - name: 'Ben Burns', - title: 'Designer', - description: `Product, motion, and graphic designer. Previously designer \ - at Airtable and Apple. Digital Design at University of Cincinnati.`, - image: '/images/team/ben.jpg', - linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/', - github: '', - medium: '', - }, -]; - -const teamRow3: ProfileInfo[] = [ - { - name: 'Brandon Millman', - title: 'Senior Engineer', - description: `Full-stack engineer. Previously senior software engineer at \ - Twitter. Computer Science and Electrical Engineering at Duke.`, - image: '/images/team/brandon.png', - linkedIn: 'https://www.linkedin.com/in/brandon-millman-b093a022/', - github: 'https://github.com/BMillman19', - medium: 'https://medium.com/@bchillman', - }, - { - name: 'Tom Schmidt', - title: 'Product Manager', - description: `Previously engineering at Apple, product management at Facebook and Instagram. Computer Science at Stanford.`, - image: '/images/team/tom.jpg', - linkedIn: 'https://www.linkedin.com/in/tomhschmidt/', - github: 'https://github.com/tomhschmidt', - medium: '', - }, - { - name: 'Jacob Evans', - title: 'Ecosystem Engineer', - description: `Previously software engineer at Qantas and RSA Security.`, - image: '/images/team/jacob.jpg', - linkedIn: 'https://www.linkedin.com/in/dekzter/', - github: 'https://github.com/dekz', - medium: '', - }, -]; - -const teamRow4: ProfileInfo[] = [ - { - name: 'Blake Henderson', - title: 'Operations Associate', - description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego.`, - image: '/images/team/blake.jpg', - linkedIn: 'https://www.linkedin.com/in/blakerhenderson/', - github: '', - medium: '', - }, - { - name: 'Zack Skelly', - title: 'Lead Recruiter', - description: `Talent. Previously first recruiter at Heap, recruiting at Dropbox and Google. English Rhetoric and Composition at Pepperdine.`, - image: '/images/team/zach.png', - linkedIn: 'https://www.linkedin.com/in/zackaryskelly/', - github: '', - medium: '', - }, - { - name: 'Greg Hysen', - title: 'Blockchain Engineer', - description: `Smart contract R&D. Previously lead distributed systems engineer at Hivemapper. Computer Science at University of Waterloo.`, - image: '/images/team/greg.jpeg', - linkedIn: 'https://www.linkedin.com/in/gregory-hysen-71741463/', - github: 'https://github.com/hysz', - medium: '', - }, -]; - -const teamRow5: ProfileInfo[] = [ - { - name: 'Remco Bloemen', - title: 'Technical Fellow', - description: `Previously cofounder at Neufund and Coblue. Part III at Cambridge. PhD dropout at Twente Business School.`, - image: '/images/team/remco.jpeg', - linkedIn: 'https://www.linkedin.com/in/remcobloemen/', - github: 'http://github.com/recmo', - medium: '', - }, - { - name: 'Francesco Agosti', - title: 'Engineer', - description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`, - image: 'images/team/fragosti.png', - linkedIn: 'https://www.linkedin.com/in/fragosti/', - github: 'http://github.com/fragosti', - }, - { - name: 'Mel Oberto', - title: 'Office Ops / Executive Assistant', - description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`, - image: 'images/team/mel.png', - linkedIn: 'https://www.linkedin.com/in/melanieoberto', - }, -]; - -const teamRow6: ProfileInfo[] = [ - { - name: 'Alex Browne', - title: 'Engineer in Residence', - description: `Full-stack blockchain engineer. Previously at Plaid. Open source guru and footgun dismantler. Computer Science and Electrical Engineering at Duke.`, - image: 'images/team/alexbrowne.png', - linkedIn: 'https://www.linkedin.com/in/stephenalexbrowne/', - github: 'http://github.com/albrow', - }, - { - name: 'Peter Zeitz', - title: 'Research Fellow', - description: `Researching decentralized governance. Previously Assistant Professor of Economics at National University of Singapore Business School. PhD in Economics at UCLA.`, - image: 'images/team/peter.jpg', - linkedIn: 'https://www.linkedin.com/in/peter-z-7b9595163/', - }, - { - name: 'Chris Kalani', - title: 'Director of Design', - description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, - image: 'images/team/chris.png', - linkedIn: 'https://www.linkedin.com/in/chriskalani/', - github: 'https://github.com/chriskalani', - }, -]; - -const teamRow7: ProfileInfo[] = [ - { - name: 'Clay Robbins', - title: 'Ecosystem Development Lead', - description: `Growth & Business Development. Previously product and partnerships at Square. Economics at Dartmouth College.`, - image: 'images/team/clay.png', - linkedIn: 'https://www.linkedin.com/in/robbinsclay/', - }, - { - name: 'Matt Taylor', - title: 'Marketing Lead', - description: `Growth & Marketing. Previously marketing at Abra and Square. Economics and Philosophy at Claremont McKenna College.`, - image: 'images/team/matt.jpg', - linkedIn: 'https://www.linkedin.com/in/mattytay/', - }, - { - name: 'Eugene Aumson', - title: 'Engineer', - description: `Developer Experience. Previously senior software engineer in foreign exchange applications at Bloomberg LP.`, - image: 'images/team/gene.jpg', - linkedIn: 'https://www.linkedin.com/in/aumson/', - github: 'https://github.com/feuGeneA', - }, -]; - -const teamRow8: ProfileInfo[] = [ - { - name: 'Weijie Wu', - title: 'Research Fellow', - description: `Researching decentralized governance. Previously Researcher at Huawei and Assistant Professor at Shanghai Jiao Tong University. PhD in Computer Science at The Chinese University of Hong Kong.`, - image: 'images/team/weijie.png', - linkedIn: 'https://www.linkedin.com/in/weijiewu/', - }, - { - name: 'Rahul Singireddy', - title: 'Relayer Success Manager', - description: `Previously community at Zeppelin, growth at Dharma, and cryptocurrency contributor at Forbes. Symbolic Systems at Stanford.`, - image: 'images/team/rahul.png', - linkedIn: 'https://www.linkedin.com/in/rahul-singireddy-3037908a/', - }, - { - name: 'Jason Somensatto', - title: 'Strategic Legal Counsel', - description: `Legal. Previously head of blockchain and crypto practice at Orrick. JD from George Washington University and undergrad at UVA.`, - image: 'images/team/jason.png', - linkedIn: 'https://www.linkedin.com/in/jasonsomensatto/', - }, -]; - -const teamRow9: ProfileInfo[] = [ - { - name: 'Steve Klebanoff', - title: 'Senior Engineer', - description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`, - image: 'images/team/steve.png', - linkedIn: 'https://www.linkedin.com/in/steveklebanoff/', - github: 'https://github.com/steveklebanoff', - }, - { - name: 'Xianny Ng', - title: 'Engineer', - description: `Developer Experience. Previously telemetry at Mapbox and platform engineering at Bench Accounting.`, - image: 'images/team/xianny.png', - linkedIn: 'https://www.linkedin.com/in/xianny/', - github: 'https://github.com/xianny', - }, -]; - -const advisors1: ProfileInfo[] = [ - { - name: 'Fred Ehrsam', - description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.', - image: '/images/advisors/fred.jpg', - linkedIn: 'https://www.linkedin.com/in/fredehrsam/', - medium: 'https://medium.com/@FEhrsam', - twitter: 'https://twitter.com/FEhrsam', - }, - { - name: 'Olaf Carlson-Wee', - image: '/images/advisors/olaf.png', - description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.', - linkedIn: 'https://www.linkedin.com/in/olafcw/', - angellist: 'https://angel.co/olafcw', - }, - { - name: 'Joey Krug', - description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`, - image: '/images/advisors/joey.jpg', - linkedIn: 'https://www.linkedin.com/in/joeykrug/', - github: 'https://github.com/joeykrug', - angellist: 'https://angel.co/joeykrug', - }, -]; - -const advisors2: ProfileInfo[] = [ - { - name: 'Linda Xie', - description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.', - image: '/images/advisors/linda.jpg', - linkedIn: 'https://www.linkedin.com/in/lindaxie/', - medium: 'https://medium.com/@linda.xie', - twitter: 'https://twitter.com/ljxie', - }, - { - name: 'David Sacks', - description: 'General Partner at Craft Ventures. Original COO of PayPal. Founder of Yammer.', - image: '/images/advisors/david.png', - linkedIn: 'https://www.linkedin.com/in/davidoliversacks/', - medium: 'https://medium.com/@davidsacks', - twitter: 'https://twitter.com/DavidSacks', - }, -]; - -export interface AboutProps { - source: string; - location: Location; - translate: Translate; - dispatcher: Dispatcher; -} - -interface AboutState {} - -const styles: Styles = { - header: { - fontFamily: 'Roboto Mono', - fontSize: 36, - color: 'black', - paddingTop: 110, - }, - weAreHiring: { - fontSize: 30, - color: colors.darkestGrey, - fontFamily: 'Roboto Mono', - letterSpacing: 7.5, - }, -}; - -export class About extends React.Component<AboutProps, AboutState> { - public componentDidMount(): void { - window.scrollTo(0, 0); - } - public render(): React.ReactNode { - return ( - <div style={{ backgroundColor: colors.lightestGrey }}> - <DocumentTitle title="0x About Us" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - style={{ backgroundColor: colors.lightestGrey }} - translate={this.props.translate} - /> - <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}> - <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}> - <div style={styles.header}>About us:</div> - <div - className="pt3" - style={{ - fontSize: 17, - color: colors.darkestGrey, - lineHeight: 1.5, - }} - > - Our team is a globally distributed group with backgrounds in engineering, research, business - and design. We are passionate about decentralized technology and its potential to act as an - equalizing force in the world. - </div> - </div> - <div className="pt3 md-px4 lg-px0"> - <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div> - <div className="clearfix">{this._renderProfiles(teamRow2)}</div> - <div className="clearfix">{this._renderProfiles(teamRow3)}</div> - <div className="clearfix">{this._renderProfiles(teamRow4)}</div> - <div className="clearfix">{this._renderProfiles(teamRow5)}</div> - <div className="clearfix">{this._renderProfiles(teamRow6)}</div> - <div className="clearfix">{this._renderProfiles(teamRow7)}</div> - <div className="clearfix">{this._renderProfiles(teamRow8)}</div> - <div className="clearfix">{this._renderProfiles(teamRow9)}</div> - </div> - <div className="pt3 pb2"> - <div - className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3" - style={{ - color: colors.grey, - fontSize: 24, - fontFamily: 'Roboto Mono', - }} - > - Advisors: - </div> - <div className="clearfix">{this._renderProfiles(advisors1)}</div> - <div className="clearfix">{this._renderProfiles(advisors2)}</div> - </div> - <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}> - <div className="pb2" style={styles.weAreHiring}> - WE'RE HIRING - </div> - <div - className="pb4 mb4" - style={{ - fontSize: 16, - color: colors.darkestGrey, - lineHeight: 1.5, - letterSpacing: '0.5px', - }} - > - We are seeking outstanding candidates to{' '} - <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black"> - join our team - </Link> - . We value passion, diversity and unique perspectives. - </div> - </div> - </div> - <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> - </div> - ); - } - private _renderProfiles(profiles: ProfileInfo[]): React.ReactNode { - const numIndiv = profiles.length; - const colSize = utils.getColSize(numIndiv); - return _.map(profiles, profile => { - return ( - <div key={`profile-${profile.name}`}> - <Profile colSize={colSize} profileInfo={profile} /> - </div> - ); - }); - } -} diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx deleted file mode 100644 index 2361c6418..000000000 --- a/packages/website/ts/pages/about/profile.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { colors, Styles } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { ProfileInfo } from 'ts/types'; - -const IMAGE_DIMENSION = 149; -const styles: Styles = { - subheader: { - textTransform: 'uppercase', - fontSize: 32, - margin: 0, - }, - imageContainer: { - width: IMAGE_DIMENSION, - height: IMAGE_DIMENSION, - boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px', - }, -}; - -interface ProfileProps { - colSize: number; - profileInfo: ProfileInfo; -} - -export const Profile = (props: ProfileProps) => { - return ( - <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}> - <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"> - <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}> - <img width={IMAGE_DIMENSION} src={props.profileInfo.image} /> - </div> - <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}> - {props.profileInfo.name} - </div> - {!_.isUndefined(props.profileInfo.title) && ( - <div - className="pt1 center" - style={{ - fontSize: 14, - fontFamily: 'Roboto Mono', - color: colors.darkGrey, - whiteSpace: 'nowrap', - }} - > - {props.profileInfo.title.toUpperCase()} - </div> - )} - <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"> - {props.profileInfo.description} - </div> - <div className="flex pb3 sm-hide xs-hide" style={{ width: 280, opacity: 0.5 }}> - {renderSocialMediaIcons(props.profileInfo)} - </div> - </div> - </div> - ); -}; - -function renderSocialMediaIcons(profileInfo: ProfileInfo): React.ReactNode { - const icons = [ - renderSocialMediaIcon('zmdi-github-box', profileInfo.github), - renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn), - renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter), - ]; - return icons; -} - -function renderSocialMediaIcon(iconName: string, url: string): React.ReactNode { - if (_.isEmpty(url)) { - return null; - } - - return ( - <div key={url} className="pr1"> - <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none"> - <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} /> - </a> - </div> - ); -} diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx deleted file mode 100644 index da3f09faa..000000000 --- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; - -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; - -export interface Introducing0xInstantProps { - screenWidth: ScreenWidths; - onCTAClick: () => void; -} - -export const Introducing0xInstant = (props: Introducing0xInstantProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - const zero = ( - <Text fontColor={colors.white} fontSize="42px" fontWeight="600" fontFamily="Roboto Mono" Tag="span"> - 0 - </Text> - ); - const title = isSmallScreen ? ( - <div> - Introducing<br /> - {zero}x Instant - </div> - ) : ( - <div>Introducing {zero}x Instant</div> - ); - return ( - <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}> - <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}> - <Container className="sm-center sm-pt3"> - <Text fontColor={colors.white} fontSize="42px" lineHeight="52px" fontWeight="600"> - {title} - </Text> - </Container> - <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px"> - <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono"> - A free and flexible way to offer simple crypto - <br /> purchasing in any app or website. - </Text> - </Container> - <div className="py3"> - <Button - type="button" - backgroundColor={colors.mediumBlue} - fontColor={colors.white} - fontSize="18px" - onClick={props.onCTAClick} - > - Get Started - </Button> - </div> - </div> - </div> - ); -}; diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx deleted file mode 100644 index 70aea7363..000000000 --- a/packages/website/ts/pages/instant/need_more.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; - -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { ScreenWidths, WebsitePaths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -export interface NeedMoreProps { - screenWidth: ScreenWidths; -} -export const NeedMore = (props: NeedMoreProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - const backgroundColor = isSmallScreen ? colors.instantTertiaryBackground : colors.instantSecondaryBackground; - const className = isSmallScreen ? 'flex flex-column items-center' : 'flex'; - const marginRight = isSmallScreen ? undefined : '200px'; - return ( - <Container className="flex flex-column items-center py4 px3" backgroundColor={backgroundColor}> - <Container className={className}> - <Container className="sm-center" marginRight={marginRight}> - <Text fontColor={colors.white} fontSize="32px" lineHeight="45px"> - Need more flexibility? - </Text> - <Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px"> - View our full documentation or reach out if you have any questions. - </Text> - </Container> - <Container className="py3 flex"> - <Container marginRight="20px"> - <Button - type="button" - backgroundColor={colors.white} - fontColor={backgroundColor} - fontSize="18px" - onClick={onGetInTouchClick} - > - Get in Touch - </Button> - </Container> - <Button - type="button" - backgroundColor={colors.mediumBlue} - fontColor={colors.white} - fontSize="18px" - onClick={onDocsClick} - > - Explore the Docs - </Button> - </Container> - </Container> - </Container> - ); -}; - -const onGetInTouchClick = () => { - utils.openUrl(constants.URL_ZEROEX_CHAT); -}; -const onDocsClick = () => { - utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); -}; diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx deleted file mode 100644 index 7dcf17fd1..000000000 --- a/packages/website/ts/pages/instant/screenshots.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; - -export interface ScreenshotsProps { - screenWidth: ScreenWidths; -} - -export const Screenshots = (props: ScreenshotsProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - const images = isSmallScreen - ? [ - 'images/instant/rep_screenshot.png', - 'images/instant/dai_screenshot.png', - 'images/instant/gods_screenshot.png', - ] - : [ - 'images/instant/nmr_screenshot.png', - 'images/instant/kitty_screenshot.png', - 'images/instant/rep_screenshot.png', - 'images/instant/dai_screenshot.png', - 'images/instant/gods_screenshot.png', - 'images/instant/gnt_screenshot.png', - ]; - return ( - <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center"> - {_.map(images, image => { - return <img className="px1 flex-none" width="300px" height="420px" src={image} key={image} />; - })} - </Container> - ); -}; diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx deleted file mode 100644 index 563b72e63..000000000 --- a/packages/website/ts/pages/jobs/benefits.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Circle } from 'ts/components/ui/circle'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; -import { ScreenWidths } from 'ts/types'; -import { constants } from 'ts/utils/constants'; - -const BENEFITS = [ - 'Comprehensive insurance (medical, dental, and vision)', - 'Unlimited vacation (three weeks per year minimum)', - 'Meals and snacks provided in-office daily', - 'Flexible hours and liberal work-from-home-policy', - 'Supportive remote working environment', - 'Transportation, phone, and wellness expense', - 'Relocation assistance', - 'Optional team excursions (fully paid, often international)', - 'Competitive salary and cryptocurrency-based compensation', -]; - -interface Value { - iconSrc: string; - text: string; -} -const VALUES: Value[] = [ - { - iconSrc: 'images/jobs/heart-icon.svg', - text: 'Do the right thing', - }, - { - iconSrc: 'images/jobs/ship-icon.svg', - text: 'Consistently ship', - }, - { - iconSrc: 'images/jobs/calendar-icon.svg', - text: 'Focus on long term impact', - }, -]; - -export interface BenefitsProps { - screenWidth: ScreenWidths; -} - -export const Benefits = (props: BenefitsProps) => { - const isSmallScreen = props.screenWidth === ScreenWidths.Sm; - return ( - <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}> - {!isSmallScreen ? ( - <Container className="flex" maxWidth="1200px"> - <BenefitsList /> - <Container marginLeft="120px"> - <ValuesList /> - </Container> - </Container> - ) : ( - <Container className="flex-column"> - <BenefitsList /> - <Container marginTop="50px"> - <ValuesList /> - </Container> - </Container> - )} - </Container> - ); -}; - -const Header: React.StatelessComponent = ({ children }) => ( - <Container marginBottom="30px"> - <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> - {children} - </Text> - </Container> -); - -interface BenefitsListProps { - className?: string; -} -const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => { - return ( - <Container className={className}> - <Header>Benefits</Header> - {_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)} - </Container> - ); -}; -const BenefitsList = styled(PlainBenefitsList)` - transform: translateY(30px); -`; - -interface BenefitItemProps { - description: string; -} - -const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => ( - <Container marginBottom="15px"> - <div className="flex"> - <Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} /> - <div className="flex-auto"> - <Text fontSize="14px" lineHeight="24px"> - {description} - </Text> - </div> - </div> - </Container> -); - -interface ValuesListProps { - className?: string; -} -const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => { - return ( - <Container className={className} maxWidth="270px"> - <Header>Our Values</Header> - {_.map(VALUES, value => <ValueItem key={value.text} {...value} />)} - <Text fontSize="14px" lineHeight="26px"> - We care deeply about our culture and values, and encourage you to{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - target="_blank" - href={constants.URL_MISSION_AND_VALUES_BLOG_POST} - > - read more on our blog - </a>. - </Text> - </Container> - ); -}; - -const ValuesList = styled(PlainValuesList)` - border-color: ${colors.beigeWhite}; - border-radius: 7px; - border-width: 1px; - border-style: solid; - padding-left: 38px; - padding-right: 38px; - padding-top: 28px; - padding-bottom: 28px; -`; - -type ValueItemProps = Value; -const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => { - return ( - <Container marginBottom="25px"> - <div className="flex items-center"> - <Image className="flex-none pr2" width="20px" src={iconSrc} /> - <div className="flex-auto"> - <Text fontSize="14px" lineHeight="24px" fontWeight="bold"> - {text} - </Text> - </div> - </div> - </Container> - ); -}; diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx deleted file mode 100644 index 872dc6103..000000000 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { colors, utils as sharedUtils } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import * as DocumentTitle from 'react-document-title'; - -import { MetaTags } from 'ts/components/meta_tags'; -import { Footer } from 'ts/components/old_footer'; -import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Container } from 'ts/components/ui/container'; -import { Benefits } from 'ts/pages/jobs/benefits'; -import { Join0x } from 'ts/pages/jobs/join_0x'; -import { Mission } from 'ts/pages/jobs/mission'; -import { OpenPositions } from 'ts/pages/jobs/open_positions'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const OPEN_POSITIONS_HASH = 'positions'; -const THROTTLE_TIMEOUT = 100; -const DOCUMENT_TITLE = 'Careers at 0x'; -const DOCUMENT_DESCRIPTION = 'Join 0x in creating a tokenized world where all value can flow freely'; - -export interface JobsProps { - location: Location; - translate: Translate; - dispatcher: Dispatcher; - screenWidth: ScreenWidths; -} - -export interface JobsState {} - -export class Jobs extends React.Component<JobsProps, JobsState> { - // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) - private readonly _throttledScreenWidthUpdate: () => void; - public constructor(props: JobsProps) { - super(props); - this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); - } - public componentDidMount(): void { - window.addEventListener('resize', this._throttledScreenWidthUpdate); - window.scrollTo(0, 0); - } - public render(): React.ReactNode { - return ( - <Container overflowX="hidden"> - <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> - <DocumentTitle title={DOCUMENT_TITLE} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - style={{ backgroundColor: colors.white, position: 'relative' }} - translate={this.props.translate} - /> - <Join0x onCallToActionClick={this._onJoin0xCallToActionClick.bind(this)} /> - <Mission screenWidth={this.props.screenWidth} /> - <Benefits screenWidth={this.props.screenWidth} /> - <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} /> - <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> - </Container> - ); - } - private _onJoin0xCallToActionClick(): void { - sharedUtils.setUrlHash(OPEN_POSITIONS_HASH); - sharedUtils.scrollToHash(OPEN_POSITIONS_HASH, ''); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } -} diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx deleted file mode 100644 index e869cd455..000000000 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { colors } from '@0x/react-shared'; - -import * as React from 'react'; - -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 { constants } from 'ts/utils/constants'; - -const BUTTON_TEXT = 'View open positions'; - -export interface Join0xProps { - onCallToActionClick: () => void; -} - -export const Join0x = (props: Join0xProps) => ( - <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.white, color: colors.black }}> - <div - className="mx-auto inline-block align-middle py4" - style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }} - > - <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px"> - <Image src="images/jobs/hero-dots-right.svg" width="400px" /> - </Container> - <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px"> - <Image src="images/jobs/hero-dots-left.svg" width="400px" /> - </Container> - <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> - Join Us in Our Mission - </div> - <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="537px"> - <Text fontSize="14px" lineHeight="30px"> - At 0x, our mission is to create a tokenized world where all value can flow freely. - <br /> - <br />We are powering a growing ecosystem of decentralized applications and solving novel challenges - to make our technology intuitive, flexible, and accessible to all.{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - target="_blank" - href={constants.URL_MISSION_AND_VALUES_BLOG_POST} - > - Read more - </a>{' '} - about our mission, and join us in building financial infrastructure upon which the exchange of - anything of value will take place. - </Text> - </Container> - <div className="py3"> - <Button - type="button" - backgroundColor={colors.black} - width="290px" - fontColor={colors.white} - fontSize="18px" - fontFamily="Roboto Mono" - onClick={props.onCallToActionClick} - > - {BUTTON_TEXT} - </Button> - </div> - </div> - </div> -); diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx deleted file mode 100644 index 28546f985..000000000 --- a/packages/website/ts/pages/jobs/mission.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; - -export interface MissionProps { - screenWidth: ScreenWidths; -} -export const Mission = (props: MissionProps) => { - const shouldShowImage = props.screenWidth === ScreenWidths.Lg; - const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />; - const missionStatementClassName = !shouldShowImage ? 'center' : undefined; - const missionStatement = ( - <Container className={missionStatementClassName} maxWidth="388px"> - <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px"> - Powered by a Diverse<br />Worldwide Community - </Text> - <Container marginTop="32px"> - <Text fontSize="14px" lineHeight="2em"> - We're a highly technical team with varied backgrounds in engineering, science, business, finance, - and research. While the core team is headquartered in San Francisco, there are 30+ teams building on - 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about - open-source software and decentralized technology's potential to act as an equalizing force in the - world. - </Text> - </Container> - </Container> - ); - return ( - <div - className="flex flex-column items-center py4 px3" - style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }} - > - {shouldShowImage ? ( - <Container className="flex items-center" maxWidth="1200px"> - {image} - <Container marginLeft="115px">{missionStatement}</Container> - </Container> - ) : ( - <Container className="flex flex-column items-center">{missionStatement}</Container> - )} - </div> - ); -}; diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx deleted file mode 100644 index b8442a9c4..000000000 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { Retry } from 'ts/components/ui/retry'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; -import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; -import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; - -const TABLE_ROW_MIN_HEIGHT = 100; - -export interface OpenPositionsProps { - hash: string; - screenWidth: ScreenWidths; -} -export interface OpenPositionsState { - jobInfos?: WebsiteBackendJobInfo[]; - error?: Error; -} - -export class OpenPositions extends React.Component<OpenPositionsProps, OpenPositionsState> { - private _isUnmounted: boolean; - constructor(props: OpenPositionsProps) { - super(props); - this._isUnmounted = false; - this.state = { - jobInfos: undefined, - error: undefined, - }; - } - public componentWillMount(): void { - // tslint:disable-next-line:no-floating-promises - this._fetchJobInfosAsync(); - } - public componentWillUnmount(): void { - this._isUnmounted = true; - } - public render(): React.ReactNode { - const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.jobInfos); - const isSmallScreen = utils.isMobileWidth(this.props.screenWidth); - return ( - <Container id={this.props.hash} className="mx-auto pb4 px3 max-width-4"> - {!isSmallScreen && ( - <hr style={{ border: 0, borderTop: 1, borderStyle: 'solid', borderColor: colors.beigeWhite }} /> - )} - <Container marginTop="64px" marginBottom="50px"> - <Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}> - Open Positions - </Text> - </Container> - {isReadyToRender ? this._renderTable() : this._renderLoading()} - </Container> - ); - } - private _renderLoading(): React.ReactNode { - return ( - // TODO: consolidate this loading component with the one in portal and RelayerIndex - // TODO: possibly refactor into a generic loading container with spinner and retry UI - <div className="center"> - {_.isUndefined(this.state.error) ? ( - <CircularProgress size={40} thickness={5} /> - ) : ( - <Retry onRetry={this._fetchJobInfosAsync.bind(this)} /> - )} - </div> - ); - } - private _renderTable(): React.ReactNode { - return ( - <Container width="100%"> - <div> - {_.map(this.state.jobInfos, jobInfo => { - return ( - <JobInfoTableRow - key={jobInfo.id} - screenWidth={this.props.screenWidth} - jobInfo={jobInfo} - onClick={this._openJobInfoUrl.bind(this, jobInfo)} - /> - ); - })} - </div> - <Container className="center" marginTop="70px"> - <Text fontStyle="italic" fontSize="14px"> - Interested in telling us why you'd be a valuable addition to the team outside of the positions - listed above?{' '} - <a - style={{ color: colors.mediumBlue, textDecoration: 'none' }} - href={`mailto:${constants.EMAIL_JOBS}`} - > - Email us! - </a> - </Text> - </Container> - </Container> - ); - } - private async _fetchJobInfosAsync(): Promise<void> { - try { - if (!this._isUnmounted) { - this.setState({ - jobInfos: undefined, - error: undefined, - }); - } - const jobInfos = await backendClient.getJobInfosAsync(); - if (!this._isUnmounted) { - this.setState({ - jobInfos, - }); - } - } catch (error) { - if (!this._isUnmounted) { - this.setState({ - error, - }); - } - } - } - private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void { - const url = jobInfo.url; - utils.openUrl(url); - } -} - -export interface JobInfoTableRowProps { - className?: string; - screenWidth: ScreenWidths; - jobInfo: WebsiteBackendJobInfo; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; -} - -const PlainJobInfoTableRow: React.StatelessComponent<JobInfoTableRowProps> = ({ - className, - screenWidth, - jobInfo, - onClick, -}) => { - const isSmallScreen = screenWidth === ScreenWidths.Sm; - const titleClassName = isSmallScreen ? 'col col-12 center' : 'col col-5'; - const paddingLeft = isSmallScreen ? undefined : '30px'; - return ( - <Container className={className} onClick={onClick} marginBottom="30px" paddingLeft={paddingLeft}> - <Container className="flex items-center" minHeight={TABLE_ROW_MIN_HEIGHT} width="100%"> - <Container className="clearfix container" width="100%"> - <Container className={titleClassName}> - <Text fontSize="16px" fontWeight="bold" fontColor={colors.mediumBlue}> - {jobInfo.title} - </Text> - </Container> - {!isSmallScreen && ( - <Container className="col col-3"> - <Text fontSize="16px">{jobInfo.department}</Text> - </Container> - )} - {!isSmallScreen && ( - <Container className="col col-4 center"> - <Text fontSize="16px">{jobInfo.office}</Text> - </Container> - )} - </Container> - </Container> - </Container> - ); -}; - -export const JobInfoTableRow = styled(PlainJobInfoTableRow)` - cursor: pointer; - background-color: ${colors.grey100}; - border-radius: 7px; - &:hover { - opacity: 0.5; - } -`; diff --git a/packages/website/ts/pages/jobs/photo_rail.tsx b/packages/website/ts/pages/jobs/photo_rail.tsx deleted file mode 100644 index acc9dcb91..000000000 --- a/packages/website/ts/pages/jobs/photo_rail.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { FilledImage } from 'ts/components/ui/filled_image'; - -export interface PhotoRailProps { - images: string[]; -} - -export const PhotoRail = (props: PhotoRailProps) => { - return ( - <div className="clearfix" style={{ height: 490 }}> - {_.map(props.images, (image: string) => { - return ( - <div key={image} className="col lg-col-4 md-col-4 col-12 center" style={{ height: '100%' }}> - <FilledImage src={image} /> - </div> - ); - })} - </div> - ); -}; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx deleted file mode 100644 index aac659fd5..000000000 --- a/packages/website/ts/pages/landing/landing.tsx +++ /dev/null @@ -1,620 +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 { SubscribeForm } from 'ts/components/forms/subscribe_form'; -import { Footer } from 'ts/components/old_footer'; -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'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -interface BoxContent { - title: string; - description: string; - imageUrl: string; - classNames: string; - maxWidth: number; -} -interface UseCase { - imageUrl: string; - type: string; - description: string; - classNames: string; - style?: React.CSSProperties; -} -interface Project { - logoFileName: string; - projectUrl: string; -} - -const THROTTLE_TIMEOUT = 100; -const WHATS_NEW_TITLE = 'Introducing 0x Instant'; -const WHATS_NEW_URL = WebsitePaths.Instant; -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[] = [ - { - logoFileName: 'ethfinex.png', - projectUrl: constants.PROJECT_URL_ETHFINEX, - }, - { - 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: 'amadeus.png', - projectUrl: constants.PROJECT_URL_AMADEUS, - }, - { - logoFileName: 'ddex.png', - projectUrl: constants.PROJECT_URL_DDEX, - }, - { - logoFileName: 'decent_ex.png', - projectUrl: constants.PROJECT_URL_DECENT_EX, - }, - { - logoFileName: 'dextroid.png', - projectUrl: constants.PROJECT_URL_DEXTROID, - }, - { - logoFileName: 'ercdex.png', - projectUrl: constants.PROJECT_URL_ERC_DEX, - }, - { - logoFileName: 'open_relay.png', - projectUrl: constants.PROJECT_URL_OPEN_RELAY, - }, - { - logoFileName: 'idt.png', - projectUrl: constants.PROJECT_URL_IDT, - }, - { - logoFileName: 'imtoken.png', - projectUrl: constants.PROJECT_URL_IMTOKEN, - }, -]; - -export interface LandingProps { - location: Location; - translate: Translate; - dispatcher: Dispatcher; -} - -interface LandingState { - screenWidth: ScreenWidths; -} - -export class Landing extends React.Component<LandingProps, LandingState> { - private readonly _throttledScreenWidthUpdate: () => void; - constructor(props: LandingProps) { - 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="landing" className="clearfix" style={{ color: colors.grey500 }}> - <DocumentTitle title="0x Protocol" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - isNightVersion={true} - style={{ backgroundColor: colors.heroGrey, position: 'relative' }} - translate={this.props.translate} - /> - {this._renderHero()} - {this._renderProjects( - relayerProjects, - this.props.translate.get(Key.RelayersHeader, Deco.Upper), - colors.projectsGrey, - true, - )} - {this._renderInfoBoxes()} - {this._renderTokenizationSection()} - {this._renderUseCases()} - {this._renderCallToAction()} - <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> - </div> - ); - } - private _renderHero(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - 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={`${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" - style={{ - paddingLeft: isSmallScreen ? 0 : 12, - lineHeight: '36px', - }} - > - <Text - className="sm-pb2" - 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)} - {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' : ''}`} - > - <Container paddingRight="20px"> - <Link to={WebsitePaths.Docs}> - <CallToAction type="light"> - {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} - </CallToAction> - </Link> - </Container> - <div> - <Link to={WebsitePaths.Portal}> - <CallToAction> - {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} - </CallToAction> - </Link> - </div> - </Container> - </div> - </div> - </div> - </div> - {this.props.translate.getLanguage() === Language.English && <SubscribeForm />} - </div> - ); - } - private _renderWhatsNew(): React.ReactNode { - return ( - <div className="sm-center sm-px1"> - <a href={WHATS_NEW_URL} className="inline-block text-decoration-none"> - <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} - > - <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> - ); - } - private _renderProjects( - projects: Project[], - title: string, - backgroundColor: string, - isTitleCenter: boolean, - ): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const projectList = _.map(projects, (project: Project, i: number) => { - const isRelayersOnly = projects.length === 12; - let colWidth: number; - switch (this.state.screenWidth) { - case ScreenWidths.Sm: - colWidth = 4; - break; - - case ScreenWidths.Md: - colWidth = 3; - break; - - case ScreenWidths.Lg: - colWidth = isRelayersOnly ? 2 : 2 - i % 2; - break; - - default: - throw new Error(`Encountered unknown ScreenWidths value: ${this.state.screenWidth}`); - } - return ( - <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}> - <div> - <a href={project.projectUrl} target="_blank" className="text-decoration-none"> - <img - src={`/images/landing/project_logos/${project.logoFileName}`} - height={isSmallScreen ? 60 : 92} - /> - </a> - </div> - </div> - ); - }); - 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={TITLE_STYLE}> - {title} - </div> - <div className="clearfix">{projectList}</div> - <div - className="pt3 mx-auto center" - style={{ - color: colors.landingLinkGrey, - fontFamily: 'Roboto Mono', - maxWidth: 300, - fontSize: 14, - }} - > - {this.props.translate.get(Key.FullListPrompt)}{' '} - <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}> - {this.props.translate.get(Key.FullListLink)} - </Link> - </div> - </div> - </div> - ); - } - private _renderTokenizationSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> - <div className="mx-auto max-width-4 py4 clearfix"> - {isSmallScreen && this._renderTokenCloud()} - <div - className="col lg-col-6 md-col-6 col-12 center" - style={{ color: colors.darkestGrey, height: 364, lineHeight: '364px' }} - > - <div - className="mx-auto inline-block lg-align-middle md-align-middle sm-align-top" - style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'left' }} - > - <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> - {this.props.translate.get(Key.TokenizedSectionHeader, Deco.Cap)} - </div> - <div - className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center" - style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7, maxWidth: 370 }} - > - {this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)} - </div> - <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div> - </div> - </div> - {!isSmallScreen && this._renderTokenCloud()} - </div> - </div> - ); - } - private _renderTokenCloud(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="col lg-col-6 md-col-6 col-12 center"> - <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} /> - </div> - ); - } - 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; - const boxStyle: React.CSSProperties = { - maxWidth: 253, - height: 402, - backgroundColor: colors.grey50, - borderRadius: 5, - padding: '10px 24px 24px', - }; - const boxContents: BoxContent[] = [ - { - title: this.props.translate.get(Key.BenefitOneTitle, Deco.Cap), - 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/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}> - <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> - <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}> - {boxContent.description} - </div> - </div> - </div> - ); - }); - return ( - <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> - <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' }}> - {boxes} - </div> - </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 = this._getUseCases(); - const cases = _.map(useCases, (useCase: UseCase) => { - const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style; - const useCaseBoxStyle = { - color: colors.grey, - border: `1px solid ${colors.grey750}`, - borderRadius: 4, - maxWidth: isSmallScreen ? 375 : 'none', - ...style, - }; - const typeStyle: React.CSSProperties = { - color: colors.lightGrey, - fontSize: 13, - textTransform: 'uppercase', - fontFamily: 'Roboto Mono', - fontWeight: 300, - }; - return ( - <div - key={`useCase-${useCase.type}`} - className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`} - > - <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}> - <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}> - <img src={useCase.imageUrl} style={{ height: 50 }} /> - </div> - <div className="pt2 center" style={typeStyle}> - {useCase.type} - </div> - <div - className="pt2" - style={{ - lineHeight: 1.5, - fontSize: 14, - overflow: 'hidden', - height: 124, - }} - > - {useCase.description} - </div> - </div> - </div> - ); - }); - return ( - <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> - </div> - ); - } - private _renderCallToAction(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const callToActionClassNames = - 'lg-pr3 md-pr3 lg-right-align md-right-align sm-center sm-px3 h4 lg-table-cell md-table-cell'; - return ( - <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 pb4 mb3 clearfix center"> - <div className="center inline-block" style={{ textAlign: 'left' }}> - <div - className={callToActionClassNames} - style={{ - fontFamily: 'Roboto Mono', - color: colors.white, - lineHeight: isSmallScreen ? 1.7 : 3, - }} - > - {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)} - </div> - <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> - <Link to={WebsitePaths.Docs}> - <CallToAction fontSize="15px"> - {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} - </CallToAction> - </Link> - </div> - </div> - </div> - </div> - ); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - if (newScreenWidth !== this.state.screenWidth) { - this.setState({ - screenWidth: newScreenWidth, - }); - } - } -} // tslint:disable:max-file-line-count 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 37794e887..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/old_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, - }); - } - } -} |
