diff options
Diffstat (limited to 'packages/website/ts/components')
5 files changed, 192 insertions, 66 deletions
diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index c9785e48c..569038ae0 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,6 +54,10 @@ export const Button = (props: ButtonInterface) => { ); }; +Button.defaultProps = { + borderColor: 'rgba(255, 255, 255, .4)', +}; + const ButtonBase = styled.button < ButtonInterface > @@ -62,7 +67,7 @@ const ButtonBase = 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..92fe54f38 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; 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/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx index d9c276584..a3a1f13f5 100644 --- a/packages/website/ts/components/modals/modal_contact.tsx +++ b/packages/website/ts/components/modals/modal_contact.tsx @@ -13,10 +13,16 @@ import { Input, InputWidth } from 'ts/components/modals/input'; import { Heading, Paragraph } from 'ts/components/text'; import { GlobalStyle } from 'ts/constants/globalStyle'; +export enum ModalContactType { + General = 'GENERAL', + MarketMaker = 'MARKET_MAKER', +} + interface Props { theme?: GlobalStyle; isOpen?: boolean; onDismiss?: () => void; + modalContactType: ModalContactType; } interface FormProps { @@ -39,23 +45,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 +81,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 +111,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(`https://website-api.0xproject.com${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 +317,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` |