aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx11
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx2
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx5
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx98
-rw-r--r--packages/website/ts/components/fill_order.tsx2
-rw-r--r--packages/website/ts/components/footer.tsx95
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx4
-rw-r--r--packages/website/ts/components/portal/back_button.tsx4
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx2
-rw-r--r--packages/website/ts/components/portal/menu.tsx6
-rw-r--r--packages/website/ts/components/portal/portal.tsx9
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx46
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx22
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx (renamed from packages/website/ts/components/ui/menu_item.tsx)14
-rw-r--r--packages/website/ts/components/ui/link.tsx43
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx4
16 files changed, 170 insertions, 197 deletions
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index b5f51e1aa..7edb51587 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,19 +1,19 @@
-import { DocsMenu } from '@0xproject/react-docs';
import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { Container } from 'ts/components/ui/container';
import { Link } from 'ts/components/ui/link';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
export interface DocsContentTopBarProps {
location: Location;
translate: Translate;
- menu?: DocsMenu;
+ sectionNameToLinks?: ObjectMap<ALink[]>;
}
interface DocsContentTopBarState {
@@ -146,12 +146,13 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
onRequestChange={this._onMenuButtonClick.bind(this)}
>
<div className="clearfix pl1">
- <NestedSidebarMenu
+ TODO
+ {/* <NestedSidebarMenu
topLevelMenu={this.props.menu}
shouldDisplaySectionHeaders={true}
shouldReformatMenuItemNames={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
- />
+ /> */}
</div>
</Drawer>
);
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 570a81bca..9bd742749 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -10,7 +10,7 @@ export interface DocsLogoProps {
export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
return (
<div style={props.containerStyle}>
- <Link to={`${WebsitePaths.Docs}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Docs}>
<img src="/images/docs_logo.svg" height={props.height} />
</Link>
</div>
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 094bc3d92..7ed9c6e4e 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -25,8 +25,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
public render(): React.ReactNode {
return (
<Link
- to={this.props.tutorialInfo.location}
- className="text-decoration-none"
+ to={this.props.tutorialInfo.link.to}
onMouseEnter={this._onHover.bind(this)}
onMouseOver={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
@@ -46,7 +45,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
</div>
<div className="lg-pl2 md-pl2 sm-pl3 col col-10">
<Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
- {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)}
+ {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)}
</Text>
<Text Tag="div" fontColor={colors.grey750} fontSize="16">
{this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 88522b665..675357f41 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -1,61 +1,68 @@
import { colors } from '@0xproject/react-shared';
-import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { DropDown } from 'ts/components/ui/drop_down';
import { Link } from 'ts/components/ui/link';
import { Text } from 'ts/components/ui/text';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
-interface LinkInfo {
- link: string;
- shouldOpenInNewTab?: boolean;
-}
-
-const gettingStartedKeyToLinkInfo1: ObjectMap<LinkInfo> = {
- [Key.BuildARelayer]: {
- link: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+const gettingStartedKeyToLinkInfo1: ALink[] = [
+ {
+ title: Key.BuildARelayer,
+ to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
},
- [Key.OrderBasics]: {
- link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+ {
+ title: Key.OrderBasics,
+ to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
},
-};
-const gettingStartedKeyToLinkInfo2: ObjectMap<LinkInfo> = {
- [Key.DevelopOnEthereum]: {
- link: `${WebsitePaths.Wiki}#Ethereum-Development`,
+];
+const gettingStartedKeyToLinkInfo2: ALink[] = [
+ {
+ title: Key.DevelopOnEthereum,
+ to: `${WebsitePaths.Wiki}#Ethereum-Development`,
},
- [Key.UseSharedLiquidity]: {
- link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+ {
+ title: Key.UseSharedLiquidity,
+ to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
},
-};
-const popularDocsToLinkInfos: ObjectMap<LinkInfo> = {
- [Key.ZeroExJs]: {
- link: WebsitePaths.ZeroExJs,
+];
+const popularDocsToLinkInfos: ALink[] = [
+ {
+ title: Key.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
},
- [Key.Connect]: {
- link: WebsitePaths.Connect,
+ {
+ title: Key.Connect,
+ to: WebsitePaths.Connect,
},
- [Key.SmartContract]: {
- link: WebsitePaths.SmartContracts,
+ {
+ title: Key.SmartContract,
+ to: WebsitePaths.SmartContracts,
},
-};
-const usefulLinksToLinkInfo: ObjectMap<LinkInfo> = {
- [Key.Github]: {
- link: constants.URL_GITHUB_ORG,
+];
+const usefulLinksToLinkInfo: ALink[] = [
+ {
+ title: Key.Github,
+ to: constants.URL_GITHUB_ORG,
+ type: LinkType.External,
shouldOpenInNewTab: true,
},
- [Key.Whitepaper]: {
- link: WebsitePaths.Whitepaper,
+ {
+ title: Key.Whitepaper,
+ to: WebsitePaths.Whitepaper,
+ type: LinkType.External,
shouldOpenInNewTab: true,
},
- [Key.Sandbox]: {
- link: constants.URL_SANDBOX,
+ {
+ title: Key.Sandbox,
+ to: constants.URL_SANDBOX,
+ type: LinkType.External,
shouldOpenInNewTab: true,
},
-};
+];
interface DevelopersDropDownProps {
translate: Translate;
@@ -123,7 +130,6 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
>
<Link
to={WebsitePaths.Docs}
- className="text-decoration-none"
style={{
color: colors.lightBlueA700,
fontWeight: 'bold',
@@ -152,31 +158,25 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
</div>
);
}
- private _renderLinkSection(keyToLinkInfo: ObjectMap<LinkInfo>): React.ReactNode {
+ private _renderLinkSection(links: ALink[]): React.ReactNode {
const linkStyle: React.CSSProperties = {
color: colors.lightBlueA700,
fontFamily: 'Roboto, Roboto Mono',
};
- const numLinks = _.size(keyToLinkInfo);
+ const numLinks = links.length;
let i = 0;
- const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => {
+ const renderLinks = _.map(links, (link: ALink) => {
i++;
const isLast = i === numLinks;
- const linkText = this.props.translate.get(key as Key, Deco.Cap);
+ const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
return (
- <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}>
- <Link
- to={linkInfo.link}
- isExternal={!!linkInfo.shouldOpenInNewTab}
- shouldOpenInNewTab={linkInfo.shouldOpenInNewTab}
- className="text-decoration-none"
- style={linkStyle}
- >
+ <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
+ <Link to={link.to} type={link.type} shouldOpenInNewTab={link.shouldOpenInNewTab} style={linkStyle}>
{linkText}
</Link>
</div>
);
});
- return <div>{links}</div>;
+ return <div>{renderLinks}</div>;
}
}
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3c3155349..ec1d698f3 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -8,7 +8,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
import { FillOrderJSON } from 'ts/components/fill_order_json';
@@ -17,6 +16,7 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Alert } from 'ts/components/ui/alert';
import { EthereumAddress } from 'ts/components/ui/ethereum_address';
import { Identicon } from 'ts/components/ui/identicon';
+import { Link } from 'ts/components/ui/link';
import { VisualOrder } from 'ts/components/visual_order';
import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6dcb5a0e9..bec3c17f7 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,24 +1,16 @@
import { colors } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
+
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
-interface MenuItemsBySection {
- [sectionName: string]: FooterMenuItem[];
-}
-
-interface FooterMenuItem {
- title: string;
- path?: string;
- isExternal?: boolean;
-}
-
const ICON_DIMENSION = 16;
const linkStyle = {
@@ -51,76 +43,74 @@ export class Footer extends React.Component<FooterProps, FooterState> {
};
}
public render(): React.ReactNode {
- const menuItemsBySection: MenuItemsBySection = {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {
[Key.Documentation]: [
{
title: '0x.js',
- path: WebsitePaths.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
},
{
title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
- path: WebsitePaths.SmartContracts,
+ to: WebsitePaths.SmartContracts,
},
{
title: this.props.translate.get(Key.Connect, Deco.Cap),
- path: WebsitePaths.Connect,
+ to: WebsitePaths.Connect,
},
{
title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
- path: WebsitePaths.Whitepaper,
- isExternal: true,
+ to: WebsitePaths.Whitepaper,
+ type: LinkType.External,
},
{
title: this.props.translate.get(Key.Wiki, Deco.Cap),
- path: WebsitePaths.Wiki,
+ to: WebsitePaths.Wiki,
},
{
title: this.props.translate.get(Key.Faq, Deco.Cap),
- path: WebsitePaths.FAQ,
+ to: WebsitePaths.FAQ,
},
],
[Key.Community]: [
{
title: this.props.translate.get(Key.RocketChat, Deco.Cap),
- isExternal: true,
- path: constants.URL_ZEROEX_CHAT,
+ type: LinkType.External,
+ to: constants.URL_ZEROEX_CHAT,
},
{
title: this.props.translate.get(Key.Blog, Deco.Cap),
- isExternal: true,
- path: constants.URL_BLOG,
+ type: LinkType.External,
+ to: constants.URL_BLOG,
},
{
title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
+ type: LinkType.External,
+ to: constants.URL_TWITTER,
},
{
title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
+ type: LinkType.External,
+ to: constants.URL_REDDIT,
},
{
title: this.props.translate.get(Key.Forum, Deco.Cap),
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
+ type: LinkType.External,
+ to: constants.URL_DISCOURSE_FORUM,
},
],
[Key.Organization]: [
{
title: this.props.translate.get(Key.About, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.About,
+ to: WebsitePaths.About,
},
{
title: this.props.translate.get(Key.Careers, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.Careers,
+ to: WebsitePaths.Careers,
},
{
title: this.props.translate.get(Key.Contact, Deco.Cap),
- isExternal: true,
- path: 'mailto:team@0xproject.com',
+ type: LinkType.External,
+ to: 'mailto:team@0xproject.com',
},
],
};
@@ -160,19 +150,19 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Documentation)}
- {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Community)}
- {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
</div>
</div>
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Organization)}
- {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -187,7 +177,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
- private _renderMenuItem(item: FooterMenuItem): React.ReactNode {
+ private _renderMenuItem(link: ALink): React.ReactNode {
const titleToIcon: { [title: string]: string } = {
[this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
[this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
@@ -195,30 +185,21 @@ export class Footer extends React.Component<FooterProps, FooterState> {
Reddit: 'reddit.png',
[this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
};
- const iconIfExists = titleToIcon[item.title];
+ const iconIfExists = titleToIcon[link.title];
return (
- <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
- {item.isExternal ? (
- <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+ <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+ <Link to={link.to} type={link.type} style={linkStyle} className="text-decoration-none">
+ <div>
{!_.isUndefined(iconIfExists) ? (
<div className="inline-block">
<div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
- <div className="table-cell">{item.title}</div>
+ <div className="table-cell">{link.title}</div>
</div>
) : (
- item.title
+ link.title
)}
- </a>
- ) : (
- <Link to={item.path} style={linkStyle} className="text-decoration-none">
- <div>
- {!_.isUndefined(iconIfExists) && (
- <div className="pr1">{this._renderIcon(iconIfExists)}</div>
- )}
- {item.title}
- </div>
- </Link>
- )}
+ </div>
+ </Link>
</div>
);
}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index db093fb68..adf96f9ee 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -3,9 +3,9 @@ import { BigNumber } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { Link } from 'ts/components/ui/link';
import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
interface TokenAmountInputProps {
@@ -112,7 +112,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '}
<Link
to={`${WebsitePaths.Portal}/account`}
- style={{ cursor: 'pointer', color: colors.darkestGrey }}
+ style={{ cursor: 'pointer', color: colors.darkestGrey, textDecoration: 'underline' }}
>
Set allowance
</Link>
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index ca35abc2b..bdbcef343 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,6 +1,6 @@
import { Styles } from '@0xproject/react-shared';
import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
@@ -27,7 +27,7 @@ const styles: Styles = {
export const BackButton = (props: BackButtonProps) => {
return (
<div style={{ height: 65, paddingTop: 25 }}>
- <Link to={props.to} style={{ textDecoration: 'none' }}>
+ <Link to={props.to}>
<Island className="flex right" style={styles.backButton}>
<div style={{ marginLeft: 12 }}>
<i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index a6707e86c..3a8c69a70 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -39,7 +39,7 @@ export interface DrawerMenuProps {
}
export const DrawerMenu = (props: DrawerMenuProps) => {
const relayerItemEntry = {
- to: `${WebsitePaths.Portal}`,
+ to: WebsitePaths.Portal,
labelText: 'Relayer ecosystem',
iconName: 'zmdi-portable-wifi',
};
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 39dab77f5..a3352529c 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -1,7 +1,7 @@
import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { MenuItem } from 'ts/components/ui/menu_item';
+import { CustomMenuItem } from 'ts/components/ui/custom_menu_item';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
@@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
{_.map(props.menuItemEntries, entry => {
const isSelected = entry.to === props.selectedPath;
return (
- <MenuItem key={entry.to} to={entry.to}>
+ <CustomMenuItem key={entry.to} to={entry.to}>
<MenuItemLabel
title={entry.labelText}
iconName={entry.iconName}
selected={isSelected}
theme={props.theme}
/>
- </MenuItem>
+ </CustomMenuItem>
);
})}
</div>
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b42954f60..a9ccf9e11 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -317,7 +318,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
};
return (
<Section
- header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />}
+ header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />}
body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />}
/>
);
@@ -389,9 +390,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</Container>
);
return !shouldStartOnboarding ? (
- <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}>
- {startOnboarding}
- </Link>
+ <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link>
) : (
startOnboarding
);
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index c2d753e31..3da2307e0 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -10,15 +10,15 @@ import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
import { DrawerMenu } from 'ts/components/portal/drawer_menu';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
+import { Link } from 'ts/components/ui/link';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -151,7 +151,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
paddingLeft={this.props.paddingLeft}
paddingRight={this.props.paddingRight}
>
- <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Home}>
<img src={logoUrl} height="30" />
</Link>
<div className="flex-auto" />
@@ -165,40 +165,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Wiki, Deco.Cap)}
- path={`${WebsitePaths.Wiki}`}
+ path={WebsitePaths.Wiki}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Blog, Deco.Cap)}
path={constants.URL_BLOG}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={true}
+ linkType={LinkType.External}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.About, Deco.Cap)}
- path={`${WebsitePaths.About}`}
+ path={WebsitePaths.About}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Careers, Deco.Cap)}
- path={`${WebsitePaths.Careers}`}
+ path={WebsitePaths.Careers}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={false}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
- path={`${WebsitePaths.Portal}`}
+ path={WebsitePaths.Portal}
isPrimary={true}
style={styles.menuItem}
className={`${isExpandedDisplayType && 'md-hide'}`}
isNightVersion={isNightVersion}
- isExternal={false}
/>
</div>
</div>
@@ -260,20 +256,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
{this.props.translate.get(Key.Website, Deco.Cap)}
</div>
- <Link to={WebsitePaths.Home} className="text-decoration-none">
+ <Link to={WebsitePaths.Home}>
<MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem>
</Link>
- <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Wiki}>
<MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
</Link>
{_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => {
if (!this._doesUrlInclude(websitePath)) {
return (
- <Link
- key={`drawer-menu-item-${websitePath}`}
- to={websitePath}
- className="text-decoration-none"
- >
+ <Link key={`drawer-menu-item-${websitePath}`} to={websitePath}>
<MenuItem className="py2">
{this.props.translate.get(key, Deco.Cap)}{' '}
{this.props.translate.get(Key.Docs, Deco.Cap)}
@@ -284,25 +276,25 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return null;
})}
{!this._isViewingPortal() && (
- <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Portal}>
<MenuItem className="py2">
{this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
</MenuItem>
</Link>
)}
- <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
+ <Link to={WebsitePaths.Whitepaper} type={LinkType.External} shouldOpenInNewTab={true}>
<MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem>
- </a>
- <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
+ </Link>
+ <Link to={WebsitePaths.About}>
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
- <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+ <Link to={WebsitePaths.Careers}>
<MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
</Link>
- <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
+ <Link to={constants.URL_BLOG} type={LinkType.External} shouldOpenInNewTab={true}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
- </a>
- <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+ </Link>
+ <Link to={WebsitePaths.FAQ}>
<MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
{this.props.translate.get(Key.Faq, Deco.Cap)}
</MenuItem>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 25fab2868..89fd9e8a8 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -1,7 +1,8 @@
import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
+import { LinkType } from 'ts/types';
import { CallToAction } from 'ts/components/ui/button';
@@ -13,7 +14,7 @@ interface TopBarMenuItemProps {
title: string;
path?: string;
isPrimary?: boolean;
- isExternal: boolean;
+ linkType: LinkType;
style?: React.CSSProperties;
className?: string;
isNightVersion?: boolean;
@@ -38,20 +39,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
);
return (
<div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
- {this.props.isExternal ? (
- <a
- className="text-decoration-none"
- style={{ color: linkColor }}
- target="_blank"
- href={this.props.path}
- >
- {itemContent}
- </a>
- ) : (
- <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
- {itemContent}
- </Link>
- )}
+ <Link to={this.props.path} type={this.props.linkType} style={{ color: linkColor }}>
+ {itemContent}
+ </Link>
</div>
);
}
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 0cb4b387c..c51095709 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,24 +1,24 @@
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
-interface MenuItemProps {
+interface CustomMenuItemProps {
to: string;
style?: React.CSSProperties;
onClick?: () => void;
className?: string;
}
-interface MenuItemState {
+interface CustomMenuItemState {
isHovering: boolean;
}
-export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
- public static defaultProps: Partial<MenuItemProps> = {
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+ public static defaultProps: Partial<CustomMenuItemProps> = {
onClick: _.noop.bind(_),
className: '',
};
- public constructor(props: MenuItemProps) {
+ public constructor(props: CustomMenuItemProps) {
super(props);
this.state = {
isHovering: false,
@@ -30,7 +30,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
opacity: this.state.isHovering ? 0.5 : 1,
};
return (
- <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
+ <Link to={this.props.to} style={this.props.style}>
<div
onClick={this.props.onClick.bind(this)}
className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
index f7bca370b..ae62aad0c 100644
--- a/packages/website/ts/components/ui/link.tsx
+++ b/packages/website/ts/components/ui/link.tsx
@@ -1,9 +1,10 @@
import * as React from 'react';
import { Link as ReactRounterLink } from 'react-router-dom';
+import { LinkType } from 'ts/types';
export interface LinkProps {
to: string;
- isExternal?: boolean;
+ type?: LinkType;
shouldOpenInNewTab?: boolean;
style?: React.CSSProperties;
className?: string;
@@ -17,29 +18,39 @@ export interface LinkProps {
export const Link: React.StatelessComponent<LinkProps> = ({
style,
className,
- isExternal,
+ type,
to,
shouldOpenInNewTab,
children,
}) => {
- if (isExternal) {
- return (
- <a target={shouldOpenInNewTab && '_blank'} className={className} style={style} href={to}>
- {children}
- </a>
- );
- } else {
- return (
- <ReactRounterLink to={to} className={className} style={style}>
- {children}
- </ReactRounterLink>
- );
+ const styleWithDefault = {
+ textDecoration: 'none',
+ ...style,
+ };
+
+ switch (type) {
+ case LinkType.External:
+ return (
+ <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}>
+ {children}
+ </a>
+ );
+ case LinkType.ReactRoute:
+ return (
+ <ReactRounterLink to={to} className={className} style={styleWithDefault}>
+ {children}
+ </ReactRounterLink>
+ );
+ case LinkType.ReactScroll:
+ return <div>TODO</div>;
+ default:
+ throw new Error(`Unrecognized LinkType: ${type}`);
}
};
Link.defaultProps = {
- isExternal: false,
- shouldOpenInNewTab: false,
+ type: LinkType.ReactRoute,
+ shouldOpenInNewTab: true,
style: {},
className: '',
};
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 8a9349c6d..767da3675 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
@@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
GoToAccountManagementSimpleMenuItemProps
> = ({ onClick }) => {
return (
- <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+ <Link to={`${WebsitePaths.Portal}/account`}>
<SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
</Link>
);