From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:24:53 -0800 Subject: [PATCH] run prettier on website --- .../ts/@next/components/animatedChatIcon.tsx | 70 +++++++++--- .../@next/components/animatedCompassIcon.tsx | 22 ++-- .../ts/@next/components/blockIconLink.tsx | 40 ++----- .../website/ts/@next/components/button.tsx | 4 +- .../ts/@next/components/definition.tsx | 4 +- .../website/ts/@next/components/hamburger.tsx | 9 +- .../ts/@next/components/heroAnimation.tsx | 47 ++++++-- .../website/ts/@next/components/heroImage.tsx | 6 +- packages/website/ts/@next/components/icon.tsx | 22 ++-- .../website/ts/@next/components/image.tsx | 9 +- .../website/ts/@next/components/layout.tsx | 39 ++++--- packages/website/ts/@next/components/logo.tsx | 5 +- .../ts/@next/components/modals/input.tsx | 13 ++- .../website/ts/@next/components/newLayout.tsx | 36 +++++-- .../components/sections/landing/about.tsx | 10 +- .../components/sections/landing/clients.tsx | 18 ++-- .../components/sections/landing/hero.tsx | 8 +- .../website/ts/@next/components/separator.tsx | 2 +- .../website/ts/@next/components/siteWrap.tsx | 23 ++-- .../ts/@next/components/slider/slider.tsx | 14 +-- packages/website/ts/@next/components/text.tsx | 38 ++++--- .../ts/@next/constants/globalStyle.tsx | 12 ++- .../website/ts/@next/constants/utilities.tsx | 6 +- packages/website/ts/@next/pages/community.tsx | 61 ++++++----- .../ts/@next/pages/instant/code_demo.tsx | 6 +- .../config_generator_address_input.tsx | 6 +- .../pages/instant/fee_percentage_slider.tsx | 2 +- packages/website/ts/@next/pages/landing.tsx | 16 +-- .../website/ts/@next/pages/market_maker.tsx | 42 ++++---- packages/website/ts/@next/pages/why.tsx | 100 ++++++++++-------- packages/website/ts/globals.d.ts | 4 +- packages/website/tsconfig.json | 5 +- 32 files changed, 403 insertions(+), 296 deletions(-) diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx index feaa0631f3..9a86e244c1 100644 --- a/packages/website/ts/@next/components/animatedChatIcon.tsx +++ b/packages/website/ts/@next/components/animatedChatIcon.tsx @@ -4,28 +4,69 @@ import styled, { keyframes } from 'styled-components'; export const AnimatedChatIcon = () => ( - + - + - - - - - - + + + + + + - + - - - + + + ); @@ -57,6 +98,9 @@ const Rays = styled.g` transform-origin: 50% 50%; `; -const Dot = styled.circle<{ delay: number }>` +const Dot = + styled.circle < + { delay: number } > + ` animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite; `; diff --git a/packages/website/ts/@next/components/animatedCompassIcon.tsx b/packages/website/ts/@next/components/animatedCompassIcon.tsx index aa0cfd099b..5388f95ca0 100644 --- a/packages/website/ts/@next/components/animatedCompassIcon.tsx +++ b/packages/website/ts/@next/components/animatedCompassIcon.tsx @@ -4,17 +4,21 @@ import styled, { keyframes } from 'styled-components'; export const AnimatedCompassIcon = () => ( - - - + + + - - - - - - + + + + + + diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 46a267889c..bdcc5c29df 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {withRouter} from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import styled from 'styled-components'; -import {Button} from 'ts/@next/components/button'; -import {Icon} from 'ts/@next/components/icon'; +import { Button } from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; interface Props { icon?: string; @@ -16,48 +16,26 @@ interface Props { class BaseComponent extends React.PureComponent { public onClick = (): void => { - const { - linkAction, - linkUrl, - } = this.props; + const { linkAction, linkUrl } = this.props; if (linkAction) { linkAction(); } else { this.props.history.push(linkUrl); } - } + }; public render(): React.ReactNode { - const { - icon, - iconComponent, - linkUrl, - linkAction, - title, - linkLabel, - } = this.props; + const { icon, iconComponent, linkUrl, linkAction, title, linkLabel } = this.props; return (
- + - - {title} - + {title} -
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index fdf396ef09..790e31468d 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -74,7 +74,9 @@ const ButtonBase = transition: background-color 0.35s, border-color 0.35s; // @todo Refactor to use theme props - ${props => props.bgColor === 'dark' && ` + ${props => + props.bgColor === 'dark' && + ` background-color: ${colors.brandDark}; color: ${colors.white}; `} diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 965466f609..12c22a5d6b 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -41,7 +41,9 @@ export const Definition = (props: Props) => ( {typeof props.description === 'string' ? ( - {props.description} + + {props.description} + ) : ( <>{props.description} )} diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index b5c01a2b05..435d206cdf 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -16,7 +16,10 @@ export const Hamburger: React.FunctionComponent = (props: Props) => { ); }; -const StyledHamburger = styled.button` +const StyledHamburger = + styled.button < + Props > + ` background: none; border: 0; width: 22px; @@ -50,7 +53,9 @@ const StyledHamburger = styled.button` //transform-origin: 0% 100%; } - ${props => props.isOpen && ` + ${props => + props.isOpen && + ` opacity: 1; transform: rotate(45deg) translate(0, 1px); diff --git a/packages/website/ts/@next/components/heroAnimation.tsx b/packages/website/ts/@next/components/heroAnimation.tsx index 32117c1f82..42956fb6a3 100644 --- a/packages/website/ts/@next/components/heroAnimation.tsx +++ b/packages/website/ts/@next/components/heroAnimation.tsx @@ -4,16 +4,49 @@ import styled, { keyframes } from 'styled-components'; export const HeroAnimation = () => ( - + - - - - - - + + + + + + ); diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx index 9562180836..af7c055ac8 100644 --- a/packages/website/ts/@next/components/heroImage.tsx +++ b/packages/website/ts/@next/components/heroImage.tsx @@ -5,11 +5,7 @@ interface Props { image: React.ReactNode; } -export const LandingAnimation = (props: Props) => ( - - {props.image} - -); +export const LandingAnimation = (props: Props) => {props.image}; const Wrap = styled.figure` display: inline-block; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index d9632a3c7d..fc9d488f91 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import Loadable from 'react-loadable'; import styled from 'styled-components'; -import {Paragraph} from 'ts/@next/components/text'; -import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; +import { Paragraph } from 'ts/@next/components/text'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; interface IconProps extends PaddingInterface { name?: string; @@ -14,7 +14,7 @@ interface IconProps extends PaddingInterface { export const Icon: React.FunctionComponent = (props: IconProps) => { if (props.name && !props.component) { const IconSVG = Loadable({ - loader: async () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), + loader: async () => import(/* webpackChunkName: "icon" */ `ts/@next/icons/illustrations/${props.name}.svg`), loading: () => Loading, }); @@ -26,17 +26,16 @@ export const Icon: React.FunctionComponent = (props: IconProps) => { } if (props.component) { - return ( - - {props.component} - - ); + return {props.component}; } return null; }; -export const InlineIconWrap = styled.div` +export const InlineIconWrap = + styled.div < + PaddingInterface > + ` margin: ${props => getCSSPadding(props.margin)}; display: flex; align-items: center; @@ -55,7 +54,10 @@ const _getSize = (size: string | number = 'small'): string => { return `${size}px`; }; -const StyledIcon = styled.figure` +const StyledIcon = + styled.figure < + IconProps > + ` width: ${props => _getSize(props.size)}; height: ${props => _getSize(props.size)}; margin: ${props => getCSSPadding(props.margin)}; diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx index 34520b619b..65b2a97059 100644 --- a/packages/website/ts/@next/components/image.tsx +++ b/packages/website/ts/@next/components/image.tsx @@ -9,11 +9,12 @@ interface Props { } const ImageClass: React.FunctionComponent = (props: Props) => { - return ( - - ); + return ; }; -export const Image = styled(ImageClass)` +export const Image = + styled(ImageClass) < + Props > + ` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 358120adc4..770ee159c7 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import {getCSSPadding, PADDING_SIZES, PaddingInterface} from 'ts/@next/constants/utilities'; +import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities'; interface WrapWidths { default: string; @@ -51,8 +51,8 @@ export interface WrapStickyInterface { const _getColumnWidth = (args: GetColWidthArgs): string => { const { span = 1, columns } = args; - const percentWidth = (span / columns) * 100; - const gutterDiff = (GUTTER * (columns - 1)) / columns; + const percentWidth = span / columns * 100; + const gutterDiff = GUTTER * (columns - 1) / columns; return `calc(${percentWidth}% - ${gutterDiff}px)`; }; @@ -87,8 +87,11 @@ export const Main = styled.main` // passing a asElement (same patter nas Heading) so we dont have to // make a const on every route to withComponent-size it. // just
? -export const Section = styled.section` - width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; +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'}; @@ -102,11 +105,15 @@ export const Section = styled.section` @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}; + padding: ${props => + props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default}; } `; -const WrapBase = styled.div` +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}; @@ -130,7 +137,10 @@ export const WrapCentered = styled(WrapBase)` text-align: center; `; -export const WrapSticky = styled.div` +export const WrapSticky = + styled.div < + WrapStickyInterface > + ` position: sticky; top: ${props => props.offsetTop || '60px'}; `; @@ -138,16 +148,21 @@ export const WrapSticky = styled.div` export const WrapGrid = styled(WrapBase)` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; - justify-content: ${props => props.isCentered ? `center` : 'space-between'}; + justify-content: ${props => (props.isCentered ? `center` : 'space-between')}; `; -export const Column = styled.div` +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%'}; + 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}) { diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 2423f07b52..227d48ee04 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -23,7 +23,10 @@ const StyledLogo = styled.div` } `; -const Icon = styled(LogoIcon)` +const Icon = + styled(LogoIcon) < + LogoInterface > + ` flex-shrink: 0; path { diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index d4d9206a25..5b5eac51cd 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -47,7 +47,7 @@ Input.defaultProps = { const StyledInput = styled.input` appearance: none; background-color: #fff; - border: 1px solid #D5D5D5; + border: 1px solid #d5d5d5; color: #000; font-size: 1.294117647rem; padding: 16px 15px 14px; @@ -59,11 +59,14 @@ const StyledInput = styled.input` border-color: ${(props: InputProps) => props.isErrors && `#FD0000`}; &::placeholder { - color: #C3C3C3; + color: #c3c3c3; } `; -const InputWrapper = styled.div` +const InputWrapper = + styled.div < + InputProps > + ` position: relative; flex-grow: ${props => props.width === InputWidth.Full && 1}; width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`}; @@ -83,8 +86,8 @@ const Label = styled.label` `; const Error = styled.span` - color: #FD0000; - font-size: .833333333rem; + color: #fd0000; + font-size: 0.833333333rem; line-height: 1em; display: inline-block; position: absolute; diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index edb2365767..28e7653c50 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -49,14 +49,15 @@ export interface ColumnProps { export const Section: React.FunctionComponent = (props: SectionProps) => { return ( - - {props.children} - + {props.children} ); }; -export const Column = styled.div` +export const Column = + styled.div < + ColumnProps > + ` width: ${props => props.width}; max-width: ${props => props.maxWidth}; padding: ${props => props.padding}; @@ -70,7 +71,10 @@ export const Column = styled.div` } `; -export const FlexWrap = styled.div` +export const FlexWrap = + styled.div < + FlexProps > + ` max-width: 1500px; margin: 0 auto; padding: ${props => props.padding}; @@ -81,12 +85,18 @@ export const FlexWrap = styled.div` } `; -export const WrapSticky = styled.div` +export const WrapSticky = + styled.div < + WrapProps > + ` position: sticky; top: ${props => props.offsetTop || '60px'}; `; -const SectionBase = styled.section` +const SectionBase = + styled.section < + SectionProps > + ` width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; max-width: 1500px; margin: 0 auto; @@ -100,7 +110,10 @@ const SectionBase = styled.section` } `; -const Wrap = styled(FlexWrap)` +const Wrap = + styled(FlexWrap) < + WrapProps > + ` width: ${props => props.wrapWidth || 'calc(100% - 60px)'}; width: ${props => props.bgColor && 'calc(100% - 60px)'}; max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; @@ -108,10 +121,13 @@ const Wrap = styled(FlexWrap)` margin: 0 auto; `; -export const WrapGrid = styled(Wrap)` +export const WrapGrid = + styled(Wrap) < + WrapProps > + ` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; - justify-content: ${props => props.isCentered ? `center` : 'space-between'}; + justify-content: ${props => (props.isCentered ? `center` : 'space-between')}; @media (max-width: 768px) { width: 100%; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 87a0fe5626..7b51b0d13f 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -57,11 +57,11 @@ const Figure = (props: FigureProps) => ( ); const DeveloperLink = styled(Button)` - @media (max-width: 500px) { - && { - white-space: pre-wrap; - line-height: 1.3; - } + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } } `; diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index e411feeb04..a7a5268182 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {Heading} from 'ts/@next/components/text'; +import { Heading } from 'ts/@next/components/text'; -import {Section, WrapGrid} from 'ts/@next/components/newLayout'; +import { Section, WrapGrid } from 'ts/@next/components/newLayout'; interface ProjectLogo { name: string; @@ -58,16 +58,11 @@ const projects: ProjectLogo[] = [ export const SectionLandingClients = () => (
- - Join the growing number of projects developing on 0x - + Join the growing number of projects developing on 0x {_.map(projects, (item: ProjectLogo, index) => ( - + {item.name} ))} @@ -75,7 +70,10 @@ export const SectionLandingClients = () => (
); -const StyledProject = styled.div` +const StyledProject = + styled.div < + StyledProjectInterface > + ` flex-shrink: 0; img { diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 85290d1c62..cf67ad66d0 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Button} from 'ts/@next/components/button'; -import {Hero} from 'ts/@next/components/hero'; -import {LandingAnimation} from 'ts/@next/components/heroImage'; +import { Button } from 'ts/@next/components/button'; +import { Hero } from 'ts/@next/components/hero'; +import { LandingAnimation } from 'ts/@next/components/heroImage'; -import {HeroAnimation} from 'ts/@next/components/heroAnimation'; +import { HeroAnimation } from 'ts/@next/components/heroAnimation'; import { WebsitePaths } from 'ts/types'; export const SectionLandingHero = () => ( diff --git a/packages/website/ts/@next/components/separator.tsx b/packages/website/ts/@next/components/separator.tsx index ccc79aedf6..0b8b8d7665 100644 --- a/packages/website/ts/@next/components/separator.tsx +++ b/packages/website/ts/@next/components/separator.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const Separator = styled.hr` - background: #EAEAEA; + background: #eaeaea; height: 1px; border: 0; `; diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index db91fe08a4..75cb9a2681 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -115,13 +115,10 @@ export class SiteWrap extends React.Component { this.setState({ isMobileNavOpen: !this.state.isMobileNavOpen, }); - } + }; public render(): React.ReactNode { - const { - children, - theme = 'dark', - } = this.props; + const { children, theme = 'dark' } = this.props; const { isMobileNavOpen } = this.state; const currentTheme = GLOBAL_THEMES[theme]; @@ -131,16 +128,11 @@ export class SiteWrap extends React.Component { <> -
+
-
- {children} -
+
{children}
-
+
@@ -148,7 +140,10 @@ export class SiteWrap extends React.Component { } } -const Main = styled.main` +const Main = + styled.main < + MainProps > + ` transition: transform 0.5s, opacity 0.5s; opacity: ${props => props.isNavToggled && '0.5'}; `; diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx index 10bbbf609c..33a352b9f5 100644 --- a/packages/website/ts/@next/components/slider/slider.tsx +++ b/packages/website/ts/@next/components/slider/slider.tsx @@ -7,8 +7,7 @@ import { colors } from 'ts/style/colors'; import { Icon } from 'ts/@next/components/icon'; import { Heading, Paragraph } from 'ts/@next/components/text'; -interface SliderProps { -} +interface SliderProps {} interface SlideProps { icon: string; @@ -20,7 +19,8 @@ interface SlideProps { const flickityOptions = { initialIndex: 0, cellAlign: 'left', - arrowShape: 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z', + arrowShape: + 'M0 50.766L42.467 93.58l5.791-5.839-32.346-32.61H100V46.84H15.48L50.2 11.838 44.409 6 5.794 44.93l-.003-.003z', prevNextButtons: true, }; @@ -33,7 +33,9 @@ export const Slide: React.StatelessComponent = (props: SlideProps) = - {heading} + + {heading} + {text} @@ -93,7 +95,7 @@ const StyledSlider = styled.div` top: calc(50% - 37px); border: 0; padding: 0; - transition: background-color .40s ease-in-out, visibility .40s ease-in-out, opacity .40s ease-in-out; + transition: background-color 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out; &:disabled { opacity: 0; @@ -130,7 +132,7 @@ const StyledSlide = styled.div` height: 520px; flex: 0 0 auto; opacity: 0.3; - transition: opacity .40s ease-in-out; + transition: opacity 0.4s ease-in-out; & + & { margin-left: 30px; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index a687bca38c..9f6ed9e7ab 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; +import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; interface BaseTextInterface extends PaddingInterface { size?: 'default' | 'medium' | 'large' | 'small' | number; @@ -9,7 +9,7 @@ interface BaseTextInterface extends PaddingInterface { } interface HeadingProps extends BaseTextInterface { - asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + asElement?: 'h1' | 'h2' | 'h3' | 'h4'; maxWidth?: string; fontWeight?: string; isCentered?: boolean; @@ -27,38 +27,33 @@ interface ParagraphProps extends BaseTextInterface { fontWeight?: string | number; } -const StyledHeading = styled.h1` +const StyledHeading = + styled.h1 < + HeadingProps > + ` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; display: ${props => props.isFlex && `inline-flex`}; align-items: center; justify-content: ${props => props.isFlex && `space-between`}; - font-size: ${props => typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; + font-size: ${props => + typeof props.size === 'string' ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; text-align: ${props => props.isCentered && 'center'}; padding: ${props => props.padding && getCSSPadding(props.padding)}; margin-left: ${props => props.isCentered && 'auto'}; margin-right: ${props => props.isCentered && 'auto'}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; - opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; - font-weight: ${props => props.fontWeight ? props.fontWeight : (['h4'].includes(props.asElement) ? 400 : 300)}; + opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)}; + font-weight: ${props => (props.fontWeight ? props.fontWeight : ['h4'].includes(props.asElement) ? 400 : 300)}; width: ${props => props.isFlex && `100%`}; `; export const Heading: React.StatelessComponent = props => { - const { - asElement = 'h1', - children, - } = props; + const { asElement = 'h1', children } = props; const Component = StyledHeading.withComponent(asElement); - return ( - - {children} - - ); + return {children}; }; Heading.defaultProps = { @@ -69,14 +64,17 @@ Heading.defaultProps = { // Note: this would be useful to be implemented the same way was "Heading" // and be more generic. e.g. with a props asElement so we can use it // for literally anything = -export const Paragraph = styled.p` +export const Paragraph = + styled.p < + ParagraphProps > + ` font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; font-weight: ${props => props.fontWeight || 300}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; padding: ${props => props.padding && getCSSPadding(props.padding)}; color: ${props => props.color || props.theme.paragraphColor}; - opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; - text-align: ${props => props.textAlign ? props.textAlign : props.isCentered && 'center'}; + opacity: ${props => (typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted)}; + text-align: ${props => (props.textAlign ? props.textAlign : props.isCentered && 'center')}; line-height: 1.4; `; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index bf168d344d..b095fafb5d 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,5 +1,5 @@ -import {createGlobalStyle, withTheme} from 'styled-components'; -import {cssReset} from 'ts/@next/constants/cssReset'; +import { createGlobalStyle, withTheme } from 'styled-components'; +import { cssReset } from 'ts/@next/constants/cssReset'; export interface GlobalStyle { theme: { @@ -10,7 +10,10 @@ export interface GlobalStyle { }; } -const GlobalStyles = withTheme(createGlobalStyle ` +const GlobalStyles = withTheme( + createGlobalStyle < + GlobalStyle > + ` ${cssReset}; html { @@ -100,6 +103,7 @@ const GlobalStyles = withTheme(createGlobalStyle ` img + p { padding-top: 30px; } -`); +`, +); export { GlobalStyles }; diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx index 0d626c91b3..ee5c5b4ce7 100644 --- a/packages/website/ts/@next/constants/utilities.tsx +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -8,9 +8,9 @@ interface PaddingSizes { } export const PADDING_SIZES: PaddingSizes = { - 'default': '30px', - 'large': '60px', - 'small': '15px', + default: '30px', + large: '60px', + small: '15px', }; export const getCSSPadding = (value: number | Array = 0): string => { diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx index a02e7e6fdf..eb3e7210df 100644 --- a/packages/website/ts/@next/pages/community.tsx +++ b/packages/website/ts/@next/pages/community.tsx @@ -98,14 +98,12 @@ export class NextCommunity extends React.Component { Community - The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community. + The 0x community is a global, passionate group of crypto developers and enthusiasts. The + official channels below provide a great forum for connecting and engaging with the + community. - @@ -113,7 +111,13 @@ export class NextCommunity extends React.Component {
- + {_.map(communityLinks, (link: CommunityLinkProps, index: number) => (
- + Upcoming Events - 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events. + 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of + the community. Want to host a meetup in your city? Reach out for help finding a venue, + connecting with local 0x mentors, and promoting your events. - - - + {_.map(events, (ev: EventProps, index: number) => ( { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const Event: React.FunctionComponent = (event: EventProps) => ( - + {event.title} @@ -195,11 +204,7 @@ const Event: React.FunctionComponent = (event: EventProps) => ( {event.date} - diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx index 04556123e3..4a3022df57 100644 --- a/packages/website/ts/@next/pages/instant/code_demo.tsx +++ b/packages/website/ts/@next/pages/instant/code_demo.tsx @@ -22,7 +22,7 @@ const CustomPre = styled.pre` border: none; } code:first-of-type { - background-color: #060D0D !important; + background-color: #060d0d !important; color: #999; min-height: 100%; text-align: center; @@ -161,9 +161,7 @@ export class CodeDemo extends React.Component { - - {copyButtonText} - + {copyButtonText} diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx index 23cdfcf7ff..9b0e9b1d18 100644 --- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx @@ -43,11 +43,7 @@ export class ConfigGeneratorAddressInput extends React.Component< const hasError = !_.isEmpty(errMsg); return ( - + {errMsg} diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx index 512ae06b46..e9f8ba83b9 100644 --- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -58,7 +58,7 @@ const StyledSlider = styled(SliderWithTooltip)` top: 7px; &:after { border: solid transparent; - content: " "; + content: ' '; height: 0; width: 0; position: absolute; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 8696cf0223..ae560e8e30 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {SiteWrap} from 'ts/@next/components/siteWrap'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; -import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about'; -import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients'; -import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta'; -import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero'; +import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about'; +import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients'; +import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta'; +import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero'; import { ModalContact } from 'ts/@next/components/modals/modal_contact'; @@ -21,7 +21,7 @@ export class NextLanding extends React.Component { isContactModalOpen: false, }; public render(): React.ReactNode { - return ( + return ( @@ -34,9 +34,9 @@ export class NextLanding extends React.Component { public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx index 37a25f0acb..b4b5a30c94 100644 --- a/packages/website/ts/@next/pages/market_maker.tsx +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -11,7 +11,7 @@ import { Icon } from 'ts/@next/components/icon'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { ModalContact } from 'ts/@next/components/modals/modal_contact'; -import {Section} from 'ts/@next/components/newLayout'; +import { Section } from 'ts/@next/components/newLayout'; import { WebsitePaths } from 'ts/types'; @@ -19,7 +19,8 @@ const offersData = [ { icon: 'supportForAllEthereumStandards', title: 'Comprehensive Tutorials', - description: 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.', + description: + 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.', }, { icon: 'generateRevenueForYourBusiness-large', @@ -34,7 +35,8 @@ const offersData = [ { icon: 'getInTouch', title: 'Personalized Support', - description: 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.', + description: + 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.', }, ]; @@ -53,14 +55,10 @@ export class NextMarketMaker extends React.Component { isCenteredMobile={false} title="Bring liquidity to the exchanges of the future" description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs bring liquidity to the 0x network. The program includes tutorials, a robust data platform, trade compensation, and 1:1 support from our MM Success Manager." - actions={} + actions={} /> -
+
- {_.map(offersData, (item, index) => ( - - ))} + {_.map(offersData, (item, index) => ( + + ))}
{ this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } const HeroActions = () => ( diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 9c3c4d0a21..360db165cf 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -4,12 +4,12 @@ import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; import styled from 'styled-components'; -import {Hero} from 'ts/@next/components/hero'; +import { Hero } from 'ts/@next/components/hero'; import { Banner } from 'ts/@next/components/banner'; import { Button } from 'ts/@next/components/button'; -import {Definition} from 'ts/@next/components/definition'; -import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout'; +import { Definition } from 'ts/@next/components/definition'; +import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; @@ -48,7 +48,8 @@ const functionalityData = [ { icon: 'buildBusiness', title: 'Build a Business', - description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', + description: + 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', }, ]; @@ -56,27 +57,32 @@ const useCaseSlides = [ { icon: 'gamingAndCollectibles', title: 'Games & Collectibles', - description: 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + description: + 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', }, { icon: 'predictionMarkets', title: 'Prediction Markets', - description: 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.', + description: + 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.', }, { icon: 'orderBooks', title: 'Order Books', - description: 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.', + description: + 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.', }, { icon: 'decentralisedLoans', title: 'Decentralized Loans', - description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.', + description: + 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.', }, { icon: 'stableTokens', title: 'Stable Tokens', - description: 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.', + description: + 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.', }, ]; @@ -93,21 +99,13 @@ export class NextWhy extends React.Component { title="The exchange layer for the crypto economy" description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastracture that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens." actions={ - } /> -
+
-
- - - Benefits - Use Cases - Features - - +
+ + + Benefits + Use Cases + Features + + - What 0x offers + + What 0x offers + {_.map(offersData, (item, index) => ( - Use Cases + + Use Cases + {_.map(useCaseSlides, (item, index) => ( - Exchange Functionality + + Exchange Functionality + {_.map(functionalityData, (item, index) => ( -
+
- - + + ); } public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); - } + }; public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); - } + }; } interface SectionProps { isNotRelative?: boolean; } -const SectionWrap = styled.div` +const SectionWrap = + styled.div < + SectionProps > + ` position: ${props => !props.isNotRelative && 'relative'}; & + & { @@ -247,10 +254,15 @@ const SectionWrap = styled.div` } `; -const SectionTitle = styled(Heading)<{ isNoBorder?: boolean }>` +const SectionTitle = + styled(Heading) < + { isNoBorder: boolean } > + ` position: relative; - ${props => !props.isNoBorder && ` + ${props => + !props.isNoBorder && + ` &:before { content: ''; width: 100vw; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 9addab3357..9a029397fc 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -8,7 +8,7 @@ declare module 'react-flickity-component'; declare module 'react-anchor-link-smooth-scroll'; declare module 'react-responsive'; declare module 'react-scrollable-anchor'; -declare module 'react-headroom' +declare module 'react-headroom'; declare module '*.json' { const json: any; @@ -20,7 +20,7 @@ declare module '*.json' { declare module '*.svg' { //const svg: any; //export default svg; - import {PureComponent, SVGProps} from "react"; + import { PureComponent, SVGProps } from 'react'; export default class extends PureComponent> {} } diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 67573971f0..96bba7bbf6 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -23,10 +23,7 @@ "awesomeTypescriptLoaderOptions": { "useCache": true, "errorsAsWarnings": true, - "reportFiles": [ - "./ts/**/*" - ] - + "reportFiles": ["./ts/**/*"] }, "include": ["./ts/**/*"] }