Merge pull request #1655 from 0xProject/feature/extensions-page-freds-jank-pr-mirror
Feature/extensions page freds jank pr mirror
This commit is contained in:
David Sun
GitHub
commit
d9a1d8bde6
@ -6,7 +6,7 @@ import { Button } from 'ts/components/button';
|
||||
import { ChapterLink } from 'ts/components/chapter_link';
|
||||
import { Column, Section } from 'ts/components/newLayout';
|
||||
import { SiteWrap } from 'ts/components/siteWrap';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { Heading } from 'ts/components/text';
|
||||
|
||||
import { addFadeInAnimation } from 'ts/constants/animations';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
@ -34,9 +34,7 @@ export const AboutPageLayout = (props: Props) => (
|
||||
<Column width="100%" maxWidth="680px">
|
||||
<AnimatedHeading size="medium">{props.title}</AnimatedHeading>
|
||||
|
||||
<AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
|
||||
{props.description}
|
||||
</AnimatedParagraph>
|
||||
<AnimatedIntro>{props.description}</AnimatedIntro>
|
||||
|
||||
{props.linkLabel && (props.href || props.to) && (
|
||||
<AnimatedLink
|
||||
@ -61,7 +59,7 @@ const AnimatedHeading = styled(Heading)`
|
||||
${addFadeInAnimation('0.5s')};
|
||||
`;
|
||||
|
||||
const AnimatedParagraph = styled(Paragraph)`
|
||||
const AnimatedIntro = styled.div`
|
||||
${addFadeInAnimation('0.5s', '0.15s')};
|
||||
`;
|
||||
|
||||
|
||||
@ -31,11 +31,17 @@ interface BorderProps {
|
||||
export const Banner: React.StatelessComponent<Props> = (props: Props) => {
|
||||
const { heading, subline, mainCta, secondaryCta } = props;
|
||||
return (
|
||||
<CustomSection bgColor={colors.brandDark} isFlex={true} flexBreakpoint="900px" paddingMobile="120px 0">
|
||||
<CustomSection
|
||||
bgColor={colors.brandDark}
|
||||
isFlex={true}
|
||||
flexBreakpoint="900px"
|
||||
paddingMobile="120px 0"
|
||||
alignItems="center"
|
||||
>
|
||||
<Border />
|
||||
<Border isBottom={true} />
|
||||
|
||||
<Column>
|
||||
<Column maxWidth="455px">
|
||||
<CustomHeading>{heading}</CustomHeading>
|
||||
|
||||
{subline && (
|
||||
@ -44,7 +50,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
|
||||
</Paragraph>
|
||||
)}
|
||||
</Column>
|
||||
<Column>
|
||||
<ColumnCta>
|
||||
<ButtonWrap>
|
||||
{mainCta && (
|
||||
<Button
|
||||
@ -69,7 +75,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
|
||||
</Button>
|
||||
)}
|
||||
</ButtonWrap>
|
||||
</Column>
|
||||
</ColumnCta>
|
||||
</CustomSection>
|
||||
);
|
||||
};
|
||||
@ -77,8 +83,12 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
|
||||
const CustomSection = styled(Section)`
|
||||
color: ${colors.white};
|
||||
margin-top: 30px;
|
||||
margin-top: 0;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
@ -91,10 +101,17 @@ const CustomSection = styled(Section)`
|
||||
}
|
||||
`;
|
||||
|
||||
const ColumnCta = styled(Column)`
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const CustomHeading = styled.h2`
|
||||
font-size: 34px;
|
||||
line-height: normal;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px @media (max-width: 768px) {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -5,8 +5,11 @@ import styled from 'styled-components';
|
||||
import { ThemeInterface } from 'ts/components/siteWrap';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { withFilteredProps } from 'ts/utils/filter_props';
|
||||
|
||||
export interface ButtonInterface {
|
||||
isDisabled?: boolean;
|
||||
className?: string;
|
||||
bgColor?: string;
|
||||
borderColor?: string;
|
||||
color?: string;
|
||||
@ -22,27 +25,29 @@ export interface ButtonInterface {
|
||||
type?: string;
|
||||
target?: string;
|
||||
to?: string;
|
||||
onClick?: (e: Event) => any;
|
||||
onClick?: (e: any) => any;
|
||||
theme?: ThemeInterface;
|
||||
shouldUseAnchorTag?: boolean;
|
||||
}
|
||||
|
||||
export const Button: React.StatelessComponent<ButtonInterface> = (props: ButtonInterface) => {
|
||||
const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props;
|
||||
const { children, href, isWithArrow, to, shouldUseAnchorTag, target, isDisabled, className } = props;
|
||||
const isButton = !href && !to;
|
||||
let linkElem;
|
||||
|
||||
if (href || shouldUseAnchorTag) {
|
||||
linkElem = 'a';
|
||||
}
|
||||
if (to) {
|
||||
linkElem = ReactRouterLink;
|
||||
linkElem = withFilteredProps(ReactRouterLink, ['className', 'href', 'to', 'onClick', 'target']);
|
||||
}
|
||||
|
||||
const Component = linkElem ? ButtonBase.withComponent<any>(linkElem) : ButtonBase;
|
||||
const targetProp = href && target ? { target } : {};
|
||||
const buttonProps = isButton ? { disabled: isDisabled } : {};
|
||||
|
||||
return (
|
||||
<Component {...props} {...targetProp}>
|
||||
<Component className={className} {...buttonProps} {...props} {...targetProp}>
|
||||
{children}
|
||||
|
||||
{isWithArrow && (
|
||||
|
||||
96
packages/website/ts/components/card.tsx
Normal file
96
packages/website/ts/components/card.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
import { Button } from 'ts/components/button';
|
||||
import { Icon } from 'ts/components/icon';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
export interface LinkProps {
|
||||
text: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface CardProps {
|
||||
icon: string;
|
||||
heading: string;
|
||||
description: string;
|
||||
href?: string;
|
||||
links?: LinkProps[];
|
||||
}
|
||||
|
||||
export const Card: React.StatelessComponent<CardProps> = (props: CardProps) => {
|
||||
const { heading, description, icon, links } = props;
|
||||
|
||||
return (
|
||||
<StyledCard>
|
||||
<CardHead>
|
||||
<Icon name={icon} size={160} />
|
||||
</CardHead>
|
||||
<CardContent>
|
||||
<Heading asElement="h4" size="default" marginBottom="15px">
|
||||
{heading}
|
||||
</Heading>
|
||||
<Paragraph isMuted={true}>{description}</Paragraph>
|
||||
<Links>
|
||||
{_.map(links, (link, index) => (
|
||||
<Button
|
||||
href={link.url}
|
||||
target={!_.isUndefined(link.url) ? '_blank' : undefined}
|
||||
isWithArrow={true}
|
||||
isAccentColor={true}
|
||||
key={`cardLink-${index}-${link.url}`}
|
||||
>
|
||||
{link.text}
|
||||
</Button>
|
||||
))}
|
||||
</Links>
|
||||
</CardContent>
|
||||
</StyledCard>
|
||||
);
|
||||
};
|
||||
|
||||
const StyledCard = styled.div`
|
||||
background-color: ${colors.backgroundDark};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 520px;
|
||||
flex: 0 0 auto;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
min-height: 450px;
|
||||
}
|
||||
`;
|
||||
|
||||
const CardHead = styled.div`
|
||||
background-color: ${colors.brandDark};
|
||||
height: 240px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
height: 180px;
|
||||
padding: 30px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const CardContent = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30px;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Links = styled.div`
|
||||
margin-top: auto;
|
||||
`;
|
||||
@ -17,6 +17,11 @@ const navData = [
|
||||
description: 'Build on the 0x protocol',
|
||||
url: WebsitePaths.LaunchKit,
|
||||
},
|
||||
{
|
||||
title: 'Extensions',
|
||||
description: 'Support new types of trading on your relayer with 0x Extensions',
|
||||
url: WebsitePaths.Extensions,
|
||||
},
|
||||
{
|
||||
title: 'Governance',
|
||||
description: 'Vote on changes to the 0x protocol',
|
||||
|
||||
@ -33,6 +33,7 @@ const linkRows: LinkRows[] = [
|
||||
links: [
|
||||
{ url: WebsitePaths.Instant, text: '0x Instant' },
|
||||
{ url: WebsitePaths.LaunchKit, text: '0x Launch Kit' },
|
||||
{ url: WebsitePaths.Extensions, text: 'Extensions' },
|
||||
{ url: WebsitePaths.Vote, text: 'Governance' },
|
||||
],
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -64,6 +64,8 @@ const StyledIcon = styled.figure<IconProps>`
|
||||
margin: ${props => getCSSPadding(props.margin)};
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { withFilteredProps } from 'ts/utils/filter_props';
|
||||
|
||||
interface Props {
|
||||
alt?: string;
|
||||
@ -12,6 +13,6 @@ const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
|
||||
return <img {...props} />;
|
||||
};
|
||||
|
||||
export const Image = styled(ImageClass)<Props>`
|
||||
export const Image = styled(withFilteredProps(ImageClass, ['alt', 'src']))<Props>`
|
||||
margin: ${props => props.isCentered && `0 auto`};
|
||||
`;
|
||||
|
||||
@ -32,12 +32,14 @@ export interface SectionProps extends WrapProps {
|
||||
maxWidth?: string;
|
||||
bgColor?: 'dark' | 'light' | string;
|
||||
children: any;
|
||||
alignItems?: string;
|
||||
}
|
||||
|
||||
export interface FlexProps {
|
||||
padding?: string;
|
||||
isFlex?: boolean;
|
||||
flexBreakpoint?: string;
|
||||
alignItems?: string;
|
||||
}
|
||||
|
||||
export interface ColumnProps {
|
||||
@ -76,6 +78,7 @@ export const FlexWrap = styled.div<FlexProps>`
|
||||
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {
|
||||
display: ${props => props.isFlex && 'flex'};
|
||||
justify-content: ${props => props.isFlex && 'space-between'};
|
||||
align-items: ${props => props.alignItems};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import { GlobalStyles } from 'ts/constants/globalStyle';
|
||||
|
||||
interface Props {
|
||||
theme?: 'dark' | 'light' | 'gray';
|
||||
isFullScreen?: boolean;
|
||||
children: any;
|
||||
}
|
||||
|
||||
@ -18,6 +19,7 @@ interface State {
|
||||
|
||||
interface MainProps {
|
||||
isNavToggled: boolean;
|
||||
isFullScreen?: boolean;
|
||||
}
|
||||
|
||||
export interface ThemeValuesInterface {
|
||||
@ -118,7 +120,7 @@ export class SiteWrap extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const { children, theme = 'dark' } = this.props;
|
||||
const { children, theme = 'dark', isFullScreen } = this.props;
|
||||
const { isMobileNavOpen } = this.state;
|
||||
const currentTheme = GLOBAL_THEMES[theme];
|
||||
|
||||
@ -130,7 +132,9 @@ export class SiteWrap extends React.Component<Props, State> {
|
||||
|
||||
<Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
|
||||
|
||||
<Main isNavToggled={isMobileNavOpen}>{children}</Main>
|
||||
<Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
|
||||
{children}
|
||||
</Main>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
@ -143,4 +147,12 @@ export class SiteWrap extends React.Component<Props, State> {
|
||||
const Main = styled.main<MainProps>`
|
||||
transition: transform 0.5s, opacity 0.5s;
|
||||
opacity: ${props => props.isNavToggled && '0.5'};
|
||||
|
||||
${props =>
|
||||
props.isFullScreen &&
|
||||
`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 108px - 381px);
|
||||
`}
|
||||
`;
|
||||
|
||||
1
packages/website/ts/icons/illustrations/dutchAuction.svg
generated
Normal file
1
packages/website/ts/icons/illustrations/dutchAuction.svg
generated
Normal file
@ -0,0 +1 @@
|
||||
<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M137.541 137.837v1.5h1.5v-1.5h-1.5zM26.521 26.817v-1.5h-1.5v1.5h1.5zm111.02 0h1.5v-1.5h-1.5v1.5zm22.988 44.833l1.06 1.06 1.061-1.06-1.061-1.06-1.06 1.06zm-41.844 41.843l-1.06 1.061 1.06 1.061 1.061-1.061-1.061-1.061zm-13.947-13.947l-1.061-1.06-1.061 1.06 1.061 1.06 1.061-1.06zm41.843-41.844l1.061-1.06-1.061-1.06-1.061 1.06 1.061 1.06zm-40.449-40.448l1.061 1.06 1.061-1.06-1.061-1.06-1.061 1.06zM64.289 59.097l-1.06 1.06 1.06 1.062 1.06-1.061-1.06-1.06zM50.341 45.15l-1.06-1.06-1.06 1.06 1.06 1.061 1.06-1.06zM92.185 3.306l1.06-1.06-1.06-1.061-1.061 1.06 1.06 1.061zm46.725 62.068l1.06 1.06 1.061-1.06-1.061-1.061-1.06 1.06zm-26.501 26.5l-1.061 1.061 1.061 1.06 1.061-1.06-1.061-1.06zM71.96 51.426l-1.06-1.06-1.06 1.06 1.06 1.06 1.06-1.06zm26.501-26.5l1.06-1.061-1.06-1.061-1.06 1.06 1.06 1.061zm0 53l1.074 1.048 1.035-1.06-1.048-1.048-1.06 1.06zM85.908 65.375l1.06-1.061-1.073-1.074-1.06 1.087 1.073 1.048zm51.633 70.963H39.909v3h97.632v-3zm-109.52-10.255V26.816h-3v99.266h3zm108.02-99.266v37.225h3V26.816h-3zm-36.05 1.5h37.55v-3h-37.55v3zm-73.47 0h42.123v-3H26.52v3zm109.52 66.419v43.102h3V94.735h-3zM160.5 82c0 43.354-35.146 78.5-78.5 78.5v3c45.011 0 81.5-36.489 81.5-81.5h-3zM82 160.5c-43.354 0-78.5-35.146-78.5-78.5h-3c0 45.011 36.489 81.5 81.5 81.5v-3zM3.5 82C3.5 38.646 38.646 3.5 82 3.5v-3C36.989.5.5 36.989.5 82h3zM82 3.5c43.354 0 78.5 35.146 78.5 78.5h3C163.5 36.989 127.011.5 82 .5v3zm77.468 67.09l-41.843 41.843 2.121 2.121 41.843-41.843-2.121-2.121zm-39.722 41.843l-13.948-13.948-2.121 2.121 13.948 13.948 2.121-2.121zm-13.948-11.827l41.844-41.843-2.122-2.121-41.843 41.843 2.121 2.121zm39.722-41.843l13.948 13.948 2.121-2.121-13.947-13.948-2.122 2.121zm-40.448-42.57L63.228 58.036l2.122 2.122 41.843-41.843-2.121-2.122zM65.35 58.036L51.402 44.09l-2.121 2.121 13.947 13.948 2.122-2.122zM51.402 46.21L93.245 4.367l-2.121-2.122L49.281 44.09l2.121 2.121zM91.124 4.367l13.948 13.948 2.121-2.122L93.245 2.245l-2.121 2.122zm46.725 59.946l-26.501 26.5 2.122 2.122 26.5-26.5-2.121-2.122zm-24.379 26.5L73.021 50.366 70.9 52.487l40.448 40.448 2.122-2.121zM73.021 52.488l26.5-26.501-2.12-2.122L70.9 50.365l2.121 2.122zm24.38-26.501l40.448 40.448 2.121-2.121-40.448-40.449-2.122 2.122zm-.013 50.893l-65.296 66.912 2.147 2.095 65.296-66.912-2.147-2.095zm-75.702 56.454l65.296-66.912-2.147-2.095-65.296 66.912 2.147 2.095zm63.161-66.899L97.4 78.987l2.122-2.121-12.553-12.553-2.121 2.121z" fill="#00AE99"/></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
packages/website/ts/icons/illustrations/extensions.svg
generated
Normal file
1
packages/website/ts/icons/illustrations/extensions.svg
generated
Normal file
@ -0,0 +1 @@
|
||||
<svg width="304" height="304" viewBox="0 0 304 304" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M47.492 47.492v-1.5h-1.5v1.5h1.5zm207.787 0h1.5v-1.5h-1.5v1.5zm0 207.787v1.5h1.5v-1.5h-1.5zm-207.787 0h-1.5v1.5h1.5v-1.5zm22.13-25.82h-1.5v1.5h1.5v-1.5zm88.526-88.525h1.5v-1.5h-1.5v1.5zm-88.525 0v-1.5h-1.5v1.5h1.5zm88.525 88.525v1.5h1.5v-1.5h-1.5zm40.573-129.098h-1.5v1.5h1.5v-1.5zm36.886-36.886h1.5v-1.5h-1.5v1.5zm-36.886 0v-1.5h-1.5v1.5h1.5zm36.886 36.886v1.5h1.5v-1.5h-1.5zM300.5 152c0 82.014-66.486 148.5-148.5 148.5v3c83.671 0 151.5-67.829 151.5-151.5h-3zM152 300.5C69.986 300.5 3.5 234.014 3.5 152h-3c0 83.671 67.829 151.5 151.5 151.5v-3zM3.5 152C3.5 69.986 69.986 3.5 152 3.5v-3C68.329.5.5 68.329.5 152h3zM152 3.5c82.014 0 148.5 66.486 148.5 148.5h3C303.5 68.329 235.671.5 152 .5v3zm26.779 44.607v205.327h3V48.107h-3zM47.492 119.074h133.401v-3H47.492v3zm132.787 0h75v-3h-75v3zM68.123 202.41v27.049h3V202.41h-3zm28.55 25.549h-27.05v3h27.05v-3zm-25.99 2.561l44.263-44.263-2.121-2.121-44.263 44.262 2.122 2.122zm44.263-44.263l44.262-44.262-2.121-2.121-44.262 44.262 2.121 2.121zm41.702-45.323v27.05h3v-27.05h-3zm1.5-1.5h-24.591v3h24.591v-3zm-89.586 2.561l44.263 44.262 2.121-2.121-44.262-44.262-2.122 2.121zm44.263 44.262l44.262 44.263 2.121-2.122-44.262-44.262-2.121 2.121zm46.823 43.202V202.41h-3v27.049h3zm-1.5-1.5h-24.591v3h24.591v-3zm-88.525-85.525h27.05v-3h-27.05v3zm-1.5-1.5v27.05h3v-27.05h-3zM197.22 89.09v11.271h3v-11.27h-3zm12.771 9.77h-11.271v3.001h11.271v-3zm-10.21 2.561l18.443-18.442-2.122-2.122L197.661 99.3l2.121 2.121zm18.443-18.442l18.442-18.443-2.121-2.121-18.443 18.442 2.122 2.122zm15.882-19.504v11.27h3v-11.27h-3zm1.5-1.5h-10.246v3h10.246v-3zm-37.946 2.561l18.442 18.443 2.122-2.122-18.443-18.442-2.121 2.121zm18.442 18.443l18.443 18.442 2.121-2.121-18.442-18.443-2.122 2.122zm21.004 17.382v-11.27h-3v11.27h3zm-1.5-1.5h-10.246v3h10.246v-3zm-36.886-33.886h11.271v-3h-11.271v3zm-1.5-1.5v11.27h3v-11.27h-3zm58.058 190.304H47.492v3h207.787v-3zM47.492 48.992h207.787v-3H47.492v3zm1.5 206.287V47.492h-3v207.787h3zM253.779 47.492v207.787h3V47.492h-3z" fill="#00AE99"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
packages/website/ts/icons/illustrations/forwarderContract.svg
generated
Normal file
1
packages/website/ts/icons/illustrations/forwarderContract.svg
generated
Normal file
@ -0,0 +1 @@
|
||||
<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M81.701 67.588h1.5v-1.5h-1.5v1.5zm0 11.789h-1.5v3.625l2.561-2.565-1.06-1.06zm22.594-22.623l1.061 1.06 1.059-1.06-1.059-1.06-1.061 1.06zM81.701 34.131l1.061-1.06-2.56-2.564v3.624h1.5zm0 11.79v1.5h1.5v-1.5h-1.5zm-20.685 0v-1.5h-1.5v1.5h1.5zm0 21.667h-1.5v1.5h1.5v-1.5zm-27.84 49.836h1.5v-1.5h-1.5v1.5zm0 11.789h-1.5v3.625l2.562-2.565-1.062-1.06zM55.77 106.59l1.062 1.06 1.059-1.06-1.06-1.06-1.06 1.06zM33.176 83.967l1.062-1.06-2.561-2.564v3.624h1.5zm0 11.79v1.5h1.5v-1.5h-1.5zm-20.684 0v-1.5h-1.5v1.5h1.5zm0 21.667h-1.5v1.5h1.5v-1.5zm119.359 0h1.5v-1.5h-1.5v1.5zm0 11.789h-1.5v3.586l2.553-2.518-1.053-1.068zm22.936-22.623l1.053 1.068 1.083-1.068-1.083-1.068-1.053 1.068zm-22.936-22.623l1.053-1.068-2.553-2.518v3.586h1.5zm0 11.79v1.5h1.5v-1.5h-1.5zm-20.999 0v-1.5h-1.5v1.5h1.5zm0 21.667h-1.5v1.5h1.5v-1.5zM160.5 82c0 43.354-35.146 78.5-78.5 78.5v3c45.011 0 81.5-36.489 81.5-81.5h-3zM82 160.5c-43.354 0-78.5-35.146-78.5-78.5h-3c0 45.011 36.489 81.5 81.5 81.5v-3zM3.5 82C3.5 38.646 38.646 3.5 82 3.5v-3C36.989.5.5 36.989.5 82h3zM82 3.5c43.354 0 78.5 35.146 78.5 78.5h3C163.5 36.989 127.011.5 82 .5v3zm22.762 53.582c0 12.952-10.356 23.418-23.09 23.418v3c14.428 0 26.09-11.847 26.09-26.418h-3zM81.672 80.5c-12.733 0-23.09-10.466-23.09-23.418h-3c0 14.571 11.662 26.418 26.09 26.418v-3zm-23.09-23.418c0-12.952 10.357-23.418 23.09-23.418v-3c-14.428 0-26.09 11.846-26.09 26.418h3zm23.09-23.418c12.734 0 23.09 10.466 23.09 23.418h3c0-14.572-11.662-26.418-26.09-26.418v3zm-1.47 33.924v11.789h3v-11.79h-3zm2.56 12.849l22.594-22.623-2.122-2.12L80.64 78.317l2.122 2.12zm22.594-24.743L82.762 33.071l-2.122 2.12 22.594 22.623 2.122-2.12zM80.201 34.131v11.79h3V34.13h-3zm-48.524 83.293v11.789h3v-11.789h-3zm2.56 12.849l22.595-22.623-2.123-2.12-22.594 22.623 2.123 2.12zm22.595-24.743L34.238 82.907l-2.123 2.12L54.71 107.65l2.123-2.12zM31.677 83.967v11.79h3v-11.79h-3zm98.674 33.457v11.789h3v-11.789h-3zm2.553 12.857l22.936-22.623-2.106-2.136-22.937 22.623 2.107 2.136zm22.936-24.759l-22.936-22.623-2.107 2.136 22.937 22.623 2.106-2.136zm-25.489-21.555v11.79h3v-11.79h-3zm-25.589 22.623c0 12.753-10.338 23.09-23.09 23.09v3c14.41 0 26.09-11.681 26.09-26.09h-3zm-23.09 23.09c-12.752 0-23.09-10.337-23.09-23.09h-3c0 14.409 11.68 26.09 26.09 26.09v-3zm-23.09-23.09c0-12.752 10.338-23.09 23.09-23.09v-3c-14.41 0-26.09 11.681-26.09 26.09h3zm23.09-23.09c12.752 0 23.09 10.338 23.09 23.09h3c0-14.409-11.68-26.09-26.09-26.09v3zm-26.09-26.418c0 12.971-10.229 23.418-22.762 23.418v3c14.265 0 25.762-11.866 25.762-26.418h-3zM32.82 80.5c-12.534 0-22.763-10.447-22.763-23.418h-3C7.057 71.634 18.554 83.5 32.82 83.5v-3zM10.057 57.082c0-12.971 10.229-23.418 22.763-23.418v-3c-14.266 0-25.763 11.866-25.763 26.418h3zM32.82 33.664c12.533 0 22.762 10.447 22.762 23.418h3c0-14.552-11.497-26.418-25.762-26.418v3zm22.762 72.926c0 12.772-10.21 23.09-22.762 23.09v3c14.247 0 25.762-11.7 25.762-26.09h-3zM32.82 129.68c-12.553 0-22.763-10.318-22.763-23.09h-3c0 14.39 11.516 26.09 25.763 26.09v-3zm-22.763-23.09c0-12.771 10.21-23.09 22.763-23.09v-3c-14.247 0-25.763 11.7-25.763 26.09h3zM32.82 83.5c12.552 0 22.762 10.319 22.762 23.09h3c0-14.39-11.515-26.09-25.762-26.09v3zm121.123-26.418c0 12.971-10.229 23.418-22.763 23.418v3c14.266 0 25.763-11.866 25.763-26.418h-3zM131.18 80.5c-12.533 0-22.762-10.447-22.762-23.418h-3c0 14.552 11.497 26.418 25.762 26.418v-3zm-22.762-23.418c0-12.971 10.229-23.418 22.762-23.418v-3c-14.265 0-25.762 11.866-25.762 26.418h3zm22.762-23.418c12.534 0 22.763 10.447 22.763 23.418h3c0-14.552-11.497-26.418-25.763-26.418v3zm22.763 72.926c0 12.772-10.21 23.09-22.763 23.09v3c14.247 0 25.763-11.7 25.763-26.09h-3zm-22.763 23.09c-12.552 0-22.762-10.318-22.762-23.09h-3c0 14.39 11.515 26.09 25.762 26.09v-3zm-22.762-23.09c0-12.771 10.21-23.09 22.762-23.09v-3c-14.247 0-25.762 11.7-25.762 26.09h3zM131.18 83.5c12.553 0 22.763 10.319 22.763 23.09h3c0-14.39-11.516-26.09-25.763-26.09v3zM81.701 44.42H61.016v3h20.685v-3zM61.016 69.089h20.685v-3H61.016v3zm-1.5-23.167v21.667h3V45.92h-3zm-26.34 48.336H12.492v3h20.684v-3zm-20.684 24.667h20.684v-3H12.492v3zm-1.5-23.167v21.667h3V95.757h-3zm120.859-1.5h-20.999v3h20.999v-3zm-20.999 24.667h20.999v-3h-20.999v3zm-1.5-23.167v21.667h3V95.757h-3z" fill="#00AE99"/></svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
1
packages/website/ts/icons/illustrations/whitelistFilter.svg
generated
Normal file
1
packages/website/ts/icons/illustrations/whitelistFilter.svg
generated
Normal file
@ -0,0 +1 @@
|
||||
<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M141.672 31.508h1.5v-1.5h-1.5v1.5zm-120 0v-1.5h-1.5v1.5h1.5zm83.333 36.67h-1.5v1.5h1.5v-1.5zm-83.333 66.365l-1.13.985 1.13-.985zm27.632-49.346l-.917 1.187 1.17.903.92-1.156-1.173-.934zm0 36.983l-.917 1.187 1.17.904.92-1.156-1.173-.935zm0 17.672l-.917 1.187 1.17.904.92-1.156-1.173-.935zM3.5 82C3.5 38.646 38.646 3.5 82 3.5v-3C36.989.5.5 36.989.5 82h3zM82 3.5c43.354 0 78.5 35.146 78.5 78.5h3C163.5 36.989 127.011.5 82 .5v3zm58.172 28.008v36.67h3v-36.67h-3zm-118.5 1.5h83.333v-3H21.672v3zm83.333 0h36.667v-3h-36.667v3zm37.728 34.11l-36.667-36.67-2.121 2.12 36.666 36.67 2.122-2.12zm-39.228-35.61v36.67h3v-36.67h-3zm1.5 38.17h36.667v-3h-36.667v3zm35.167-1.5v67.108h3V68.178h-3zM160.5 82c0 20.084-7.54 38.403-19.946 52.286l2.237 1.999C155.669 121.873 163.5 102.849 163.5 82h-3zm-19.946 52.286C126.176 150.376 105.271 160.5 82 160.5v3c24.161 0 45.868-10.516 60.791-27.215l-2.237-1.999zm-117.382.257V31.508h-3v103.035h3zM82 160.5c-23.621 0-44.804-10.431-59.197-26.943l-2.262 1.971C35.481 152.666 57.476 163.5 82 163.5v-3zm-59.197-26.943C10.78 119.764 3.5 101.734 3.5 82h-3c0 20.486 7.56 39.21 20.041 53.528l2.262-1.971zm39.15-50.139h55.49v-3h-55.49v3zm-7.294-7.353l-6.528 8.197 2.346 1.87 6.529-8.198-2.347-1.868zm-4.438 7.945l-5.304-4.099-1.834 2.374 5.304 4.099 1.834-2.374zm11.732 17.9h55.49v-3h-55.49v3zm-7.14-8.338l-5.305 4.918 2.04 2.2 5.304-4.918-2.04-2.2zm-5.305 4.918l-5.304 4.918 2.04 2.2 5.304-4.918-2.04-2.2zm12.445 21.912h55.49v-3h-55.49v3zm-7.294-7.353l-6.528 8.197 2.346 1.869 6.529-8.197-2.347-1.869zm-4.438 7.944l-5.304-4.098-1.834 2.374 5.304 4.098 1.834-2.374zm-6.017-25.22l5.304 4.917 2.04-2.2-5.304-4.918-2.04 2.2zm5.304 4.917l5.305 4.918 2.04-2.2-5.305-4.918-2.04 2.2zm12.445 37.384h55.49v-3h-55.49v3zm-7.294-7.353l-6.528 8.197 2.346 1.869 6.529-8.197-2.347-1.869zm-4.438 7.944l-5.304-4.098-1.834 2.374 5.304 4.098 1.834-2.374z" fill="#00AE99"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -22,6 +22,7 @@ import { NextAboutPress } from 'ts/pages/about/press';
|
||||
import { NextAboutTeam } from 'ts/pages/about/team';
|
||||
import { Credits } from 'ts/pages/credits';
|
||||
import { NextEcosystem } from 'ts/pages/ecosystem';
|
||||
import { Extensions } from 'ts/pages/extensions';
|
||||
import { Governance } from 'ts/pages/governance/governance';
|
||||
import { Next0xInstant } from 'ts/pages/instant';
|
||||
import { NextLanding } from 'ts/pages/landing';
|
||||
@ -117,6 +118,7 @@ render(
|
||||
<Route exact={true} path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} />
|
||||
<Route exact={true} path={WebsitePaths.Ecosystem} component={NextEcosystem as any} />
|
||||
<Route exact={true} path={WebsitePaths.Vote} component={Governance as any} />
|
||||
<Route exact={true} path={WebsitePaths.Extensions} component={Extensions as any} />
|
||||
<Route
|
||||
exact={true}
|
||||
path={WebsitePaths.AboutMission}
|
||||
|
||||
@ -92,10 +92,10 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout
|
||||
title="Join Us in Our Mission"
|
||||
description={
|
||||
<>
|
||||
<Paragraph size="medium">
|
||||
<Paragraph size="medium" isMuted={0.65}>
|
||||
To create a tokenized world where all value can flow freely.
|
||||
</Paragraph>
|
||||
<Paragraph size="medium">
|
||||
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
|
||||
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.
|
||||
|
||||
@ -7,7 +7,7 @@ import { Definition } from 'ts/components/definition';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Image } from 'ts/components/image';
|
||||
import { Column, Section } from 'ts/components/newLayout';
|
||||
import { Heading } from 'ts/components/text';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
@ -35,7 +35,16 @@ const values = [
|
||||
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."
|
||||
description={
|
||||
<>
|
||||
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
|
||||
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.
|
||||
</Paragraph>
|
||||
</>
|
||||
}
|
||||
linkLabel="Our mission and values"
|
||||
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
|
||||
>
|
||||
@ -57,6 +66,7 @@ export const NextAboutMission = () => (
|
||||
<Column width="100%" maxWidth="800px">
|
||||
{_.map(values, (item, index) => (
|
||||
<StyledDefinition
|
||||
key={`coreValue-${index}`}
|
||||
icon={item.icon}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
|
||||
@ -57,7 +57,7 @@ export const NextAboutPress = () => (
|
||||
title="Press Highlights"
|
||||
description={
|
||||
<>
|
||||
<Paragraph size="medium" marginBottom="60px">
|
||||
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
|
||||
Want to write about 0x? <a href="mailto:team@0xproject.com">Get in touch.</a>
|
||||
</Paragraph>
|
||||
|
||||
|
||||
@ -191,7 +191,14 @@ const advisors: TeamMember[] = [
|
||||
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."
|
||||
description={
|
||||
<Paragraph size="medium" marginBottom="60px" isMuted={0.65}>
|
||||
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.
|
||||
</Paragraph>
|
||||
// tslint:disable-next-line:jsx-curly-spacing
|
||||
}
|
||||
linkLabel="Join the team"
|
||||
to={WebsitePaths.AboutJobs}
|
||||
>
|
||||
|
||||
159
packages/website/ts/pages/extensions.tsx
Normal file
159
packages/website/ts/pages/extensions.tsx
Normal file
@ -0,0 +1,159 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Hero } from 'ts/components/hero';
|
||||
|
||||
import { Banner } from 'ts/components/banner';
|
||||
import { Button } from 'ts/components/button';
|
||||
import { Card, LinkProps } from 'ts/components/card';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Icon } from 'ts/components/icon';
|
||||
import { SiteWrap } from 'ts/components/siteWrap';
|
||||
import { WebsitePaths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
import { ModalContact } from '../components/modals/modal_contact';
|
||||
|
||||
interface Extension {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
links?: LinkProps[];
|
||||
}
|
||||
|
||||
const extensionData: Extension[] = [
|
||||
{
|
||||
icon: 'dutchAuction',
|
||||
title: 'Dutch Auction',
|
||||
description: `Dutch Auctions continually reduce prices until a buyer is found. They're perfect for new or rare assets, and with 0x's off-chain model, they're gas-efficient as well.`,
|
||||
links: [
|
||||
{
|
||||
text: 'Explore the Docs',
|
||||
url: `${WebsitePaths.Wiki}#0x-Extensions`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'forwarderContract',
|
||||
title: 'Forwarder Contract',
|
||||
description: `Say goodbye to WETH! The Forwarder Contract will automatically wrap ETH and fill orders, making buying assets on 0x one step simpler.`,
|
||||
links: [
|
||||
{
|
||||
text: 'Explore the Docs',
|
||||
url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: 'whitelistFilter',
|
||||
title: 'Whitelist Filter',
|
||||
description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
|
||||
links: [
|
||||
{
|
||||
text: 'Explore the Docs',
|
||||
url: `${WebsitePaths.Wiki}#0x-Extensions`,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export class Extensions extends React.Component {
|
||||
public state = {
|
||||
isContactModalOpen: false,
|
||||
};
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<SiteWrap theme="dark">
|
||||
<DocumentTitle {...documentConstants.EXTENSIONS} />
|
||||
<Hero
|
||||
isLargeTitle={false}
|
||||
isFullWidth={false}
|
||||
title="0x Extensions"
|
||||
description="Support new types of trading on your relayer with 0x Extensions"
|
||||
figure={<Icon name="extensions" size="hero" margin={['small', 0, 'small', 0]} />}
|
||||
actions={<HeroActions />}
|
||||
/>
|
||||
|
||||
<CustomSection>
|
||||
<Grid>
|
||||
{_.map(extensionData, (item, index) => (
|
||||
<Card
|
||||
key={`extensionCard-${index}`}
|
||||
heading={item.title}
|
||||
description={item.description}
|
||||
icon={item.icon}
|
||||
links={item.links}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</CustomSection>
|
||||
|
||||
<Banner
|
||||
heading="Create your own 0x extension contracts"
|
||||
subline="Developers can build custom extensions on 0x to add new modes of exchange"
|
||||
mainCta={{
|
||||
text: 'Get Started',
|
||||
href: `${WebsitePaths.Wiki}#0x-Extensions`,
|
||||
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={`${WebsitePaths.Wiki}#0x-Extensions`} isInline={true} target="_blank">
|
||||
Get Started
|
||||
</Button>
|
||||
|
||||
<Button href={constants.URL_EXTENSIONS_BLOG_POST} isTransparent={true} isInline={true} target="_blank">
|
||||
Learn More!
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const CustomSection = styled.div`
|
||||
width: calc(100% - 60px);
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 0 0 60px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 0 40px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Grid = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1560px) {
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
@ -1,30 +1,32 @@
|
||||
import { Styles } from '@0x/react-shared';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
export interface FullscreenMessageProps {
|
||||
headerText: string;
|
||||
bodyText: string;
|
||||
}
|
||||
|
||||
const styles: Styles = {
|
||||
thin: {
|
||||
fontWeight: 100,
|
||||
},
|
||||
};
|
||||
|
||||
export const FullscreenMessage = (props: FullscreenMessageProps) => {
|
||||
return (
|
||||
<div className="mx-auto max-width-4 py4">
|
||||
<div className="center py4">
|
||||
<div className="py4">
|
||||
<div className="py4">
|
||||
<h1 style={styles.thin}>{props.headerText}</h1>
|
||||
<div className="py1">
|
||||
<div className="py3">{props.bodyText}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading>{props.headerText}</Heading>
|
||||
<Paragraph>{props.bodyText}</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Heading = styled.h1`
|
||||
color: ${colors.brandLight};
|
||||
font-size: 78px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 35px;
|
||||
`;
|
||||
|
||||
const Paragraph = styled.p`
|
||||
color: #7a7a7a;
|
||||
font-size: 22px;
|
||||
line-height: 1.409090909;
|
||||
`;
|
||||
|
||||
@ -80,15 +80,6 @@ export class ModalVote extends React.Component<Props> {
|
||||
errors: {},
|
||||
};
|
||||
// shared fields
|
||||
public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public emailRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public companyProjectRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public commentsRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
// general lead fields
|
||||
public linkRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
// market maker lead fields
|
||||
public countryRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
@ -106,15 +106,7 @@ export class VoteForm extends React.Component<Props> {
|
||||
errors: {},
|
||||
};
|
||||
// shared fields
|
||||
public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public emailRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public companyProjectRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public commentsRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
// general lead fields
|
||||
public linkRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
// market maker lead fields
|
||||
public countryRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
@ -26,21 +26,16 @@ export const Select: React.FunctionComponent<SelectProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<Container>
|
||||
<StyledSelect id={id} onChange={onChange}>
|
||||
<StyledSelect id={id} onChange={onChange} defaultValue={value}>
|
||||
{shouldIncludeEmpty && <option value="">{emptyText}</option>}
|
||||
{items.map((item, index) => (
|
||||
<option
|
||||
key={`${id}-item-${index}`}
|
||||
value={item.value}
|
||||
selected={item.value === value}
|
||||
onClick={item.onClick}
|
||||
>
|
||||
<option key={`${id}-item-${index}`} value={item.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" />
|
||||
<path d="M11 1L6 6 1 1" stroke="#666" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Caret>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { Footer } from 'ts/components/old_footer';
|
||||
import { TopBar } from 'ts/components/top_bar/top_bar';
|
||||
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { SiteWrap } from 'ts/components/siteWrap';
|
||||
import { FullscreenMessage } from 'ts/pages/fullscreen_message';
|
||||
import { Dispatcher } from 'ts/redux/dispatcher';
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
export interface NotFoundProps {
|
||||
@ -11,15 +14,17 @@ export interface NotFoundProps {
|
||||
dispatcher: Dispatcher;
|
||||
}
|
||||
|
||||
export const NotFound = (props: NotFoundProps) => {
|
||||
export class NotFound extends React.Component<NotFoundProps> {
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div>
|
||||
<TopBar blockchainIsLoaded={false} location={props.location} translate={props.translate} />
|
||||
<SiteWrap isFullScreen={true}>
|
||||
<DocumentTitle {...documentConstants.LANDING} />
|
||||
|
||||
<FullscreenMessage
|
||||
headerText={'404 Not Found'}
|
||||
headerText={'404'}
|
||||
bodyText={"Hm... looks like we couldn't find what you are looking for."}
|
||||
/>
|
||||
<Footer translate={props.translate} dispatcher={props.dispatcher} />
|
||||
</div>
|
||||
</SiteWrap>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -386,6 +386,7 @@ export enum WebsitePaths {
|
||||
Careers = '/careers',
|
||||
Credits = '/credits',
|
||||
Vote = '/vote',
|
||||
Extensions = '/extensions',
|
||||
}
|
||||
|
||||
export enum DocPackages {
|
||||
|
||||
@ -77,6 +77,7 @@ export const constants = {
|
||||
URL_BLOG: 'https://blog.0xproject.com',
|
||||
URL_DISCOURSE_FORUM: 'https://forum.0x.org',
|
||||
URL_ECOSYSTEM_APPLY: 'https://0x.smapply.io/',
|
||||
URL_EXTENSIONS_BLOG_POST: 'https://blog.0xproject.com/0x-extensions-enabling-new-types-of-exchange-1db0bf6125b6',
|
||||
URL_ECOSYSTEM_BLOG_POST: 'https://blog.0xproject.com/announcing-the-0x-ecosystem-acceleration-program-89d1cb89d565',
|
||||
URL_VOTE_BLOG_POST: 'https://blog.0xproject.com/zeip-23-trade-bundles-of-assets-fe69eb3ed960',
|
||||
URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
|
||||
|
||||
@ -86,4 +86,9 @@ export const documentConstants: { [s: string]: DocumentMetadata } = {
|
||||
'0x is an open protocol that is governed by its users. Cast your votes with ZRX on 0x Improvement Proposals.',
|
||||
keywords: '',
|
||||
},
|
||||
EXTENSIONS: {
|
||||
title: '0x Extensions',
|
||||
description: 'Support new types of trading on your relayer with 0x Extensions',
|
||||
keywords: '',
|
||||
},
|
||||
};
|
||||
|
||||
32
packages/website/ts/utils/filter_props.tsx
Normal file
32
packages/website/ts/utils/filter_props.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import * as React from 'react';
|
||||
|
||||
interface FilteredPropsInterface {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export const withFilteredProps = (Component: React.ComponentType<any>, allowedProps: string[]) =>
|
||||
class WithFilteredProps extends React.Component<FilteredPropsInterface> {
|
||||
constructor(props: FilteredPropsInterface) {
|
||||
super(props);
|
||||
}
|
||||
public filterProps(): any {
|
||||
const props = this.props;
|
||||
/* tslint:disable:no-any */
|
||||
const filteredProps: FilteredPropsInterface = {};
|
||||
let key;
|
||||
|
||||
for (key in this.props) {
|
||||
if (allowedProps.includes(key)) {
|
||||
/* tslint:disable:no-any */
|
||||
filteredProps[key] = props[key];
|
||||
}
|
||||
}
|
||||
|
||||
/* tslint:disable:no-any */
|
||||
return filteredProps;
|
||||
}
|
||||
public render(): React.ReactNode {
|
||||
const filteredProps = this.filterProps();
|
||||
return <Component {...filteredProps}>{this.props.children}</Component>;
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user