crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes all lint issues, cleanup

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-04 14:58:37 +01:00
parent 5bf7b9b8f3
commit 4da419cf75
20 changed files with 234 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/website/ts/@next/components/button.tsx
View File

@@ -5,9 +5,9 @@ import { colors } from 'ts/style/colors';
interface ButtonInterface {
children: Node | string;
transparent?: any;
hasIcon?: any;
inline?: any;
isTransparent?: boolean;
hasIcon?: boolean | string;
isInline?: boolean;
href?: string;
onClick?: () => void;
}
@@ -31,9 +31,9 @@ export const ButtonWrap = styled.div`
const StyledButton = styled.button<ButtonInterface>`
appearance: none;
border: 1px solid transparent;
display: ${props => props.inline && 'inline-block'};
background-color: ${props => !props.transparent && colors.brandLight};
border-color: ${props => props.transparent && '#6a6a6a'};
display: ${props => props.isInline && 'inline-block'};
background-color: ${props => !props.isTransparent && colors.brandLight};
border-color: ${props => props.isTransparent && '#6a6a6a'};
color: ${props => props.color || props.theme.textColor};
text-align: center;
padding: 14px 22px;

46
packages/website/ts/@next/components/footer.tsx
View File

@@ -1,11 +1,10 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Button } from 'ts/@next/components/button';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
import { NewsletterForm } from 'ts/@next/components/newsletterForm';
@@ -57,33 +56,28 @@ const linkRows: LinkRows[] = [
];
export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
<FooterWrap
bgColor="#181818"
noMargin>
<Wrap>
<Column colWidth="1/2" isNoPadding={true}>
<Logo light />
<NewsletterForm />
</Column>
<Column colWidth="1/2" isNoPadding={true}>
<FooterWrap bgColor="#181818" isNoMargin={true}>
<Wrap>
{_.map(linkRows, (row, index) => (
<Column
key={`fc-${index}`}
colWidth="1/3"
isNoPadding={true}>
<RowHeading>
{ row.heading }
</RowHeading>
<LinkList links={row.links} />
<Column colWidth="1/2" isNoPadding={true}>
<Logo isLight={true} />
<NewsletterForm />
</Column>
<Column colWidth="1/2" isNoPadding={true}>
<Wrap>
{_.map(linkRows, (row, index) => (
<Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}>
<RowHeading>
{row.heading}
</RowHeading>
<LinkList links={row.links} />
</Column>
))}
</Wrap>
</Column>
))}
</Wrap>
</Column>
</Wrap>
</FooterWrap>
</FooterWrap>
);
const LinkList = (props: LinkListProps) => (

8
packages/website/ts/@next/components/header.tsx
View File

@@ -1,12 +1,12 @@
import * as _ from 'lodash';
import _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import { Section, Wrap } from './layout';
import { Button } from './button';
import { Logo } from './logo';
import { Button } from 'ts/@next/components/button';
import { Section, Wrap } from 'ts/@next/components/layout';
import { Logo } from 'ts/@next/components/logo';
interface HeaderProps {
}

2
packages/website/ts/@next/components/icon.tsx
View File

@@ -7,8 +7,6 @@ interface Props {
}
export const IconClass: React.FunctionComponent<Props> = (props: Props) => {
const { icon, size } = props;
return (
<div />
);

14
packages/website/ts/@next/components/image.tsx
View File

@@ -3,19 +3,17 @@ import styled from 'styled-components';
interface Props {
alt?: string;
src: any;
srcset: any;
center: any;
src?: any;
srcset?: any;
isCentered?: boolean;
}
const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
const { src, srcset, alt } = props;
return (
<img src={src} {...props} />
<img {...props} />
);
};
export const Image = styled(ImageClass)`
margin: ${(props: Props) => props.center && `0 auto`};
export const Image = styled(ImageClass)<Props>`
margin: ${props => props.isCentered && `0 auto`};
`;

8
packages/website/ts/@next/components/layout.tsx
View File

@@ -29,7 +29,7 @@ interface WrapProps {
bgColor?: string;
isWrapped?: boolean;
isCentered?: boolean;
padding?: number | ('large' | 'default' | number)[];
padding?: number | Array<'large' | 'default' | number>;
}
interface ColumnProps {
@@ -52,7 +52,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
const _getPadding = (value: number | (string | number)[]): string => {
const _getPadding = (value: number | Array<string | number>): string => {
if (Array.isArray(value)) {
return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
} else {
@@ -99,7 +99,7 @@ export const Section = styled.section<SectionProps>`
margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
background-color: ${props => props.bgColor};
border: 1px dotted rgba(0, 255, 0, 0.3);
border: 1px dotted rgba(0, 255, 0, 0.15);
@media (min-width: 1560px) {
width: ${props => props.isFullWidth && '100vw'};
@@ -141,7 +141,7 @@ export const WrapGrid = styled(WrapBase)`
export const Column = styled.div<ColumnProps>`
padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
border: 1px dotted rgba(255, 0, 0, 0.3);
border: 1px dotted rgba(255, 0, 0, 0.15);
background-color: ${props => props.bgColor};
border-color: ${props => props.borderColor && `${props.borderColor}`};

9
packages/website/ts/@next/components/logo.tsx
View File

@@ -2,14 +2,13 @@ import * as React from 'react';
import styled from 'styled-components';
import { ThemeInterface } from 'ts/@next/components/siteWrap';
import LogoIcon from '../icons/logo-with-type.svg';
import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
interface LogoInterface {
light?: any;
isLight?: boolean;
theme?: ThemeInterface;
}
// Note let's refactor this
// is it absolutely necessary to have a stateless component
// to pass props down into the styled icon?
@@ -21,11 +20,11 @@ const Icon = styled(LogoIcon)`
flex-shrink: 0;
path {
fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor};
fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
}
`;
export const Logo: React.StatelessComponent<LogoInterface> = (props) => (
export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => (
<StyledLogo>
<Icon {...props} />
</StyledLogo>

8
packages/website/ts/@next/components/newsletterForm.tsx
View File

@@ -5,8 +5,6 @@ import { colors } from 'ts/style/colors';
import {Button} from 'ts/@next/components/button';
import ArrowIcon from 'ts/@next/icons/form-arrow.svg';
interface InputProps {
name: string;
label: string;
@@ -15,9 +13,9 @@ interface InputProps {
interface Props {
}
const Input = ({ ...props }) => {
const Input = (props: InputProps) => {
const { name, label } = props;
const id = 'input-' + name;
const id = `input-${name}`;
return (
<>
@@ -31,7 +29,7 @@ export const NewsletterForm: React.StatelessComponent = (props: Props) => (
<StyledForm>
<InputWrapper>
<Input name="email" type="email" label="Email Address" />
<SubmitButton hasIcon>
<SubmitButton hasIcon={true}>
Submit
</SubmitButton>
</InputWrapper>

6
packages/website/ts/@next/components/siteWrap.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { ThemeProvider } from 'styled-components';
import { Footer } from 'ts/@next/components/footer';
import { Header } from 'ts/@next/components/header';
@@ -18,7 +18,7 @@ export interface ThemeInterface {
[key: string]: {
bgColor: string;
textColor: string;
}
};
}
const GLOBAL_THEMES: ThemeInterface = {
@@ -34,7 +34,7 @@ const GLOBAL_THEMES: ThemeInterface = {
bgColor: '#e0e0e0',
textColor: '#000000',
},
}
};
export const SiteWrap: React.StatelessComponent<Props> = props => {
const {

1
packages/website/ts/@next/components/text.tsx
View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import styled from 'styled-components';
interface HeadingProps {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
size?: 'default' | 'medium' | 'large' | 'small';

6
packages/website/ts/@next/constants/globalStyle.tsx
View File

@@ -1,13 +1,11 @@
import { withTheme, createGlobalStyle } from 'styled-components';
import { createGlobalStyle, withTheme } from 'styled-components';
import {cssReset} from 'ts/@next/constants/cssReset';
import {colors} from 'ts/style/colors';
interface GlobalStyle {
theme: {
bgColor: string;
textColor: string;
}
};
}
const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `

34
packages/website/ts/@next/pages/about/jobs.tsx
View File

@@ -1,18 +1,10 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Image } from 'ts/@next/components/image';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
export const NextAboutJobs = () => (
<SiteWrap theme="light">
@@ -25,9 +17,12 @@ export const NextAboutJobs = () => (
<ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
</Column>
<Column colWidth="2/3">
<Heading size="medium">Join Us in Our Mission</Heading>
<Paragraph size="medium">To create a tokenized world where all value can flow freely.
We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place.</Paragraph>
<Heading size="medium">
Join Us in Our Mission
</Heading>
<Paragraph size="medium">
To create a tokenized world where all value can flow freely.We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place.
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -35,8 +30,12 @@ We are powering a growing ecosystem of decentralized applications and solving no
<Section bgColor="#F3F6F4">
<Wrap>
<Column colWidth="1/3">
<Heading size="medium">Powered by a Diverse Worldwide 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 globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world.</Paragraph>
<Heading size="medium">
Powered by a Diverse Worldwide 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 globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world.
</Paragraph>
</Column>
<Column colWidth="2/3">
@@ -95,7 +94,9 @@ We are powering a growing ecosystem of decentralized applications and solving no
<Heading size="small">Open Positition</Heading>
</Column>
<Column colWidth="1/3">
<Paragraph isMuted={true}>We're always interested in talking to talented people. Send us an application if you think you're the right fit.</Paragraph>
<Paragraph isMuted={true}>
We're always interested in talking to talented people. Send us an application if you think you're the right fit.
</Paragraph>
</Column>
<Column colWidth="1/3">
<Paragraph><a href="#">Apply</a></Paragraph>
@@ -118,6 +119,7 @@ const BenefitsList = styled.ul`
}
`;
// Lets refactor these chapter links into button perhaps as a <Link type={xxx} />
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;

13
packages/website/ts/@next/pages/about/mission.tsx
View File

@@ -1,15 +1,12 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import { colors } from 'ts/style/colors';
import styled from 'styled-components';
import { Image } from 'ts/@next/components/image';
import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
@@ -32,11 +29,9 @@ export const NextAboutMission = () => (
</Wrap>
</Section>
<Section
isFullWidth={true}
isNoPadding={true}>
<Section isFullWidth={true} isNoPadding={true}>
<Wrap width="full">
<Image src="/images/@next/about/about-mission@2x.jpg" height="320" alt="" center />
<Image src="/images/@next/about/about-mission@2x.jpg" alt="" isCentered={true} />
</Wrap>
</Section>

12
packages/website/ts/@next/pages/about/press.tsx
View File

@@ -1,18 +1,10 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Image } from 'ts/@next/components/image';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
export const NextAboutPress = () => (
<SiteWrap theme="light">

10
packages/website/ts/@next/pages/about/team.tsx
View File

@@ -1,18 +1,12 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
import { Column, Section, Wrap, WrapGrid, WrapCentered } from 'ts/@next/components/layout';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Image } from 'ts/@next/components/image';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
interface TeamMember {
name: string;

117
packages/website/ts/@next/pages/ecosystem.tsx
View File

@@ -1,6 +1,4 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link as ReactRouterLink } from 'react-router-dom';
import { colors } from 'ts/style/colors';
@@ -8,19 +6,19 @@ import {Button} from 'ts/@next/components/button';
import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Heading, Paragraph } from 'ts/@next/components/text';
import { Image } from 'ts/@next/components/image';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
export const NextEcosystem = () => (
<SiteWrap theme="light">
<Section>
<WrapCentered>
<Heading size="medium" isCentered={true}>Jumpstart your Business on 0x</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized 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>
<Heading size="medium" isCentered={true}>
Jumpstart your Business on 0x
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>
The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized 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>
<div>
<a href="#">Get Started</a>
<a href="#">Learn More</a>
@@ -31,39 +29,68 @@ export const NextEcosystem = () => (
<Section bgColor={colors.backgroundLight}>
<Wrap>
<Column>
<Heading size="small" color={colors.brandDark} isCentered={true}>Join a vibrant ecosystem of projects in the 0x Network.</Heading>
<Heading size="small" color={colors.brandDark} isCentered={true}>
Join a vibrant ecosystem of projects in the 0x Network.
</Heading>
</Column>
</Wrap>
<Wrap>
{/* This */}
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">Milestone Grants</Heading>
<Paragraph isMuted={0.5}>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.</Paragraph>
<Heading color={colors.textDarkPrimary} size="small">
Milestone Grants
</Heading>
<Paragraph isMuted={0.5}>
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.
</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">
VC Introductions
</Heading>
<Paragraph isMuted={0.5}>
Connect with leading venture capital firms that could participate in your next funding round.
</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">
Technical Support
</Heading>
<Paragraph isMuted={0.5}>
Receive ongoing technical assistance from knowledgeable and responsive 0x developers.
</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">VC Introductions</Heading>
<Paragraph isMuted={0.5}>Connect with leading venture capital firms that could participate in your next funding round.</Paragraph>
<Heading color={colors.textDarkPrimary} size="small">
Recruiting Assistance
</Heading>
<Paragraph isMuted={0.5}>
Grow your team by accessing an exclusive pool of top engineering and business operations talent.
</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">Technical Support</Heading>
<Paragraph isMuted={0.5}>Receive ongoing technical assistance from knowledgeable and responsive 0x developers.</Paragraph>
<Heading color={colors.textDarkPrimary} size="small">
Marketing and Design Help
</Heading>
<Paragraph isMuted={0.5}>
Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.
</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">Recruiting Assistance</Heading>
<Paragraph isMuted={0.5}>Grow your team by accessing an exclusive pool of top engineering and business operations talent.</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">Marketing and Design Help</Heading>
<Paragraph isMuted={0.5}>Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.</Paragraph>
</Column>
<Column colWidth="1/3">
<RightThingIcon width="60" />
<Heading color={colors.textDarkPrimary} size="small">Legal Resources</Heading>
<Paragraph isMuted={0.5}>Obtain important legal documents and resources that will help you navigate the regulatory landscape.</Paragraph>
<Heading color={colors.textDarkPrimary} size="small">
Legal Resources
</Heading>
<Paragraph isMuted={0.5}>
Obtain important legal documents and resources that will help you navigate the regulatory landscape.
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -72,8 +99,12 @@ export const NextEcosystem = () => (
<Wrap>
<Column colWidth="1/2" isPadLarge={true}>
<WrapCentered>
<Heading>Apply for the program now</Heading>
<Paragraph>Have questions? Please join our Discord channel</Paragraph>
<Heading>
Apply for the program now
</Heading>
<Paragraph>
Have questions? Please join our Discord channel
</Paragraph>
</WrapCentered>
</Column>
@@ -81,7 +112,7 @@ export const NextEcosystem = () => (
<WrapCentered>
<div>
<Button href="#">Apply Now</Button>
<Button href="#" transparent>Join Discord</Button>
<Button href="#" isTransparent={true}>Join Discord</Button>
</div>
</WrapCentered>
</Column>
@@ -89,29 +120,3 @@ export const NextEcosystem = () => (
</Section>
</SiteWrap>
);
const BenefitsList = styled.ul`
color: #000;
list-style: disc;
columns: auto 2;
column-gap: 80px;
li {
margin-bottom: 1em;
}
`;
const ChapterLink = styled(ReactRouterLink)`
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;

24
packages/website/ts/@next/pages/instant.tsx
View File

@@ -1,5 +1,4 @@
import * as React from 'react';
import styled from 'styled-components';
import {colors} from 'ts/style/colors';
@@ -8,9 +7,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
export const Next0xInstant = () => (
<SiteWrap>
@@ -22,9 +21,7 @@ export const Next0xInstant = () => (
</WrapCentered>
</Section>
<Section
isFullWidth={true}
isNoPadding={true}>
<Section isFullWidth={true} isNoPadding={true}>
<Wrap width="full">
<img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
</Wrap>
@@ -108,7 +105,7 @@ export const Next0xInstant = () => (
<WrapCentered>
<div>
<Button href="#">Explore the Docs</Button>
<Button href="#" transparent>Get in Touch</Button>
<Button href="#" isTransparent={true}>Get in Touch</Button>
</div>
</WrapCentered>
</Column>
@@ -125,18 +122,3 @@ export const Next0xInstant = () => (
</Section>
</SiteWrap>
);
const ChapterLink = styled.a `
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;

69
packages/website/ts/@next/pages/landing.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import {colors} from 'ts/style/colors';
@@ -14,17 +14,6 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg';
import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
/**
Note(ez): Maybe when we're done at least with a basic structure,
we can take out each section into e.g. LandingSectionIntro.tsx in
@next/sections/landing ? so then our routes would only look like
<SiteWrap>
<LandingSectionIntro />
<LandingSectionWhatever />
</SiteWrap>
*/
interface ProjectLogo {
name: string;
imageUrl?: string;
@@ -83,11 +72,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
</Paragraph>
<ButtonWrap>
<Button inline>
<Button isInline={true}>
Get Started
</Button>
<Button transparent inline>
<Button isTransparent={true} isInline={true}>
Learn More
</Button>
</ButtonWrap>
@@ -99,22 +88,18 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
</Wrap>
</Section>
<Section
bgColor={colors.backgroundDark}
isPadLarge={true}>
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
<WrapCentered width="narrow">
<ProtocolIcon/>
<Paragraph
size="large"
isCentered={true}>
<Paragraph size="large" isCentered={true}>
0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
tokens. Anyone in the world can use 0x to service a wide variety of markets
ranging from gaming items to financial instruments to assets that could have
near existed before.
</Paragraph>
<Button href="#" transparent>
<Button href="#" isTransparent={true}>
Discover how developers use 0x
</Button>
</WrapCentered>
@@ -122,61 +107,39 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
{/* Note you can also pass in a string "large/default" or a number for custom margins */}
<Wrap padding={['large', 0, 0, 0]}>
{/* NOTE: this probably should be withComponent as part of a <dl> */}
<Column
colWidth="1/3"
isNoPadding={true}>
<Heading
size="medium"
isCentered={true}>
<Column colWidth="1/3" isNoPadding={true}>
<Heading size="medium" isCentered={true}>
873,435
</Heading>
<Paragraph
isMuted={0.4}
isCentered={true}
isNoMargin={true}>
<Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
Number of transactions
</Paragraph>
</Column>
<Column
colWidth="1/3"
isNoPadding={true}>
<Heading
size="medium"
isCentered={true}>
<Column colWidth="1/3" isNoPadding={true}>
<Heading size="medium" isCentered={true}>
$203M
</Heading>
<Paragraph
isMuted={0.4}
isCentered={true}
isNoMargin={true}>
<Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
Total volume
</Paragraph>
</Column>
<Column
colWidth="1/3"
isNoPadding={true}>
<Heading
size="medium"
isCentered={true}>
<Column colWidth="1/3" isNoPadding={true}>
<Heading size="medium" isCentered={true}>
227,372
</Heading>
<Paragraph
isMuted={0.4}
isCentered={true}
isNoMargin={true}>
<Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
Number of relayers
</Paragraph>
</Column>
</Wrap>
</Section>
<Section
isPadLarge={true}>
<Section isPadLarge={true}>
<WrapCentered>
<Heading size="small">You're in good company</Heading>
</WrapCentered>

119
packages/website/ts/@next/pages/launchKit.tsx
View File

@@ -1,5 +1,4 @@
import * as React from 'react';
import styled from 'styled-components';
import {colors} from 'ts/style/colors';
@@ -8,17 +7,22 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
export const NextLaunchKit = () => (
<SiteWrap>
<Section>
<WrapCentered>
<Heading size="medium" isCentered={true}>0x Launch Kit</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>The definitive starting point for building a business on top of the 0x protocol.</Paragraph>
<Button href="#">Get Started</Button>
<Heading size="medium" isCentered={true}>
0x Launch Kit
</Heading>
<Paragraph size="medium" isCentered={true} isMuted={true}>
The definitive starting point for building a business on top of the 0x protocol.
</Paragraph>
<Button href="#">
Get Started
</Button>
</WrapCentered>
</Section>
@@ -31,7 +35,9 @@ export const NextLaunchKit = () => (
>
<WrapCentered>
<ProtocolIcon width="140" />
<Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
<Paragraph isCentered={true}>
Tap into and share liquidity with other relayers
</Paragraph>
</WrapCentered>
</Column>
<Column
@@ -41,7 +47,9 @@ export const NextLaunchKit = () => (
>
<WrapCentered>
<ProtocolIcon width="140" />
<Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
<Paragraph isCentered={true}>
Tap into and share liquidity with other relayers
</Paragraph>
</WrapCentered>
</Column>
<Column
@@ -51,7 +59,9 @@ export const NextLaunchKit = () => (
>
<WrapCentered>
<ProtocolIcon width="140" />
<Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
<Paragraph isCentered={true}>
Tap into and share liquidity with other relayer
</Paragraph>
</WrapCentered>
</Column>
</Wrap>
@@ -64,8 +74,12 @@ export const NextLaunchKit = () => (
</Column>
<Column colWidth="2/3">
<Heading size="small">Working on a new token?</Heading>
<Paragraph isMuted={true}>Easily create a secondary market for your asset/asset class</Paragraph>
<Heading size="small">
Working on a new token?
</Heading>
<Paragraph isMuted={true}>
Easily create a secondary market for your asset/asset clas
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -76,8 +90,12 @@ export const NextLaunchKit = () => (
</Column>
<Column colWidth="2/3">
<Heading size="small">Working on a new game?</Heading>
<Paragraph isMuted={true}>Easily create an in-app marketplace</Paragraph>
<Heading size="small">
Working on a new game?
</Heading>
<Paragraph isMuted={true}>
Easily create an in-app marketplace
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -88,8 +106,12 @@ export const NextLaunchKit = () => (
</Column>
<Column colWidth="2/3">
<Heading size="small">No exchange in your location?</Heading>
<Paragraph isMuted={true}>Build a 0x relayer for your contry’s market</Paragraph>
<Heading size="small">
No exchange in your location?
</Heading>
<Paragraph isMuted={true}>
Build a 0x relayer for your contry’s market
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -97,17 +119,31 @@ export const NextLaunchKit = () => (
<Section bgColor={colors.backgroundDark}>
<Wrap>
<Column colWidth="1/2">
<Heading>0x Instant Configurator</Heading>
<Paragraph>Liquidity Source</Paragraph>
<Paragraph>What tokens can users buy? (select all)</Paragraph>
<Paragraph>Transaction fee ETH address</Paragraph>
<Paragraph>Fee Percentage</Paragraph>
<Heading>
0x Instant Configurator
</Heading>
<Paragraph>
Liquidity Source
</Paragraph>
<Paragraph>
What tokens can users buy? (select all)
</Paragraph>
<Paragraph>
Transaction fee ETH address
</Paragraph>
<Paragraph>
Fee Percentage
</Paragraph>
</Column>
<Column colWidth="1/2">
<Paragraph>Code Snippet</Paragraph>
<Paragraph>
Code Snippet
</Paragraph>
<a href="#">Explore the Docs</a>
<Paragraph>&lt;code snippet&gt;</Paragraph>
<Paragraph>
&lt;code snippet&gt;
</Paragraph>
</Column>
</Wrap>
</Section>
@@ -116,16 +152,24 @@ export const NextLaunchKit = () => (
<Wrap>
<Column colWidth="1/2" isPadLarge={true}>
<WrapCentered>
<Heading>Need more flexibility?</Heading>
<Paragraph>Dive into our docs, or contact us if needed</Paragraph>
<Heading>
Need more flexibility?
</Heading>
<Paragraph>
Dive into our docs, or contact us if needed
</Paragraph>
</WrapCentered>
</Column>
<Column colWidth="1/2" isPadLarge={true}>
<WrapCentered>
<div>
<Button href="#">Explore the Docs</Button>
<Button href="#" transparent>Get in Touch</Button>
<Button href="#">
Explore the Docs
</Button>
<Button href="#" isTransparent={true}>
Get in Touch
</Button>
</div>
</WrapCentered>
</Column>
@@ -135,25 +179,14 @@ export const NextLaunchKit = () => (
<Section>
<Wrap width="full">
<Column>
<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>
<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>
</Column>
</Wrap>
</Section>
</SiteWrap>
);
const ChapterLink = styled.a `
font-size: 1.222222222rem;
display: block;
opacity: 0.8;
margin-bottom: 1.666666667rem;
&:first-child {
opacity: 1;
}
&:hover {
opacity: 1;
}
`;

1
packages/website/ts/@next/pages/why.tsx
View File

@@ -9,7 +9,6 @@ import { Heading, Paragraph } from 'ts/@next/components/text';
import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
export const NextWhy = () => (