feat: update developer dropdown links

1 files changed, 29 insertions, 48 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index dfd351d32..eaf2351c2 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,12 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Link as RouterLink} from 'react-router-dom';
-import styled, {withTheme} from 'styled-components';
+import { Link as RouterLink } from 'react-router-dom';
+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';
 
 interface Props {
     theme: ThemeValuesInterface;
@@ -15,48 +16,48 @@ interface Props {
 const introData = [
     {
         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 = [
     {
         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 = [
     {
         label: 'Wiki',
-        url: 'https://0x.org/wiki',
+        url: WebsitePaths.Wiki,
     },
     {
         label: 'Github',
         url: 'https://github.com/0xProject',
     },
     {
-        label: 'Whitepaper',
+        label: 'Protocol specification',
         url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
     },
 ];
@@ -65,23 +66,14 @@ 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}
-                            >
+                            <RouterLink key={`introLink-${index}`} to={item.url}>
                                 {item.label}
                             </RouterLink>
                         </li>
@@ -91,51 +83,40 @@ 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}>
-                                    {item.label}
-                                </RouterLink>
+                                <RouterLink to={item.url}>{item.label}</RouterLink>
                             </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}>
-                                    {item.label}
-                                </RouterLink>
+                                <RouterLink to={item.url}>{item.label}</RouterLink>
                             </li>
                         ))}
                     </ul>
                 </Column>
             </StyledWrap>
 
-            <StyledLink to="https://0x.org/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
+            <StyledLink
+                to="https://0x.org/docs"
+                bgColor={props.theme.dropdownButtonBg}
+                isAccentColor={true}
+                isNoBorder={true}
+            >
                 View All Documentation
             </StyledLink>
         </DropdownWrap>
@@ -174,7 +155,7 @@ const StyledWrap = styled(FlexWrap)`
         opacity: 0.15;
         position: absolute;
         top: 0;
-        left:0;
+        left: 0;
     }
 `;