diff options
Diffstat (limited to 'packages/website/ts/@next/pages')
18 files changed, 3140 insertions, 0 deletions
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx new file mode 100644 index 000000000..2fd2c7619 --- /dev/null +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -0,0 +1,231 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; +import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { WebsiteBackendJobInfo } from 'ts/types'; +import { backendClient } from 'ts/utils/backend_client'; +import { constants } from 'ts/utils/constants'; + +const OPEN_POSITIONS_HASH = 'positions'; + +interface PositionProps { + title: string; + location: string; + href: string; +} + +interface PositionItemProps { + position: PositionProps; +} + +const Position: React.FunctionComponent<PositionItemProps> = (props: PositionItemProps) => { + const { position } = props; + return ( + <PositionWrap> + <StyledColumn width="30%"> + <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"> + <a href={position.href} target="_blank"> + {position.title} + </a> + </Heading> + </StyledColumn> + + <StyledColumn width="50%" padding="0 40px 0 0"> + <Paragraph isMuted={true} marginBottom="0"> + {position.location} + </Paragraph> + </StyledColumn> + + <StyledColumn width="20%"> + <Paragraph marginBottom="0" textAlign="right"> + <a href={position.href} target="_blank"> + Apply + </a> + </Paragraph> + </StyledColumn> + </PositionWrap> + ); +}; + +export interface NextAboutJobsProps {} +interface NextAboutJobsState { + jobInfos: WebsiteBackendJobInfo[]; +} + +export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAboutJobsState> { + private _isUnmounted: boolean; + private static _convertJobInfoToPositionProps(jobInfo: WebsiteBackendJobInfo): PositionProps { + return { + title: jobInfo.title, + location: jobInfo.office, + href: jobInfo.url, + }; + } + constructor(props: NextAboutJobsProps) { + super(props); + this.state = { + jobInfos: [], + }; + } + + public componentWillMount(): void { + // tslint:disable-next-line:no-floating-promises + this._fetchJobInfosAsync(); + } + public componentWillUnmount(): void { + this._isUnmounted = true; + } + public render(): React.ReactNode { + const positions = this.state.jobInfos.map(jobInfo => NextAboutJobs._convertJobInfoToPositionProps(jobInfo)); + return ( + <AboutPageLayout + title="Join Us in Our Mission" + description={ + <> + <Paragraph size="medium"> + To create a tokenized world where all value can flow freely. + </Paragraph> + <Paragraph size="medium"> + We are growing an ecosystem of businesses and projects by solving difficult challenges to + make our technology intuitive, flexible, and accessible to all. Join us in building + infrastructure upon which the exchange of all assets will take place. + </Paragraph> + </> + } + linkLabel="Our mission and values" + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + > + <DocumentTitle title="Jobs at 0x" /> + <Section bgColor="#F3F6F4" isFlex={true} maxWidth="1170px" wrapWidth="100%"> + <Column maxWidth="442px"> + <Heading size="medium" marginBottom="30px"> + Powered by a Diverse, Global Community + </Heading> + + <Paragraph> + We're a highly technical team with varied backgrounds in engineering, science, business, + finance, and research. While the Core Team is headquartered in San Francisco, there are 30+ + teams building on 0x and hundreds of thousands of participants behind our efforts worldwide. + We're passionate about open-source software and decentralized technology's potential to act + as an equalizing force in the world. + </Paragraph> + </Column> + + <Column maxWidth="600px"> + <ImageWrap> + <img src="/images/@next/jobs/map@2x.png" height="365" alt="Map of community" /> + </ImageWrap> + </Column> + </Section> + + <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> + <Column> + <Heading size="medium">Benefits</Heading> + </Column> + + <Column maxWidth="826px"> + <BenefitsList> + <li>Comprehensive Insurance</li> + <li>Unlimited Vacation</li> + <li>Meals and snacks provided daily</li> + <li>Flexible hours and liberal work-from-home-policy</li> + <li>Supportive of remote working</li> + <li>Transportation, phone, and wellness expense</li> + <li>Relocation assistance</li> + <li>Optional team excursions</li> + <li>Competitive salary</li> + <li>Cryptocurrency based compensation</li> + </BenefitsList> + </Column> + </Section> + + <Section id={OPEN_POSITIONS_HASH} isFlex={true} maxWidth="1170px" wrapWidth="100%"> + <Column> + <Heading size="medium"> + Current<br />Openings + </Heading> + </Column> + + <Column maxWidth="826px"> + {_.map(positions, (position, index) => ( + <Position key={`position-${index}`} position={position} /> + ))} + </Column> + </Section> + </AboutPageLayout> + ); + } + private async _fetchJobInfosAsync(): Promise<void> { + try { + if (!this._isUnmounted) { + this.setState({ + jobInfos: [], + }); + } + const jobInfos = await backendClient.getJobInfosAsync(); + if (!this._isUnmounted) { + this.setState({ + jobInfos, + }); + } + } catch (error) { + if (!this._isUnmounted) { + this.setState({ + jobInfos: [], + }); + } + } + } +} + +const BenefitsList = styled.ul` + color: #000; + font-weight: 300; + line-height: 1.444444444; + list-style: disc; + columns: auto 2; + column-gap: 80px; + + li { + margin-bottom: 1em; + } +`; + +const ImageWrap = styled.figure` + @media (min-width: 768px) { + height: 600px; + padding-left: 60px; + display: flex; + align-items: flex-end; + } +`; + +const StyledColumn = styled(Column)` + flex-shrink: 0; + + @media (max-width: 768px) { + & + & { + margin-top: 15px; + } + } +`; + +const PositionWrap = styled(FlexWrap)` + margin-bottom: 40px; + padding-bottom: 30px; + position: relative; + + &:after { + content: ''; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + height: 1px; + background-color: #e3e3e3; + } +`; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx new file mode 100644 index 000000000..2e6530edd --- /dev/null +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -0,0 +1,97 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; +import { Definition } from 'ts/@next/components/definition'; +import { Image } from 'ts/@next/components/image'; +import { Column, Section } from 'ts/@next/components/newLayout'; +import { Heading } from 'ts/@next/components/text'; +import { constants } from 'ts/utils/constants'; + +const values = [ + { + title: 'Do The Right Thing', + description: + 'We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.', + icon: 'right-thing', + }, + { + title: 'Consistently Ship', + description: + 'Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.', + icon: 'consistently-ship', + }, + { + title: 'Focus on Long-term Impact', + description: + 'We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.', + icon: 'long-term-impact', + }, +]; + +export const NextAboutMission = () => ( + <AboutPageLayout + title="Creating a tokenized world where all value can flow freely." + description="0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past." + linkLabel="Our mission and values" + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + > + <DocumentTitle title="Our Mission - 0x" /> + <Section isFullWidth={true} isPadded={false}> + <FullWidthImage> + <Image src="/images/@next/about/about-office.png" alt="0x Offices" isCentered={true} /> + </FullWidthImage> + </Section> + + <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> + <Column> + <Heading size="medium" maxWidth="226px"> + Core Values + </Heading> + </Column> + + <Column width="70%" maxWidth="826px"> + <Column width="100%" maxWidth="800px"> + {_.map(values, (item, index) => ( + <StyledDefinition + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize="large" + /> + ))} + </Column> + </Column> + </Section> + </AboutPageLayout> +); + +const StyledDefinition = styled(Definition)` + & + & { + margin-top: 30px; + padding-top: 30px; + border-top: 1px solid #eaeaea; + } +`; + +const FullWidthImage = styled.figure` + width: 100vw; + margin-left: calc(50% - 50vw); + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + @media (min-width: 768px) { + height: 500px; + } + + @media (max-width: 768px) { + height: 400px; + } +`; diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx new file mode 100644 index 000000000..030ee4c14 --- /dev/null +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -0,0 +1,94 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; +import { Button } from 'ts/@next/components/button'; +import { Column, FlexWrap } from 'ts/@next/components/newLayout'; +import { Paragraph } from 'ts/@next/components/text'; + +interface HighlightProps { + logo: string; + title?: string; + text: string; + href: string; +} + +interface HighlightItemProps { + highlight: HighlightProps; +} + +const highlights: HighlightProps[] = [ + { + logo: '/images/@next/press/logo-forbes.png', + title: 'Forbes', + text: + '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.', + href: + 'https://www.forbes.com/sites/rebeccacampbell1/2018/12/06/0x-launches-instant-delivers-an-easy-and-flexible-way-to-buy-crypto-tokens/#bfb73a843561', + }, + { + logo: '/images/@next/press/logo-venturebeat.png', + title: 'VentureBeat', + text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next', + href: + 'https://venturebeat.com/2018/09/24/0x-leads-the-way-for-tokenization-of-the-world-and-collectible-game-items-are-next/', + }, + { + logo: '/images/@next/press/logo-fortune.png', + title: 'Fortune', + text: + 'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.', + href: 'http://fortune.com/2018/09/06/0x-harbor-blockchain/', + }, + { + logo: '/images/@next/press/logo-techcrunch.png', + title: 'TechCrunch', + text: + '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.', + href: 'https://techcrunch.com/2018/07/16/0x/', + }, +]; + +export const NextAboutPress = () => ( + <AboutPageLayout + title="Press Highlights" + description={ + <> + <Paragraph size="medium" marginBottom="60px"> + Want to write about 0x? <a href="mailto:team@0xproject.com">Get in touch.</a> + </Paragraph> + + {_.map(highlights, (highlight, index) => ( + <Highlight key={`highlight-${index}`} highlight={highlight} /> + ))} + </> + } + > + <DocumentTitle title="Press Highlights - 0x" /> + </AboutPageLayout> +); + +export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: HighlightItemProps) => { + const { highlight } = props; + return ( + <HighlightWrap> + <Column> + <img src={highlight.logo} alt={highlight.title} /> + </Column> + + <Column width="60%" maxWidth="560px"> + <Paragraph isMuted={false}>{highlight.text}</Paragraph> + <Button href={highlight.href} isWithArrow={true} isNoBorder={true} target="_blank"> + Read Article + </Button> + </Column> + </HighlightWrap> + ); +}; + +const HighlightWrap = styled(FlexWrap)` + border-top: 1px solid #eaeaea; + padding: 30px 0; +`; diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx new file mode 100644 index 000000000..7177964be --- /dev/null +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -0,0 +1,286 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout'; +import { Column, Section } from 'ts/@next/components/newLayout'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; + +interface TeamMember { + name: string; + title: string; + imageUrl?: string; +} + +const team: TeamMember[] = [ + { + imageUrl: '/images/@next/team/willw.jpg', + name: 'Will Warren', + title: 'co-founder & CEO', + }, + { + imageUrl: '/images/@next/team/amirb.jpg', + name: 'Amir Bandeali', + title: 'Co-founder & CTO', + }, + { + imageUrl: '/images/@next/team/fabiob.jpg', + name: 'Fabio Berger', + title: 'senior engineer', + }, + { + imageUrl: '/images/@next/team/alexv.jpg', + name: 'Alex Xu', + title: 'Director of operations', + }, + { + imageUrl: '/images/@next/team/leonidL.jpg', + name: 'Leonid Logvinov', + title: 'engineer', + }, + { + imageUrl: '/images/@next/team/benb.jpg', + name: 'Ben Burns', + title: 'designer', + }, + { + imageUrl: '/images/@next/team/brandonm.jpg', + name: 'Brandon Millman', + title: 'senior engineer', + }, + { + imageUrl: '/images/@next/team/toms.jpg', + name: 'Tom Schmidt', + title: 'product manager', + }, + { + imageUrl: '/images/@next/team/jacobe.jpg', + name: 'Jacob Evans', + title: 'ecosystem engineer', + }, + { + imageUrl: '/images/@next/team/blake.jpg', + name: 'Blake Henderson', + title: 'ecosystem programs lead', + }, + { + imageUrl: '/images/@next/team/zack.jpg', + name: 'Zack Skelly', + title: 'lead recruiter', + }, + { + imageUrl: '/images/@next/team/greg.jpg', + name: 'Greg Hysen', + title: 'blockchain engineer', + }, + { + imageUrl: '/images/@next/team/remcoB.jpg', + name: 'Remco Bloemen', + title: 'technical fellow', + }, + { + imageUrl: '/images/@next/team/francesco.jpg', + name: 'Francesco Agosti', + title: 'engineer', + }, + { + imageUrl: '/images/@next/team/melo.jpg', + name: 'Mel Oberto', + title: 'people operations associate', + }, + { + imageUrl: '/images/@next/team/alexb.jpg', + name: 'Alex Browne', + title: 'engineer in residence', + }, + { + imageUrl: '/images/@next/team/peterz.jpg', + name: 'Peter Zeitz', + title: 'research fellow', + }, + { + imageUrl: '/images/@next/team/chrisk.jpg', + name: 'Chris Kalani', + title: 'director of design', + }, + { + imageUrl: '/images/@next/team/clayr.jpg', + name: 'Clay Robbins', + title: 'ecosystem development lead', + }, + { + imageUrl: '/images/@next/team/mattt.jpg', + name: 'Matt Taylor', + title: 'marketing lead', + }, + { + imageUrl: '/images/@next/team/eugenea.jpg', + name: 'Eugene Aumson', + title: 'engineer', + }, + { + imageUrl: '/images/@next/team/weijew.jpg', + name: 'Weijie Wu', + title: 'research fellow', + }, + { + imageUrl: '/images/@next/team/rahuls.jpg', + name: 'Rahul Singireddy', + title: 'relayer success manager', + }, + { + imageUrl: '/images/@next/team/jasons.jpg', + name: 'Jason Somensatto', + title: 'strategic legal counsel', + }, + { + imageUrl: '/images/@next/team/steveK.jpg', + name: 'Steve Klebanoff', + title: 'senior engineer', + }, + { + imageUrl: '/images/@next/team/xianny.jpg', + name: 'Xianny Ng', + title: 'engineer', + }, +]; + +const advisors: TeamMember[] = [ + { + imageUrl: '/images/@next/team/advisors/frede.jpg', + name: 'Fred Ehrsam', + title: 'Advisor', + }, + { + imageUrl: '/images/@next/team/advisors/olafc.jpg', + name: 'Olaf Carlson-Wee', + title: 'Advisor', + }, + { + imageUrl: '/images/@next/team/advisors/joeyk.jpg', + name: 'Joey Krug', + title: 'Advisor', + }, + { + imageUrl: '/images/@next/team/advisors/lindax.jpg', + name: 'Linda Xie', + title: 'Advisor', + }, + { + imageUrl: '/images/@next/team/advisors/davids.jpg', + name: 'David Sacks', + title: 'Advisor', + }, +]; + +export const NextAboutTeam = () => ( + <AboutPageLayout + title="We are a global, growing team" + description="We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life." + linkLabel="Join the team" + to={WebsitePaths.AboutJobs} + > + <DocumentTitle title="Our Team - 0x" /> + <Section maxWidth="1170px" wrapWidth="100%" isFlex={true} flexBreakpoint="900px"> + <Column> + <Heading size="medium">0x Team</Heading> + </Column> + + <Column width="70%" maxWidth="800px"> + <StyledGrid> + {_.map(team, (info: TeamMember, index: number) => ( + <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} /> + ))} + </StyledGrid> + </Column> + </Section> + + <Section bgColor="#F3F6F4" maxWidth="1170px" wrapWidth="100%" flexBreakpoint="900px" isFlex={true}> + <Column> + <Heading size="medium">Advisors</Heading> + </Column> + + <Column width="70%" maxWidth="800px"> + <StyledGrid> + {_.map(advisors, (info: TeamMember, index: number) => ( + <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} /> + ))} + </StyledGrid> + </Column> + </Section> + </AboutPageLayout> +); + +const StyledGrid = styled.div` + &:after { + content: ''; + clear: both; + } +`; + +const Member = ({ name, title, imageUrl }: TeamMember) => ( + <StyledMember> + <img src={imageUrl} alt={name} /> + <Name>{name}</Name> + <MemberTitle isMuted={0.5} size={14} style={{ textTransform: 'capitalize' }}> + {title} + </MemberTitle> + </StyledMember> +); + +const StyledMember = styled.div` + margin-bottom: 10px; + float: left; + width: calc(50% - 15px); + margin-right: 15px; + + @media (max-width: 600px) { + &:nth-child(2n + 1) { + clear: left; + } + } + + img, + svg { + width: 100%; + height: auto; + object-fit: contain; + margin-bottom: 10px; + } + + @media (min-width: 600px) { + width: calc(33.3333% - 30px); + margin-right: 20px; + + &:nth-child(3n + 1) { + clear: left; + } + } + + @media (min-width: 900px) { + width: calc(25% - 30px); + + &:nth-child(3n + 1) { + clear: none; + } + + &:nth-child(4n + 1) { + clear: left; + } + } +`; + +const Name = styled.h3` + color: ${colors.textDarkPrimary}; + font-size: 14px; + line-height: 1; + margin: 0; +`; + +const MemberTitle = styled(Paragraph)` + font-size: 14px; +`; diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx new file mode 100644 index 000000000..a259e3438 --- /dev/null +++ b/packages/website/ts/@next/pages/community.tsx @@ -0,0 +1,289 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; +import { ModalContact } from 'ts/@next/components/modals/modal_contact'; +import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +interface EventProps { + title: string; + date: string; + signupUrl: string; + imageUrl: string; +} + +interface CommunityLinkProps { + bgColor: string; + title?: string; + icon?: string; + url: string; +} + +const events: EventProps[] = [ + { + title: '0x London Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/london.jpg', + signupUrl: '#', + }, + { + title: '0x Berlin Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/berlin.jpg', + signupUrl: '#', + }, + { + title: '0x San Francisco Meetup', + date: 'October 20th 2018', + imageUrl: '/images/@next/events/sf.jpg', + signupUrl: '#', + }, +]; +const communityLinks: CommunityLinkProps[] = [ + { + bgColor: '#1DA1F2', + title: 'Twitter', + icon: 'social-twitter', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#FF4500', + title: 'Reddit', + icon: 'social-reddit', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#7289DA', + title: 'Twitter', + icon: 'social-discord', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#3B5998', + title: 'Facebook', + icon: 'social-fb', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#181717', + title: 'GitHub', + icon: 'social-github', + url: 'https://twitter.com/0xProject', + }, + { + bgColor: '#003831', + title: 'Newsletter', + icon: 'social-newsletter', + url: 'https://twitter.com/0xProject', + }, +]; + +export class NextCommunity extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap theme="light"> + <Section isTextCentered={true}> + <Column> + <Heading size="medium" isCentered={true}> + Community + </Heading> + <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0"> + The 0x community is a global, passionate group of crypto developers and enthusiasts. The + official channels below provide a great forum for connecting and engaging with the + community. + </Paragraph> + <LinkWrap> + <Button to="#" isWithArrow={true} isAccentColor={true}> + Join the 0x community + </Button> + </LinkWrap> + </Column> + </Section> + + <Section isFullWidth={true}> + <WrapGrid + isTextCentered={true} + isWrapped={true} + isFullWidth={false} + isCentered={false} + maxWidth="1151px" + > + {_.map(communityLinks, (link: CommunityLinkProps, index: number) => ( + <CommunityLink + key={`cl-${index}`} + icon={link.icon} + title={link.title} + bgColor={link.bgColor} + url={link.url} + /> + ))} + </WrapGrid> + </Section> + + <EventsWrapper + bgColor={colors.backgroundLight} + isFullWidth={true} + isCentered={true} + isTextCentered={true} + > + <Column maxWidth="720px"> + <Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px"> + Upcoming Events + </Heading> + <Paragraph size="medium" isCentered={true} isMuted={true}> + 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of + the community. Want to host a meetup in your city? Reach out for help finding a venue, + connecting with local 0x mentors, and promoting your events. + </Paragraph> + <LinkWrap> + <Button to="#" isWithArrow={true} isAccentColor={true}> + Get in Touch + </Button> + <Button to="#" isWithArrow={true} isAccentColor={true}> + Join Newsletter + </Button> + </LinkWrap> + </Column> + <WrapGrid + isTextCentered={true} + isWrapped={true} + isFullWidth={false} + isCentered={false} + maxWidth="1149px" + > + {_.map(events, (ev: EventProps, index: number) => ( + <Event + key={`event-${index}`} + title={ev.title} + date={ev.date} + signupUrl={ev.signupUrl} + imageUrl={ev.imageUrl} + /> + ))} + </WrapGrid> + </EventsWrapper> + + <Banner + heading="Ready to get started?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ text: 'Get Started', href: '/docs' }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +const Event: React.FunctionComponent<EventProps> = (event: EventProps) => ( + <StyledEvent> + <EventIcon name="logo-mark" size={30} margin={0} /> + <EventImage src={event.imageUrl} alt="" /> + <EventContent> + <Heading color={colors.white} size="small" marginBottom="0"> + {event.title} + </Heading> + <Paragraph color={colors.white} isMuted={0.65}> + {event.date} + </Paragraph> + <Button color={colors.white} href={event.signupUrl} isWithArrow={true}> + Sign Up + </Button> + </EventContent> + </StyledEvent> +); + +const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props: CommunityLinkProps) => ( + <StyledCommunityLink bgColor={props.bgColor} href={props.url}> + <CommunityIcon name={props.icon} size={44} margin={0} /> + <CommunityTitle color={colors.white} isMuted={false} marginBottom="0"> + {props.title} + </CommunityTitle> + </StyledCommunityLink> +); + +// Events +const EventsWrapper = styled(Section)` + display: flex; + align-items: center; + flex-direction: column; +`; + +// Event +const StyledEvent = styled.div` + background-color: ${colors.brandDark}; + width: calc((100% / 3) - 30px); + text-align: left; + height: 424px; + margin-top: 130px; + position: relative; +`; + +const EventIcon = styled(Icon)` + position: absolute; + top: 30px; + left: 30px; +`; + +const EventImage = styled.img` + width: 100%; + height: 260px; + object-fit: cover; +`; + +const EventContent = styled.div` + padding: 30px 30px; +`; + +interface StyledCommunityLinkProps { + bgColor: string; +} +const StyledCommunityLink = styled.a` + background-color: ${(props: StyledCommunityLinkProps) => props.bgColor}; + color: ${colors.white}; + width: 175px; + height: 175px; + text-align: center; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const CommunityTitle = styled(Paragraph)` + font-size: 20px; + font-weight: 400; +`; + +const CommunityIcon = styled(Icon)` + margin-bottom: 20px; +`; + +// Misc +const LinkWrap = styled.div` + display: inline-flex; + margin-top: 60px; + + a + a { + margin-left: 60px; + } +`; diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx new file mode 100644 index 000000000..f78bd3bdc --- /dev/null +++ b/packages/website/ts/@next/pages/ecosystem.tsx @@ -0,0 +1,128 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Button } from 'ts/@next/components/button'; +import { Icon } from 'ts/@next/components/icon'; +import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { constants } from 'ts/utils/constants'; + +interface BenefitProps { + title: string; + icon: string; + description: string; +} + +const benefits: BenefitProps[] = [ + { + icon: 'milestoneGrants', + title: 'Milestone Grants', + description: + 'Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.', + }, + { + icon: 'vcIntroductions', + title: 'VC Introductions', + description: 'Connect with leading venture capital firms that could participate in your next funding round.', + }, + { + icon: 'techSupport', + title: 'Technical Support', + description: 'Receive ongoing technical assistance from knowledgeable and responsive 0x developers.', + }, + { + icon: 'recruitingSupport', + title: 'Recruiting Assistance', + description: 'Grow your team by accessing an exclusive pool of top engineering and business operations talent.', + }, + { + icon: 'eficientDesign', + title: 'Marketing and Design Help', + description: + 'Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.', + }, + { + icon: 'legalResources', + title: 'Legal Resources', + description: 'Access important legal resources that will help you navigate the regulatory landscape.', + }, +]; + +export const NextEcosystem = () => ( + <SiteWrap theme="light"> + <DocumentTitle title="Ecosystem Acceleration Program: Jumpstart your Business on 0x" /> + <Section isTextCentered={true}> + <Column> + <Heading size="medium" isCentered={true}> + Jumpstart your Business on 0x + </Heading> + <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0"> + The Ecosystem Acceleration Program gives teams access to a variety of services including funding, + dedicated technical support, and recruiting assistance. We created the Ecosystem Acceleration + Program to bolster the expansion of both infrastructure projects and relayers building on 0x. + </Paragraph> + <LinkWrap> + <Button + href={constants.URL_ECOSYSTEM_APPLY} + isWithArrow={true} + isAccentColor={true} + shouldUseAnchorTag={true} + > + Apply now + </Button> + <Button + href={constants.URL_ECOSYSTEM_BLOG_POST} + isWithArrow={true} + isAccentColor={true} + shouldUseAnchorTag={true} + target="_blank" + > + Learn More + </Button> + </LinkWrap> + </Column> + </Section> + + <Section bgColor={colors.backgroundLight} isFullWidth={true}> + <Column> + <Heading + size={34} + fontWeight="400" + asElement="h2" + isCentered={true} + maxWidth="507px" + marginBottom="70px" + > + Join a vibrant ecosystem of projects in the 0x Network. + </Heading> + </Column> + <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={true}> + {_.map(benefits, (benefit: BenefitProps, index) => ( + <Column key={`benefit-${index}`} width="33%" padding="0 45px 30px"> + <Icon name={benefit.icon} size="medium" margin={[0, 0, 'small', 0]} /> + <Heading color={colors.textDarkPrimary} size="small" marginBottom="10px" isCentered={true}> + {benefit.title} + </Heading> + <Paragraph isMuted={true} isCentered={true}> + {benefit.description} + </Paragraph> + </Column> + ))} + </WrapGrid> + </Section> + </SiteWrap> +); + +const LinkWrap = styled.div` + display: inline-flex; + margin-top: 60px; + + a + a { + margin-left: 60px; + } +`; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx new file mode 100644 index 000000000..d08fd566a --- /dev/null +++ b/packages/website/ts/@next/pages/instant.tsx @@ -0,0 +1,261 @@ +import { utils as sharedUtils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled, { keyframes } from 'styled-components'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; +import { Section, SectionProps } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { Configurator } from 'ts/@next/pages/instant/configurator'; +import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; +import { utils } from 'ts/utils/utils'; + +import { ModalContact } from '../components/modals/modal_contact'; + +const CONFIGURATOR_MIN_WIDTH_PX = 1050; + +export const getStartedClick = () => { + if (window.innerWidth < CONFIGURATOR_MIN_WIDTH_PX) { + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); + } else { + sharedUtils.setUrlHash('configurator'); + sharedUtils.scrollToHash('configurator', ''); + } +}; + +const featuresData = [ + { + title: 'Support ERC-20 and ERC-721 tokens', + icon: 'supportForAllEthereumStandards-large', + description: + 'Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins.', + links: [ + { + label: 'Get Started', + onClick: getStartedClick, + shouldUseAnchorTag: true, + }, + { + label: 'Explore the Docs', + url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, + }, + ], + }, + { + title: 'Generate revenue for your business', + icon: 'generateRevenueForYourBusiness-large', + description: + 'With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp.', + links: [ + { + label: 'Learn about affiliate fees', + url: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, + }, + ], + }, + { + title: 'Easy and flexible integration', + icon: 'flexibleIntegration0xInstant', + description: + 'Use our out-of-the-box design or customize the user interface by integrating via the AssetBuyer engine.. You can also tap into 0x networked liquidity or choose your own liquidity pool.', + links: [ + { + label: 'Explore AssetBuyer', + url: `${WebsitePaths.Docs}/asset-buyer`, + }, + ], + }, +]; + +interface Props { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + }; +} + +export class Next0xInstant extends React.Component<Props> { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap> + <DocumentTitle title="0x Instant: Quick and secure crypto purchasing" /> + <Hero + title="Introducing 0x Instant" + description="A free and flexible way to offer simple crypto purchasing in any app or website" + actions={<Button onClick={getStartedClick}>Get Started</Button>} + /> + + <Section isFullWidth={true} isPadded={false} padding="30px 0"> + <MarqueeWrap> + <div> + {[...Array(18)].map((item, index) => ( + <Card key={`card-${index}`} index={index}> + <img src={`/images/@next/0x-instant/widget-${index % 6 + 1}.png`} /> + </Card> + ))} + </div> + </MarqueeWrap> + </Section> + + <Section> + {_.map(featuresData, (item, index) => ( + <Definition + key={`definition-${index}`} + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + actions={item.links} + /> + ))} + </Section> + + <ConfiguratorSection + id="configurator" + maxWidth="1386px" + padding="0 58px 70px" + bgColor={colors.backgroundDark} + > + <Heading>0x Instant Configurator</Heading> + <Configurator /> + </ConfiguratorSection> + + <Banner + heading="Need more flexibility?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ text: 'Explore the Docs', href: `${WebsitePaths.Wiki}#Get-Started-With-Instant` }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + + <Section maxWidth="1170px" isPadded={false} padding="60px 0"> + <Paragraph size="small" isMuted={0.5}> + Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and + blockchain-native tokens, including through any software developed using the licensed work + created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, + Version 2.0 applicable to the Work, developers are “solely responsible for determining the + appropriateness of using or redistributing the Work,” which includes responsibility for ensuring + compliance with any such applicable laws and regulations. + </Paragraph> + <Paragraph size="small" isMuted={0.5}> + See the Apache License, Version 2.0 for the specific language governing all applicable + permissions and limitations. + </Paragraph> + </Section> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +// scroll animation calc is simply (imageWidth * totalRepetitions) / 2 +// img width is 370px +const scroll = keyframes` + 0% { transform: translate3d(-2220px, 0, 0) } + 100% { transform: translate3d(-4440px, 0, 0) } +`; + +const scrollMobile = keyframes` + 0% { transform: translate3d(0, 0, 0) } + 100% { transform: translate3d(-1800px, 0, 0) } +`; + +const fadeUp = keyframes` + 0% { + opacity: 0; + transform: translateY(50px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +`; + +const ConfiguratorSection = + styled(Section) < + SectionProps > + ` + @media (max-width: ${CONFIGURATOR_MIN_WIDTH_PX}px) { + display: none; + } +`; + +// width = 370 * 12 +// mobile width = 300 +const MarqueeWrap = styled.div` + width: 100vw; + height: 514px; + padding-bottom: 60px; + + @media (max-width: 768px) { + width: calc(100% + 60px); + margin-left: -30px; + overflow: hidden; + } + + > div { + height: auto; + display: flex; + will-change: transform; + transform: translate3d(-2220px, 0, 0); + } + + @media (min-width: 768px) { + > div { + width: 6660px; + animation: ${scroll} 70s linear infinite; + } + } + + @media (max-width: 768px) { + > div { + width: 5400px; + animation: ${scrollMobile} 70s linear infinite; + } + } +`; + +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; + } + + @media (min-width: 768px) { + img { + width: 370px; + } + } + + @media (max-width: 768px) { + img { + width: 300px; + } + } +`; diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx new file mode 100644 index 000000000..4a3022df5 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/code_demo.tsx @@ -0,0 +1,183 @@ +import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; +import SyntaxHighlighter from 'react-syntax-highlighter'; + +import { Button } from 'ts/@next/components/button'; +import { Container } from 'ts/components/ui/container'; +import { styled } from 'ts/style/theme'; +import { zIndex } from 'ts/style/z_index'; + +const CustomPre = styled.pre` + margin: 0px; + line-height: 24px; + overflow: scroll; + width: 100%; + height: 100%; + max-height: 800px; + border-radius: 4px; + code { + background-color: inherit !important; + border-radius: 0px; + font-family: 'Roboto Mono', sans-serif; + border: none; + } + code:first-of-type { + background-color: #060d0d !important; + color: #999; + min-height: 100%; + text-align: center; + margin-right: 15px; + line-height: 25px; + padding: 10px 7px !important; + } + code:last-of-type { + position: relative; + top: 10px; + top: 0; + padding-top: 11px; + display: inline-block; + line-height: 25px; + } +`; + +const customStyle = { + 'hljs-comment': { + color: '#7e7887', + }, + 'hljs-quote': { + color: '#7e7887', + }, + 'hljs-variable': { + color: '#be4678', + }, + 'hljs-template-variable': { + color: '#be4678', + }, + 'hljs-attribute': { + color: '#be4678', + }, + 'hljs-regexp': { + color: '#be4678', + }, + 'hljs-link': { + color: '#be4678', + }, + 'hljs-tag': { + color: '#61f5ff', + }, + 'hljs-name': { + color: '#61f5ff', + }, + 'hljs-selector-id': { + color: '#be4678', + }, + 'hljs-selector-class': { + color: '#be4678', + }, + 'hljs-number': { + color: '#c994ff', + }, + 'hljs-meta': { + color: '#61f5ff', + }, + 'hljs-built_in': { + color: '#aa573c', + }, + 'hljs-builtin-name': { + color: '#aa573c', + }, + 'hljs-literal': { + color: '#aa573c', + }, + 'hljs-type': { + color: '#aa573c', + }, + 'hljs-params': { + color: '#aa573c', + }, + 'hljs-string': { + color: '#bcff88', + }, + 'hljs-symbol': { + color: '#2a9292', + }, + 'hljs-bullet': { + color: '#2a9292', + }, + 'hljs-title': { + color: '#576ddb', + }, + 'hljs-section': { + color: '#576ddb', + }, + 'hljs-keyword': { + color: '#955ae7', + }, + 'hljs-selector-tag': { + color: '#955ae7', + }, + 'hljs-deletion': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#be4678', + }, + 'hljs-addition': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#2a9292', + }, + hljs: { + display: 'block', + overflowX: 'hidden', + background: '#1B2625', + color: 'white', + fontSize: '12px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +}; + +export interface CodeDemoProps { + children: string; +} + +export interface CodeDemoState { + didCopyCode: boolean; +} + +export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> { + public state: CodeDemoState = { + didCopyCode: false, + }; + public render(): React.ReactNode { + const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; + return ( + <Container position="relative" height="100%"> + <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}> + <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}> + <StyledButton>{copyButtonText}</StyledButton> + </CopyToClipboard> + </Container> + <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}> + {this.props.children} + </SyntaxHighlighter> + </Container> + ); + } + private readonly _handleCopyClick = () => { + this.setState({ didCopyCode: true }); + }; +} + +const StyledButton = styled(Button)` + border-radius: 4px; + font-size: 15px; + font-weight: 400; + padding: 9px 21px 7px; +`; diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx new file mode 100644 index 000000000..3f00e33e2 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -0,0 +1,332 @@ +import { StandardRelayerAPIOrderProvider } from '@0x/asset-buyer'; +import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; +import { assetDataUtils } from '@0x/order-utils'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input'; +import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider'; +import { CheckMark } from 'ts/components/ui/check_mark'; +import { Container } from 'ts/components/ui/container'; +import { MultiSelect } from 'ts/components/ui/multi_select'; +import { Spinner } from 'ts/components/ui/spinner'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; + +// New components +import { Heading } from 'ts/@next/components/text'; +import { Select, SelectItemConfig } from 'ts/@next/pages/instant/select'; + +import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map'; +import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; + +export interface ConfigGeneratorProps { + value: ZeroExInstantBaseConfig; + onConfigChange: (config: ZeroExInstantBaseConfig) => void; +} + +export interface ConfigGeneratorState { + isLoadingAvailableTokens: boolean; + // Address to token info + availableTokens?: ObjectMap<ERC20AssetMetaData>; +} + +const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/']; + +export class ConfigGenerator extends React.Component<ConfigGeneratorProps, ConfigGeneratorState> { + public state: ConfigGeneratorState = { + isLoadingAvailableTokens: true, + }; + public componentDidMount(): void { + // tslint:disable-next-line:no-floating-promises + this._setAvailableAssetsFromOrderProvider(); + } + public componentDidUpdate(prevProps: ConfigGeneratorProps): void { + if (prevProps.value.orderSource !== this.props.value.orderSource) { + // tslint:disable-next-line:no-floating-promises + this._setAvailableAssetsFromOrderProvider(); + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: undefined, + }; + this.props.onConfigChange(newConfig); + } + } + public render(): React.ReactNode { + const { value } = this.props; + if (!_.isString(value.orderSource)) { + throw new Error('ConfigGenerator component only supports string values as an orderSource.'); + } + return ( + <Container minWidth="350px"> + <ConfigGeneratorSection title="Liquidity Source"> + <Select + shouldIncludeEmpty={false} + id="" + value={value.orderSource} + items={this._generateItems()} + onChange={this._handleSRASelection.bind(this)} + /> + </ConfigGeneratorSection> + <ConfigGeneratorSection {...this._getTokenSelectorProps()}> + {this._renderTokenMultiSelectOrSpinner()} + </ConfigGeneratorSection> + <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}> + <ConfigGeneratorAddressInput + value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''} + onChange={this._handleAffiliateAddressChange} + /> + </ConfigGeneratorSection> + <ConfigGeneratorSection + title="Fee percentage" + actionText="Learn more" + onActionTextClick={this._handleAffiliatePercentageLearnMoreClick} + > + <FeePercentageSlider + value={value.affiliateInfo.feePercentage} + onChange={this._handleAffiliatePercentageChange} + isDisabled={ + _.isUndefined(value.affiliateInfo) || + _.isUndefined(value.affiliateInfo.feeRecipient) || + _.isEmpty(value.affiliateInfo.feeRecipient) + } + /> + </ConfigGeneratorSection> + </Container> + ); + } + private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => { + if (_.isEmpty(this.state.availableTokens)) { + return { + title: 'What tokens can users buy?', + }; + } + if (_.isUndefined(this.props.value.availableAssetDatas)) { + return { + title: 'What tokens can users buy?', + actionText: 'Unselect All', + onActionTextClick: this._handleUnselectAllClick, + }; + } + return { + title: 'What tokens can users buy?', + actionText: 'Select All', + onActionTextClick: this._handleSelectAllClick, + }; + }; + private readonly _generateItems = (): SelectItemConfig[] => { + return _.map(SRA_ENDPOINTS, endpoint => ({ + label: endpoint, + value: endpoint, + onClick: this._handleSRASelection.bind(this, endpoint), + })); + }; + private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { + window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank'); + }; + private readonly _handleSRASelection = (event: React.ChangeEvent<HTMLSelectElement>) => { + const sraEndpoint = event.target.value; + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + orderSource: sraEndpoint, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => { + const oldConfig: ZeroExInstantBaseConfig = this.props.value; + const newConfig: ZeroExInstantBaseConfig = { + ...oldConfig, + affiliateInfo: { + feeRecipient: address, + feePercentage: oldConfig.affiliateInfo.feePercentage, + }, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleAffiliatePercentageChange = (value: number) => { + const oldConfig: ZeroExInstantBaseConfig = this.props.value; + const newConfig: ZeroExInstantBaseConfig = { + ...oldConfig, + affiliateInfo: { + feeRecipient: oldConfig.affiliateInfo.feeRecipient, + feePercentage: value, + }, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleSelectAllClick = () => { + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: undefined, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleUnselectAllClick = () => { + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: [], + }; + this.props.onConfigChange(newConfig); + }; + private readonly _handleTokenClick = (assetData: string) => { + const { value } = this.props; + let newAvailableAssetDatas: string[] = []; + const allKnownAssetDatas = _.keys(this.state.availableTokens); + const availableAssetDatas = value.availableAssetDatas; + if (_.isUndefined(availableAssetDatas)) { + // It being undefined means it's all tokens. + newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData); + } else if (!_.includes(availableAssetDatas, assetData)) { + // Add it + newAvailableAssetDatas = [...availableAssetDatas, assetData]; + if (newAvailableAssetDatas.length === allKnownAssetDatas.length) { + // If all tokens are manually selected, just show none. + newAvailableAssetDatas = undefined; + } + } else { + // Remove it + newAvailableAssetDatas = _.pull(availableAssetDatas, assetData); + } + const newConfig: ZeroExInstantBaseConfig = { + ...this.props.value, + availableAssetDatas: newAvailableAssetDatas, + }; + this.props.onConfigChange(newConfig); + }; + private readonly _setAvailableAssetsFromOrderProvider = async (): Promise<void> => { + const { value } = this.props; + if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { + this.setState({ isLoadingAvailableTokens: true }); + const networkId = constants.NETWORK_ID_MAINNET; + const sraOrderProvider = new StandardRelayerAPIOrderProvider(value.orderSource, networkId); + const etherTokenAddress = getContractAddressesForNetworkOrThrow(networkId).etherToken; + const etherTokenAssetData = assetDataUtils.encodeERC20AssetData(etherTokenAddress); + const assetDatas = await sraOrderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData); + const availableTokens = _.reduce( + assetDatas, + (acc, assetData) => { + const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData; + if (metaDataIfExists) { + acc[assetData] = metaDataIfExists; + } + return acc; + }, + {} as ObjectMap<ERC20AssetMetaData>, + ); + this.setState({ availableTokens, isLoadingAvailableTokens: false }); + } + }; + private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { + const { value } = this.props; + const { availableTokens, isLoadingAvailableTokens } = this.state; + const multiSelectHeight = '200px'; + if (isLoadingAvailableTokens) { + return ( + <Container + className="flex flex-column items-center justify-center" + height={multiSelectHeight} + backgroundColor={colors.white} + borderRadius="4px" + width="100%" + > + <Container position="relative" left="12px" marginBottom="20px"> + <Spinner /> + </Container> + <Text fontSize="16px">Loading...</Text> + </Container> + ); + } + const availableAssetDatas = _.keys(availableTokens); + if (availableAssetDatas.length === 0) { + return ( + <Container + className="flex flex-column items-center justify-center" + height={multiSelectHeight} + backgroundColor={colors.white} + borderRadius="4px" + width="100%" + > + <Text fontSize="16px">No tokens available. Try another endpoint?</Text> + </Container> + ); + } + const items = _.map(_.keys(availableTokens), assetData => { + const metaData = availableTokens[assetData]; + return { + value: assetData, + renderItemContent: (isSelected: boolean) => ( + <Container className="flex items-center"> + <Container marginRight="10px"> + <CheckMark isChecked={isSelected} color={colors.brandLight} /> + </Container> + <CheckboxText isSelected={isSelected}> + {metaData.symbol.toUpperCase()} — {metaData.name} + </CheckboxText> + </Container> + ), + onClick: this._handleTokenClick.bind(this, assetData), + }; + }); + return <MultiSelect items={items} selectedValues={value.availableAssetDatas} height={multiSelectHeight} />; + }; +} + +export interface ConfigGeneratorSectionProps { + title: string; + actionText?: string; + onActionTextClick?: () => void; + isOptional?: boolean; + marginBottom?: string; +} + +export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = ({ + title, + actionText, + onActionTextClick, + isOptional, + marginBottom, + children, +}) => ( + <Container marginBottom={marginBottom}> + <Container marginBottom="10px" className="flex justify-between items-center"> + <Heading size="small" marginBottom="0" isFlex={true}> + <span>{title}</span> + {isOptional && <OptionalText> Optional</OptionalText>} + </Heading> + {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>} + </Container> + {children} + </Container> +); + +ConfigGeneratorSection.defaultProps = { + marginBottom: '30px', +}; + +const OptionalText = styled.span` + display: inline; + font-size: 14px; + color: #999999; + flex-shrink: 0; +`; + +interface CheckboxTextProps { + isSelected?: boolean; +} + +const CheckboxText = + styled.span < + CheckboxTextProps > + ` + font-size: 14px; + line-height: 18px; + color: ${props => (props.isSelected ? colors.brandDark : '#666666')} +`; + +const OptionalAction = styled(OptionalText)` + cursor: pointer; +`; diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx new file mode 100644 index 000000000..9b0e9b1d1 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx @@ -0,0 +1,84 @@ +import { addressUtils } from '@0x/utils'; +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Container } from 'ts/components/ui/container'; + +import { Paragraph } from 'ts/@next/components/text'; + +export interface ConfigGeneratorAddressInputProps { + value?: string; + onChange?: (address: string, isValid: boolean) => void; +} + +export interface ConfigGeneratorAddressInputState { + errMsg: string; +} + +export interface InputProps { + className?: string; + value?: string; + width?: string; + fontSize?: string; + fontColor?: string; + padding?: string; + placeholderColor?: string; + placeholder?: string; + backgroundColor?: string; + onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; +} + +export class ConfigGeneratorAddressInput extends React.Component< + ConfigGeneratorAddressInputProps, + ConfigGeneratorAddressInputState +> { + public state = { + errMsg: '', + }; + public render(): React.ReactNode { + const { errMsg } = this.state; + const hasError = !_.isEmpty(errMsg); + return ( + <Container height="80px"> + <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" /> + <Container marginTop="5px" isHidden={!hasError} height="25px"> + <Paragraph size="small" isNoMargin={true}> + {errMsg} + </Paragraph> + </Container> + </Container> + ); + } + + private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + const address = event.target.value; + const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; + const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; + this.setState({ + errMsg, + }); + this.props.onChange(address, isValidAddress); + }; +} + +const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( + <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> +); + +export const Input = styled(PlainInput)` + background-color: ${colors.white}; + color: ${colors.textDarkSecondary}; + font-size: 1rem; + width: 100%; + padding: 16px 20px 18px; + border-radius: 4px; + border: 1px solid transparent; + outline: none; + &::placeholder { + color: #333333; + opacity: 0.5; + } +`; diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx new file mode 100644 index 000000000..7c67e6333 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/configurator.tsx @@ -0,0 +1,104 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { CodeDemo } from 'ts/@next/pages/instant/code_demo'; +import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator'; + +import { Link } from 'ts/@next/components/link'; +import { Column, FlexWrap } from 'ts/@next/components/newLayout'; +import { Heading } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; + +import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; + +export interface ConfiguratorState { + instantConfig: ZeroExInstantBaseConfig; +} + +export class Configurator extends React.Component { + public state: ConfiguratorState = { + instantConfig: { + orderSource: 'https://api.radarrelay.com/0x/v2/', + availableAssetDatas: undefined, + affiliateInfo: { + feeRecipient: '', + feePercentage: 0, + }, + }, + }; + public render(): React.ReactNode { + const codeToDisplay = this._generateCodeDemoCode(); + return ( + <FlexWrap isFlex={true}> + <Column width="442px" padding="0 70px 0 0"> + <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} /> + </Column> + <Column width="100%"> + <HeadingWrapper> + <Heading size="small" marginBottom="15px"> + Code Snippet + </Heading> + <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank"> + Explore the Docs + </Link> + </HeadingWrapper> + <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo> + </Column> + </FlexWrap> + ); + } + private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => { + this.setState({ + instantConfig: config, + }); + }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + return `<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <script src="https://instant.0x.org/instant.js"></script> + </head> + <body> + <script> + zeroExInstant.render({ + orderSource: '${instantConfig.orderSource}',${ + !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient + ? `\n affiliateInfo: { + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', + feePercentage: ${instantConfig.affiliateInfo.feePercentage} + },` + : '' + }${ + !_.isUndefined(instantConfig.availableAssetDatas) + ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString( + instantConfig.availableAssetDatas, + )}` + : '' + } + }, 'body'); + </script> + </body> + </html>`; + }; + private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { + const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); + if (availableAssetDatas.length < 2) { + return `[${stringAvailableAssetDatas.join(', ')}]`; + } + return `[\n ${stringAvailableAssetDatas.join( + ', \n ', + )}\n ]`; + }; +} + +const HeadingWrapper = styled.div` + display: flex; + justify-content: space-between; + + a { + transform: translateY(-8px); + } +`; diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx new file mode 100644 index 000000000..5775d6dfb --- /dev/null +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -0,0 +1,80 @@ +import Slider from 'rc-slider'; +import * as React from 'react'; +import styled from 'styled-components'; +import 'ts/@next/pages/instant/rc-slider.css'; + +import { colors } from 'ts/style/colors'; + +const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); +// tslint:disable-next-line:no-unused-expression + +export interface FeePercentageSliderProps { + value: number; + isDisabled?: boolean; + onChange: (value: number) => void; +} + +export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { + public render(): React.ReactNode { + return ( + <StyledSlider + min={0} + max={0.05} + step={0.0025} + value={this.props.value} + disabled={this.props.isDisabled} + onChange={this.props.onChange} + tipFormatter={this._feePercentageSliderFormatter} + tipProps={{ placement: 'bottom', overlayStyle: { backgroundColor: '#fff', borderRadius: '4px' } }} + trackStyle={{ + backgroundColor: colors.brandLight, + }} + railStyle={{ + backgroundColor: 'rgba(255, 255, 255, 0.2)', + }} + handleStyle={{ + border: 'none', + boxShadow: 'none', + }} + activeDotStyle={{ + boxShadow: 'none', + border: 'none', + }} + /> + ); + } + private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { + return <Text>{`${(value * 100).toFixed(2)}%`}</Text>; + }; +} + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip__inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &:after { + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; + +const Text = styled.span` + color: #000000; + font-size: 12px; + line-height: 18px; +`; diff --git a/packages/website/ts/@next/pages/instant/rc-slider.css b/packages/website/ts/@next/pages/instant/rc-slider.css new file mode 100644 index 000000000..63038324e --- /dev/null +++ b/packages/website/ts/@next/pages/instant/rc-slider.css @@ -0,0 +1,295 @@ +.rc-slider { + position: relative; + height: 14px; + padding: 5px 0; + width: 100%; + border-radius: 6px; + -ms-touch-action: none; + touch-action: none; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-rail { + position: absolute; + width: 100%; + background-color: #e9e9e9; + height: 4px; + border-radius: 6px; +} + +.rc-slider-track { + position: absolute; + left: 0; + height: 4px; + border-radius: 6px; + background-color: #abe2fb; +} + +.rc-slider-handle { + position: absolute; + margin-left: -7px; + margin-top: -5px; + width: 14px; + height: 14px; + cursor: pointer; + cursor: -webkit-grab; + cursor: grab; + border-radius: 50%; + border: solid 2px #96dbfa; + background-color: #fff; + -ms-touch-action: pan-x; + touch-action: pan-x; +} + +.rc-slider-handle:focus { + border-color: #57c5f7; + box-shadow: 0 0 0 5px #96dbfa; + outline: none; +} + +.rc-slider-handle-click-focused:focus { + border-color: #96dbfa; + box-shadow: unset; +} + +.rc-slider-handle:hover { + border-color: #57c5f7; +} + +.rc-slider-handle:active { + border-color: #57c5f7; + box-shadow: 0 0 5px #57c5f7; + cursor: -webkit-grabbing; + cursor: grabbing; +} + +.rc-slider-mark { + position: absolute; + top: 18px; + left: 0; + width: 100%; + font-size: 12px; +} + +.rc-slider-mark-text { + position: absolute; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + color: #999; +} + +.rc-slider-mark-text-active { + color: #666; +} + +.rc-slider-step { + position: absolute; + width: 100%; + height: 4px; + background: transparent; +} + +.rc-slider-dot { + position: absolute; + bottom: -2px; + margin-left: -4px; + width: 8px; + height: 8px; + border: 2px solid #e9e9e9; + background-color: #fff; + cursor: pointer; + border-radius: 50%; + vertical-align: middle; +} + +.rc-slider-dot-active { + border-color: #96dbfa; +} + +.rc-slider-disabled { + opacity: 0.2; +} + +.rc-slider-disabled .rc-slider-track { + background-color: #ccc; +} + +.rc-slider-disabled .rc-slider-handle, +.rc-slider-disabled .rc-slider-dot { + border-color: #ccc; + box-shadow: none; + background-color: #fff; + cursor: not-allowed; +} + +.rc-slider-disabled .rc-slider-mark-text, +.rc-slider-disabled .rc-slider-dot { + cursor: not-allowed !important; +} + +.rc-slider-vertical { + width: 14px; + height: 100%; + padding: 0 5px; +} + +.rc-slider-vertical .rc-slider-rail { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-track { + left: 5px; + bottom: 0; + width: 4px; +} + +.rc-slider-vertical .rc-slider-handle { + margin-left: -5px; + margin-bottom: -7px; + -ms-touch-action: pan-y; + touch-action: pan-y; +} + +.rc-slider-vertical .rc-slider-mark { + top: 0; + left: 18px; + height: 100%; +} + +.rc-slider-vertical .rc-slider-step { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-dot { + left: 2px; + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:first-child { + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:last-child { + margin-bottom: -4px; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-leave { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, +.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { + animation-name: rcSliderTooltipZoomDownIn; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { + animation-name: rcSliderTooltipZoomDownOut; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + transform: scale(0, 0); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} + +.rc-slider-tooltip-zoom-down-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} + +@keyframes rcSliderTooltipZoomDownIn { + 0% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } + + 100% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } +} + +@keyframes rcSliderTooltipZoomDownOut { + 0% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } + + 100% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } +} + +.rc-slider-tooltip { + position: absolute; + left: -9999px; + top: -9999px; + visibility: visible; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip-hidden { + display: none; +} + +.rc-slider-tooltip-placement-top { + padding: 4px 0 8px 0; +} + +.rc-slider-tooltip-inner { + padding: 4px 6px 4px; + min-width: 24px; + height: 24px; + font-size: 12px; + line-height: 1; + color: #000; + text-align: center; + text-decoration: none; +} + +.rc-slider-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { + bottom: 4px; + left: 50%; + margin-left: -4px; + border-width: 4px 4px 0; + border-top-color: #6c6c6c; +} diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx new file mode 100644 index 000000000..d4146cfb0 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/select.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +export interface SelectItemConfig { + label: string; + value?: string; + onClick?: () => void; +} + +interface SelectProps { + value?: string; + id: string; + items: SelectItemConfig[]; + emptyText?: string; + onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void; + shouldIncludeEmpty: boolean; +} + +export const Select: React.FunctionComponent<SelectProps> = ({ + value, + id, + items, + shouldIncludeEmpty, + emptyText, + onChange, +}) => { + return ( + <Container> + <StyledSelect id={id} onChange={onChange}> + {shouldIncludeEmpty && <option value="">{emptyText}</option>} + {items.map((item, index) => ( + <option + key={`${id}-item-${index}`} + value={item.value} + selected={item.value === value} + onClick={item.onClick} + > + {item.label} + </option> + ))} + </StyledSelect> + <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> + </Caret> + </Container> + ); +}; + +Select.defaultProps = { + emptyText: 'Select...', + shouldIncludeEmpty: true, +}; + +const Container = styled.div` + background-color: #fff; + border-radius: 4px; + display: flex; + width: 100%; + position: relative; +`; + +const StyledSelect = styled.select` + appearance: none; + border: 0; + font-size: 1rem; + width: 100%; + padding: 20px 20px 20px 20px; +`; + +const Caret = styled.svg` + position: absolute; + right: 20px; + top: calc(50% - 4px); +`; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx new file mode 100644 index 000000000..4d47fefd9 --- /dev/null +++ b/packages/website/ts/@next/pages/landing.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; + +import { SectionLandingAbout } from 'ts/@next/components/sections/landing/about'; +import { SectionLandingClients } from 'ts/@next/components/sections/landing/clients'; +import { SectionLandingCta } from 'ts/@next/components/sections/landing/cta'; +import { SectionLandingHero } from 'ts/@next/components/sections/landing/hero'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; + +import { ModalContact } from 'ts/@next/components/modals/modal_contact'; + +interface Props { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + }; +} + +export class NextLanding extends React.Component<Props> { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap theme="dark"> + <DocumentTitle title="0x: The protocol for trading tokens on Ethereum" /> + <SectionLandingHero /> + <SectionLandingAbout /> + <SectionLandingClients /> + <SectionLandingCta onContactClick={this._onOpenContactModal} /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx new file mode 100644 index 000000000..605bce91c --- /dev/null +++ b/packages/website/ts/@next/pages/launch_kit.tsx @@ -0,0 +1,125 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; + +import { Hero } from 'ts/@next/components/hero'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Definition } from 'ts/@next/components/definition'; +import { Icon } from 'ts/@next/components/icon'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; + +import { Section } from 'ts/@next/components/newLayout'; +import { constants } from 'ts/utils/constants'; + +import { ModalContact } from '../components/modals/modal_contact'; + +const offersData = [ + { + icon: 'supportForAllEthereumStandards', + title: 'Perfect for developers who need a simple drop-in marketplace', + description: ( + <ul> + <li>Quickly launch a market for your project’s token</li> + <li>Seamlessly create an in-game marketplace for digital items and collectables</li> + <li>Easily build a 0x relayer for your local market</li> + </ul> + ), + }, +]; + +export class NextLaunchKit extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap theme="dark"> + <DocumentTitle title="0x Launch Kit: Launch a relayer in under a minute" /> + <Hero + isLargeTitle={false} + isFullWidth={false} + title="0x Launch Kit" + description="Launch a relayer in under a minute" + figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />} + actions={<HeroActions />} + /> + + <Section bgColor="dark" isFlex={true} maxWidth="1170px"> + <Definition + title="Networked Liquidity Pool" + titleSize="small" + description="Tap into and share liquidity with other relayers" + icon="networkedLiquidity" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Extensible Code Repo" + titleSize="small" + description="Fork and extend to support modes of exchange" + icon="code-repo" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Exchange Ethereum based Tokens" + titleSize="small" + description="Enable trading for any ERC-20 or ERC-721 asset" + icon="eth-based-tokens" + iconSize="medium" + isInline={true} + /> + </Section> + + <Section> + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + /> + ))} + </Section> + + <Banner + heading="Need more flexibility?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ + text: 'Get Started', + href: `${constants.URL_LAUNCH_KIT}/#table-of-contents`, + shouldOpenInNewTab: true, + }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +const HeroActions = () => ( + <React.Fragment> + <Button href={constants.URL_LAUNCH_KIT} isInline={true} target="_blank"> + Get Started + </Button> + + <Button href={constants.URL_LAUNCH_KIT_BLOG_POST} isTransparent={true} isInline={true} target="_blank"> + Learn More! + </Button> + </React.Fragment> +); diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx new file mode 100644 index 000000000..e2d3c75c4 --- /dev/null +++ b/packages/website/ts/@next/pages/market_maker.tsx @@ -0,0 +1,124 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; +import { ModalContact } from 'ts/@next/components/modals/modal_contact'; +import { Section } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; + +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.', + }, +]; + +export class NextMarketMaker extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + <SiteWrap theme="light"> + <Hero + maxWidth="865px" + maxWidthHeading="715px" + 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 />} + /> + + <Section bgColor="light" isFlex={true} maxWidth="1170px"> + <Definition + title="Secure" + titleSize="small" + description="Take full custody of your assets to eliminate counterparty risk" + icon="secureTrading" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Networked Liquidity Pool" + titleSize="small" + description="Use one pool of capital across multiple relayers to trade against a large group of takers" + icon="networkedLiquidity" + iconSize="medium" + isInline={true} + /> + + <Definition + title="Low Cost" + titleSize="small" + description="Pay no fees on orders except for bulk cancellations" + icon="low-cost" + iconSize="medium" + isInline={true} + /> + </Section> + + <Section> + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + description={item.description} + isInlineIcon={true} + iconSize={240} + fontSize="medium" + /> + ))} + </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) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +const HeroActions = () => ( + <> + <Button href="https://github.com/0xProject/0x-launch-kit" bgColor="dark" isInline={true}> + Get Started + </Button> + </> +); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx new file mode 100644 index 000000000..cdf7960c2 --- /dev/null +++ b/packages/website/ts/@next/pages/why.tsx @@ -0,0 +1,309 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor'; +import styled from 'styled-components'; + +import { Banner } from 'ts/@next/components/banner'; +import { Button } from 'ts/@next/components/button'; +import { Definition } from 'ts/@next/components/definition'; +import { Hero } from 'ts/@next/components/hero'; +import { Column, Section, WrapSticky } from 'ts/@next/components/newLayout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Slide, Slider } from 'ts/@next/components/slider/slider'; +import { Heading } from 'ts/@next/components/text'; + +import { ModalContact } from '../components/modals/modal_contact'; + +const offersData = [ + { + icon: 'robustSmartContracts', + title: 'Robust Smart Contracts', + description: `0x Protocol's smart contracts have been put through two rounds of rigorous security audits.`, + }, + { + icon: 'extensibleArchitecture', + title: 'Extensible Architecture', + description: `0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.`, + }, + { + icon: 'eficientDesign', + title: 'Efficient Design', + description: `0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.`, + }, +]; + +const functionalityData = [ + { + icon: 'secureTrading', + title: 'Secure Non-custodial Trading', + description: 'Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.', + }, + { + icon: 'flexibleOrders', + title: 'Flexible Order Types', + description: 'Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.', + }, + { + icon: 'buildBusiness', + title: 'Build a Business', + description: + 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.', + }, +]; + +const useCaseSlides = [ + { + icon: 'gamingAndCollectibles', + title: 'Games & Collectibles', + description: + 'Artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality by providing the ability to build marketplaces for NFT trading.', + }, + { + icon: 'predictionMarkets', + title: 'Prediction Markets', + description: + 'Decentralized prediction markets and cryptodervivative platforms generate sets of tokens that represent a financial stake in the outcomes of events. 0x allows these tokens to be instantly tradable in liquid markets.', + }, + { + icon: 'orderBooks', + title: 'Order Books', + description: + 'There are thousands of decentralized apps and protocols that have native utility tokens. 0x provides professional exchanges with the ability to host order books and facilitates the exchange of these assets.', + }, + { + icon: 'decentralisedLoans', + title: 'Decentralized Loans', + description: + 'Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.', + }, + { + icon: 'stableTokens', + title: 'Stable Tokens', + description: + 'Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.', + }, +]; + +configureAnchors({ offset: -60 }); + +export class NextWhy extends React.Component { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + const buildAction = ( + <Button href="/docs" isWithArrow={true} isAccentColor={true}> + Build on 0x + </Button> + ); + return ( + <SiteWrap theme="dark"> + <DocumentTitle title="Features & Benefits - 0x" /> + <Hero + title="The exchange layer for the crypto economy" + description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastracture that developers and businesses utilize to build products that enable the purchasing and trading of crypto tokens." + actions={buildAction} + /> + + <Section bgColor="dark" isFlex={true} maxWidth="1170px"> + <Definition + title="Support for all Ethereum Standards" + titleSize="small" + description="0x Protocol facitilites the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets." + icon="supportForAllEthereumStandards" + iconSize="large" + isInline={true} + /> + + <Definition + title="Networked Liquidity" + titleSize="small" + description="0x is lowering the barrier to entry by building a layer of networked liquidity that allows businesses to tap into a shared pool of digital assets." + icon="networkedLiquidity" + iconSize="large" + isInline={true} + /> + + <Definition + title="Flexible Integration" + titleSize="small" + description="0x is a modular system that enables businesses and projects, known as relayers, to easily add exchange functionality to any product experience." + icon="flexibleIntegration" + iconSize="large" + isInline={true} + /> + </Section> + + <Section maxWidth="1170px" isFlex={true} isFullWidth={true}> + <Column> + <NavStickyWrap offsetTop="130px"> + <ChapterLink href="#benefits">Benefits</ChapterLink> + <ChapterLink href="#cases">Use Cases</ChapterLink> + <ChapterLink href="#functionality">Features</ChapterLink> + </NavStickyWrap> + </Column> + + <Column width="55%" maxWidth="826px"> + <Column width="100%" maxWidth="560px" padding="0 30px 0 0"> + <ScrollableAnchor id="benefits"> + <SectionWrap> + <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}> + What 0x offers + </SectionTitle> + + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + icon={item.icon} + title={item.title} + titleSize="small" + description={item.description} + isWithMargin={true} + /> + ))} + </SectionWrap> + </ScrollableAnchor> + + <ScrollableAnchor id="cases"> + <SectionWrap isNotRelative={true}> + <SectionTitle size="medium" marginBottom="60px"> + Use Cases + </SectionTitle> + <Slider> + {_.map(useCaseSlides, (item, index) => ( + <Slide + key={`useCaseSlide-${index}`} + heading={item.title} + text={item.description} + icon={item.icon} + /> + ))} + </Slider> + </SectionWrap> + </ScrollableAnchor> + + <ScrollableAnchor id="functionality"> + <SectionWrap> + <SectionTitle size="medium" marginBottom="60px"> + Exchange Functionality + </SectionTitle> + + {_.map(functionalityData, (item, index) => ( + <Definition + key={`functionality-${index}`} + icon={item.icon} + title={item.title} + titleSize="small" + description={item.description} + isWithMargin={true} + /> + ))} + </SectionWrap> + </ScrollableAnchor> + </Column> + </Column> + </Section> + + <Banner + heading="Ready to get started?" + subline="Dive into our docs, or contact us if needed" + mainCta={{ text: 'Get Started', href: '/docs' }} + secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }} + /> + <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} /> + </SiteWrap> + ); + } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + }; + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + }; +} + +interface SectionProps { + isNotRelative?: boolean; +} + +const SectionWrap = + styled.div < + SectionProps > + ` + position: ${props => !props.isNotRelative && 'relative'}; + + & + & { + padding-top: 60px; + margin-top: 60px; + } + + @media (min-width: 768px) { + & + &:before { + width: 100vw; + } + } + + @media (max-width: 768px) { + text-align: left; + + & + &:before { + width: 100%; + } + } +`; + +interface SectionTitleProps { + isNoBorder?: boolean; +} +const SectionTitle = + styled(Heading) < + SectionTitleProps > + ` + position: relative; + + ${props => + !props.isNoBorder && + ` + &:before { + content: ''; + width: 100vw; + position: absolute; + top: -53px; + left: 0; + height: 1px; + background-color: #3d3d3d; + } + `} + + + @media (max-width: 768px) { + &:before { + width: calc(100vw - 60px); + } + } +`; + +const NavStickyWrap = styled(WrapSticky)` + padding-left: 60px; + z-index: 15; + + @media (max-width: 768px) { + display: none; + } +`; + +const ChapterLink = styled.a` + color: ${props => props.theme.textColor}; + font-size: 22px; + margin-bottom: 25px; + display: block; + opacity: 0.8; + + &:hover, + &:active { + opacity: 1; + } +`; |