diff options
Diffstat (limited to 'packages/website/ts/components')
10 files changed, 0 insertions, 558 deletions
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, - }); - } - } -} |