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

[website] Fix 0x org jank links

12 files changed, 208 insertions, 151 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 b54ec94b6..e4df19990 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -359,7 +359,7 @@ export enum WebsitePaths {
     LaunchKit = '/launch-kit',
     Instant = '/instant',
     Community = '/community',
-    Ecosystem = '/ecosystem',
+    Ecosystem = '/eap',
     MarketMaker = '/market-maker',
     Why = '/why',
     Whitepaper = '/pdfs/0x_white_paper.pdf',
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,
diff --git a/yarn.lock b/yarn.lock
index b74d7b7f0..f0faee856 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2087,6 +2087,10 @@ aes-js@^0.2.3:
   version "0.2.4"
   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:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3652,7 +3656,7 @@ bs-logger@0.x:
   dependencies:
     fast-json-stable-stringify "^2.0.0"
 
-bs58@=4.0.1:
+bs58@=4.0.1, bs58@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   dependencies:
@@ -3675,6 +3679,14 @@ bs58check@^1.0.8:
     bs58 "^3.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:
   version "2.0.0"
   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"
     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:
   version "4.0.4"
   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-util "^5.2.0"
     ethereumjs-vm "2.3.5"
-    ethereumjs-wallet "0.6.0"
+    ethereumjs-wallet "~0.6.0"
     fake-merkle-patricia-tree "~1.0.1"
     heap "~0.2.6"
     js-scrypt "^0.2.0"
@@ -8019,6 +8044,14 @@ hdkey@^0.7.0, hdkey@^0.7.1:
     coinstring "^2.0.0"
     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:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@@ -16602,6 +16635,10 @@ utf8@^2.1.1:
   version "2.1.2"
   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:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"