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

Merge pull request #1447 from 0xProject/feature/website/0x-org-jank-links

Browse Source 
[website] Fix 0x org jank links
This commit is contained in:
Francesco Agosti
2018-12-17 16:33:57 -08:00
committed by GitHub
parent 8925317c95 a6fa15c94a
commit ed4573fe2c
12 changed files with 208 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react-shared/CHANGELOG.json
View File

@@ -1,4 +1,14 @@
[ [
{
"version": "1.1.0",
"changes": [
{
"note":
"Change implementation to use react-router-dom NavLink instead of Link. Expose `activeStyle` prop.",
"pr": 1448
}
]
},
{ {
"version": "1.0.25", "version": "1.0.25",
"changes": [ "changes": [

13
packages/react-shared/src/components/link.tsx
View File

@@ -1,13 +1,13 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import { Link as ReactRounterLink } from 'react-router-dom'; import { NavLink as ReactRounterLink } from 'react-router-dom';
import { Link as ScrollLink } from 'react-scroll'; import { Link as ScrollLink } from 'react-scroll';
import * as validUrl from 'valid-url'; import * as validUrl from 'valid-url';
import { LinkType } from '../types'; import { LinkType } from '../types';
import { constants } from '../utils/constants'; import { constants } from '../utils/constants';
interface BaseLinkProps { export interface BaseLinkProps {
to: string; to: string;
shouldOpenInNewTab?: boolean; shouldOpenInNewTab?: boolean;
className?: string; className?: string;
@@ -18,11 +18,15 @@ interface BaseLinkProps {
fontColor?: string; fontColor?: string;
} }
interface ScrollLinkProps extends BaseLinkProps { export interface ScrollLinkProps extends BaseLinkProps {
onActivityChanged?: (isActive: boolean) => void; onActivityChanged?: (isActive: boolean) => void;
} }
type LinkProps = BaseLinkProps & ScrollLinkProps; export interface ReactLinkProps extends BaseLinkProps {
activeStyle?: React.CSSProperties;
}
export type LinkProps = ReactLinkProps & ScrollLinkProps;
export interface LinkState {} export interface LinkState {}
@@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
onMouseOver={this.props.onMouseOver} onMouseOver={this.props.onMouseOver}
onMouseEnter={this.props.onMouseEnter} onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave} onMouseLeave={this.props.onMouseLeave}
activeStyle={this.props.activeStyle}
> >
{this.props.children} {this.props.children}
</ReactRounterLink> </ReactRounterLink>

2
packages/react-shared/src/index.ts
View File

@@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block';
export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownCodeBlock } from './components/markdown_code_block';
export { MarkdownSection } from './components/markdown_section'; export { MarkdownSection } from './components/markdown_section';
export { SectionHeader } from './components/section_header'; export { SectionHeader } from './components/section_header';
export { Link } from './components/link'; export { Link, LinkProps } from './components/link';
export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';

98
packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
View File

@@ -1,63 +1,73 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import {Link as RouterLink} from 'react-router-dom'; import styled, { withTheme } from 'styled-components';
import styled, {withTheme} from 'styled-components';
import {Button} from 'ts/@next/components/button'; import { Button } from 'ts/@next/components/button';
import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout'; import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
import {Heading} from 'ts/@next/components/text'; import { Heading } from 'ts/@next/components/text';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface Props { interface Props {
theme: ThemeValuesInterface; theme: ThemeValuesInterface;
} }
const introData = [ interface LinkConfig {
label: string;
url: string;
shouldOpenInNewTab?: boolean;
}
const introData: LinkConfig[] = [
{ {
label: 'Build a relayer', label: 'Build a relayer',
url: 'https://0x.org/wiki#Build-A-Relayer', url: `${WebsitePaths.Wiki}#Build-A-Relayer`,
}, },
{ {
label: 'Develop on Ethereum', label: 'Develop on Ethereum',
url: 'https://0x.org/wiki#Ethereum-Development', url: `${WebsitePaths.Wiki}#Ethereum-Development`,
}, },
{ {
label: 'Make & take orders', label: 'Make & take orders',
url: 'https://0x.org/wiki#Create,-Validate,-Fill-Order', url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
}, },
{ {
label: 'Use networked liquidity', label: 'Use networked liquidity',
url: 'https://0x.org/wiki#Find,-Submit,-Fill-Order-From-Relayer', url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
}, },
]; ];
const docsData = [ const docsData: LinkConfig[] = [
{ {
label: '0x.js', label: '0x.js',
url: 'https://0x.org/docs/0x.js', url: WebsitePaths.ZeroExJs,
}, },
{ {
label: '0x Connect', label: '0x Connect',
url: 'https://0x.org/docs/connect', url: WebsitePaths.Connect,
}, },
{ {
label: 'Smart Contract', label: 'Smart Contract',
url: 'https://0x.org/docs/contracts', url: WebsitePaths.SmartContracts,
}, },
]; ];
const linksData = [ const linksData: LinkConfig[] = [
{ {
label: 'Wiki', label: 'Wiki',
url: 'https://0x.org/wiki', url: WebsitePaths.Wiki,
}, },
{ {
label: 'Github', label: 'Github',
url: 'https://github.com/0xProject', url: constants.URL_GITHUB_ORG,
shouldOpenInNewTab: true,
}, },
{ {
label: 'Whitepaper', label: 'Protocol specification',
url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', url: constants.URL_PROTOCOL_SPECIFICATION,
shouldOpenInNewTab: true,
}, },
]; ];
@@ -65,25 +75,16 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro
<> <>
<DropdownWrap> <DropdownWrap>
<div> <div>
<Heading <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
asElement="h4"
size={14}
color="inherit"
marginBottom="15px"
isMuted={0.35}
>
Getting Started Getting Started
</Heading> </Heading>
<StyledGrid isCentered={false} isWrapped={true}> <StyledGrid isCentered={false} isWrapped={true}>
{_.map(introData, (item, index) => ( {_.map(introData, (item, index) => (
<li> <li>
<RouterLink <Link key={`introLink-${index}`} to={item.url}>
key={`introLink-${index}`}
to={item.url}
>
{item.label} {item.label}
</RouterLink> </Link>
</li> </li>
))} ))}
</StyledGrid> </StyledGrid>
@@ -91,51 +92,44 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro
<StyledWrap> <StyledWrap>
<Column width="calc(100% - 15px)"> <Column width="calc(100% - 15px)">
<Heading <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
asElement="h4"
size={14}
color="inherit"
marginBottom="15px"
isMuted={0.35}
>
Popular Docs Popular Docs
</Heading> </Heading>
<ul> <ul>
{_.map(docsData, (item, index) => ( {_.map(docsData, (item, index) => (
<li key={`docsLink-${index}`}> <li key={`docsLink-${index}`}>
<RouterLink to={item.url}> <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
{item.label} {item.label}
</RouterLink> </Link>
</li> </li>
))} ))}
</ul> </ul>
</Column> </Column>
<Column width="calc(100% - 15px)"> <Column width="calc(100% - 15px)">
<Heading <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
asElement="h4"
size={14}
color="inherit"
marginBottom="15px"
isMuted={0.35}
>
Useful Links Useful Links
</Heading> </Heading>
<ul> <ul>
{_.map(linksData, (item, index) => ( {_.map(linksData, (item, index) => (
<li key={`usefulLink-${index}`}> <li key={`usefulLink-${index}`}>
<RouterLink to={item.url}> <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
{item.label} {item.label}
</RouterLink> </Link>
</li> </li>
))} ))}
</ul> </ul>
</Column> </Column>
</StyledWrap> </StyledWrap>
<StyledLink to="https://0x.org/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}> <StyledLink
to={WebsitePaths.Docs}
bgColor={props.theme.dropdownButtonBg}
isAccentColor={true}
isNoBorder={true}
>
View All Documentation View All Documentation
</StyledLink> </StyledLink>
</DropdownWrap> </DropdownWrap>
@@ -174,7 +168,7 @@ const StyledWrap = styled(FlexWrap)`
opacity: 0.15; opacity: 0.15;
position: absolute; position: absolute;
top: 0; top: 0;
left:0; left: 0;
} }
`; `;

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

@@ -1,3 +1,4 @@
import { Link as SmartLink } from '@0x/react-shared';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
@@ -8,11 +9,12 @@ import { Logo } from 'ts/@next/components/logo';
import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import { NewsletterForm } from 'ts/@next/components/newsletter_form'; import { NewsletterForm } from 'ts/@next/components/newsletter_form';
import { WebsitePaths } from 'ts/types'; import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface LinkInterface { interface LinkInterface {
text: string; text: string;
url: string; url: string;
newWindow?: boolean; shouldOpenInNewTab?: boolean;
} }
interface LinkRows { interface LinkRows {
@@ -37,9 +39,9 @@ const linkRows: LinkRows[] = [
{ {
heading: 'Developers', heading: 'Developers',
links: [ links: [
{ url: '#', text: 'Documentation' }, { url: WebsitePaths.Docs, text: 'Documentation' },
{ url: '#', text: 'GitHub' }, { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
{ url: '#', text: 'Whitepaper' }, { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protogcol Spec', shouldOpenInNewTab: true },
], ],
}, },
{ {
@@ -49,7 +51,7 @@ const linkRows: LinkRows[] = [
{ url: WebsitePaths.AboutMission, text: 'Mission' }, { url: WebsitePaths.AboutMission, text: 'Mission' },
{ url: WebsitePaths.AboutTeam, text: 'Team' }, { url: WebsitePaths.AboutTeam, text: 'Team' },
{ url: WebsitePaths.AboutJobs, text: 'Jobs' }, { url: WebsitePaths.AboutJobs, text: 'Jobs' },
{ url: WebsitePaths.AboutPress, text: 'Press Kit' }, { url: WebsitePaths.AboutPress, text: 'Press' },
{ url: WebsitePaths.Ecosystem, text: 'Grant Program' }, { url: WebsitePaths.Ecosystem, text: 'Grant Program' },
], ],
}, },
@@ -57,10 +59,10 @@ const linkRows: LinkRows[] = [
heading: 'Community', heading: 'Community',
isOnMobile: true, isOnMobile: true,
links: [ links: [
{ url: '#', text: 'Twitter' }, { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
{ url: '#', text: 'Rocket Chat' }, { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
{ url: '#', text: 'Facebook' }, { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
{ url: '#', text: 'Reddit' }, { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
], ],
}, },
]; ];
@@ -78,9 +80,7 @@ export const Footer: React.StatelessComponent = () => (
{_.map(linkRows, (row: LinkRows, index) => ( {_.map(linkRows, (row: LinkRows, index) => (
<MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}> <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
<FooterSectionWrap> <FooterSectionWrap>
<RowHeading> <RowHeading>{row.heading}</RowHeading>
{row.heading}
</RowHeading>
<LinkList links={row.links} /> <LinkList links={row.links} />
</FooterSectionWrap> </FooterSectionWrap>
@@ -93,15 +93,15 @@ export const Footer: React.StatelessComponent = () => (
); );
const LinkList = (props: LinkListProps) => ( const LinkList = (props: LinkListProps) => (
<List> <List>
{_.map(props.links, (link, index) => ( {_.map(props.links, (link, index) => (
<li key={`fl-${index}`}> <li key={`fl-${index}`}>
<Link to={link.url}> <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
{link.text} {link.text}
</Link> </Link>
</li> </li>
))} ))}
</List> </List>
); );
const FooterWrap = styled.footer` const FooterWrap = styled.footer`
@@ -154,7 +154,7 @@ const List = styled.ul`
} }
`; `;
const Link = styled(ReactRouterLink)` const Link = styled(SmartLink)`
color: inherit; color: inherit;
opacity: 0.5; opacity: 0.5;
display: block; display: block;

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

@@ -1,8 +1,8 @@
import { Link } from '@0x/react-shared';
import _ from 'lodash'; import _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import { NavLink as ReactRouterLink } from 'react-router-dom'; import styled, { css, withTheme } from 'styled-components';
import styled, { withTheme } from 'styled-components';
import Headroom from 'react-headroom'; import Headroom from 'react-headroom';
@@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav';
import { FlexWrap } from 'ts/@next/components/newLayout'; import { FlexWrap } from 'ts/@next/components/newLayout';
import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
import { WebsitePaths } from 'ts/types'; import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface HeaderProps { interface HeaderProps {
location?: Location; location?: Location;
@@ -29,6 +30,7 @@ interface NavItemProps {
text?: string; text?: string;
dropdownWidth?: number; dropdownWidth?: number;
dropdownComponent?: React.ReactNode; dropdownComponent?: React.ReactNode;
shouldOpenInNewTab?: boolean;
} }
interface DropdownWrapInterface { interface DropdownWrapInterface {
@@ -43,14 +45,12 @@ const navItems: NavItemProps[] = [
}, },
{ {
id: 'products', id: 'products',
url: '#',
text: 'Products', text: 'Products',
dropdownComponent: DropdownProducts, dropdownComponent: DropdownProducts,
dropdownWidth: 280, dropdownWidth: 280,
}, },
{ {
id: 'developers', id: 'developers',
url: '#',
text: 'Developers', text: 'Developers',
dropdownComponent: DropdownDevelopers, dropdownComponent: DropdownDevelopers,
dropdownWidth: 480, dropdownWidth: 480,
@@ -62,7 +62,8 @@ const navItems: NavItemProps[] = [
}, },
{ {
id: 'blog', id: 'blog',
url: 'https://blog.0x.org/latest', url: constants.URL_BLOG,
shouldOpenInNewTab: true,
text: 'Blog', text: 'Blog',
}, },
]; ];
@@ -72,7 +73,7 @@ class HeaderBase extends React.Component<HeaderProps> {
if (this.props.isNavToggled) { if (this.props.isNavToggled) {
this.props.toggleMobileNav(); this.props.toggleMobileNav();
} }
} };
public render(): React.ReactNode { public render(): React.ReactNode {
const { isNavToggled, toggleMobileNav, theme } = this.props; const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -81,25 +82,16 @@ class HeaderBase extends React.Component<HeaderProps> {
<Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}> <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
<StyledHeader isNavToggled={isNavToggled}> <StyledHeader isNavToggled={isNavToggled}>
<HeaderWrap> <HeaderWrap>
<ReactRouterLink to={WebsitePaths.Home}> <Link to={WebsitePaths.Home}>
<Logo /> <Logo />
</ReactRouterLink> </Link>
<NavLinks> <NavLinks>
{_.map(navItems, (link, index) => ( {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
<NavItem
key={`navlink-${index}`}
link={link}
/>
))}
</NavLinks> </NavLinks>
<MediaQuery minWidth={990}> <MediaQuery minWidth={990}>
<TradeButton <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal">
bgColor={theme.headerButtonBg}
color="#ffffff"
href="/portal"
>
Trade on 0x Trade on 0x
</TradeButton> </TradeButton>
</MediaQuery> </MediaQuery>
@@ -118,23 +110,30 @@ export const Header = withTheme(HeaderBase);
const NavItem = (props: { link: NavItemProps; key: string }) => { const NavItem = (props: { link: NavItemProps; key: string }) => {
const { link } = props; const { link } = props;
const Subnav = link.dropdownComponent; const Subnav = link.dropdownComponent;
const linkElement = _.isUndefined(link.url) ? (
<StyledAnchor href="#">{link.text}</StyledAnchor>
) : (
<StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
{link.text}
</StyledNavLink>
);
return ( return (
<LinkWrap> <LinkWrap>
<StyledNavLink to={link.url}> {linkElement}
{link.text}
</StyledNavLink>
{link.dropdownComponent && {link.dropdownComponent && (
<DropdownWrap width={link.dropdownWidth}> <DropdownWrap width={link.dropdownWidth}>
<Subnav /> <Subnav />
</DropdownWrap> </DropdownWrap>
} )}
</LinkWrap> </LinkWrap>
); );
}; };
const StyledHeader = styled.header<HeaderProps>` const StyledHeader =
styled.header <
HeaderProps >
`
padding: 30px; padding: 30px;
background-color: ${props => props.theme.bgColor}; background-color: ${props => props.theme.bgColor};
`; `;
@@ -157,9 +156,7 @@ const LinkWrap = styled.li`
} }
`; `;
const StyledNavLink = styled(ReactRouterLink).attrs({ const linkStyles = css`
activeStyle: { opacity: 1 },
})`
color: ${props => props.theme.textColor}; color: ${props => props.theme.textColor};
opacity: 0.5; opacity: 0.5;
transition: opacity 0.35s; transition: opacity 0.35s;
@@ -171,15 +168,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
} }
`; `;
const HeaderWrap = styled(FlexWrap)` const StyledNavLink = styled(Link).attrs({
justify-content: space-between; activeStyle: { opacity: 1 },
align-items: center; })`
${linkStyles};
`;
@media (max-width: 800px) { const StyledAnchor = styled.a`
padding-top: 0; ${linkStyles};
display: flex; `;
padding-bottom: 0;
} const HeaderWrap = styled(FlexWrap)`
justify-content: space-between;
align-items: center;
@media (max-width: 800px) {
padding-top: 0;
display: flex;
padding-bottom: 0;
}
`; `;
const NavLinks = styled.ul` const NavLinks = styled.ul`
@@ -192,7 +199,10 @@ const NavLinks = styled.ul`
} }
`; `;
const DropdownWrap = styled.div<DropdownWrapInterface>` const DropdownWrap =
styled.div <
DropdownWrapInterface >
`
width: ${props => props.width || 280}px; width: ${props => props.width || 280}px;
padding: 15px 0; padding: 15px 0;
border: 1px solid transparent; border: 1px solid transparent;

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

@@ -1,5 +1,5 @@
import { Link as SmartLink } from '@0x/react-shared';
import * as React from 'react'; import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
interface LinkInterface { interface LinkInterface {
@@ -13,11 +13,11 @@ interface LinkInterface {
theme?: { theme?: {
textColor: string; textColor: string;
}; };
target?: string; shouldOpenInNewTab?: boolean;
} }
export const Link = (props: LinkInterface) => { export const Link = (props: LinkInterface) => {
const { children, isNoArrow, href, target } = props; const { children, isNoArrow, href } = props;
return ( return (
<StyledLink to={href} {...props}> <StyledLink to={href} {...props}>
@@ -44,7 +44,7 @@ export const LinkWrap = styled.div`
`; `;
const StyledLink = const StyledLink =
styled(ReactRouterLink) < styled(SmartLink) <
LinkInterface > LinkInterface >
` `
display: ${props => !props.isBlock && 'inline-flex'}; display: ${props => !props.isBlock && 'inline-flex'};

45
packages/website/ts/@next/components/mobileNav.tsx
View File

@@ -2,9 +2,9 @@ import * as React from 'react';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import styled from 'styled-components'; import styled from 'styled-components';
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout'; import { WrapGrid, WrapProps } from 'ts/@next/components/newLayout';
import { WebsitePaths } from 'ts/types'; import { WebsitePaths } from 'ts/types';
interface Props { interface Props {
@@ -24,14 +24,10 @@ export class MobileNav extends React.PureComponent<Props> {
<ul> <ul>
<li> <li>
<Link to={WebsitePaths.Instant}> <Link to={WebsitePaths.Instant}>0x Instant</Link>
0x Instant
</Link>
</li> </li>
<li> <li>
<Link to={WebsitePaths.LaunchKit}> <Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
0x Launch Kit
</Link>
</li> </li>
</ul> </ul>
</Section> </Section>
@@ -39,39 +35,36 @@ export class MobileNav extends React.PureComponent<Props> {
<Section isDark={true}> <Section isDark={true}>
<Grid as="ul" isFullWidth={true} isWrapped={true}> <Grid as="ul" isFullWidth={true} isWrapped={true}>
<li> <li>
<Link to={WebsitePaths.Why}> <Link to={WebsitePaths.Why}>Why 0x</Link>
Why 0x
</Link>
</li> </li>
<li> <li>
<Link to={WebsitePaths.AboutMission}> <Link to={WebsitePaths.AboutMission}>About</Link>
About
</Link>
</li> </li>
<li> <li>
<a href="https://blog.0x.org/latest" target="_blank"> <a href="https://blog.0xproject.com/latest" target="_blank">
Blog Blog
</a> </a>
</li> </li>
</Grid> </Grid>
</Section> </Section>
{isToggled && {isToggled && <Overlay onClick={toggleMobileNav} />}
<Overlay onClick={toggleMobileNav} />
}
</Wrap> </Wrap>
</MediaQuery> </MediaQuery>
); );
} }
} }
const Wrap = styled.nav<{ isToggled: boolean }>` const Wrap =
styled.nav <
{ isToggled: boolean } >
`
width: 100%; width: 100%;
height: 357px; height: 357px;
background-color: ${props => props.theme.mobileNavBgUpper}; background-color: ${props => props.theme.mobileNavBgUpper};
color: ${props => props.theme.mobileNavColor}; color: ${props => props.theme.mobileNavColor};
transition: ${props => props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s'}; transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')};
transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0); transform: translate3d(0, ${props => (props.isToggled ? 0 : '-100%')}, 0);
visibility: ${props => !props.isToggled && 'hidden'}; visibility: ${props => !props.isToggled && 'hidden'};
position: fixed; position: fixed;
display: flex; display: flex;
@@ -103,13 +96,19 @@ const Overlay = styled.div`
cursor: pointer; cursor: pointer;
`; `;
const Section = styled.div<{ isDark?: boolean }>` const Section =
styled.div <
{ isDark: boolean } >
`
width: 100%; width: 100%;
padding: 15px 30px; padding: 15px 30px;
background-color: ${props => props.isDark && props.theme.mobileNavBgLower}; background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
`; `;
const Grid = styled(WrapGrid)<WrapProps>` const Grid =
styled(WrapGrid) <
WrapProps >
`
justify-content: flex-start; justify-content: flex-start;
li { li {

2
packages/website/ts/components/eth_wrappers.tsx
View File

@@ -209,7 +209,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<Divider /> <Divider />
<div className="pt2" style={{ lineHeight: 1.5 }}> <div className="pt2" style={{ lineHeight: 1.5 }}>
The{' '} The{' '}
<a href="https://blog.0x.org/canonical-weth-a9aa7d0279dd" target="_blank"> <a href={constants.URL_CANONICAL_WETH_POST} target="_blank">
canonical WETH canonical WETH
</a>{' '} </a>{' '}
contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move

2
packages/website/ts/types.ts
View File

@@ -359,7 +359,7 @@ export enum WebsitePaths {
LaunchKit = '/launch-kit', LaunchKit = '/launch-kit',
Instant = '/instant', Instant = '/instant',
Community = '/community', Community = '/community',
Ecosystem = '/ecosystem', Ecosystem = '/eap',
MarketMaker = '/market-maker', MarketMaker = '/market-maker',
Why = '/why', Why = '/why',
Whitepaper = '/pdfs/0x_white_paper.pdf', Whitepaper = '/pdfs/0x_white_paper.pdf',

8
packages/website/ts/utils/constants.ts
View File

@@ -74,7 +74,7 @@ export const constants = {
URL_ANGELLIST: 'https://angel.co/0xproject/jobs', URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0', URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0',
URL_BITLY_API: 'https://api-ssl.bitly.com', URL_BITLY_API: 'https://api-ssl.bitly.com',
URL_BLOG: 'https://blog.0x.org/latest', URL_BLOG: 'https://blog.0xproject.com/latest',
URL_DISCOURSE_FORUM: 'https://forum.0x.org', URL_DISCOURSE_FORUM: 'https://forum.0x.org',
URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/', URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
URL_TESTNET_FAUCET: 'https://faucet.0x.org', URL_TESTNET_FAUCET: 'https://faucet.0x.org',
@@ -96,17 +96,19 @@ export const constants = {
URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j',
URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
URL_TWITTER: 'https://twitter.com/0xproject', URL_TWITTER: 'https://twitter.com/0xproject',
URL_FACEBOOK: 'https://www.facebook.com/0xProject/',
URL_WETH_IO: 'https://weth.io/', URL_WETH_IO: 'https://weth.io/',
URL_CANONICAL_WETH_POST: 'https://blog.0xproject.com/canonical-weth-a9aa7d0279dd',
URL_ZEROEX_CHAT, URL_ZEROEX_CHAT,
URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit', URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',
URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0x.org/introducing-the-0x-launch-kit-4acdc3453585', URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585',
URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
URL_WEB3_DECODED_LOG_ENTRY_EVENT: URL_WEB3_DECODED_LOG_ENTRY_EVENT:
'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127', URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0x.org/the-0x-mission-and-values-181a58706f9f', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f',
DEVELOPER_TOPBAR_LINKS: [ DEVELOPER_TOPBAR_LINKS: [
{ {
title: Key.Wiki, title: Key.Wiki,

41
yarn.lock
View File

@@ -2087,6 +2087,10 @@ aes-js@^0.2.3:
version "0.2.4" version "0.2.4"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
aes-js@^3.1.1:
version "3.1.2"
resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
version "4.2.1" version "4.2.1"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3652,7 +3656,7 @@ bs-logger@0.x:
dependencies: dependencies:
fast-json-stable-stringify "^2.0.0" fast-json-stable-stringify "^2.0.0"
bs58@=4.0.1: bs58@=4.0.1, bs58@^4.0.0:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
dependencies: dependencies:
@@ -3675,6 +3679,14 @@ bs58check@^1.0.8:
bs58 "^3.1.0" bs58 "^3.1.0"
create-hash "^1.1.0" create-hash "^1.1.0"
bs58check@^2.1.2:
version "2.1.2"
resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
dependencies:
bs58 "^4.0.0"
create-hash "^1.1.0"
safe-buffer "^5.1.2"
bser@^2.0.0: bser@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -6365,6 +6377,19 @@ ethereumjs-wallet@0.6.0:
utf8 "^2.1.1" utf8 "^2.1.1"
uuid "^2.0.1" uuid "^2.0.1"
ethereumjs-wallet@~0.6.0:
version "0.6.2"
resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
dependencies:
aes-js "^3.1.1"
bs58check "^2.1.2"
ethereumjs-util "^5.2.0"
hdkey "^1.0.0"
safe-buffer "^5.1.2"
scrypt.js "^0.2.0"
utf8 "^3.0.0"
uuid "^3.3.2"
ethers@~4.0.4: ethers@~4.0.4:
version "4.0.4" version "4.0.4"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65"
@@ -7281,7 +7306,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
ethereumjs-util "^5.2.0" ethereumjs-util "^5.2.0"
ethereumjs-vm "2.3.5" ethereumjs-vm "2.3.5"
ethereumjs-wallet "0.6.0" ethereumjs-wallet "~0.6.0"
fake-merkle-patricia-tree "~1.0.1" fake-merkle-patricia-tree "~1.0.1"
heap "~0.2.6" heap "~0.2.6"
js-scrypt "^0.2.0" js-scrypt "^0.2.0"
@@ -8019,6 +8044,14 @@ hdkey@^0.7.0, hdkey@^0.7.1:
coinstring "^2.0.0" coinstring "^2.0.0"
secp256k1 "^3.0.1" secp256k1 "^3.0.1"
hdkey@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
dependencies:
coinstring "^2.0.0"
safe-buffer "^5.1.1"
secp256k1 "^3.0.1"
he@1.1.1: he@1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -16602,6 +16635,10 @@ utf8@^2.1.1:
version "2.1.2" version "2.1.2"
resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
utf8@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
util-deprecate@~1.0.1: util-deprecate@~1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"