diff options
Diffstat (limited to 'packages/website/ts')
66 files changed, 834 insertions, 945 deletions
diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx index a2fd9dd72..51c1a661e 100644 --- a/packages/website/ts/components/aboutPageLayout.tsx +++ b/packages/website/ts/components/aboutPageLayout.tsx @@ -38,18 +38,17 @@ export const AboutPageLayout = (props: Props) => ( {props.description} </AnimatedParagraph> - {props.linkLabel && - (props.href || props.to) && ( - <AnimatedLink - to={props.to} - href={props.href} - target={!_.isUndefined(props.href) ? '_blank' : undefined} - isWithArrow={true} - isAccentColor={true} - > - {props.linkLabel} - </AnimatedLink> - )} + {props.linkLabel && (props.href || props.to) && ( + <AnimatedLink + to={props.to} + href={props.href} + target={!_.isUndefined(props.href) ? '_blank' : undefined} + isWithArrow={true} + isAccentColor={true} + > + {props.linkLabel} + </AnimatedLink> + )} </Column> </Column> </Section> diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx index 9a86e244c..770536259 100644 --- a/packages/website/ts/components/animatedChatIcon.tsx +++ b/packages/website/ts/components/animatedChatIcon.tsx @@ -98,9 +98,6 @@ 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/components/banner.tsx b/packages/website/ts/components/banner.tsx index 76fc1d09e..ce3fd499a 100644 --- a/packages/website/ts/components/banner.tsx +++ b/packages/website/ts/components/banner.tsx @@ -123,10 +123,7 @@ const ButtonWrap = styled.div` // Note let's refactor this // is it absolutely necessary to have a stateless component // to pass props down into the styled icon? -const Border = - styled.div < - BorderProps > - ` +const Border = styled.div<BorderProps>` position: absolute; background-image: ${props => props.isBottom ? 'url(/images/banner/bottomofcta.png);' : 'url(/images/banner/topofcta.png);'}; diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index c9785e48c..31a74e599 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -8,6 +8,7 @@ import { colors } from 'ts/style/colors'; interface ButtonInterface { bgColor?: string; + borderColor?: string; color?: string; children?: React.ReactNode | string; isTransparent?: boolean; @@ -26,7 +27,7 @@ interface ButtonInterface { shouldUseAnchorTag?: boolean; } -export const Button = (props: ButtonInterface) => { +export const Button: React.StatelessComponent<ButtonInterface> = (props: ButtonInterface) => { const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; let linkElem; @@ -53,16 +54,17 @@ export const Button = (props: ButtonInterface) => { ); }; -const ButtonBase = - styled.button < - ButtonInterface > - ` +Button.defaultProps = { + borderColor: 'rgba(255, 255, 255, .4)', +}; + +const ButtonBase = styled.button<ButtonInterface>` appearance: none; border: 1px solid transparent; display: inline-block; background-color: ${props => props.bgColor || colors.brandLight}; background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}; - border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'}; + border-color: ${props => props.isTransparent && !props.isWithArrow && props.borderColor}; color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'}; white-space: ${props => props.isWithArrow && 'nowrap'}; diff --git a/packages/website/ts/components/definition.tsx b/packages/website/ts/components/definition.tsx index c7fac5177..bd7a40425 100644 --- a/packages/website/ts/components/definition.tsx +++ b/packages/website/ts/components/definition.tsx @@ -5,7 +5,7 @@ import { Button } from 'ts/components/button'; import { Icon } from 'ts/components/icon'; import { Heading, Paragraph } from 'ts/components/text'; -interface Action { +export interface Action { label: string; url?: string; onClick?: () => void; @@ -69,10 +69,7 @@ export const Definition = (props: Props) => ( </Wrap> ); -const Wrap = - styled.div < - Props > - ` +const Wrap = styled.div<Props>` max-width: ${props => props.isInline && '354px'}; & + & { @@ -97,10 +94,7 @@ const Wrap = } `; -const TextWrap = - styled.div < - Props > - ` +const TextWrap = styled.div<Props>` width: 100%; max-width: 560px; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index a0114d898..1c47903db 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -148,15 +148,17 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp If you are using{' '} <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank"> Metamask - </a>, you can switch networks in the top left corner of the extension popover. + </a> + , you can switch networks in the top left corner of the extension popover. </div> <h4>Parity Signer</h4> <div> If using the{' '} <a href={constants.URL_PARITY_CHROME_STORE} target="_blank"> Parity Signer Chrome extension - </a>, make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in - order to connect to mainnet \ or Kovan respectively. + </a> + , make sure to start your local Parity node with `parity ui` or `parity --chain Kovan ui` in order + to connect to mainnet \ or Kovan respectively. </div> </div> ); diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 9b9421f1a..5ca272b1a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -111,20 +111,19 @@ export class EthWethConversionDialog extends React.Component< )} <div className="pt1" style={{ fontSize: 12 }}> <div className="left">1 ETH = 1 WETH</div> - {this.props.direction === Side.Receive && - this.state.isEthTokenBalanceLoaded && ( - <div - className="right" - onClick={this._onMaxClick.bind(this)} - style={{ - color: colors.darkBlue, - textDecoration: 'underline', - cursor: 'pointer', - }} - > - Max - </div> - )} + {this.props.direction === Side.Receive && this.state.isEthTokenBalanceLoaded && ( + <div + className="right" + onClick={this._onMaxClick.bind(this)} + style={{ + color: colors.darkBlue, + textDecoration: 'underline', + cursor: 'pointer', + }} + > + Max + </div> + )} </div> </div> </div> diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx index 0ab24ab5e..d158ab926 100644 --- a/packages/website/ts/components/documentation/sidebar_header.tsx +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -24,7 +24,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ return ( <Container> <Container className="flex justify-bottom"> - <Container className="col col-7 pl1"> + <Container className="col col-8 pl1"> <Text fontColor={colors.lightLinkBlue} fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} @@ -37,7 +37,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ {!_.isUndefined(docsVersion) && !_.isUndefined(availableDocVersions) && !_.isUndefined(onVersionSelected) && ( - <div className="col col-5 pl1" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}> + <div className="col col-4 pl1" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}> <Container className="right"> <VersionDropDown selectedVersion={docsVersion} diff --git a/packages/website/ts/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/components/dropdowns/dropdown_developers.tsx index dc6b70d21..590d2ead9 100644 --- a/packages/website/ts/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/components/dropdowns/dropdown_developers.tsx @@ -37,6 +37,10 @@ const introData: LinkConfig[] = [ label: 'Use networked liquidity', url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, + { + label: 'Market making', + url: `${WebsitePaths.MarketMaker}`, + }, ]; const docsData: LinkConfig[] = [ diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 3d0203573..2fa2b94a0 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -173,15 +173,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { private _renderOrderJsonNotices(): React.ReactNode { return ( <div> - {!_.isUndefined(this.props.initialOrder) && - !this.state.didOrderValidationRun && ( - <div className="pt2"> - <span className="pr1"> - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - </span> - <span>Validating order...</span> - </div> - )} + {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun && ( + <div className="pt2"> + <span className="pr1"> + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + </span> + <span>Validating order...</span> + </div> + )} {!_.isEmpty(this.state.orderJSONErrMsg) && ( <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} /> )} diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index feb72c2ee..5be09e6c2 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -37,7 +37,8 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => { be counterfeit. It is your responsibility to verify the token addresses on Etherscan ( <a href="https://0x.org/wiki#Verifying-Custom-Tokens" target="_blank"> See this how-to guide - </a>) before filling an order. <b>This action may result in the loss of funds</b>. + </a> + ) before filling an order. <b>This action may result in the loss of funds</b>. </div> </div> </Dialog> diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx index 435d206cd..34d4ccc46 100644 --- a/packages/website/ts/components/hamburger.tsx +++ b/packages/website/ts/components/hamburger.tsx @@ -16,10 +16,7 @@ export const Hamburger: React.FunctionComponent<Props> = (props: Props) => { ); }; -const StyledHamburger = - styled.button < - Props > - ` +const StyledHamburger = styled.button<Props>` background: none; border: 0; width: 22px; @@ -41,9 +38,8 @@ const StyledHamburger = height: 2px; margin-bottom: 5px; transform-origin: 4px 0px; - transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), - background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0), - opacity 0.55s ease; + transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), + background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; &:first-child { //transform-origin: 0% 0%; diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx index 90e097070..088f41048 100644 --- a/packages/website/ts/components/header.tsx +++ b/packages/website/ts/components/header.tsx @@ -87,7 +87,9 @@ class HeaderBase extends React.Component<HeaderProps> { </Link> <NavLinks> - {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)} + {_.map(navItems, (link, index) => ( + <NavItem key={`navlink-${index}`} link={link} /> + ))} </NavLinks> <MediaQuery minWidth={990}> @@ -130,10 +132,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => { ); }; -const StyledHeader = - styled.header < - HeaderProps > - ` +const StyledHeader = styled.header<HeaderProps>` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -200,10 +199,7 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = - styled.div < - DropdownWrapInterface > - ` +const DropdownWrap = styled.div<DropdownWrapInterface>` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; @@ -219,27 +215,28 @@ const DropdownWrap = transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; z-index: 20; - &:after, &:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; + &:after, + &:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } &:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: ${props => props.theme.dropdownBg}; - border-width: 10px; - margin-left: -10px; + border-color: rgba(255, 255, 255, 0); + border-bottom-color: ${props => props.theme.dropdownBg}; + border-width: 10px; + margin-left: -10px; } &:before { - border-color: rgba(255, 0, 0, 0); - border-bottom-color: ${props => props.theme.dropdownBorderColor}; - border-width: 11px; - margin-left: -11px; + border-color: rgba(255, 0, 0, 0); + border-bottom-color: ${props => props.theme.dropdownBorderColor}; + border-width: 11px; + margin-left: -11px; } @media (max-width: 768px) { diff --git a/packages/website/ts/components/hero.tsx b/packages/website/ts/components/hero.tsx index a662ee3a5..c326e0292 100644 --- a/packages/website/ts/components/hero.tsx +++ b/packages/website/ts/components/hero.tsx @@ -28,10 +28,7 @@ interface WrapProps { isFullWidth?: boolean; isCenteredMobile?: boolean; } -const Wrap = - styled.div < - WrapProps > - ` +const Wrap = styled.div<WrapProps>` width: calc(100% - 60px); margin: 0 auto; @@ -53,10 +50,7 @@ interface TitleProps { isLarge?: any; maxWidth?: string; } -const Title = - styled.h1 < - TitleProps > - ` +const Title = styled.h1<TitleProps>` font-size: ${props => (props.isLarge ? '80px' : '50px')}; font-weight: 300; line-height: 1.1; @@ -87,10 +81,7 @@ const Description = styled.p` } `; -const Content = - styled.div < - { width: string } > - ` +const Content = styled.div<{ width: string }>` width: 100%; @media (min-width: 768px) { diff --git a/packages/website/ts/components/icon.tsx b/packages/website/ts/components/icon.tsx index 165e999b9..60e4d04ee 100644 --- a/packages/website/ts/components/icon.tsx +++ b/packages/website/ts/components/icon.tsx @@ -32,10 +32,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => { return null; }; -export const InlineIconWrap = - styled.div < - PaddingInterface > - ` +export const InlineIconWrap = styled.div<PaddingInterface>` margin: ${props => getCSSPadding(props.margin)}; display: flex; align-items: center; @@ -54,10 +51,7 @@ const _getSize = (size: string | number = 'small'): string => { return `${size}px`; }; -const StyledIcon = - styled.figure < - IconProps > - ` +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/components/image.tsx b/packages/website/ts/components/image.tsx index 65b2a9705..0137cfc97 100644 --- a/packages/website/ts/components/image.tsx +++ b/packages/website/ts/components/image.tsx @@ -12,9 +12,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => { return <img {...props} />; }; -export const Image = - styled(ImageClass) < - Props > - ` +export const Image = styled(ImageClass)<Props>` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/components/link.tsx b/packages/website/ts/components/link.tsx index 080a0abcc..a66985acc 100644 --- a/packages/website/ts/components/link.tsx +++ b/packages/website/ts/components/link.tsx @@ -44,10 +44,7 @@ export const LinkWrap = styled.div` } `; -const StyledLink = - styled(SmartLink) < - LinkInterface > - ` +const StyledLink = styled(SmartLink)<LinkInterface>` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx index 19aeb901e..f89be0711 100644 --- a/packages/website/ts/components/logo.tsx +++ b/packages/website/ts/components/logo.tsx @@ -23,10 +23,7 @@ const StyledLogo = styled.div` } `; -const Icon = - styled(LogoIcon) < - LogoInterface > - ` +const Icon = styled(LogoIcon)<LogoInterface>` flex-shrink: 0; path { diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx index 573d21596..d43bbe50e 100644 --- a/packages/website/ts/components/mobileNav.tsx +++ b/packages/website/ts/components/mobileNav.tsx @@ -55,10 +55,7 @@ export class MobileNav extends React.PureComponent<Props> { } } -const Wrap = - styled.nav < - { isToggled: boolean } > - ` +const Wrap = styled.nav<{ isToggled: boolean }>` width: 100%; height: 357px; background-color: ${props => props.theme.mobileNavBgUpper}; @@ -99,19 +96,13 @@ const Overlay = styled.div` interface SectionProps { isDark?: boolean; } -const Section = - styled.div < - SectionProps > - ` +const Section = styled.div<SectionProps>` width: 100%; padding: 15px 30px; background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')}; `; -const Grid = - styled(WrapGrid) < - WrapProps > - ` +const Grid = styled(WrapGrid)<WrapProps>` justify-content: flex-start; li { diff --git a/packages/website/ts/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx index 8cfcc9763..c72e53aa0 100644 --- a/packages/website/ts/components/modals/input.tsx +++ b/packages/website/ts/components/modals/input.tsx @@ -60,10 +60,7 @@ const StyledInput = styled.input` } `; -const InputWrapper = - styled.div < - InputProps > - ` +const InputWrapper = styled.div<InputProps>` position: relative; flex-grow: ${props => props.width === InputWidth.Full && 1}; width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`}; diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx index d9c276584..62c1062a3 100644 --- a/packages/website/ts/components/modals/modal_contact.tsx +++ b/packages/website/ts/components/modals/modal_contact.tsx @@ -12,11 +12,18 @@ import { Icon } from 'ts/components/icon'; import { Input, InputWidth } from 'ts/components/modals/input'; import { Heading, Paragraph } from 'ts/components/text'; import { GlobalStyle } from 'ts/constants/globalStyle'; +import { utils } from 'ts/utils/utils'; + +export enum ModalContactType { + General = 'GENERAL', + MarketMaker = 'MARKET_MAKER', +} interface Props { theme?: GlobalStyle; isOpen?: boolean; onDismiss?: () => void; + modalContactType: ModalContactType; } interface FormProps { @@ -39,23 +46,30 @@ interface ErrorProps { } export class ModalContact extends React.Component<Props> { + public static defaultProps = { + modalContactType: ModalContactType.General, + }; public state = { isSubmitting: false, isSuccessful: false, errors: {}, }; + // shared fields public nameRef: React.RefObject<HTMLInputElement> = React.createRef(); public emailRef: React.RefObject<HTMLInputElement> = React.createRef(); public companyProjectRef: React.RefObject<HTMLInputElement> = React.createRef(); - public linkRef: React.RefObject<HTMLInputElement> = React.createRef(); public commentsRef: React.RefObject<HTMLInputElement> = React.createRef(); + // general lead fields + public linkRef: React.RefObject<HTMLInputElement> = React.createRef(); + // market maker lead fields + public countryRef: React.RefObject<HTMLInputElement> = React.createRef(); + public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef(); public constructor(props: Props) { super(props); } public render(): React.ReactNode { const { isOpen, onDismiss } = this.props; const { isSuccessful, errors } = this.state; - return ( <> <DialogOverlay @@ -68,58 +82,7 @@ export class ModalContact extends React.Component<Props> { <Heading color={colors.textDarkPrimary} size={34} asElement="h2"> Contact the 0x Core Team </Heading> - <Paragraph isMuted={true} color={colors.textDarkPrimary}> - If you're considering building on 0x, we're happy to answer your questions. Fill out the - form so we can connect you with the right person to help you get started. - </Paragraph> - <InputRow> - <Input - name="name" - label="Your name" - type="text" - width={InputWidth.Half} - ref={this.nameRef} - required={true} - errors={errors} - /> - <Input - name="email" - label="Your email" - type="email" - ref={this.emailRef} - required={true} - errors={errors} - width={InputWidth.Half} - /> - </InputRow> - <InputRow> - <Input - name="companyOrProject" - label="Name of your project / company" - type="text" - ref={this.companyProjectRef} - required={true} - errors={errors} - /> - </InputRow> - <InputRow> - <Input - name="link" - label="Do you have any documentation or a website?" - type="text" - ref={this.linkRef} - errors={errors} - /> - </InputRow> - <InputRow> - <Input - name="comments" - label="Anything else?" - type="textarea" - ref={this.commentsRef} - errors={errors} - /> - </InputRow> + {this._renderFormContent(errors)} <ButtonRow> <Button color="#5C5C5C" @@ -149,28 +112,182 @@ export class ModalContact extends React.Component<Props> { </> ); } + public _renderFormContent(errors: ErrorProps): React.ReactNode { + switch (this.props.modalContactType) { + case ModalContactType.MarketMaker: + return this._renderMarketMakerFormContent(errors); + case ModalContactType.General: + default: + return this._renderGeneralFormContent(errors); + } + } + private _renderMarketMakerFormContent(errors: ErrorProps): React.ReactNode { + return ( + <> + <Paragraph isMuted={true} color={colors.textDarkPrimary}> + If you’re considering market making on 0x, we’re happy to answer your questions. Fill out the form + so we can connect you with the right person to help you get started. + </Paragraph> + <InputRow> + <Input + name="name" + label="Your name" + type="text" + width={InputWidth.Half} + ref={this.nameRef} + required={true} + errors={errors} + /> + <Input + name="email" + label="Your email" + type="email" + ref={this.emailRef} + required={true} + errors={errors} + width={InputWidth.Half} + /> + </InputRow> + <InputRow> + <Input + name="country" + label="Country of Location" + type="text" + ref={this.countryRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="fundSize" + label="Fund Size" + type="text" + ref={this.fundSizeRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="companyOrProject" + label="Name of your project / company" + type="text" + ref={this.companyProjectRef} + required={false} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="comments" + label="What is prompting you to reach out?" + type="textarea" + ref={this.commentsRef} + required={false} + errors={errors} + /> + </InputRow> + </> + ); + } + private _renderGeneralFormContent(errors: ErrorProps): React.ReactNode { + return ( + <> + <Paragraph isMuted={true} color={colors.textDarkPrimary}> + If you're considering building on 0x, we're happy to answer your questions. Fill out the form so we + can connect you with the right person to help you get started. + </Paragraph> + <InputRow> + <Input + name="name" + label="Your name" + type="text" + width={InputWidth.Half} + ref={this.nameRef} + required={true} + errors={errors} + /> + <Input + name="email" + label="Your email" + type="email" + ref={this.emailRef} + required={true} + errors={errors} + width={InputWidth.Half} + /> + </InputRow> + <InputRow> + <Input + name="companyOrProject" + label="Name of your project / company" + type="text" + ref={this.companyProjectRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="link" + label="Do you have any documentation or a website?" + type="text" + ref={this.linkRef} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="comments" + label="Anything else?" + type="textarea" + ref={this.commentsRef} + errors={errors} + /> + </InputRow> + </> + ); + } private async _onSubmitAsync(e: Event): Promise<void> { e.preventDefault(); - const name = this.nameRef.current.value; - const email = this.emailRef.current.value; - const projectOrCompany = this.companyProjectRef.current.value; - const link = this.linkRef.current.value; - const comments = this.commentsRef.current.value; + let jsonBody; + if (this.props.modalContactType === ModalContactType.MarketMaker) { + jsonBody = { + name: this.nameRef.current.value, + email: this.emailRef.current.value, + country: this.countryRef.current.value, + fundSize: this.fundSizeRef.current.value, + projectOrCompany: this.companyProjectRef.current.value, + comments: this.commentsRef.current.value, + }; + } else { + jsonBody = { + name: this.nameRef.current.value, + email: this.emailRef.current.value, + projectOrCompany: this.companyProjectRef.current.value, + link: this.linkRef.current.value, + comments: this.commentsRef.current.value, + }; + } this.setState({ ...this.state, errors: [], isSubmitting: true }); + const endpoint = + this.props.modalContactType === ModalContactType.MarketMaker ? '/market_maker_leads' : '/leads'; + try { // Disabling no-unbound method b/c no reason for _.isEmpty to be bound // tslint:disable:no-unbound-method - const response = await fetch('https://website-api.0xproject.com/leads', { + const response = await fetch(`${utils.getBackendBaseUrl()}${endpoint}`, { method: 'post', mode: 'cors', credentials: 'same-origin', headers: { 'content-type': 'application/json; charset=utf-8', }, - body: JSON.stringify(_.omitBy({ name, email, projectOrCompany, link, comments }, _.isEmpty)), + body: JSON.stringify(_.omitBy(jsonBody, _.isEmpty)), }); if (!response.ok) { @@ -201,6 +318,7 @@ export class ModalContact extends React.Component<Props> { ); } } + // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]} const InputRow = styled.div` @@ -243,28 +361,22 @@ const StyledDialogContent = styled(DialogContent)` } `; -const Form = - styled.form < - FormProps > - ` +const Form = styled.form<FormProps>` position: relative; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; opacity: ${props => props.isSuccessful && `0`}; visibility: ${props => props.isSuccessful && `hidden`}; `; -const Confirmation = - styled.div < - FormProps > - ` +const Confirmation = styled.div<FormProps>` position: absolute; top: 50%; text-align: center; width: 100%; left: 0; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; - transition-delay: 0.40s; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; + transition-delay: 0.4s; padding: 60px 60px; transform: translateY(-50%); opacity: ${props => (props.isSuccessful ? `1` : `0`)}; diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 4d4bc4617..56df880f3 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -77,8 +77,8 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { isActive ? colors.lightLinkBlue : this.props.screenWidth === ScreenWidths.Sm - ? 'white' - : colors.grey100 + ? 'white' + : colors.grey100 } fontSize="14px" textAlign="left" diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx index 28e7653c5..07691a02a 100644 --- a/packages/website/ts/components/newLayout.tsx +++ b/packages/website/ts/components/newLayout.tsx @@ -54,10 +54,7 @@ export const Section: React.FunctionComponent<SectionProps> = (props: SectionPro ); }; -export const Column = - styled.div < - ColumnProps > - ` +export const Column = styled.div<ColumnProps>` width: ${props => props.width}; max-width: ${props => props.maxWidth}; padding: ${props => props.padding}; @@ -71,10 +68,7 @@ export const Column = } `; -export const FlexWrap = - styled.div < - FlexProps > - ` +export const FlexWrap = styled.div<FlexProps>` max-width: 1500px; margin: 0 auto; padding: ${props => props.padding}; @@ -85,18 +79,12 @@ export const FlexWrap = } `; -export const WrapSticky = - styled.div < - WrapProps > - ` +export const WrapSticky = styled.div<WrapProps>` position: sticky; top: ${props => props.offsetTop || '60px'}; `; -const SectionBase = - styled.section < - SectionProps > - ` +const SectionBase = styled.section<SectionProps>` width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; max-width: 1500px; margin: 0 auto; @@ -110,10 +98,7 @@ const SectionBase = } `; -const Wrap = - styled(FlexWrap) < - WrapProps > - ` +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')}; @@ -121,10 +106,7 @@ const Wrap = margin: 0 auto; `; -export const WrapGrid = - styled(Wrap) < - WrapProps > - ` +export const WrapGrid = styled(Wrap)<WrapProps>` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; justify-content: ${props => (props.isCentered ? `center` : 'space-between')}; diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx index 4a7abb7ec..e5fd95646 100644 --- a/packages/website/ts/components/newsletter_form.tsx +++ b/packages/website/ts/components/newsletter_form.tsx @@ -4,6 +4,7 @@ import styled, { withTheme } from 'styled-components'; import { ThemeValuesInterface } from 'ts/components/siteWrap'; import { colors } from 'ts/style/colors'; import { errorReporter } from 'ts/utils/error_reporter'; +import { utils } from 'ts/utils/utils'; interface FormProps { theme: ThemeValuesInterface; @@ -92,7 +93,7 @@ class Form extends React.Component<FormProps> { } try { - await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { + await fetch(`${utils.getBackendBaseUrl()}/newsletter_subscriber/substack`, { method: 'post', mode: 'cors', headers: { @@ -116,10 +117,7 @@ const StyledForm = styled.form` margin-top: 27px; `; -const StyledInput = - styled.input < - InputProps > - ` +const StyledInput = styled.input<InputProps>` appearance: none; background-color: transparent; border: 0; @@ -131,7 +129,7 @@ const StyledInput = width: 100%; &::placeholder { - color: #B1B1B1; // #9D9D9D on light theme + color: #b1b1b1; // #9D9D9D on light theme } `; @@ -139,14 +137,11 @@ const InputWrapper = styled.div` position: relative; `; -const InnerInputWrapper = - styled.div < - ArrowProps > - ` +const InnerInputWrapper = styled.div<ArrowProps>` opacity: ${props => props.isSubmitted && 0}; visibility: ${props => props.isSubmitted && 'hidden'}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; - transition-delay: 0.30s; + transition-delay: 0.3s; `; const SubmitButton = styled.button` @@ -173,11 +168,8 @@ const Text = styled.p` margin-top: 15px; `; -const SuccessText = - styled.p < - ArrowProps > - ` - color: #B1B1B1; +const SuccessText = styled.p<ArrowProps>` + color: #b1b1b1; font-size: 1rem; font-weight: 300; line-height: 1.2em; @@ -193,10 +185,7 @@ const SuccessText = transition-delay: 0.55s; `; -const Arrow = - styled.svg < - ArrowProps > - ` +const Arrow = styled.svg<ArrowProps>` transform: ${props => props.isSubmitted && `translateX(44px)`}; transition: transform 0.25s ease-in-out; `; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 94ab63ac6..6d7c90573 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -447,7 +447,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { render={this._renderAccountManagementItem.bind(this, item)} /> ); - })}} + })} + } <Route render={this._renderNotFoundMessage.bind(this)} /> </Switch> <PortalDisclaimerDialog diff --git a/packages/website/ts/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx index 9a68fbf4c..4d83a1d2f 100644 --- a/packages/website/ts/components/sections/landing/clients.tsx +++ b/packages/website/ts/components/sections/landing/clients.tsx @@ -86,10 +86,7 @@ export const SectionLandingClients = () => ( </Section> ); -const StyledProject = - styled.div < - StyledProjectInterface > - ` +const StyledProject = styled.div<StyledProjectInterface>` flex-shrink: 0; img { @@ -99,7 +96,7 @@ const StyledProject = } @media (min-width: 768px) { - width: auto; + width: auto; height: 50px; margin: 30px; } diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx index 316896dbb..1f0902105 100644 --- a/packages/website/ts/components/siteWrap.tsx +++ b/packages/website/ts/components/siteWrap.tsx @@ -140,10 +140,7 @@ export class SiteWrap extends React.Component<Props, State> { } } -const Main = - styled.main < - MainProps > - ` +const Main = styled.main<MainProps>` transition: transform 0.5s, opacity 0.5s; opacity: ${props => props.isNavToggled && '0.5'}; `; diff --git a/packages/website/ts/components/text.tsx b/packages/website/ts/components/text.tsx index 10f272e73..a47e61ef3 100644 --- a/packages/website/ts/components/text.tsx +++ b/packages/website/ts/components/text.tsx @@ -27,10 +27,7 @@ interface ParagraphProps extends BaseTextInterface { fontWeight?: string | number; } -const StyledHeading = - styled.h1 < - HeadingProps > - ` +const StyledHeading = styled.h1<HeadingProps>` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; display: ${props => props.isFlex && `inline-flex`}; @@ -64,10 +61,7 @@ Heading.defaultProps = { // Note: this would be useful to be implemented the same way was "Heading" // and be more generic. e.g. <Text /> with a props asElement so we can use it // for literally anything = -export const Paragraph = - styled.p < - ParagraphProps > - ` +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')}; diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 92aecf046..2ed0229c8 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -354,12 +354,11 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala {tokenState.isLoaded ? ( <span> {this._renderAmount(tokenState.balance, token.decimals)} {token.symbol} - {this.state.isZRXSpinnerVisible && - token.symbol === ZRX_TOKEN_SYMBOL && ( - <span className="pl1"> - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - </span> - )} + {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL && ( + <span className="pl1"> + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + </span> + )} </span> ) : ( <i className="zmdi zmdi-spinner zmdi-hc-spin" /> diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index f9e0967d4..a14b94d8a 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -94,14 +94,17 @@ export class Party extends React.Component<PartyProps, PartyState> { <ReactTooltip id={registeredTooltipId}> {isRegistered ? ( <div> - This token address was found in the token registry<br /> + This token address was found in the token registry + <br /> smart contract and is therefore believed to be a<br /> legitimate token. </div> ) : ( <div> - This token is not included in the token registry<br /> - smart contract. We cannot guarantee the legitimacy<br /> + This token is not included in the token registry + <br /> + smart contract. We cannot guarantee the legitimacy + <br /> of this token. Make sure to verify its address on Etherscan. </div> )} @@ -109,27 +112,28 @@ export class Party extends React.Component<PartyProps, PartyState> { </div> </div> )} - {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && - !this.props.hasUniqueNameAndSymbol && ( - <div> - <div - data-tip={true} - data-for={uniqueNameAndSymbolTooltipId} - className="mx-auto" - style={{ fontSize: 13, width: 127 }} - > - <span style={{ color: colors.red500 }}> - <i className="zmdi zmdi-alert-octagon" /> - </span>{' '} - <span>Suspicious token</span> - <ReactTooltip id={uniqueNameAndSymbolTooltipId}> - This token shares it's name, symbol or both with<br /> - a token in the 0x Token Registry but it has a different<br /> - smart contract address. This is most likely a scam token! - </ReactTooltip> - </div> + {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol && ( + <div> + <div + data-tip={true} + data-for={uniqueNameAndSymbolTooltipId} + className="mx-auto" + style={{ fontSize: 13, width: 127 }} + > + <span style={{ color: colors.red500 }}> + <i className="zmdi zmdi-alert-octagon" /> + </span>{' '} + <span>Suspicious token</span> + <ReactTooltip id={uniqueNameAndSymbolTooltipId}> + This token shares it's name, symbol or both with + <br /> + a token in the 0x Token Registry but it has a different + <br /> + smart contract address. This is most likely a scam token! + </ReactTooltip> </div> - )} + </div> + )} </div> </div> ); diff --git a/packages/website/ts/constants/globalStyle.tsx b/packages/website/ts/constants/globalStyle.tsx index 5abb758c5..ef7ec9426 100644 --- a/packages/website/ts/constants/globalStyle.tsx +++ b/packages/website/ts/constants/globalStyle.tsx @@ -11,9 +11,7 @@ export interface GlobalStyle { } const GlobalStyles = withTheme( - createGlobalStyle < - GlobalStyle > - ` + createGlobalStyle<GlobalStyle>` ${cssReset}; html { diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts index c93b9332d..a75c6d861 100644 --- a/packages/website/ts/containers/asset_buyer_documentation.ts +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown = require('md/docs/asset_buyer/introduction'); @@ -25,7 +23,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/asset-buyer', type: SupportedDocJson.TypeDoc, displayName: 'AssetBuyer', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/asset-buyer', markdownMenu: { introduction: [markdownSections.introduction], install: [markdownSections.installation], @@ -40,32 +38,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 0f11e0809..1cfc0702e 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/connect/1/introduction'); @@ -25,7 +23,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/connect', type: SupportedDocJson.TypeDoc, displayName: '0x Connect', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/connect', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -45,32 +43,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index 4c05605e3..bbabce7a7 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/contract_wrappers/1/introduction'); @@ -24,7 +22,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/contract-wrappers', type: SupportedDocJson.TypeDoc, displayName: 'Contract Wrappers', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/contract-wrappers', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -40,32 +38,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - docsInfo, - translate: state.translate, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts index e0ca439a6..2a6dac0e2 100644 --- a/packages/website/ts/containers/docs_home.ts +++ b/packages/website/ts/containers/docs_home.ts @@ -26,6 +26,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( - DocsHomeComponent, -); +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocsHomeComponent); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 9d1df1d1f..e6e4d4067 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -1,12 +1,10 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { constants as docConstants, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown = require('md/docs/ethereum_types/introduction'); @@ -36,32 +34,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/faq.ts b/packages/website/ts/containers/faq.ts index a2b5735f6..da5b71bdd 100644 --- a/packages/website/ts/containers/faq.ts +++ b/packages/website/ts/containers/faq.ts @@ -22,4 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const FAQ: React.ComponentClass<FAQProps> = connect(mapStateToProps, mapDispatchToProps)(FAQComponent); +export const FAQ: React.ComponentClass<FAQProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(FAQComponent); diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 9c4bb8e26..1090265e7 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/json_schemas/1/introduction'); @@ -32,7 +30,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/json-schemas', type: SupportedDocJson.TypeDoc, displayName: 'JSON Schemas', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/json-schemas', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], schemas: [markdownSections.schemas], @@ -65,32 +63,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/migrations_documentation.ts b/packages/website/ts/containers/migrations_documentation.ts index 02919e06e..bae84dfea 100644 --- a/packages/website/ts/containers/migrations_documentation.ts +++ b/packages/website/ts/containers/migrations_documentation.ts @@ -23,7 +23,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/migrations', type: SupportedDocJson.TypeDoc, displayName: 'Migrations', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/migrations', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -61,6 +61,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/not_found.ts b/packages/website/ts/containers/not_found.ts index f384dab89..825c021ec 100644 --- a/packages/website/ts/containers/not_found.ts +++ b/packages/website/ts/containers/not_found.ts @@ -22,6 +22,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const NotFound: React.ComponentClass<NotFoundProps> = connect(mapStateToProps, mapDispatchToProps)( - NotFoundComponent, -); +export const NotFound: React.ComponentClass<NotFoundProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(NotFoundComponent); diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index f1d794988..8d83357ca 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/order_utils/1/introduction'); @@ -25,7 +23,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/order-utils', type: SupportedDocJson.TypeDoc, displayName: 'Order utils', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/order-utils', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -41,32 +39,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 683e1fe9f..149ffdd2a 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/order_watcher/1/introduction'); @@ -25,7 +23,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/order-watcher', type: SupportedDocJson.TypeDoc, displayName: 'Order Watcher', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/order-watcher', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -41,32 +39,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 5661e0a97..db41a3ec3 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -87,6 +87,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Portal: React.ComponentClass<PortalComponentProps> = connect(mapStateToProps, mapDispatchToProps)( - PortalComponent, -); +export const Portal: React.ComponentClass<PortalComponentProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(PortalComponent); diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 57c98fa3b..d94e285a7 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -1,13 +1,11 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import { Networks } from '@0x/react-shared'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths, SmartContractDocSections as Sections } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/smart_contracts/1/introduction'); @@ -91,32 +89,9 @@ const docsInfoConfig: DocsInfoConfig = { }, }, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; - docsInfo: DocsInfo; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), - docsInfo, -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index f3a793e80..31117372b 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/sol-compiler/1/introduction'); @@ -27,7 +25,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/sol-compiler', type: SupportedDocJson.TypeDoc, displayName: 'Solidity Compiler', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/sol-compiler', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, @@ -45,32 +43,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts deleted file mode 100644 index 8944ec70a..000000000 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; - -/* tslint:disable:no-var-requires */ -const IntroMarkdown1 = require('md/docs/sol_cov/1/introduction'); -const InstallationMarkdown1 = require('md/docs/sol_cov/1/installation'); -const UsageMarkdown1 = require('md/docs/sol_cov/1/usage'); -const IntroMarkdown2 = require('md/docs/sol_cov/2/introduction'); -const InstallationMarkdown2 = require('md/docs/sol_cov/2/installation'); -const UsageMarkdown2 = require('md/docs/sol_cov/2/usage'); -/* tslint:enable:no-var-requires */ - -const markdownSections = { - introduction: 'introduction', - installation: 'installation', - usage: 'usage', -}; - -const docsInfoConfig: DocsInfoConfig = { - id: DocPackages.SolCov, - packageName: '@0x/sol-cov', - type: SupportedDocJson.TypeDoc, - displayName: 'Sol-cov', - packageUrl: 'https://github.com/0xProject/0x-monorepo', - markdownMenu: { - 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], - }, - sectionNameToMarkdownByVersion: { - '0.0.1': { - [markdownSections.introduction]: IntroMarkdown1, - [markdownSections.installation]: InstallationMarkdown1, - [markdownSections.usage]: UsageMarkdown1, - }, - '2.1.8': { - [markdownSections.introduction]: IntroMarkdown2, - [markdownSections.installation]: InstallationMarkdown2, - [markdownSections.usage]: UsageMarkdown2, - }, - }, - markdownSections, -}; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); - -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); diff --git a/packages/website/ts/containers/sol_coverage_documentation.ts b/packages/website/ts/containers/sol_coverage_documentation.ts new file mode 100644 index 000000000..a9073b720 --- /dev/null +++ b/packages/website/ts/containers/sol_coverage_documentation.ts @@ -0,0 +1,44 @@ +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/sol_coverage/introduction'); +const InstallationMarkdown = require('md/docs/sol_coverage/installation'); +const UsageMarkdown = require('md/docs/sol_coverage/usage'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.SolCoverage, + packageName: '@0x/sol-coverage', + type: SupportedDocJson.TypeDoc, + displayName: 'Sol-coverage', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/sol-coverage', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], + }, + sectionNameToMarkdownByVersion: { + '1.0.0': { + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, + [markdownSections.usage]: UsageMarkdown, + }, + }, + markdownSections, +}; +const mapStateToProps = getMapStateToProps(docsInfoConfig); + +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_profiler_documentation.ts b/packages/website/ts/containers/sol_profiler_documentation.ts new file mode 100644 index 000000000..2f3936cae --- /dev/null +++ b/packages/website/ts/containers/sol_profiler_documentation.ts @@ -0,0 +1,44 @@ +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/sol_profiler/introduction'); +const InstallationMarkdown = require('md/docs/sol_profiler/installation'); +const UsageMarkdown = require('md/docs/sol_profiler/usage'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.SolProfiler, + packageName: '@0x/sol-profiler', + type: SupportedDocJson.TypeDoc, + displayName: 'Sol-profiler', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/sol-profiler', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], + }, + sectionNameToMarkdownByVersion: { + '1.0.0': { + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, + [markdownSections.usage]: UsageMarkdown, + }, + }, + markdownSections, +}; +const mapStateToProps = getMapStateToProps(docsInfoConfig); + +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/sol_trace_documentation.ts b/packages/website/ts/containers/sol_trace_documentation.ts new file mode 100644 index 000000000..9c2552438 --- /dev/null +++ b/packages/website/ts/containers/sol_trace_documentation.ts @@ -0,0 +1,44 @@ +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/sol_trace/introduction'); +const InstallationMarkdown = require('md/docs/sol_trace/installation'); +const UsageMarkdown = require('md/docs/sol_trace/usage'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.SolTrace, + packageName: '@0x/sol-trace', + type: SupportedDocJson.TypeDoc, + displayName: 'Sol-trace', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/sol-trace', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], + }, + sectionNameToMarkdownByVersion: { + '1.0.0': { + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, + [markdownSections.usage]: UsageMarkdown, + }, + }, + markdownSections, +}; +const mapStateToProps = getMapStateToProps(docsInfoConfig); + +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 0e421777b..2ac0360ab 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/subproviders/1/introduction'); @@ -26,7 +24,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/subproviders', type: SupportedDocJson.TypeDoc, displayName: 'Subproviders', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/subproviders', markdownMenu: { 'getting-started': [docSections.introduction, docSections.installation, docSections.ledgerNodeHid], }, @@ -44,32 +42,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections: docSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 9c8c34621..73fea90ed 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdown1 = require('md/docs/web3_wrapper/1/introduction'); @@ -24,7 +22,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '@0x/web3-wrapper', type: SupportedDocJson.TypeDoc, displayName: 'Web3Wrapper', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/web3-wrapper', markdownMenu: { 'getting-started': [markdownSections.introduction, markdownSections.installation], }, @@ -40,32 +38,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - translate: state.translate, - docsInfo, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 069b0ae54..f4f2f6ec6 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -25,4 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ dispatcher: new Dispatcher(dispatch), }); -export const Wiki: React.ComponentClass<WikiProps> = connect(mapStateToProps, mapDispatchToProps)(WikiComponent); +export const Wiki: React.ComponentClass<WikiProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(WikiComponent); diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index e0ea6e275..0e4765656 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,12 +1,10 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { State } from 'ts/redux/reducer'; -import { DocPackages, ScreenWidths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; +import { DocPackages } from 'ts/types'; + +import { getMapStateToProps, mapDispatchToProps } from '../utils/documentation_container'; /* tslint:disable:no-var-requires */ const IntroMarkdownV0 = require('md/docs/0xjs/0.0.1/introduction'); @@ -37,7 +35,7 @@ const docsInfoConfig: DocsInfoConfig = { packageName: '0x.js', type: SupportedDocJson.TypeDoc, displayName: '0x.js', - packageUrl: 'https://github.com/0xProject/0x-monorepo', + packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/0x.js', markdownMenu: { 'getting-started': [ markdownSections.introduction, @@ -72,32 +70,9 @@ const docsInfoConfig: DocsInfoConfig = { }, markdownSections, }; -const docsInfo = new DocsInfo(docsInfoConfig); - -interface ConnectedState { - docsVersion: string; - availableDocVersions: string[]; - docsInfo: DocsInfo; - translate: Translate; - screenWidth: ScreenWidths; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ - docsVersion: state.docsVersion, - availableDocVersions: state.availableDocVersions, - docsInfo, - translate: state.translate, - screenWidth: state.screenWidth, -}); - -const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); +const mapStateToProps = getMapStateToProps(docsInfoConfig); -export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( - DocPageComponent, -); +export const Documentation: React.ComponentClass<DocPageProps> = connect( + mapStateToProps, + mapDispatchToProps, +)(DocPageComponent); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index df77e4b76..4ed66c572 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -24,6 +24,7 @@ import { NextEcosystem } from 'ts/pages/ecosystem'; import { Next0xInstant } from 'ts/pages/instant'; import { NextLanding } from 'ts/pages/landing'; import { NextLaunchKit } from 'ts/pages/launch_kit'; +import { NextMarketMaker } from 'ts/pages/market_maker'; import { NextWhy } from 'ts/pages/why'; // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries @@ -68,8 +69,14 @@ const LazySolCompilerDocumentation = createLazyComponent('Documentation', async const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () => import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), ); -const LazySolCovDocumentation = createLazyComponent('Documentation', async () => - import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), +const LazySolCoverageDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "solCoverageDocs" */ 'ts/containers/sol_coverage_documentation'), +); +const LazySolTraceDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "solTraceDocs" */ 'ts/containers/sol_trace_documentation'), +); +const LazySolProfilerDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "solProfilerDocs" */ 'ts/containers/sol_profiler_documentation'), ); const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () => import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), @@ -99,6 +106,11 @@ render( {/* Next (new site) routes */} <Route exact={true} path="/" component={NextLanding as any} /> <Route exact={true} path={WebsitePaths.Why} component={NextWhy as any} /> + <Route + exact={true} + path={WebsitePaths.MarketMaker} + component={NextMarketMaker as any} + /> <Route exact={true} path={WebsitePaths.Instant} component={Next0xInstant as any} /> <Route exact={true} path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} /> <Route exact={true} path={WebsitePaths.Ecosystem} component={NextEcosystem as any} /> @@ -143,7 +155,18 @@ render( path={`${WebsitePaths.SolCompiler}/:version?`} component={LazySolCompilerDocumentation} /> - <Route path={`${WebsitePaths.SolCov}/:version?`} component={LazySolCovDocumentation} /> + <Route + path={`${WebsitePaths.SolCoverage}/:version?`} + component={LazySolCoverageDocumentation} + /> + <Route + path={`${WebsitePaths.SolTrace}/:version?`} + component={LazySolTraceDocumentation} + /> + <Route + path={`${WebsitePaths.SolProfiler}/:version?`} + component={LazySolProfilerDocumentation} + /> <Route path={`${WebsitePaths.JSONSchemas}/:version?`} component={LazyJSONSchemasDocumentation} diff --git a/packages/website/ts/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx index ee1aa6cef..85c25a75f 100644 --- a/packages/website/ts/pages/about/jobs.tsx +++ b/packages/website/ts/pages/about/jobs.tsx @@ -151,7 +151,9 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout <Section id={OPEN_POSITIONS_HASH} isFlex={true} maxWidth="1170px" wrapWidth="100%"> <Column> <Heading size="medium"> - Current<br />Openings + Current + <br /> + Openings </Heading> </Column> diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index fcca2b6ad..0b725c514 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -68,10 +68,7 @@ interface SidebarContainerProps { className?: string; } -const SidebarContainer = - styled.div < - SidebarContainerProps > - ` +const SidebarContainer = styled.div<SidebarContainerProps>` ${scrollableContainerStyles} padding-top: 27px; padding-left: ${SIDEBAR_PADDING}px; @@ -87,10 +84,7 @@ interface MainContentContainerProps { className?: string; } -const MainContentContainer = - styled.div < - MainContentContainerProps > - ` +const MainContentContainer = styled.div<MainContentContainerProps>` ${scrollableContainerStyles} padding-top: 0px; padding-left: 50px; @@ -153,7 +147,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop <Container className="flex mx-auto" height="100vh"> <Container className="sm-hide xs-hide relative" - width={234} + width={270} paddingLeft={22} paddingRight={22} paddingTop={0} diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 3ae071774..14bad7329 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -33,7 +33,9 @@ const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ContractWrappers]: 'contract-wrappers', [DocPackages.SolCompiler]: 'sol-compiler', [DocPackages.JSONSchemas]: 'json-schemas', - [DocPackages.SolCov]: 'sol-cov', + [DocPackages.SolCoverage]: 'sol-coverage', + [DocPackages.SolProfiler]: 'sol-profiler', + [DocPackages.SolTrace]: 'sol-trace', [DocPackages.Subproviders]: 'subproviders', [DocPackages.OrderUtils]: 'order-utils', [DocPackages.OrderWatcher]: 'order-watcher', diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index fd3932bfa..d11cf02fb 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -218,10 +218,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { }, { description: - 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + 'A Solidity code coverage tool. Sol-coverage uses transaction traces to figure out which lines of your code has been covered by your tests.', link: { - title: '@0x/sol-cov', - to: WebsitePaths.SolCov, + title: '@0x/sol-coverage', + to: WebsitePaths.SolCoverage, + }, + }, + { + description: + 'A Solidity profiler. Sol-profiler uses transaction traces to figure out line-by-line gas consumption.', + link: { + title: '@0x/sol-profiler', + to: WebsitePaths.SolProfiler, + }, + }, + { + description: + 'A Solidity revert trace tool. Sol-trace prints human-readable revert trace whenever the revert happens.', + link: { + title: '@0x/sol-trace', + to: WebsitePaths.SolTrace, }, }, { diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 8cde7224e..548db1d1d 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -36,17 +36,16 @@ const sections: FAQSection[] = [ <div> At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, low friction exchange of Ethereum-based assets. Developers can use 0x as a platform to build - exchange applications on top of (<a - href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} - target="blank" - > + exchange applications on top of ( + <a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank"> 0x.js </a>{' '} is a Javascript library for interacting with the 0x protocol). For end users, 0x will be the infrastructure of a wide variety of user-facing applications i.e.{' '} <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank"> 0x Portal - </a>, a decentralized application that facilitates trustless trading of Ethereum-based tokens + </a> + , a decentralized application that facilitates trustless trading of Ethereum-based tokens between known counterparties. </div> ), @@ -253,7 +252,8 @@ const sections: FAQSection[] = [ target="_blank" > development roadmap - </a>. + </a> + . </div> ), }, @@ -360,7 +360,8 @@ const sections: FAQSection[] = [ target="_blank" > here - </a>. + </a> + . </div> ), }, @@ -380,8 +381,9 @@ const sections: FAQSection[] = [ Join our{' '} <a href={constants.URL_ZEROEX_CHAT} target="_blank"> Discord - </a>! As an open source project, 0x will rely on a worldwide community of passionate developers - to contribute proposals, ideas and code. + </a> + ! As an open source project, 0x will rely on a worldwide community of passionate developers to + contribute proposals, ideas and code. </div> ), }, diff --git a/packages/website/ts/pages/instant.tsx b/packages/website/ts/pages/instant.tsx index b97bb35a4..586665d5b 100644 --- a/packages/website/ts/pages/instant.tsx +++ b/packages/website/ts/pages/instant.tsx @@ -100,7 +100,7 @@ export class Next0xInstant extends React.Component<Props> { <div> {[...Array(18)].map((item, index) => ( <Card key={`card-${index}`} index={index}> - <img src={`/images/0x-instant/widget-${index % 6 + 1}.png`} /> + <img src={`/images/0x-instant/widget-${(index % 6) + 1}.png`} /> </Card> ))} </div> @@ -189,13 +189,10 @@ const fadeUp = keyframes` } `; -const ConfiguratorSection = - styled(Section) < - SectionProps > - ` - @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { - display: none; - } +const ConfiguratorSection = styled(Section)<SectionProps>` + @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { + display: none; + } `; // width = 370 * 12 @@ -233,29 +230,26 @@ const MarqueeWrap = styled.div` } `; -const Card = - styled.div < - { index: number } > - ` - opacity: 0; - flex-shrink: 0; - transform: translateY(10px); - will-change: opacity, transform; - animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; - - img { - height: auto; - } +const Card = styled.div<{ index: number }>` + opacity: 0; + flex-shrink: 0; + transform: translateY(10px); + will-change: opacity, transform; + animation: ${fadeUp} 0.75s ${props => `${props.index * 0.05}s`} forwards; - @media (min-width: 768px) { img { - width: 370px; + height: auto; } - } - @media (max-width: 768px) { - img { - width: 300px; + @media (min-width: 768px) { + img { + width: 370px; + } + } + + @media (max-width: 768px) { + img { + width: 300px; + } } - } `; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index e43d47119..29fce85db 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -318,13 +318,10 @@ interface CheckboxTextProps { isSelected?: boolean; } -const CheckboxText = - styled.span < - CheckboxTextProps > - ` +const CheckboxText = styled.span<CheckboxTextProps>` font-size: 14px; line-height: 18px; - color: ${props => (props.isSelected ? colors.brandDark : '#666666')} + color: ${props => (props.isSelected ? colors.brandDark : '#666666')}; `; const OptionalAction = styled(OptionalText)` diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index 55566c798..854870358 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -1,43 +1,68 @@ import * as _ from 'lodash'; +import { opacify } from 'polished'; import * as React from 'react'; import { Banner } from 'ts/components/banner'; import { Button } from 'ts/components/button'; -import { Definition } from 'ts/components/definition'; +import { Action, Definition } from 'ts/components/definition'; import { Hero } from 'ts/components/hero'; -import { ModalContact } from 'ts/components/modals/modal_contact'; +import { ModalContact, ModalContactType } from 'ts/components/modals/modal_contact'; import { Section } from 'ts/components/newLayout'; import { SiteWrap } from 'ts/components/siteWrap'; +import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; -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.', - }, - { - icon: 'generateRevenueForYourBusiness-large', - title: 'Market Making Compensation', - description: ( - <ul> - <li>Receive an infrastructure grant of $20,000+ for completing onboarding*</li> - <li>Earn an additional $5,000 by referring other market makers to the Program*</li> - </ul> - ), - }, - { - 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.', - }, -]; +interface OfferData { + icon: string; + title: string; + description: string; + links?: Action[]; +} +export interface NextMarketMakerProps {} -export class NextMarketMaker extends React.Component { +export class NextMarketMaker extends React.Component<NextMarketMakerProps> { public state = { isContactModalOpen: false, }; + + private readonly _offersData: OfferData[]; + + constructor(props: NextMarketMakerProps) { + super(props); + this._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, find arbitrage opportunities, and trade on new types of exchanges like prediction markets and non-fungible token marketplaces.', + links: [ + { + label: 'Explore the Docs', + url: `${WebsitePaths.Wiki}#Market-Making-on-0x`, + }, + ], + }, + { + icon: 'generateRevenueForYourBusiness-large', + title: 'Market Making Compensation', + description: 'Accepted applicants can receive up to $15,000 for completing onboarding', + }, + { + icon: 'getInTouch', + title: 'Dedicated Support', + description: + 'The 0x team will provide 1:1 onboarding assistance and promptly answer all your questions. They will walk you through the tutorials so that you know how to read 0x order types, spin up an Ethereum node, and execute trades on the blockchain.', + links: [ + { + label: 'Contact Us', + onClick: this._onOpenContactModal, + shouldUseAnchorTag: true, + }, + ], + }, + ]; + } + public render(): React.ReactNode { return ( <SiteWrap theme="light"> @@ -47,14 +72,14 @@ export class NextMarketMaker extends React.Component { isLargeTitle={false} isFullWidth={false} 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={<HeroActions />} + title="Bring liquidity to the markets 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 to bring liquidity to the 0x network. The Program includes tutorials, monetary incentives, and 1:1 support from the 0x team." + actions={this._renderHeroActions()} /> <Section bgColor="light" isFlex={true} maxWidth="1170px"> <Definition - title="Secure" + title="Secure Trading" titleSize="small" description="Take full custody of your assets to eliminate counterparty risk" icon="secureTrading" @@ -74,7 +99,7 @@ export class NextMarketMaker extends React.Component { <Definition title="Low Cost" titleSize="small" - description="Pay no fees on orders except for bulk cancellations" + description="Pay no gas fees to make 0x orders" icon="low-cost" iconSize="medium" isInline={true} @@ -82,7 +107,7 @@ export class NextMarketMaker extends React.Component { </Section> <Section> - {_.map(offersData, (item, index) => ( + {_.map(this._offersData, (item, index) => ( <Definition key={`offers-${index}`} icon={item.icon} @@ -91,34 +116,47 @@ export class NextMarketMaker extends React.Component { isInlineIcon={true} iconSize={240} fontSize="medium" + actions={item.links} /> ))} </Section> <Banner - heading="Need more flexibility?" - subline="Dive into our docs, or contact us if needed" - mainCta={{ text: 'Explore the Docs', href: '/docs' }} - secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + heading="Start trading today." + subline="Check out our Market Making tutorials to get started" + mainCta={{ text: 'Tutorials', href: `${WebsitePaths.Wiki}#Market-Making-on-0x` }} + secondaryCta={{ text: 'Apply Now', onClick: this._onOpenContactModal }} + /> + <ModalContact + isOpen={this.state.isContactModalOpen} + onDismiss={this._onDismissContactModal} + modalContactType={ModalContactType.MarketMaker} /> - <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> </SiteWrap> ); } - public _onOpenContactModal = (): void => { + private readonly _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); }; - public _onDismissContactModal = (): void => { + private readonly _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); }; -} -const HeroActions = () => ( - <> - <Button href="https://github.com/0xProject/0x-launch-kit" bgColor="dark" isInline={true}> - Get Started - </Button> - </> -); + private readonly _renderHeroActions = () => ( + <> + <Button href={`${WebsitePaths.Wiki}#Market-Making-on-0x`} bgColor="dark" isInline={true}> + Get Started + </Button> + <Button + onClick={this._onOpenContactModal} + borderColor={opacify(0.4)(colors.brandDark)} + isTransparent={true} + isInline={true} + > + Apply Now + </Button> + </> + ); +} diff --git a/packages/website/ts/pages/why.tsx b/packages/website/ts/pages/why.tsx index 197ce5fc9..a0ed5f95a 100644 --- a/packages/website/ts/pages/why.tsx +++ b/packages/website/ts/pages/why.tsx @@ -229,10 +229,7 @@ interface SectionProps { isNotRelative?: boolean; } -const SectionWrap = - styled.div < - SectionProps > - ` +const SectionWrap = styled.div<SectionProps>` position: ${props => !props.isNotRelative && 'relative'}; & + & { @@ -258,10 +255,7 @@ const SectionWrap = interface SectionTitleProps { isNoBorder?: boolean; } -const SectionTitle = - styled(Heading) < - SectionTitleProps > - ` +const SectionTitle = styled(Heading)<SectionTitleProps>` position: relative; ${props => @@ -278,7 +272,6 @@ const SectionTitle = } `} - @media (max-width: 768px) { &:before { width: calc(100vw - 60px); diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 37bd73063..50114e2d6 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -370,7 +370,9 @@ export enum WebsitePaths { OrderWatcher = '/docs/order-watcher', SolCompiler = '/docs/sol-compiler', JSONSchemas = '/docs/json-schemas', - SolCov = '/docs/sol-cov', + SolCoverage = '/docs/sol-coverage', + SolProfiler = '/docs/sol-profiler', + SolTrace = '/docs/sol-trace', Subproviders = '/docs/subproviders', OrderUtils = '/docs/order-utils', EthereumTypes = '/docs/ethereum-types', @@ -386,7 +388,9 @@ export enum DocPackages { Web3Wrapper = 'WEB3_WRAPPER', SolCompiler = 'SOL_COMPILER', JSONSchemas = 'JSON_SCHEMAS', - SolCov = 'SOL_COV', + SolCoverage = 'SOL_COVERAGE', + SolTrace = 'SOL_TRACE', + SolProfiler = 'SOL_PROFILER', Subproviders = 'SUBPROVIDERS', OrderUtils = 'ORDER_UTILS', EthereumTypes = 'ETHEREUM_TYPES', diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index fab382b07..7cc854ca0 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -5,8 +5,8 @@ const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { AMOUNT_DISPLAY_PRECSION: 5, - BACKEND_BASE_PROD_URL: 'https://website-api.0xproject.com', - BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0xproject.com', + BACKEND_BASE_PROD_URL: 'https://website-api.0x.org', + BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0x.org', BASE_URL, BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208', DEFAULT_DERIVATION_PATH: `44'/60'/0'`, @@ -39,8 +39,8 @@ export const configs = { ] as OutdatedWrappedEtherByNetworkId[], // The order matters. We first try first node and only then fall back to others. PUBLIC_NODE_URLS_BY_NETWORK_ID: { - [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`, 'https://mainnet.0xproject.com'], - [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0xproject.com'], + [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`, 'https://mainnet.0x.org'], + [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0x.org'], [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, diff --git a/packages/website/ts/utils/documentation_container.ts b/packages/website/ts/utils/documentation_container.ts new file mode 100644 index 000000000..54e8a2c1a --- /dev/null +++ b/packages/website/ts/utils/documentation_container.ts @@ -0,0 +1,35 @@ +import { DocsInfo, DocsInfoConfig } from '@0x/react-docs'; +import { Dispatch } from 'redux'; +import { DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +export interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +export const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const getMapStateToProps = (docsInfoConfig: DocsInfoConfig) => { + const docsInfo = new DocsInfo(docsInfoConfig); + const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, + }); + return mapStateToProps; +}; |