From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:24:53 -0800 Subject: run prettier on website --- .../ts/@next/components/animatedChatIcon.tsx | 70 +++++++++++--- .../ts/@next/components/animatedCompassIcon.tsx | 22 +++-- .../website/ts/@next/components/blockIconLink.tsx | 40 ++------ packages/website/ts/@next/components/button.tsx | 4 +- .../website/ts/@next/components/definition.tsx | 4 +- packages/website/ts/@next/components/hamburger.tsx | 9 +- .../website/ts/@next/components/heroAnimation.tsx | 47 ++++++++-- packages/website/ts/@next/components/heroImage.tsx | 6 +- packages/website/ts/@next/components/icon.tsx | 22 +++-- packages/website/ts/@next/components/image.tsx | 9 +- packages/website/ts/@next/components/layout.tsx | 39 +++++--- packages/website/ts/@next/components/logo.tsx | 5 +- .../website/ts/@next/components/modals/input.tsx | 13 ++- packages/website/ts/@next/components/newLayout.tsx | 36 ++++++-- .../ts/@next/components/sections/landing/about.tsx | 10 +- .../@next/components/sections/landing/clients.tsx | 18 ++-- .../ts/@next/components/sections/landing/hero.tsx | 8 +- packages/website/ts/@next/components/separator.tsx | 2 +- packages/website/ts/@next/components/siteWrap.tsx | 23 ++--- .../website/ts/@next/components/slider/slider.tsx | 14 +-- packages/website/ts/@next/components/text.tsx | 38 ++++---- .../website/ts/@next/constants/globalStyle.tsx | 12 ++- packages/website/ts/@next/constants/utilities.tsx | 6 +- packages/website/ts/@next/pages/community.tsx | 61 ++++++------ .../website/ts/@next/pages/instant/code_demo.tsx | 6 +- .../instant/config_generator_address_input.tsx | 6 +- .../@next/pages/instant/fee_percentage_slider.tsx | 2 +- packages/website/ts/@next/pages/landing.tsx | 16 ++-- packages/website/ts/@next/pages/market_maker.tsx | 42 ++++----- packages/website/ts/@next/pages/why.tsx | 102 ++++++++++++--------- packages/website/ts/globals.d.ts | 4 +- packages/website/tsconfig.json | 5 +- 32 files changed, 404 insertions(+), 297 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx index feaa0631f..9a86e244c 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 aa0cfd099..5388f95ca 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 46a267889..bdcc5c29d 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 fdf396ef0..790e31468 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 965466f60..12c22a5d6 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 b5c01a2b0..435d206cd 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 32117c1f8..42956fb6a 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 956218083..af7c055ac 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 d9632a3c7..fc9d488f9 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 34520b619..65b2a9705 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 358120adc..770ee159c 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 2423f07b5..227d48ee0 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 d4d9206a2..5b5eac51c 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 edb236576..28e7653c5 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 87a0fe562..7b51b0d13 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 e411feeb0..a7a526818 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 85290d1c6..cf67ad66d 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 ccc79aedf..0b8b8d766 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 db91fe08a..75cb9a268 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 10bbbf609..33a352b9f 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 a687bca38..9f6ed9e7a 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 bf168d344..b095fafb5 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 0d626c91b..ee5c5b4ce 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 a02e7e6fd..eb3e7210d 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 04556123e..4a3022df5 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 23cdfcf7f..9b0e9b1d1 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 512ae06b4..e9f8ba83b 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 8696cf022..ae560e8e3 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 37a25f0ac..b4b5a30c9 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 9c3c4d0a2..360db165c 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 9addab335..9a029397f 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 67573971f..96bba7bbf 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/**/*"] } -- cgit