feat: fix footer links

3 files changed, 25 insertions, 23 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index acd5cb0ce..96d88846b 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -8,6 +8,7 @@ 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;
@@ -60,12 +61,12 @@ const linksData: LinkConfig[] = [
     },
     {
         label: 'Github',
-        url: 'https://github.com/0xProject',
+        url: constants.URL_GITHUB_ORG,
         shouldOpenInNewTab: true,
     },
     {
         label: 'Protocol specification',
-        url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
+        url: constants.URL_PROTOCOL_SPECIFICATION,
         shouldOpenInNewTab: true,
     },
 ];
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 155f46979..cd3fe8363 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: WebsitePaths.Whitepaper, text: 'Whitepaper', shouldOpenInNewTab: true },
         ],
     },
     {
@@ -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/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3248d3911..0256ccd57 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -96,6 +96,7 @@ 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_ZEROEX_CHAT,
     URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit',