aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 08:37:55 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-18 08:37:55 +0800
commit0aa7cbac924bffdb0d528e4e2308d7650b3e4d60 (patch)
tree0a3a61deb62a9f2bdd768f0bcc1aad24e79ef753 /packages
parent8b24b7c57c30e0294a6b66a71533613c18dd4794 (diff)
parented4573fe2c7c2d6a386040c02b27202a78928f8e (diff)
downloaddexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar.gz
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar.bz2
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar.lz
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar.xz
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.tar.zst
dexon-sol-tools-0aa7cbac924bffdb0d528e4e2308d7650b3e4d60.zip
Merge branch 'feature/website/0x-org' into feature/website/0x-org-hide-links
Diffstat (limited to 'packages')
-rw-r--r--packages/react-shared/CHANGELOG.json10
-rw-r--r--packages/react-shared/src/components/link.tsx13
-rw-r--r--packages/react-shared/src/index.ts2
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx98
-rw-r--r--packages/website/ts/@next/components/footer.tsx44
-rw-r--r--packages/website/ts/@next/components/header.tsx86
-rw-r--r--packages/website/ts/@next/components/link.tsx8
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx45
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx2
-rw-r--r--packages/website/ts/types.ts2
-rw-r--r--packages/website/ts/utils/constants.ts8
11 files changed, 169 insertions, 149 deletions
diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json
index 23e0d7f7e..9ef0d079f 100644
--- a/packages/react-shared/CHANGELOG.json
+++ b/packages/react-shared/CHANGELOG.json
@@ -1,5 +1,15 @@
[
{
+ "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",
"changes": [
{
diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
index 089e6e2ba..2fb19ac11 100644
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -1,13 +1,13 @@
import * as _ from 'lodash';
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 * as validUrl from 'valid-url';
import { LinkType } from '../types';
import { constants } from '../utils/constants';
-interface BaseLinkProps {
+export interface BaseLinkProps {
to: string;
shouldOpenInNewTab?: boolean;
className?: string;
@@ -18,11 +18,15 @@ interface BaseLinkProps {
fontColor?: string;
}
-interface ScrollLinkProps extends BaseLinkProps {
+export interface ScrollLinkProps extends BaseLinkProps {
onActivityChanged?: (isActive: boolean) => void;
}
-type LinkProps = BaseLinkProps & ScrollLinkProps;
+export interface ReactLinkProps extends BaseLinkProps {
+ activeStyle?: React.CSSProperties;
+}
+
+export type LinkProps = ReactLinkProps & ScrollLinkProps;
export interface LinkState {}
@@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
onMouseOver={this.props.onMouseOver}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
+ activeStyle={this.props.activeStyle}
>
{this.props.children}
</ReactRounterLink>
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index a693f2a36..285e1c6b4 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block';
export { MarkdownCodeBlock } from './components/markdown_code_block';
export { MarkdownSection } from './components/markdown_section';
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';
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index dfd351d32..96d88846b 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,63 +1,73 @@
+import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
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 {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
-import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
-import {Heading} from 'ts/@next/components/text';
+import { Button } from 'ts/@next/components/button';
+import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
+import { Heading } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface Props {
theme: ThemeValuesInterface;
}
-const introData = [
+interface LinkConfig {
+ label: string;
+ url: string;
+ shouldOpenInNewTab?: boolean;
+}
+
+const introData: LinkConfig[] = [
{
label: 'Build a relayer',
- url: 'https://0x.org/wiki#Build-A-Relayer',
+ url: `${WebsitePaths.Wiki}#Build-A-Relayer`,
},
{
label: 'Develop on Ethereum',
- url: 'https://0x.org/wiki#Ethereum-Development',
+ url: `${WebsitePaths.Wiki}#Ethereum-Development`,
},
{
label: 'Make & take orders',
- url: 'https://0x.org/wiki#Create,-Validate,-Fill-Order',
+ url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
},
{
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',
- url: 'https://0x.org/docs/0x.js',
+ url: WebsitePaths.ZeroExJs,
},
{
label: '0x Connect',
- url: 'https://0x.org/docs/connect',
+ url: WebsitePaths.Connect,
},
{
label: 'Smart Contract',
- url: 'https://0x.org/docs/contracts',
+ url: WebsitePaths.SmartContracts,
},
];
-const linksData = [
+const linksData: LinkConfig[] = [
{
label: 'Wiki',
- url: 'https://0x.org/wiki',
+ url: WebsitePaths.Wiki,
},
{
label: 'Github',
- url: 'https://github.com/0xProject',
+ url: constants.URL_GITHUB_ORG,
+ shouldOpenInNewTab: true,
},
{
- label: 'Whitepaper',
- url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
+ label: 'Protocol specification',
+ url: constants.URL_PROTOCOL_SPECIFICATION,
+ shouldOpenInNewTab: true,
},
];
@@ -65,25 +75,16 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro
<>
<DropdownWrap>
<div>
- <Heading
- asElement="h4"
- size={14}
- color="inherit"
- marginBottom="15px"
- isMuted={0.35}
- >
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
Getting Started
</Heading>
<StyledGrid isCentered={false} isWrapped={true}>
{_.map(introData, (item, index) => (
<li>
- <RouterLink
- key={`introLink-${index}`}
- to={item.url}
- >
+ <Link key={`introLink-${index}`} to={item.url}>
{item.label}
- </RouterLink>
+ </Link>
</li>
))}
</StyledGrid>
@@ -91,51 +92,44 @@ export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((pro
<StyledWrap>
<Column width="calc(100% - 15px)">
- <Heading
- asElement="h4"
- size={14}
- color="inherit"
- marginBottom="15px"
- isMuted={0.35}
- >
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
Popular Docs
</Heading>
<ul>
{_.map(docsData, (item, index) => (
<li key={`docsLink-${index}`}>
- <RouterLink to={item.url}>
+ <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
{item.label}
- </RouterLink>
+ </Link>
</li>
))}
</ul>
</Column>
<Column width="calc(100% - 15px)">
- <Heading
- asElement="h4"
- size={14}
- color="inherit"
- marginBottom="15px"
- isMuted={0.35}
- >
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
Useful Links
</Heading>
<ul>
{_.map(linksData, (item, index) => (
<li key={`usefulLink-${index}`}>
- <RouterLink to={item.url}>
+ <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
{item.label}
- </RouterLink>
+ </Link>
</li>
))}
</ul>
</Column>
</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
</StyledLink>
</DropdownWrap>
@@ -174,7 +168,7 @@ const StyledWrap = styled(FlexWrap)`
opacity: 0.15;
position: absolute;
top: 0;
- left:0;
+ left: 0;
}
`;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 155f46979..1e4d7789b 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,3 +1,4 @@
+import { Link as SmartLink } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
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 { NewsletterForm } from 'ts/@next/components/newsletter_form';
import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface LinkInterface {
text: string;
url: string;
- newWindow?: boolean;
+ shouldOpenInNewTab?: boolean;
}
interface LinkRows {
@@ -37,9 +39,9 @@ const linkRows: LinkRows[] = [
{
heading: 'Developers',
links: [
- { url: '#', text: 'Documentation' },
- { url: '#', text: 'GitHub' },
- { url: '#', text: 'Whitepaper' },
+ { url: WebsitePaths.Docs, text: 'Documentation' },
+ { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
+ { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protogcol Spec', shouldOpenInNewTab: true },
],
},
{
@@ -49,7 +51,7 @@ const linkRows: LinkRows[] = [
{ url: WebsitePaths.AboutMission, text: 'Mission' },
{ url: WebsitePaths.AboutTeam, text: 'Team' },
{ url: WebsitePaths.AboutJobs, text: 'Jobs' },
- { url: WebsitePaths.AboutPress, text: 'Press Kit' },
+ { url: WebsitePaths.AboutPress, text: 'Press' },
{ url: WebsitePaths.Ecosystem, text: 'Grant Program' },
],
},
@@ -57,10 +59,10 @@ const linkRows: LinkRows[] = [
heading: 'Community',
isOnMobile: true,
links: [
- { url: '#', text: 'Twitter' },
- { url: '#', text: 'Rocket Chat' },
- { url: '#', text: 'Facebook' },
- { url: '#', text: 'Reddit' },
+ { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
+ { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
+ { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
+ { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
],
},
];
@@ -78,9 +80,7 @@ export const Footer: React.StatelessComponent = () => (
{_.map(linkRows, (row: LinkRows, index) => (
<MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
<FooterSectionWrap>
- <RowHeading>
- {row.heading}
- </RowHeading>
+ <RowHeading>{row.heading}</RowHeading>
<LinkList links={row.links} />
</FooterSectionWrap>
@@ -93,15 +93,15 @@ export const Footer: React.StatelessComponent = () => (
);
const LinkList = (props: LinkListProps) => (
- <List>
- {_.map(props.links, (link, index) => (
- <li key={`fl-${index}`}>
- <Link to={link.url}>
- {link.text}
- </Link>
- </li>
- ))}
- </List>
+ <List>
+ {_.map(props.links, (link, index) => (
+ <li key={`fl-${index}`}>
+ <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+ {link.text}
+ </Link>
+ </li>
+ ))}
+ </List>
);
const FooterWrap = styled.footer`
@@ -154,7 +154,7 @@ const List = styled.ul`
}
`;
-const Link = styled(ReactRouterLink)`
+const Link = styled(SmartLink)`
color: inherit;
opacity: 0.5;
display: block;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 544a7daf1..e6b49e395 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,8 +1,8 @@
+import { Link } from '@0x/react-shared';
import _ from 'lodash';
import * as React from 'react';
import MediaQuery from 'react-responsive';
-import { NavLink as ReactRouterLink } from 'react-router-dom';
-import styled, { withTheme } from 'styled-components';
+import styled, { css, withTheme } from 'styled-components';
import Headroom from 'react-headroom';
@@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav';
import { FlexWrap } from 'ts/@next/components/newLayout';
import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface HeaderProps {
location?: Location;
@@ -29,6 +30,7 @@ interface NavItemProps {
text?: string;
dropdownWidth?: number;
dropdownComponent?: React.ReactNode;
+ shouldOpenInNewTab?: boolean;
}
interface DropdownWrapInterface {
@@ -43,14 +45,12 @@ const navItems: NavItemProps[] = [
},
{
id: 'products',
- url: '#',
text: 'Products',
dropdownComponent: DropdownProducts,
dropdownWidth: 280,
},
{
id: 'developers',
- url: '#',
text: 'Developers',
dropdownComponent: DropdownDevelopers,
dropdownWidth: 480,
@@ -62,7 +62,8 @@ const navItems: NavItemProps[] = [
},
{
id: 'blog',
- url: 'https://blog.0x.org/latest',
+ url: constants.URL_BLOG,
+ shouldOpenInNewTab: true,
text: 'Blog',
},
];
@@ -72,7 +73,7 @@ class HeaderBase extends React.Component<HeaderProps> {
if (this.props.isNavToggled) {
this.props.toggleMobileNav();
}
- }
+ };
public render(): React.ReactNode {
const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -81,25 +82,16 @@ class HeaderBase extends React.Component<HeaderProps> {
<Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
<StyledHeader isNavToggled={isNavToggled}>
<HeaderWrap>
- <ReactRouterLink to={WebsitePaths.Home}>
+ <Link to={WebsitePaths.Home}>
<Logo />
- </ReactRouterLink>
+ </Link>
<NavLinks>
- {_.map(navItems, (link, index) => (
- <NavItem
- key={`navlink-${index}`}
- link={link}
- />
- ))}
+ {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
</NavLinks>
<MediaQuery minWidth={990}>
- <TradeButton
- bgColor={theme.headerButtonBg}
- color="#ffffff"
- href="/portal"
- >
+ <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal">
Trade on 0x
</TradeButton>
</MediaQuery>
@@ -118,23 +110,30 @@ export const Header = withTheme(HeaderBase);
const NavItem = (props: { link: NavItemProps; key: string }) => {
const { link } = props;
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 (
<LinkWrap>
- <StyledNavLink to={link.url}>
- {link.text}
- </StyledNavLink>
+ {linkElement}
- {link.dropdownComponent &&
+ {link.dropdownComponent && (
<DropdownWrap width={link.dropdownWidth}>
<Subnav />
</DropdownWrap>
- }
+ )}
</LinkWrap>
);
};
-const StyledHeader = styled.header<HeaderProps>`
+const StyledHeader =
+ styled.header <
+ HeaderProps >
+ `
padding: 30px;
background-color: ${props => props.theme.bgColor};
`;
@@ -157,9 +156,7 @@ const LinkWrap = styled.li`
}
`;
-const StyledNavLink = styled(ReactRouterLink).attrs({
- activeStyle: { opacity: 1 },
-})`
+const linkStyles = css`
color: ${props => props.theme.textColor};
opacity: 0.5;
transition: opacity 0.35s;
@@ -171,15 +168,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
}
`;
+const StyledNavLink = styled(Link).attrs({
+ activeStyle: { opacity: 1 },
+})`
+ ${linkStyles};
+`;
+
+const StyledAnchor = styled.a`
+ ${linkStyles};
+`;
+
const HeaderWrap = styled(FlexWrap)`
- justify-content: space-between;
- align-items: center;
-
- @media (max-width: 800px) {
- padding-top: 0;
- display: flex;
- padding-bottom: 0;
- }
+ justify-content: space-between;
+ align-items: center;
+
+ @media (max-width: 800px) {
+ padding-top: 0;
+ display: flex;
+ padding-bottom: 0;
+ }
`;
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;
padding: 15px 0;
border: 1px solid transparent;
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index 0976a57a8..a7711451b 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -1,5 +1,5 @@
+import { Link as SmartLink } from '@0x/react-shared';
import * as React from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
interface LinkInterface {
@@ -13,11 +13,11 @@ interface LinkInterface {
theme?: {
textColor: string;
};
- target?: string;
+ shouldOpenInNewTab?: boolean;
}
export const Link = (props: LinkInterface) => {
- const { children, isNoArrow, href, target } = props;
+ const { children, isNoArrow, href } = props;
return (
<StyledLink to={href} {...props}>
@@ -44,7 +44,7 @@ export const LinkWrap = styled.div`
`;
const StyledLink =
- styled(ReactRouterLink) <
+ styled(SmartLink) <
LinkInterface >
`
display: ${props => !props.isBlock && 'inline-flex'};
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 8b5ffd7e8..122036b9a 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
import MediaQuery from 'react-responsive';
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';
interface Props {
@@ -24,14 +24,10 @@ export class MobileNav extends React.PureComponent<Props> {
<ul>
<li>
- <Link to={WebsitePaths.Instant}>
- 0x Instant
- </Link>
+ <Link to={WebsitePaths.Instant}>0x Instant</Link>
</li>
<li>
- <Link to={WebsitePaths.LaunchKit}>
- 0x Launch Kit
- </Link>
+ <Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
</li>
</ul>
</Section>
@@ -39,39 +35,36 @@ export class MobileNav extends React.PureComponent<Props> {
<Section isDark={true}>
<Grid as="ul" isFullWidth={true} isWrapped={true}>
<li>
- <Link to={WebsitePaths.Why}>
- Why 0x
- </Link>
+ <Link to={WebsitePaths.Why}>Why 0x</Link>
</li>
<li>
- <Link to={WebsitePaths.AboutMission}>
- About
- </Link>
+ <Link to={WebsitePaths.AboutMission}>About</Link>
</li>
<li>
- <a href="https://blog.0x.org/latest" target="_blank">
+ <a href="https://blog.0xproject.com/latest" target="_blank">
Blog
</a>
</li>
</Grid>
</Section>
- {isToggled &&
- <Overlay onClick={toggleMobileNav} />
- }
+ {isToggled && <Overlay onClick={toggleMobileNav} />}
</Wrap>
</MediaQuery>
);
}
}
-const Wrap = styled.nav<{ isToggled: boolean }>`
+const Wrap =
+ styled.nav <
+ { isToggled: boolean } >
+ `
width: 100%;
height: 357px;
background-color: ${props => props.theme.mobileNavBgUpper};
color: ${props => props.theme.mobileNavColor};
- 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);
+ 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);
visibility: ${props => !props.isToggled && 'hidden'};
position: fixed;
display: flex;
@@ -103,13 +96,19 @@ const Overlay = styled.div`
cursor: pointer;
`;
-const Section = styled.div<{ isDark?: boolean }>`
+const Section =
+ styled.div <
+ { isDark: boolean } >
+ `
width: 100%;
padding: 15px 30px;
background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
`;
-const Grid = styled(WrapGrid)<WrapProps>`
+const Grid =
+ styled(WrapGrid) <
+ WrapProps >
+ `
justify-content: flex-start;
li {
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 61daa1103..dc597b18f 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -209,7 +209,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<Divider />
<div className="pt2" style={{ lineHeight: 1.5 }}>
The{' '}
- <a href="https://blog.0x.org/canonical-weth-a9aa7d0279dd" target="_blank">
+ <a href={constants.URL_CANONICAL_WETH_POST} target="_blank">
canonical WETH
</a>{' '}
contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 73e248713..9b5879175 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -358,7 +358,7 @@ export enum WebsitePaths {
AboutJobs = '/about/jobs',
LaunchKit = '/launch-kit',
Instant = '/instant',
- Ecosystem = '/ecosystem',
+ Ecosystem = '/eap',
Why = '/why',
Whitepaper = '/pdfs/0x_white_paper.pdf',
SmartContracts = '/docs/contracts',
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3248d3911..c8c8099c9 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -74,7 +74,7 @@ export const constants = {
URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0',
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_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
URL_TESTNET_FAUCET: 'https://faucet.0x.org',
@@ -96,17 +96,19 @@ export const constants = {
URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j',
URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
URL_TWITTER: 'https://twitter.com/0xproject',
+ URL_FACEBOOK: 'https://www.facebook.com/0xProject/',
URL_WETH_IO: 'https://weth.io/',
+ URL_CANONICAL_WETH_POST: 'https://blog.0xproject.com/canonical-weth-a9aa7d0279dd',
URL_ZEROEX_CHAT,
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_DECODED_LOG_ENTRY_EVENT:
'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_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_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: [
{
title: Key.Wiki,