diff options
-rw-r--r-- | packages/react-shared/src/components/link.tsx | 13 | ||||
-rw-r--r-- | packages/react-shared/src/index.ts | 2 | ||||
-rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx | 98 | ||||
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 42 | ||||
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 85 | ||||
-rw-r--r-- | packages/website/ts/@next/components/link.tsx | 8 | ||||
-rw-r--r-- | packages/website/ts/utils/constants.ts | 1 | ||||
-rw-r--r-- | yarn.lock | 41 |
8 files changed, 168 insertions, 122 deletions
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..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/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..00d45f123 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'; @@ -29,6 +29,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: 'https://blog.0xproject.com/latest', + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +72,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 +81,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 +109,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 +155,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 +167,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 +198,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/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', @@ -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" |