diff options
Diffstat (limited to 'packages/website/ts/pages')
| -rw-r--r-- | packages/website/ts/pages/about/jobs.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/developers_page.tsx | 12 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/doc_page.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 22 | ||||
| -rw-r--r-- | packages/website/ts/pages/faq/faq.tsx | 20 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant.tsx | 50 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/config_generator.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/pages/market_maker.tsx | 134 | ||||
| -rw-r--r-- | packages/website/ts/pages/why.tsx | 11 |
9 files changed, 151 insertions, 113 deletions
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); |