diff --git a/packages/website/ts/components/centeredDefinition.tsx b/packages/website/ts/components/centeredDefinition.tsx
new file mode 100644
index 0000000000..add3c24959
--- /dev/null
+++ b/packages/website/ts/components/centeredDefinition.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Icon } from 'ts/components/icon';
+import { Heading, Paragraph } from 'ts/components/text';
+
+interface Props {
+ isInline: boolean;
+ icon: string;
+ iconSize?: 'medium' | 'large' | number;
+ fontSize?: 'default' | 'medium' | number;
+ title: string;
+ titleSize?: 'small' | 'default' | number;
+ description: React.ReactNode | string;
+}
+
+export const CenteredDefinition = (props: Props) => (
+
+
+
+
+ {props.title}
+
+
+ {typeof props.description === 'string' ? (
+
+ {props.description}
+
+ ) : (
+ <>{props.description}>
+ )}
+
+
+);
+
+const Wrap = styled.div`
+ max-width: ${props => props.isInline && 'calc(50% - 30px)'};
+ text-align: center;
+
+ @media (max-width: 768px) {
+ margin: 0 auto;
+
+ & + & {
+ margin-top: ${props => props.isInline && '60px'};
+ }
+ }
+`;
+
+const TextWrap = styled.div`
+ width: 100%;
+ max-width: 560px;
+ text-align: center;
+`;
diff --git a/packages/website/ts/components/modals/input.tsx b/packages/website/ts/components/modals/input.tsx
index c72e53aa06..9507409189 100644
--- a/packages/website/ts/components/modals/input.tsx
+++ b/packages/website/ts/components/modals/input.tsx
@@ -16,10 +16,53 @@ interface InputProps {
required?: boolean;
}
+interface OptionSelectorProps {
+ name: string;
+ width?: InputWidth;
+ label: string;
+ errors?: ErrorProps;
+ isErrors?: boolean;
+ required?: boolean;
+ children: React.ReactNode;
+ isFlex?: boolean;
+}
+
+interface OptionsWrapperProps {
+ isFlex?: boolean;
+}
+
+interface CheckBoxProps {
+ name: string;
+ label: string;
+}
+
interface ErrorProps {
[key: string]: string;
}
+export const OptionSelector = (props: OptionSelectorProps) => {
+ const id = `input-${name}`;
+ return (
+
+
+
+ {props.children}
+
+
+ );
+};
+
+export const CheckBox = React.forwardRef((props: CheckBoxProps, ref?: React.Ref) => {
+ const { name, label } = props;
+ const id = `input-${name}`;
+ return (
+
+
+ {label}
+
+ );
+});
+
export const Input = React.forwardRef((props: InputProps, ref?: React.Ref) => {
const { name, label, type, errors } = props;
const id = `input-${name}`;
@@ -41,6 +84,41 @@ Input.defaultProps = {
errors: {},
};
+const StyledCheckBox = styled.input`
+ visibility: hidden;
+ &:checked + label:after {
+ background-color: #000;
+ border: 2px solid #000;
+ }
+`;
+
+const CheckBoxLabel = styled.label`
+ position: relative;
+ color: #000;
+ opacity: 0.75;
+ font-size: 1rem;
+ font-weight: 300;
+ line-height: 1.2em;
+ margin-bottom: 10px;
+ display: inline-block;
+ padding-left: 1.5rem;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ height: 1rem;
+ width: 1rem;
+ border-radius: 50%;
+ border: 2px solid #d5d5d5;
+ }
+`;
+
+const CheckBoxWrapper = styled.div`
+`;
+
const StyledInput = styled.input`
appearance: none;
background-color: #fff;
@@ -71,6 +149,26 @@ const InputWrapper = styled.div`
}
`;
+const OptionsWrapper = styled.div`
+ display: ${props => props.isFlex && 'flex'};
+ ${props => {
+ if (props.isFlex) {
+ return `
+ & > * {
+ padding: 0 0.5rem;
+ }
+ & >:first-child {
+ padding-left: 0;
+ }
+ & >:last-child {
+ padding-right: 0;
+ }
+ `;
+ }
+ return '';
+ }}
+`;
+
const Label = styled.label`
color: #000;
font-size: 1.111111111rem;
diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx
index 62c1062a3c..45af80c442 100644
--- a/packages/website/ts/components/modals/modal_contact.tsx
+++ b/packages/website/ts/components/modals/modal_contact.tsx
@@ -9,7 +9,7 @@ import '@reach/dialog/styles.css';
import { Button } from 'ts/components/button';
import { Icon } from 'ts/components/icon';
-import { Input, InputWidth } from 'ts/components/modals/input';
+import { CheckBox, Input, InputWidth, OptionSelector } from 'ts/components/modals/input';
import { Heading, Paragraph } from 'ts/components/text';
import { GlobalStyle } from 'ts/constants/globalStyle';
import { utils } from 'ts/utils/utils';
@@ -17,6 +17,7 @@ import { utils } from 'ts/utils/utils';
export enum ModalContactType {
General = 'GENERAL',
MarketMaker = 'MARKET_MAKER',
+ Credits = 'CREDITS',
}
interface Props {
@@ -64,6 +65,11 @@ export class ModalContact extends React.Component {
// market maker lead fields
public countryRef: React.RefObject = React.createRef();
public fundSizeRef: React.RefObject = React.createRef();
+ // credit lead fields
+ public awsOptionRef: React.RefObject = React.createRef();
+ public alchemyOptionRef: React.RefObject = React.createRef();
+ public facebookAdsOptionRef: React.RefObject = React.createRef();
+ public digitalOceanOptionRef: React.RefObject = React.createRef();
public constructor(props: Props) {
super(props);
}
@@ -116,6 +122,8 @@ export class ModalContact extends React.Component {
switch (this.props.modalContactType) {
case ModalContactType.MarketMaker:
return this._renderMarketMakerFormContent(errors);
+ case ModalContactType.Credits:
+ return this._remderCreditsFormContent(errors);
case ModalContactType.General:
default:
return this._renderGeneralFormContent(errors);
@@ -191,6 +199,65 @@ export class ModalContact extends React.Component {
>
);
}
+
+ private _remderCreditsFormContent(errors: ErrorProps): React.ReactNode {
+ return (
+ <>
+
+ If you are building on top of 0x full time, please fill out this form and our Relayer Success Manager will be in touch.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+ }
+
private _renderGeneralFormContent(errors: ErrorProps): React.ReactNode {
return (
<>
@@ -262,6 +329,19 @@ export class ModalContact extends React.Component {
projectOrCompany: this.companyProjectRef.current.value,
comments: this.commentsRef.current.value,
};
+ } else if (this.props.modalContactType === ModalContactType.Credits) {
+ jsonBody = {
+ name: this.nameRef.current.value,
+ email: this.emailRef.current.value,
+ projectOrCompany: this.companyProjectRef.current.value,
+ comments: this.commentsRef.current.value,
+ services: _.filter([
+ this.awsOptionRef.current.checked ? 'aws' : null,
+ this.alchemyOptionRef.current.checked ? 'alchemy' : null,
+ this.facebookAdsOptionRef.current.checked ? 'facebook_ads' : null,
+ this.digitalOceanOptionRef.current.checked ? 'digital_ocean' : null,
+ ], (value: any) => !!value),
+ };
} else {
jsonBody = {
name: this.nameRef.current.value,
@@ -274,8 +354,12 @@ export class ModalContact extends React.Component {
this.setState({ ...this.state, errors: [], isSubmitting: true });
- const endpoint =
- this.props.modalContactType === ModalContactType.MarketMaker ? '/market_maker_leads' : '/leads';
+ let endpoint;
+ switch (this.props.modalContactType) {
+ case ModalContactType.Credits: endpoint = '/credit_leads'; break;
+ case ModalContactType.MarketMaker: endpoint = '/market_maker_leads'; break;
+ default: endpoint = '/leads';
+ }
try {
// Disabling no-unbound method b/c no reason for _.isEmpty to be bound
diff --git a/packages/website/ts/icons/illustrations/alchemy.svg b/packages/website/ts/icons/illustrations/alchemy.svg
new file mode 100644
index 0000000000..80fe76dab8
--- /dev/null
+++ b/packages/website/ts/icons/illustrations/alchemy.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/website/ts/icons/illustrations/aws.svg b/packages/website/ts/icons/illustrations/aws.svg
new file mode 100644
index 0000000000..5f6655b7b9
--- /dev/null
+++ b/packages/website/ts/icons/illustrations/aws.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/website/ts/icons/illustrations/digital_ocean.svg b/packages/website/ts/icons/illustrations/digital_ocean.svg
new file mode 100644
index 0000000000..7e8a724df8
--- /dev/null
+++ b/packages/website/ts/icons/illustrations/digital_ocean.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/website/ts/icons/illustrations/facebook_ads.svg b/packages/website/ts/icons/illustrations/facebook_ads.svg
new file mode 100644
index 0000000000..97fe9a8426
--- /dev/null
+++ b/packages/website/ts/icons/illustrations/facebook_ads.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/website/ts/pages/credits.tsx b/packages/website/ts/pages/credits.tsx
index d89fb7bf7f..673b5e8d88 100644
--- a/packages/website/ts/pages/credits.tsx
+++ b/packages/website/ts/pages/credits.tsx
@@ -1,23 +1,25 @@
import * as _ from 'lodash';
import { opacify } from 'polished';
import * as React from 'react';
+import styled from 'styled-components';
import { Banner } from 'ts/components/banner';
import { Button } from 'ts/components/button';
-import { Action, Definition } from 'ts/components/definition';
+import { CenteredDefinition } from 'ts/components/centeredDefinition';
import { Hero } from 'ts/components/hero';
import { ModalContact, ModalContactType } from 'ts/components/modals/modal_contact';
-import { Section } from 'ts/components/newLayout';
+import { FlexWrap, Section } from 'ts/components/newLayout';
import { SiteWrap } from 'ts/components/siteWrap';
+import { Heading } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
-interface OfferData {
- icon: string;
- title: string;
- description: string;
- links?: Action[];
+interface OffersWrapProps {
}
+const OffersWrap = styled.div`
+ display: flex;
+`;
+
export interface NextCreditsProps {}
export class NextCredits extends React.Component {
@@ -25,42 +27,8 @@ export class NextCredits extends React.Component {
isContactModalOpen: false,
};
- private readonly _offersData: OfferData[];
-
constructor(props: NextCreditsProps) {
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 {
@@ -77,7 +45,49 @@ export class NextCredits extends React.Component {
actions={this._renderHeroActions()}
/>
-
+
+
+ Get your project off the ground with these great services
+
+
+
+
+
+
+
+
+
+
+
+
{
);
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 0a0e150d90..c3ef05cb20 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -191,6 +191,10 @@ export enum ExchangeContractErrs {
InsufficientRemainingFillAmount = 'INSUFFICIENT_REMAINING_FILL_AMOUNT',
}
+export interface GoogleSheetLeadUrls {
+ [key: string]: string;
+}
+
export interface ContractResponse {
logs: ContractEvent[];
}
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 7cc854ca0c..8a739c98ea 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -1,4 +1,4 @@
-import { OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
+import { GoogleSheetLeadUrls, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId, } from 'ts/types';
const BASE_URL = window.location.origin;
const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
@@ -7,6 +7,9 @@ export const configs = {
AMOUNT_DISPLAY_PRECSION: 5,
BACKEND_BASE_PROD_URL: 'https://website-api.0x.org',
BACKEND_BASE_STAGING_URL: 'https://staging-website-api.0x.org',
+ GOOGLE_SHEETS_LEAD_FORMS: {
+ CREDITS: 'https://script.google.com/macros/s/AKfycbyN1lJaSGWg2OIzqT8bou4GiqwCmOVjV2v_fiPO/exec',
+ } as GoogleSheetLeadUrls,
BASE_URL,
BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index e84f9d0cce..34ce9af385 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -285,6 +285,9 @@ export const utils = {
);
return isTestNetwork;
},
+ getGoogleSheetLeadUrl(form: string): string {
+ return configs.GOOGLE_SHEETS_LEAD_FORMS[form];
+ },
getCurrentBaseUrl(): string {
const port = window.location.port;
const hasPort = !_.isUndefined(port);
diff --git a/yarn.lock b/yarn.lock
index ab5d224923..a3fbb4e96c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13461,6 +13461,15 @@ react-dom@^16.3.2:
object-assign "^4.1.1"
prop-types "^15.6.0"
+react-dom@^16.4.2:
+ version "16.8.1"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ prop-types "^15.6.2"
+ scheduler "^0.13.1"
+
react-dom@^16.5.2:
version "16.5.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
@@ -13518,8 +13527,8 @@ react-highlight@0xproject/react-highlight#react-peer-deps:
dependencies:
highlight.js "^9.11.0"
highlightjs-solidity "^1.0.5"
- react "^16.4.2"
- react-dom "^16.4.2"
+ react "^16.5.2"
+ react-dom "^16.5.2"
react-hot-loader@^4.3.3:
version "4.3.4"
@@ -13764,6 +13773,15 @@ react@^16.3.2:
object-assign "^4.1.1"
prop-types "^15.6.0"
+react@^16.4.2:
+ version "16.8.1"
+ resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ prop-types "^15.6.2"
+ scheduler "^0.13.1"
+
react@^16.5.2:
version "16.5.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
@@ -14635,6 +14653,13 @@ schedule@^0.5.0:
dependencies:
object-assign "^4.1.1"
+scheduler@^0.13.1:
+ version "0.13.1"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.1.tgz#1a217df1bfaabaf4f1b92a9127d5d732d85a9591"
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+
schema-utils@^0.4.4:
version "0.4.7"
resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"