aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-21 08:32:00 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-21 08:32:00 +0800
commitea781b8850cda274d24e4cc5f196dfb7e5b37732 (patch)
tree4d34321adf0bebe9d1b8a65815dc053b485dbf14 /packages/website/ts/components
parentba7c8d924429a96f6d2b3280faa6b508b582f557 (diff)
downloaddexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.gz
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.bz2
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.lz
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.xz
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.tar.zst
dexon-sol-tools-ea781b8850cda274d24e4cc5f196dfb7e5b37732.zip
feat: remove unused files
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx46
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx33
-rw-r--r--packages/website/ts/components/forms/subscribe_form.tsx127
-rw-r--r--packages/website/ts/components/layout.tsx177
-rw-r--r--packages/website/ts/components/redirector.tsx9
-rw-r--r--packages/website/ts/components/separator.tsx7
-rw-r--r--packages/website/ts/components/ui/filled_image.tsx18
-rw-r--r--packages/website/ts/components/ui/input.tsx49
-rw-r--r--packages/website/ts/components/ui/simple_loading.tsx17
-rw-r--r--packages/website/ts/components/ui/typed_text.tsx75
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,
- });
- }
- }
-}