From c82393d76350bdfa55d4643f68423ae2e2ab700e Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 3 Jan 2019 16:18:33 -0800 Subject: feature(website): add market making page --- packages/website/ts/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'packages') diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index df77e4b76..45054772c 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 @@ -99,6 +100,11 @@ render( {/* Next (new site) routes */} + -- cgit v1.2.3 From ed0e6181bdaf3d6c57ceef3e01a62b3f6ae53f62 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 4 Jan 2019 09:08:58 -0800 Subject: feat(website): add market making section to developers dropdown --- packages/website/ts/components/dropdowns/dropdown_developers.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'packages') 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[] = [ -- cgit v1.2.3 From 1b65efb38c4de06745280ba75388def8e62b7a58 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 4 Jan 2019 09:24:59 -0800 Subject: feat(website): update market maker page copy and links --- packages/website/ts/pages/market_maker.tsx | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index 55566c798..e5e28aac3 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -8,29 +8,25 @@ import { Hero } from 'ts/components/hero'; import { ModalContact } from 'ts/components/modals/modal_contact'; import { Section } from 'ts/components/newLayout'; import { SiteWrap } from 'ts/components/siteWrap'; +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.', + '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.', }, { icon: 'generateRevenueForYourBusiness-large', title: 'Market Making Compensation', - description: ( -
    -
  • Receive an infrastructure grant of $20,000+ for completing onboarding*
    • -
  • Earn an additional $5,000 by referring other market makers to the Program*
    • -
- ), + description: 'Accepted applicants can receive up to $15,000 for completing onboarding', }, { icon: 'getInTouch', - title: 'Personalized Support', + title: 'Dedicated 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.', + '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.', }, ]; @@ -48,7 +44,7 @@ export class NextMarketMaker extends React.Component { 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." + 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={} /> @@ -74,7 +70,7 @@ export class NextMarketMaker extends React.Component { @@ -117,7 +113,7 @@ export class NextMarketMaker extends React.Component { const HeroActions = () => ( <> - -- cgit v1.2.3 From 4e4de07e69d401a1cd220512560c995fbd0c4801 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 4 Jan 2019 09:44:25 -0800 Subject: feat(website): add link underneath the first feature in market maker page --- packages/website/ts/pages/market_maker.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'packages') diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index e5e28aac3..b374e5a2f 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -16,6 +16,12 @@ const offersData = [ 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', @@ -87,6 +93,7 @@ export class NextMarketMaker extends React.Component { isInlineIcon={true} iconSize={240} fontSize="medium" + actions={item.links} /> ))} -- cgit v1.2.3 From 99b6ca5b4fd48019a5568a7ba353ebc1040577f4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 4 Jan 2019 10:00:41 -0800 Subject: feat(website): Add support for copper forms in the offers --- packages/website/ts/components/definition.tsx | 2 +- packages/website/ts/pages/market_maker.tsx | 77 +++++++++++++++++---------- 2 files changed, 50 insertions(+), 29 deletions(-) (limited to 'packages') 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/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index b374e5a2f..cb0c011d2 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -3,43 +3,64 @@ 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 { Section } from 'ts/components/newLayout'; import { SiteWrap } from 'ts/components/siteWrap'; 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, 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.', - }, -]; +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 { public state = { isContactModalOpen: false, }; + + private _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.bind(this), + shouldUseAnchorTag: true, + }, + ], + }, + ]; + } + public render(): React.ReactNode { return ( @@ -84,7 +105,7 @@ export class NextMarketMaker extends React.Component {
- {_.map(offersData, (item, index) => ( + {_.map(this._offersData, (item, index) => ( Date: Sun, 6 Jan 2019 20:45:46 -0800 Subject: feat(website): implement market maker form --- .../website/ts/components/modals/modal_contact.tsx | 239 +++++++++++++++------ packages/website/ts/pages/market_maker.tsx | 8 +- 2 files changed, 184 insertions(+), 63 deletions(-) (limited to 'packages') 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 { + public static defaultProps = { + modalContactType: ModalContactType.General, + }; public state = { isSubmitting: false, isSuccessful: false, errors: {}, }; + // shared fields public nameRef: React.RefObject = React.createRef(); public emailRef: React.RefObject = React.createRef(); public companyProjectRef: React.RefObject = React.createRef(); - public linkRef: React.RefObject = React.createRef(); public commentsRef: React.RefObject = React.createRef(); + // general lead fields + public linkRef: React.RefObject = React.createRef(); + // market maker lead fields + public countryRef: React.RefObject = React.createRef(); + public fundSizeRef: React.RefObject = React.createRef(); public constructor(props: Props) { super(props); } public render(): React.ReactNode { const { isOpen, onDismiss } = this.props; const { isSuccessful, errors } = this.state; - return ( <> { Contact the 0x Core Team - - 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. - - - - - - - - - - - - - - + {this._renderFormContent(errors)} - -); + private readonly _renderHeroActions = () => ( + <> + + + + ); +} -- cgit v1.2.3 From 79863d830e7de40ecef93a6ee26aaf2a843be0e4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 6 Jan 2019 21:40:39 -0800 Subject: chore(website): update market making page copy --- packages/website/ts/pages/market_maker.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index 6e0a5c320..139f0504c 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -72,14 +72,14 @@ export class NextMarketMaker extends React.Component { isLargeTitle={false} isFullWidth={false} isCenteredMobile={false} - title="Bring liquidity to the exchanges of the future" + 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()} />
{ { Date: Mon, 7 Jan 2019 12:19:21 -0800 Subject: chore(website): fix linter --- packages/website/ts/pages/market_maker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/pages/market_maker.tsx b/packages/website/ts/pages/market_maker.tsx index 139f0504c..133ced864 100644 --- a/packages/website/ts/pages/market_maker.tsx +++ b/packages/website/ts/pages/market_maker.tsx @@ -25,7 +25,7 @@ export class NextMarketMaker extends React.Component { isContactModalOpen: false, }; - private _offersData: OfferData[]; + private readonly _offersData: OfferData[]; constructor(props: NextMarketMakerProps) { super(props); -- cgit v1.2.3