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/dialogs/blockchain_err_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx8
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx2
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx20
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx108
-rw-r--r--packages/website/ts/components/documentation/overview_content.tsx134
-rw-r--r--packages/website/ts/components/documentation/sidebar_header.tsx57
-rw-r--r--packages/website/ts/components/documentation/tutorial_button.tsx59
-rw-r--r--packages/website/ts/components/documentation/version_drop_down.tsx80
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx162
-rw-r--r--packages/website/ts/components/dropdowns/network_drop_down.tsx2
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx4
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx8
-rw-r--r--packages/website/ts/components/fill_order.tsx16
-rw-r--r--packages/website/ts/components/fill_order_json.tsx4
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx2
-rw-r--r--packages/website/ts/components/flash_messages/asset_send_completed.tsx6
-rw-r--r--packages/website/ts/components/flash_messages/transaction_submitted.tsx2
-rw-r--r--packages/website/ts/components/footer.tsx110
-rw-r--r--packages/website/ts/components/forms/subscribe_form.tsx2
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx2
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx8
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx2
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx6
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/expiration_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx8
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx10
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx2
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx92
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/onboarding/onboarding_card.tsx2
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx2
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx4
-rw-r--r--packages/website/ts/components/order_json.tsx2
-rw-r--r--packages/website/ts/components/portal/back_button.tsx6
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx4
-rw-r--r--packages/website/ts/components/portal/menu.tsx8
-rw-r--r--packages/website/ts/components/portal/portal.tsx40
-rw-r--r--packages/website/ts/components/portal/text_header.tsx2
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx48
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx23
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx2
-rw-r--r--packages/website/ts/components/send_button.tsx2
-rw-r--r--packages/website/ts/components/sidebar_header.tsx35
-rw-r--r--packages/website/ts/components/token_balances.tsx10
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx2
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx281
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx23
-rw-r--r--packages/website/ts/components/track_token_confirmation.tsx2
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx6
-rw-r--r--packages/website/ts/components/ui/alert.tsx2
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx2
-rw-r--r--packages/website/ts/components/ui/balance.tsx2
-rw-r--r--packages/website/ts/components/ui/button.tsx9
-rw-r--r--packages/website/ts/components/ui/container.tsx4
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx4
-rw-r--r--packages/website/ts/components/ui/custom_menu_item.tsx (renamed from packages/website/ts/components/ui/menu_item.tsx)15
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx12
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx4
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx4
-rw-r--r--packages/website/ts/components/ui/fake_text_field.tsx2
-rw-r--r--packages/website/ts/components/ui/help_tooltip.tsx2
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx2
-rw-r--r--packages/website/ts/components/ui/identicon.tsx2
-rw-r--r--packages/website/ts/components/ui/input.tsx2
-rw-r--r--packages/website/ts/components/ui/input_label.tsx2
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx4
-rw-r--r--packages/website/ts/components/ui/party.tsx4
-rw-r--r--packages/website/ts/components/ui/pointer.tsx2
-rw-r--r--packages/website/ts/components/ui/required_label.tsx2
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx4
-rw-r--r--packages/website/ts/components/ui/spinner.tsx2
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx2
-rw-r--r--packages/website/ts/components/ui/text.tsx6
-rw-r--r--packages/website/ts/components/visual_order.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx6
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx6
84 files changed, 1018 insertions, 540 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 18c060991..a0114d898 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,4 +1,4 @@
-import { colors, Networks } from '@0xproject/react-shared';
+import { colors, Networks } from '@0x/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index f2cfb279a..9b9421f1a 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index fbc6c868b..e15a2dd94 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,13 +1,13 @@
-import { colors, constants as sharedConstants } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { colors, constants as sharedConstants } from '@0x/react-shared';
+import { BigNumber, logUtils } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { Blockchain } from 'ts/blockchain';
import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down';
import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index ef295762b..326df2a8c 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 2754b153f..5f6927cef 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index afbb30b82..bbec1d649 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..2840d5960
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,20 @@
+import { Link } from '@0x/react-shared';
+import * as React from 'react';
+import { WebsitePaths } from 'ts/types';
+
+export interface DocsLogoProps {
+ height: number;
+ containerStyle?: React.CSSProperties;
+}
+
+export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
+ return (
+ <Link to={WebsitePaths.Docs}>
+ <img src="/images/docs_logo.svg" height={props.height} />
+ </Link>
+ );
+};
+
+DocsLogo.defaultProps = {
+ containerStyle: {},
+};
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
new file mode 100644
index 000000000..2054d0860
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -0,0 +1,108 @@
+import { ALink, colors, Link } from '@0x/react-shared';
+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 { Text } from 'ts/components/ui/text';
+import { Deco, Key, ScreenWidths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface DocsTopBarProps {
+ location: Location;
+ screenWidth: ScreenWidths;
+ translate: Translate;
+ sidebar?: React.ReactNode;
+}
+
+interface DocsTopBarState {
+ isDrawerOpen: boolean;
+}
+
+export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> {
+ constructor(props: DocsTopBarProps) {
+ super(props);
+ this.state = {
+ isDrawerOpen: false,
+ };
+ }
+ public componentWillReceiveProps(nextProps: DocsTopBarProps): void {
+ if (nextProps.location.pathname !== this.props.location.pathname) {
+ this.setState({
+ isDrawerOpen: false,
+ });
+ }
+ }
+ public render(): React.ReactNode {
+ return (
+ <Container height={80}>
+ <Container
+ className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start"
+ width="100%"
+ >
+ <Container className="sm-hide xs-hide">
+ <Container className="flex items-center justify-between right" width="300px">
+ {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
+ </Container>
+ </Container>
+ <Container className="lg-hide md-hide">
+ <Container paddingTop="6px">
+ <DocsLogo height={30} />
+ </Container>
+ </Container>
+ <Container className="md-hide lg-hide absolute" right="18px" top="12px">
+ <i
+ className="zmdi zmdi-menu"
+ style={{
+ color: colors.grey700,
+ fontSize: 30,
+ cursor: 'pointer',
+ }}
+ onClick={this._onMenuButtonClick.bind(this)}
+ />
+ </Container>
+ </Container>
+ <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} />
+ {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
+ </Container>
+ );
+ }
+ private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode {
+ const menuItems = _.map(menuItemLinks, menuItemInfo => {
+ return (
+ <Link
+ key={`menu-item-${menuItemInfo.title}`}
+ to={menuItemInfo.to}
+ shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
+ >
+ <Container className="flex items-center" paddingLeft="4px">
+ <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
+ </Text>
+ </Container>
+ </Link>
+ );
+ });
+ return menuItems;
+ }
+ private _renderDrawer(): React.ReactNode {
+ return (
+ <Drawer
+ open={this.state.isDrawerOpen}
+ docked={false}
+ openSecondary={true}
+ onRequestChange={this._onMenuButtonClick.bind(this)}
+ >
+ <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}>
+ {this.props.sidebar}
+ </Container>
+ </Drawer>
+ );
+ }
+ private _onMenuButtonClick(): void {
+ this.setState({
+ isDrawerOpen: !this.state.isDrawerOpen,
+ });
+ }
+}
diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx
new file mode 100644
index 000000000..caabaf874
--- /dev/null
+++ b/packages/website/ts/components/documentation/overview_content.tsx
@@ -0,0 +1,134 @@
+import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
+import { Element as ScrollElement } from 'react-scroll';
+import { TutorialButton } from 'ts/components/documentation/tutorial_button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, Package, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+export interface OverviewContentProps {
+ translate: Translate;
+ tutorials: TutorialInfo[];
+ categoryToPackages: ObjectMap<Package[]>;
+}
+
+export interface OverviewContentState {}
+
+export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> {
+ public render(): React.ReactNode {
+ return (
+ <Container>
+ {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))}
+ <Container marginTop="36px">
+ {_.map(this.props.tutorials, tutorialInfo => (
+ <ScrollElement
+ name={sharedUtils.getIdFromName(
+ this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap),
+ )}
+ key={`tutorial-${tutorialInfo.link.title}`}
+ >
+ <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} />
+ </ScrollElement>
+ ))}
+ </Container>
+ </Container>
+ <Container marginTop="32px" paddingBottom="100px">
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))}
+ <Container paddingTop="12px">
+ {this._renderSectionDescription(
+ this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap),
+ )}
+ <Container marginTop="36px">
+ {_.map(this.props.categoryToPackages, (pkgs, category) =>
+ this._renderPackageCategory(category, pkgs),
+ )}
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ );
+ }
+ private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
+ return (
+ <Container key={`category-${category}`}>
+ <Text fontSize="18px">{category}</Text>
+ <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container>
+ </Container>
+ );
+ }
+ private _renderPackage(pkg: Package): React.ReactNode {
+ const id = sharedUtils.getIdFromName(pkg.link.title);
+ return (
+ <ScrollElement name={id} key={`package-${pkg.link.title}`}>
+ <Container className="pb2">
+ <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" />
+ <Container className="clearfix mt2 pt1">
+ <Container className="md-col lg-col md-col-4 lg-col-4">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {pkg.link.title}
+ </Text>
+ </Link>
+ </Container>
+ <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2">
+ <Text fontColor={colors.grey700}>
+ <ReactMarkdown
+ source={pkg.description}
+ renderers={{
+ link: MarkdownLinkBlock,
+ paragraph: 'span',
+ }}
+ />
+ </Text>
+ </Container>
+ <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative">
+ <Container position="absolute" right="0px">
+ <Link
+ to={pkg.link.to}
+ fontColor={colors.lightLinkBlue}
+ shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab}
+ >
+ <Container className="flex">
+ <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container>
+ <Container paddingTop="1px" paddingLeft="6px">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 18, color: colors.lightLinkBlue }}
+ />
+ </Container>
+ </Container>
+ </Link>
+ </Container>
+ </Container>
+ </Container>
+ </Container>
+ </ScrollElement>
+ );
+ }
+ private _renderSectionTitle(text: string): React.ReactNode {
+ return (
+ <Container paddingTop="30px">
+ <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold">
+ {text}
+ </Text>
+ </Container>
+ );
+ }
+ private _renderSectionDescription(text: string): React.ReactNode {
+ return (
+ <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono">
+ {text}
+ </Text>
+ );
+ }
+} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
new file mode 100644
index 000000000..fece2704b
--- /dev/null
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -0,0 +1,57 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
+
+export interface SidebarHeaderProps {
+ screenWidth: ScreenWidths;
+ title: string;
+ docsVersion?: string;
+ availableDocVersions?: string[];
+ onVersionSelected?: () => void;
+}
+
+export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
+ screenWidth,
+ title,
+ docsVersion,
+ availableDocVersions,
+ onVersionSelected,
+}) => {
+ return (
+ <Container>
+ <Container className="flex justify-bottom">
+ <Container className="left pl1" width="150px">
+ <Text
+ fontColor={colors.lightLinkBlue}
+ fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
+ fontWeight="bold"
+ >
+ {title}
+ </Text>
+ </Container>
+ {!_.isUndefined(docsVersion) &&
+ !_.isUndefined(availableDocVersions) &&
+ !_.isUndefined(onVersionSelected) && (
+ <div className="right" style={{ alignSelf: 'flex-end' }}>
+ <VersionDropDown
+ selectedVersion={docsVersion}
+ versions={availableDocVersions}
+ onVersionSelected={onVersionSelected}
+ />
+ </div>
+ )}
+ </Container>
+ <Container
+ width={'100%'}
+ height={'1px'}
+ backgroundColor={colors.grey300}
+ marginTop="20px"
+ marginBottom="27px"
+ />
+ </Container>
+ );
+};
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..b747ef598
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,59 @@
+import { colors, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { Deco, Key, TutorialInfo } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+
+import { styled } from 'ts/style/theme';
+
+export interface TutorialButtonProps {
+ className?: string;
+ translate: Translate;
+ tutorialInfo: TutorialInfo;
+}
+
+const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => (
+ <Container className={className}>
+ <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}>
+ <div className="flex relative">
+ <div className="col col-1 flex items-center sm-pr3">
+ <img src={tutorialInfo.iconUrl} height={40} />
+ </div>
+ <div className="lg-pl2 md-pl2 sm-pl3 col col-10">
+ <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+ {translate.get(tutorialInfo.link.title as Key, Deco.Cap)}
+ </Text>
+ <Text Tag="div" fontColor={colors.grey750} fontSize="16">
+ {translate.get(tutorialInfo.description as Key, Deco.Cap)}
+ </Text>
+ </div>
+ <div className="col col-1 flex items-center justify-end">
+ <div className="right">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 26, color: colors.lightLinkBlue }}
+ />
+ </div>
+ </div>
+ </div>
+ </Link>
+ </Container>
+);
+
+export const TutorialButton = styled(PlainTutorialButton)`
+ border-radius: 4px;
+ border: 1px solid ${colors.grey325};
+ background-color: ${colors.white};
+ &:hover {
+ border: 1px solid ${colors.lightLinkBlue};
+ background-color: ${colors.lightestBlue};
+ }
+ padding: 20px;
+ margin-bottom: 15px;
+`;
+
+TutorialButton.defaultProps = {};
+
+TutorialButton.displayName = 'TutorialButton';
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
new file mode 100644
index 000000000..a1c8b0547
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,80 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { styled } from 'ts/style/theme';
+
+interface ActiveNodeProps {
+ className?: string;
+ selectedVersion: string;
+}
+
+const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
+ <Container className={className}>
+ <Container className="flex justify-center">
+ <Text fontColor={colors.grey700} fontSize="12px">
+ v {selectedVersion}
+ </Text>
+ <Container paddingLeft="6px">
+ <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
+ </Container>
+ </Container>
+ </Container>
+);
+
+const ActiveNode = styled(PlainActiveNode)`
+ cursor: pointer;
+ border: 2px solid ${colors.beigeWhite};
+ border-radius: 4px;
+ padding: 4px 6px 4px 8px;
+`;
+
+interface VersionDropDownProps {
+ selectedVersion: string;
+ versions: string[];
+ onVersionSelected: (semver: string) => void;
+}
+
+interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
+ return (
+ <DropDown
+ activateEvent={DropdownMouseEvent.Click}
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
+ popoverStyle={{ borderRadius: 4 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const items = _.map(this.props.versions, version => {
+ const isSelected = version === this.props.selectedVersion;
+ return (
+ <Container key={`dropdown-items-${version}`}>
+ <Button
+ borderRadius="0px"
+ padding="0.8em 0em"
+ width="100%"
+ isDisabled={isSelected}
+ onClick={this._onClick.bind(this, version)}
+ >
+ v {version}
+ </Button>
+ </Container>
+ );
+ });
+ const dropdownMenu = <Container width="88px">{items}</Container>;
+ return dropdownMenu;
+ }
+ private _onClick(selectedVersion: string): void {
+ this.props.onVersionSelected(selectedVersion);
+ }
+}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
new file mode 100644
index 000000000..6e85c1499
--- /dev/null
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,162 @@
+import { ALink, colors, Link } from '@0x/react-shared';
+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 { Text } from 'ts/components/ui/text';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+const gettingStartedKeyToLinkInfo1: ALink[] = [
+ {
+ title: Key.BuildARelayer,
+ to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+ },
+ {
+ title: Key.OrderBasics,
+ to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+ },
+];
+const gettingStartedKeyToLinkInfo2: ALink[] = [
+ {
+ title: Key.DevelopOnEthereum,
+ to: `${WebsitePaths.Wiki}#Ethereum-Development`,
+ },
+ {
+ title: Key.UseNetworkedLiquidity,
+ to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+ },
+];
+const popularDocsToLinkInfos: ALink[] = [
+ {
+ title: Key.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
+ },
+ {
+ title: Key.Connect,
+ to: WebsitePaths.Connect,
+ },
+ {
+ title: Key.SmartContract,
+ to: WebsitePaths.SmartContracts,
+ },
+];
+const usefulLinksToLinkInfo: ALink[] = [
+ {
+ title: Key.Wiki,
+ to: WebsitePaths.Wiki,
+ },
+ {
+ title: Key.Github,
+ to: constants.URL_GITHUB_ORG,
+ shouldOpenInNewTab: true,
+ },
+ {
+ title: Key.Whitepaper,
+ to: WebsitePaths.Whitepaper,
+ shouldOpenInNewTab: true,
+ },
+];
+
+interface DevelopersDropDownProps {
+ location: Location;
+ translate: Translate;
+ menuItemStyles: React.CSSProperties;
+ menuIconStyle: React.CSSProperties;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = (
+ <Container className="flex relative" paddingRight="10">
+ <Text fontColor={this.props.menuIconStyle.color}>
+ {this.props.translate.get(Key.Developers, Deco.Cap)}
+ </Text>
+ </Container>
+ );
+ return (
+ <DropDown
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ style={this.props.menuItemStyles}
+ popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const sectionPadding = '28px';
+ const dropdownMenu = (
+ <Container>
+ <Container className="flex" padding={sectionPadding}>
+ <Container paddingRight="45px">
+ {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')}
+ </Container>
+ <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
+ </Container>
+ <Container width="100%" height="1px" backgroundColor={colors.grey300} />
+ <Container className="flex" padding={sectionPadding}>
+ <Container paddingRight="62px">
+ <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container>
+ </Container>
+ <Container>
+ <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container>
+ </Container>
+ </Container>
+ <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
+ <Container
+ padding="0.9rem"
+ backgroundColor={colors.lightBgGrey}
+ borderBottomLeftRadius={4}
+ borderBottomRightRadius={4}
+ >
+ <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center">
+ {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
+ </Text>
+ </Container>
+ </Link>
+ </Container>
+ );
+ return dropdownMenu;
+ }
+ private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode {
+ const numLinks = links.length;
+ let i = 0;
+ const renderLinks = _.map(links, (link: ALink) => {
+ const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#');
+ const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki;
+ let to = link.to;
+ if (isWikiLink && isOnWiki) {
+ to = `${link.to.split('#')[1]}`;
+ }
+ i++;
+ const isLast = i === numLinks;
+ const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
+ return (
+ <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
+ <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}>
+ <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}>
+ {linkText}
+ </Text>
+ </Link>
+ </Container>
+ );
+ });
+ return (
+ <Container>
+ <Container height="33px">
+ {!_.isEmpty(title) && (
+ <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
+ {title.toUpperCase()}
+ </Text>
+ )}
+ </Container>
+ {renderLinks}
+ </Container>
+ );
+ }
+}
diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx
index 2fd2785d1..df2d72edc 100644
--- a/packages/website/ts/components/dropdowns/network_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx
@@ -1,4 +1,4 @@
-import { constants as sharedConstants } from '@0xproject/react-shared';
+import { constants as sharedConstants } from '@0x/react-shared';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index b0091a1c1..536ba924b 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -1,5 +1,5 @@
-import { BigNumber, logUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { BigNumber, logUtils } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 0b282b2a1..4a9f3b2fe 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -1,12 +1,12 @@
-import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import Divider from 'material-ui/Divider';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import * as moment from 'moment';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { Blockchain } from 'ts/blockchain';
import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3c3155349..3d0203573 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,14 +1,13 @@
-import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
-import { colors } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { assetDataUtils, orderHashUtils } from '@0x/order-utils';
+import { colors, Link } from '@0x/react-shared';
+import { BigNumber, logUtils } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as accounting from 'accounting';
import * as _ from 'lodash';
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';
@@ -204,7 +203,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
.tokenAddress;
const makerToken = this.props.tokenByAddress[makerTokenAddress];
const makerAssetToken = {
- amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
+ amount: orderMakerAmount
+ .times(takerAssetToken.amount)
+ .div(orderTakerAmount)
+ .floor(),
symbol: makerToken.symbol,
};
const fillAssetToken = {
@@ -324,7 +326,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return (
<div>
Order successfully filled. See the trade details in your{' '}
- <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
+ <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}>
trade history
</Link>
</div>
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 1ecc426bd..41413eac2 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -1,5 +1,5 @@
-import { generatePseudoRandomSalt } from '@0xproject/order-utils';
-import { BigNumber } from '@0xproject/utils';
+import { generatePseudoRandomSalt } from '@0x/order-utils';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 4821aaabe..430abd013 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
index f76e05fe1..b895126dc 100644
--- a/packages/website/ts/components/flash_messages/asset_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
@@ -1,6 +1,6 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { colors } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index 2a6d2a64b..b1d909baa 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6dcb5a0e9..dfedcba55 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,31 +1,17 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link } from '@0x/react-shared';
+import { ObjectMap } from '@0x/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 { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, 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 = {
- color: colors.white,
- cursor: 'pointer',
-};
-
const languageToMenuTitle = {
[Language.English]: 'English',
[Language.Russian]: 'Русский',
@@ -51,76 +37,74 @@ export class Footer extends React.Component<FooterProps, FooterState> {
};
}
public render(): React.ReactNode {
- const menuItemsBySection: MenuItemsBySection = {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {
[Key.Documentation]: [
{
+ title: 'Developer Home',
+ to: WebsitePaths.Docs,
+ },
+ {
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,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Wiki, Deco.Cap),
- path: WebsitePaths.Wiki,
- },
- {
- title: this.props.translate.get(Key.Faq, Deco.Cap),
- path: WebsitePaths.FAQ,
+ to: WebsitePaths.Wiki,
},
],
[Key.Community]: [
{
title: this.props.translate.get(Key.RocketChat, Deco.Cap),
- isExternal: true,
- path: constants.URL_ZEROEX_CHAT,
+ to: constants.URL_ZEROEX_CHAT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Blog, Deco.Cap),
- isExternal: true,
- path: constants.URL_BLOG,
+ to: constants.URL_BLOG,
+ shouldOpenInNewTab: true,
},
{
title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
+ to: constants.URL_TWITTER,
+ shouldOpenInNewTab: true,
},
{
title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
+ to: constants.URL_REDDIT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Forum, Deco.Cap),
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
+ to: constants.URL_DISCOURSE_FORUM,
+ shouldOpenInNewTab: true,
},
],
[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',
+ to: 'mailto:team@0xproject.com',
+ shouldOpenInNewTab: true,
},
],
};
@@ -160,19 +144,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 +171,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 +179,26 @@ 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}
+ shouldOpenInNewTab={link.shouldOpenInNewTab}
+ fontColor={colors.white}
+ 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/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
index 761db7517..f5560cfa7 100644
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 98aad6c62..e6ecd2ec8 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -3,7 +3,7 @@ import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as moment from 'moment';
import * as React from 'react';
-import firstBy = require('thenby');
+import firstBy from 'thenby';
import { Blockchain } from 'ts/blockchain';
import { NewTokenForm } from 'ts/components/generate_order/new_token_form';
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index ec153c005..8afbee977 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,7 +1,7 @@
-import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0xproject/order-utils';
-import { colors } from '@0xproject/react-shared';
-import { Order as ZeroExOrder } from '@0xproject/types';
-import { BigNumber, logUtils } from '@0xproject/utils';
+import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0x/order-utils';
+import { colors } from '@0x/react-shared';
+import { Order as ZeroExOrder } from '@0x/types';
+import { BigNumber, logUtils } from '@0x/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import Divider from 'material-ui/Divider';
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index 3d7eda84c..b8cd88b18 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as moment from 'moment';
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index 39ec72f8a..1a71f8081 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@0xproject/react-shared';
-import { addressUtils } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { addressUtils } from '@0x/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 39d2e3030..5396295d2 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -1,8 +1,8 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { BigNumber, logUtils } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { Blockchain } from 'ts/blockchain';
import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view';
import { Container } from 'ts/components/ui/container';
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index eb01e3ea6..83f263842 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 3a7905442..6799e54bf 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -1,5 +1,5 @@
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx
index 5417ce715..3e43c1c07 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 5125ec4de..7688ffe21 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,9 +1,9 @@
-import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
-import { Styles } from '@0xproject/react-shared';
-import { Order } from '@0xproject/types';
+import { assetDataUtils, orderHashUtils } from '@0x/order-utils';
+import { Styles } from '@0x/react-shared';
+import { Order } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { Blockchain } from 'ts/blockchain';
import { FakeTextField } from 'ts/components/ui/fake_text_field';
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index db093fb68..fded3a9dd 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,9 +1,8 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { colors, Link } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/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 { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
@@ -112,7 +111,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '}
<Link
to={`${WebsitePaths.Portal}/account`}
- style={{ cursor: 'pointer', color: colors.darkestGrey }}
+ textDecoration="underline"
+ fontColor={colors.darkestGrey}
>
Set allowance
</Link>
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 0bd36781e..c3c2d8b37 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import Paper from 'material-ui/Paper';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
new file mode 100644
index 000000000..db7d55261
--- /dev/null
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -0,0 +1,92 @@
+import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Text } from 'ts/components/ui/text';
+
+export interface NestedSidebarMenuProps {
+ sectionNameToLinks: ObjectMap<ALink[]>;
+ sidebarHeader?: React.ReactNode;
+ shouldReformatMenuItemNames?: boolean;
+}
+
+export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
+ const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
+ const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName);
+ const menuItems = _.map(links, (link, i) => {
+ const menuItemTitle = props.shouldReformatMenuItemNames
+ ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title))
+ : link.title;
+ const finalLink = {
+ ...link,
+ title: menuItemTitle,
+ };
+ return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+ });
+ // tslint:disable-next-line:no-unused-variable
+ return (
+ <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+ <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1">
+ {finalSectionName.toUpperCase()}
+ </Text>
+ {menuItems}
+ </div>
+ );
+ });
+ return (
+ <div>
+ {props.sidebarHeader}
+ <div>{navigation}</div>
+ </div>
+ );
+};
+
+export interface MenuItemProps {
+ link: ALink;
+}
+
+export interface MenuItemState {
+ isActive: boolean;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
+ constructor(props: MenuItemProps) {
+ super(props);
+ const isActive = window.location.hash.slice(1) === props.link.to;
+ this.state = {
+ isActive,
+ };
+ }
+ public render(): React.ReactNode {
+ const isActive = this.state.isActive;
+ return (
+ <Link
+ to={this.props.link.to}
+ shouldOpenInNewTab={this.props.link.shouldOpenInNewTab}
+ onActivityChanged={this._onActivityChanged.bind(this)}
+ >
+ <Button
+ borderRadius="4px"
+ padding="0.4em 0.375em"
+ width="100%"
+ backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
+ fontSize="14px"
+ textAlign="left"
+ >
+ <Text
+ fontWeight={isActive ? 'bold' : 'normal'}
+ fontColor={isActive ? colors.white : colors.grey800}
+ >
+ {this.props.link.title}
+ </Text>
+ </Button>
+ </Link>
+ );
+ }
+ private _onActivityChanged(isActive: boolean): void {
+ this.setState({
+ isActive,
+ });
+ }
+}
diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
index ca71fcd50..1d21e5a85 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
import * as React from 'react';
import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index 1035d4ad9..173ba9a97 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index e1b0f304b..384bf7154 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import * as _ from 'lodash';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 522687758..6adcec0b1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
import { Blockchain } from 'ts/blockchain';
import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step';
import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step';
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
index e4332de75..37eef867b 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
import * as React from 'react';
import { Balance } from 'ts/components/ui/balance';
import { Container } from 'ts/components/ui/container';
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index a2a53a523..f33681835 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,4 +1,4 @@
-import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils';
+import { BigNumber, fetchAsync, logUtils } from '@0x/utils';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index ca35abc2b..bea69bb95 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,7 +1,5 @@
-import { Styles } from '@0xproject/react-shared';
+import { Link, Styles } from '@0x/react-shared';
import * as React from 'react';
-import { Link } from 'react-router-dom';
-
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
@@ -27,7 +25,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..7280a6102 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { Styles } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
@@ -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..d59101686 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 { Styles } from '@0x/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..94ab63ac6 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,9 +1,9 @@
-import { colors } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
+import { colors, Link } from '@0x/react-shared';
+import { BigNumber } from '@0x/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 { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading';
import { Menu, MenuTheme } from 'ts/components/portal/menu';
import { Section } from 'ts/components/portal/section';
import { TextHeader } from 'ts/components/portal/text_header';
-import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
+import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index';
import { TokenBalances } from 'ts/components/token_balances';
import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
import { TradeHistory } from 'ts/components/trade_history/trade_history';
@@ -210,12 +210,16 @@ export class Portal extends React.Component<PortalProps, PortalState> {
isLoaded: false,
};
}
- this.setState({
- trackedTokenStateByAddress,
- });
- // Fetch the actual balance/allowance.
- // tslint:disable-next-line:no-floating-promises
- this._fetchBalancesAndAllowancesAsync(newTokenAddresses);
+ this.setState(
+ {
+ trackedTokenStateByAddress,
+ },
+ () => {
+ // Fetch the actual balance/allowance.
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchBalancesAndAllowancesAsync(newTokenAddresses);
+ },
+ );
}
}
public render(): React.ReactNode {
@@ -317,7 +321,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 +393,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
);
@@ -541,6 +543,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
}
private _renderRelayerIndexSection(): React.ReactNode {
const isMobile = utils.isMobileWidth(this.props.screenWidth);
+ // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume
return (
<Section
header={!isMobile && <TextHeader labelText="0x Relayers" />}
@@ -551,7 +554,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
{this._renderStartOnboarding()}
</Container>
)}
- <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />
+ <RelayerIndex
+ networkId={this.props.networkId}
+ screenWidth={this.props.screenWidth}
+ cellStyle={RelayerIndexCellStyle.Minimized}
+ />
</Container>
}
/>
@@ -641,6 +648,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
}
private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]): Promise<void> {
+ if (_.isEmpty(tokenAddresses)) {
+ return;
+ }
const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress;
const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
const balancesAndAllowances = await Promise.all(
diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx
index 853da3a29..b6045b832 100644
--- a/packages/website/ts/components/portal/text_header.tsx
+++ b/packages/website/ts/components/portal/text_header.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { Text } from 'ts/components/ui/text';
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 193dd237a..7f1b4ebb4 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { Styles } from '@0x/react-shared';
import * as _ from 'lodash';
import { GridTile as PlainGridTile } from 'material-ui/GridList';
import * as React from 'react';
@@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme';
import { WebsiteBackendRelayerInfo } from 'ts/types';
import { utils } from 'ts/utils/utils';
+export enum RelayerGridTileStyle {
+ Expanded = 0,
+ Minimized,
+}
+
export interface RelayerGridTileProps {
relayerInfo: WebsiteBackendRelayerInfo;
networkId: number;
+ style: RelayerGridTileStyle;
}
const styles: Styles = {
@@ -30,10 +36,14 @@ const styles: Styles = {
height: '100%',
boxSizing: 'border-box',
},
- header: {
+ expandedHeader: {
height: '50%',
width: '100%',
},
+ minimizedHeader: {
+ height: '100%',
+ width: '100%',
+ },
body: {
height: '50%',
width: '100%',
@@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
!_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
? props.relayerInfo.primaryColor
: FALLBACK_PRIMARY_COLOR;
+ const isExpanded = props.style === RelayerGridTileStyle.Expanded;
+ const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader;
return (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv} onClick={onClick}>
- <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+ <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}>
<Image
className="mx-auto"
src={props.relayerInfo.logoImgUrl}
@@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
height={RELAYER_ICON_HEIGHT}
/>
</div>
- <div style={styles.body}>
- <div className="pb1" style={styles.relayerNameLabel}>
- {props.relayerInfo.name}
- </div>
- <Section titleText="Weekly Trade Volume">
- {!_.isUndefined(weeklyTxnVolume) && (
- <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
- )}
- </Section>
- <Container marginTop="10px">
- <Section titleText="Top Tokens">
- {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+ {isExpanded && (
+ <div style={styles.body}>
+ <div className="pb1" style={styles.relayerNameLabel}>
+ {props.relayerInfo.name}
+ </div>
+ <Section titleText="Weekly Trade Volume">
+ {!_.isUndefined(weeklyTxnVolume) && (
+ <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div>
+ )}
</Section>
- </Container>
- </div>
+ <Container marginTop="10px">
+ <Section titleText="Top Tokens">
+ {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />}
+ </Section>
+ </Container>
+ </div>
+ )}
</div>
</Island>
);
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 91dbeb27a..e88c20d7e 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress';
import { GridList } from 'material-ui/GridList';
import * as React from 'react';
-import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
+import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile';
import { Retry } from 'ts/components/ui/retry';
import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
import { backendClient } from 'ts/utils/backend_client';
+export enum RelayerIndexCellStyle {
+ Expanded = 0,
+ Minimized,
+}
+
export interface RelayerIndexProps {
networkId: number;
screenWidth: ScreenWidths;
+ cellStyle: RelayerIndexCellStyle;
}
interface RelayerIndexState {
@@ -18,7 +24,8 @@ interface RelayerIndexState {
error?: Error;
}
-const CELL_HEIGHT = 290;
+const CELL_HEIGHT_EXPANDED = 290;
+const CELL_HEIGHT_MINIMIZED = 225;
const NUMBER_OF_COLUMNS_LARGE = 3;
const NUMBER_OF_COLUMNS_MEDIUM = 2;
const NUMBER_OF_COLUMNS_SMALL = 2;
@@ -61,15 +68,23 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
numberOfRelayers,
this._numberOfColumnsForScreenWidth(this.props.screenWidth),
);
+ const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded;
+ const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED;
+ const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized;
return (
<GridList
- cellHeight={CELL_HEIGHT}
+ cellHeight={cellHeight}
cols={numberOfColumns}
padding={GRID_PADDING}
style={{ marginTop: -10, marginBottom: 0 }}
>
{this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
- <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+ <RelayerGridTile
+ key={index}
+ relayerInfo={relayerInfo}
+ networkId={this.props.networkId}
+ style={gridTileStyle}
+ />
))}
</GridList>
);
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index f3787bd27..558d99855 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -1,4 +1,4 @@
-import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx
index 107983dee..27438e5d5 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -1,4 +1,4 @@
-import { BigNumber, logUtils } from '@0xproject/utils';
+import { BigNumber, logUtils } from '@0x/utils';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
deleted file mode 100644
index a14ab54f5..000000000
--- a/packages/website/ts/components/sidebar_header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import * as React from 'react';
-
-interface SidebarHeaderProps {
- title: string;
- iconUrl: string;
-}
-
-interface SidebarHeaderState {}
-
-export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
- public render(): React.ReactNode {
- return (
- <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
- <div className="flex" style={{ fontSize: 25 }}>
- <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
- <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
- docs
- </div>
- </div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
- |
- </div>
- <div className="flex">
- <div>
- <img src={this.props.iconUrl} width="22" />
- </div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
- {this.props.title}
- </div>
- </div>
- </div>
- );
- }
-}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 5965ad9bd..92aecf046 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -4,9 +4,9 @@ import {
Networks,
Styles,
utils as sharedUtils,
-} from '@0xproject/react-shared';
-import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+} from '@0x/react-shared';
+import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import Divider from 'material-ui/Divider';
@@ -16,8 +16,8 @@ import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentRemove from 'material-ui/svg-icons/content/remove';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
-import firstBy = require('thenby');
+import ReactTooltip from 'react-tooltip';
+import firstBy from 'thenby';
import { Blockchain } from 'ts/blockchain';
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
import { SendButton } from 'ts/components/send_button';
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 806eaeea5..c88c29b8e 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { Styles } from '@0x/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 7cf3c6ecb..d5967cd1d 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,23 +1,16 @@
-import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
-import {
- colors,
- constants as sharedConstants,
- MenuSubsectionsBySection,
- NestedSidebarMenu,
- Styles,
-} from '@0xproject/react-shared';
+import { DocsInfo } from '@0x/react-docs';
+import { ALink, colors, Link, Styles } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
-import Menu from 'material-ui/Menu';
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 { DropDown } from 'ts/components/ui/drop_down';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -41,8 +34,7 @@ export interface TopBarProps {
translate: Translate;
docsVersion?: string;
availableDocVersions?: string[];
- menu?: DocsMenu;
- menuSubsectionsBySection?: MenuSubsectionsBySection;
+ sectionNameToLinks?: ObjectMap<ALink[]>;
displayType?: TopBarDisplayType;
docsInfo?: DocsInfo;
style?: React.CSSProperties;
@@ -80,20 +72,6 @@ const styles: Styles = {
},
};
-const DOC_WEBSITE_PATHS_TO_KEY = {
- [WebsitePaths.SolCov]: Key.SolCov,
- [WebsitePaths.SmartContracts]: Key.SmartContracts,
- [WebsitePaths.Web3Wrapper]: Key.Web3Wrapper,
- [WebsitePaths.SolCompiler]: Key.SolCompiler,
- [WebsitePaths.JSONSchemas]: Key.JsonSchemas,
- [WebsitePaths.Subproviders]: Key.Subproviders,
- [WebsitePaths.ContractWrappers]: Key.ContractWrappers,
- [WebsitePaths.Connect]: Key.Connect,
- [WebsitePaths.ZeroExJs]: Key.ZeroExJs,
- [WebsitePaths.OrderUtils]: Key.OrderUtils,
- [WebsitePaths.OrderWatcher]: Key.OrderWatcher,
-};
-
const DEFAULT_HEIGHT = 68;
const EXPANDED_HEIGHT = 75;
@@ -129,111 +107,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
? 'flex mx-auto items-center max-width-4'
: 'flex mx-auto items-center';
const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
- const developerSectionMenuItems = [
- <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
- </Link>,
- <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SmartContracts, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)}
- />
- </Link>,
- <a
- key="subMenuItem-standard-relayer-api"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_STANDARD_RELAYER_API_GITHUB}
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)}
- />
- </a>,
- <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
- />
- </Link>,
- <Link
- key="subMenuItem-contractWrappers"
- to={WebsitePaths.ContractWrappers}
- className="text-decoration-none"
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)}
- />
- </Link>,
- <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none">
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)}
- />
- </Link>,
- <a
- key="subMenuItem-whitePaper"
- target="_blank"
- className="text-decoration-none"
- href={`${WebsitePaths.Whitepaper}`}
- >
- <MenuItem
- style={{ fontSize: styles.menuItem.fontSize }}
- primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
- />
- </a>,
- <a
- key="subMenuItem-github"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_GITHUB_ORG}
- >
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
- </a>,
- ];
const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
@@ -245,15 +118,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
color: isNightVersion ? 'white' : 'black',
cursor: 'pointer',
};
- const activeNode = (
- <div className="flex relative" style={{ color: menuIconStyle.color }}>
- <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
- <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
- <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
- </div>
- </div>
- );
- const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
return (
<div
style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }}
@@ -266,56 +130,45 @@ 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" />
{!this._isViewingPortal() && (
<div className={menuClasses}>
<div className="flex items-center justify-between">
- <DropDown
- activeNode={activeNode}
- popoverContent={popoverContent}
- anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
- targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
- style={styles.menuItem}
- />
- <TopBarMenuItem
- title={this.props.translate.get(Key.Wiki, Deco.Cap)}
- path={`${WebsitePaths.Wiki}`}
- style={styles.menuItem}
- isNightVersion={isNightVersion}
- isExternal={false}
+ <DevelopersDropDown
+ location={this.props.location}
+ menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }}
+ translate={this.props.translate}
+ menuIconStyle={menuIconStyle}
/>
<TopBarMenuItem
title={this.props.translate.get(Key.Blog, Deco.Cap)}
path={constants.URL_BLOG}
style={styles.menuItem}
isNightVersion={isNightVersion}
- isExternal={true}
+ shouldOpenInNewTab={true}
/>
<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>
@@ -372,54 +225,35 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
onRequestChange={this._onMenuButtonClick.bind(this)}
>
<div className="clearfix">
- {this._renderDocsMenu()}
- {this._renderWiki()}
<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">
- <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
+ <Link to={WebsitePaths.Docs}>
+ <MenuItem className="py2">{this.props.translate.get(Key.Docs, 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"
- >
- <MenuItem className="py2">
- {this.props.translate.get(key, Deco.Cap)}{' '}
- {this.props.translate.get(Key.Docs, Deco.Cap)}
- </MenuItem>
- </Link>
- );
- }
- 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} 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} 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>
@@ -428,49 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
</Drawer>
);
}
- private _renderDocsMenu(): React.ReactNode {
- const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
- return this._doesUrlInclude(websitePath);
- });
- // HACK: We need to make sure the SCROLL_CONTAINER is loaded before rendering the Sidebar
- // because the sidebar renders `react-scroll` links which depend on the scroll container already
- // being rendered.
- const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID);
- if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) {
- return undefined;
- }
- return (
- <div className="lg-hide md-hide">
- <NestedSidebarMenu
- topLevelMenu={this.props.menu}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- sidebarHeader={this.props.sidebarHeader}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- selectedVersion={this.props.docsVersion}
- versions={this.props.availableDocVersions}
- onVersionSelected={this.props.onVersionSelected}
- />
- </div>
- );
- }
- private _renderWiki(): React.ReactNode {
- if (!this._isViewingWiki()) {
- return undefined;
- }
-
- return (
- <div className="lg-hide md-hide">
- <NestedSidebarMenu
- topLevelMenu={this.props.menuSubsectionsBySection}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- sidebarHeader={this.props.sidebarHeader}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- />
- </div>
- );
- }
private _onMenuButtonClick(): void {
this.setState({
isDrawerOpen: !this.state.isDrawerOpen,
@@ -479,28 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
private _isViewingPortal(): boolean {
return _.includes(this.props.location.pathname, WebsitePaths.Portal);
}
- private _isViewingDocs(): boolean {
- return _.includes(this.props.location.pathname, WebsitePaths.Docs);
- }
private _isViewingFAQ(): boolean {
return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
}
- private _doesUrlInclude(aPath: string): boolean {
- return _.includes(this.props.location.pathname, aPath);
- }
- private _isViewingWiki(): boolean {
- return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
- }
private _shouldDisplayBottomBar(): boolean {
- const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => {
- return this._doesUrlInclude(websitePath);
- });
- return (
- isViewingDocsPage ||
- this._isViewingWiki() ||
- this._isViewingFAQ() ||
- this._isViewingDocs() ||
- this._isViewingPortal()
- );
+ return this._isViewingFAQ() || this._isViewingPortal();
}
} // tslint:disable:max-file-line-count
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..9f15cffbb 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,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
import { CallToAction } from 'ts/components/ui/button';
@@ -13,7 +12,7 @@ interface TopBarMenuItemProps {
title: string;
path?: string;
isPrimary?: boolean;
- isExternal: boolean;
+ shouldOpenInNewTab?: boolean;
style?: React.CSSProperties;
className?: string;
isNightVersion?: boolean;
@@ -26,6 +25,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
isPrimary: false,
style: DEFAULT_STYLE,
className: '',
+ shouldOpenInNewTab: false,
isNightVersion: false,
};
public render(): React.ReactNode {
@@ -38,20 +38,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} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}>
+ {itemContent}
+ </Link>
</div>
);
}
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index 294fb8590..e701686b0 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Party } from 'ts/components/ui/party';
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index 321a8b0e1..667027dce 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -1,6 +1,6 @@
-import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared';
-import { BigNumber } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { colors, EtherscanLinkSuffixes } from '@0x/react-shared';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as moment from 'moment';
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index b571d8c1c..32e0f1be8 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { AlertTypes } from 'ts/types';
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index 93d6b0ebb..fc754421a 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Spinner } from 'ts/components/ui/spinner';
diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx
index 9e5a256b6..a1a8ff89b 100644
--- a/packages/website/ts/components/ui/balance.tsx
+++ b/packages/website/ts/components/ui/balance.tsx
@@ -1,4 +1,4 @@
-import { BigNumber } from '@0xproject/utils';
+import { BigNumber } from '@0x/utils';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 75ba7bcff..92f927843 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import { darken, saturate } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -10,11 +10,13 @@ export interface ButtonProps {
fontFamily?: string;
backgroundColor?: string;
borderColor?: string;
+ borderRadius?: string;
width?: string;
padding?: string;
type?: string;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+ textAlign?: string;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -29,11 +31,12 @@ export const Button = styled(PlainButton)`
color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
- border-radius: 6px;
+ border-radius: ${props => props.borderRadius};
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
+ text-align: ${props => props.textAlign};
background-color: ${props => props.backgroundColor};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
@@ -52,11 +55,13 @@ export const Button = styled(PlainButton)`
Button.defaultProps = {
fontSize: '12px',
+ borderRadius: '6px',
backgroundColor: colors.white,
width: 'auto',
fontFamily: 'Roboto',
isDisabled: false,
padding: '0.8em 2.2em',
+ textAlign: 'center',
};
Button.displayName = 'Button';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index f2ae68b70..ece077563 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,7 +15,11 @@ export interface ContainerProps {
paddingRight?: StringOrNum;
paddingLeft?: StringOrNum;
backgroundColor?: string;
+ background?: string;
borderRadius?: StringOrNum;
+ borderBottomLeftRadius?: StringOrNum;
+ borderBottomRightRadius?: StringOrNum;
+ borderBottom?: StringOrNum;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 0330d1843..403cd4607 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,8 +1,8 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import * as ReactDOM from 'react-dom';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
interface CopyIconProps {
data: string;
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 0cb4b387c..87ce32126 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,24 +1,23 @@
+import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { Link } from 'react-router-dom';
-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 +29,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}>
<div
onClick={this.props.onClick.bind(this)}
className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 4d5caef08..4138b3fe5 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
import Popover from 'material-ui/Popover';
import * as React from 'react';
import { MaterialUIPosition } from 'ts/types';
@@ -21,6 +22,7 @@ export interface DropDownProps {
zDepth?: number;
activateEvent?: DropdownMouseEvent;
closeEvent?: DropdownMouseEvent;
+ popoverStyle?: React.CSSProperties;
}
interface DropDownState {
@@ -34,6 +36,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
zDepth: 1,
activateEvent: DropdownMouseEvent.Hover,
closeEvent: DropdownMouseEvent.Hover,
+ popoverStyle: {},
};
private _isHovering: boolean;
private _popoverCloseCheckIntervalId: number;
@@ -73,10 +76,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
anchorEl={this.state.anchorEl}
anchorOrigin={this.props.anchorOrigin}
targetOrigin={this.props.targetOrigin}
- onRequestClose={this._closePopover.bind(this)}
+ onRequestClose={
+ this.props.closeEvent === DropdownMouseEvent.Click
+ ? this._closePopover.bind(this)
+ : _.noop.bind(_)
+ }
useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
animated={false}
zDepth={this.props.zDepth}
+ style={this.props.popoverStyle}
>
<div
onMouseEnter={this._onHover.bind(this)}
@@ -92,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
if (this.props.activateEvent === DropdownMouseEvent.Click) {
this.setState({
- isDropDownOpen: true,
+ isDropDownOpen: !this.state.isDropDownOpen,
anchorEl: event.currentTarget,
});
}
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index f449a8e75..12f8636eb 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -1,6 +1,6 @@
-import { EtherscanLinkSuffixes } from '@0xproject/react-shared';
+import { EtherscanLinkSuffixes } from '@0x/react-shared';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 0beb69123..a7fba8a33 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,7 +1,7 @@
-import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
interface EtherScanIconProps {
addressOrTxHash: string;
diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx
index ac3c30fec..7c3a482a4 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { Styles } from '@0x/react-shared';
import * as React from 'react';
import { InputLabel } from 'ts/components/ui/input_label';
diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx
index d827eebb9..831d888f5 100644
--- a/packages/website/ts/components/ui/help_tooltip.tsx
+++ b/packages/website/ts/components/ui/help_tooltip.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
interface HelpTooltipProps {
style?: React.CSSProperties;
diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx
index 13cd239da..9f469ec69 100644
--- a/packages/website/ts/components/ui/icon_button.tsx
+++ b/packages/website/ts/components/ui/icon_button.tsx
@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index b5b374973..9eca04a5d 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -1,4 +1,4 @@
-import blockies = require('blockies');
+import blockies from 'blockies';
import * as _ from 'lodash';
import * as React from 'react';
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
index e01a71a53..e5f4f6c70 100644
--- a/packages/website/ts/components/ui/input.tsx
+++ b/packages/website/ts/components/ui/input.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { styled } from 'ts/style/theme';
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 8eda45a5d..e7afb5a17 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0x/react-shared';
import * as React from 'react';
export interface InputLabelProps {
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 0bb99b9d8..a8daf4102 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@0xproject/react-shared';
-import { errorUtils } from '@0xproject/utils';
+import { colors } from '@0x/react-shared';
+import { errorUtils } from '@0x/utils';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index a25550475..f9e0967d4 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,7 +1,7 @@
-import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import ReactTooltip = require('react-tooltip');
+import ReactTooltip from 'react-tooltip';
import { EthereumAddress } from 'ts/components/ui/ethereum_address';
import { Identicon } from 'ts/components/ui/identicon';
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx
index db0a4188d..c97b1e700 100644
--- a/packages/website/ts/components/ui/pointer.tsx
+++ b/packages/website/ts/components/ui/pointer.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { styled } from 'ts/style/theme';
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index 0f96586ec..5080462fa 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
export interface RequiredLabelProps {
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 8a9349c6d..45ee752e3 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
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>
);
diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx
index e8670cc3e..dc73e74e3 100644
--- a/packages/website/ts/components/ui/spinner.tsx
+++ b/packages/website/ts/components/ui/spinner.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
import { styled } from 'ts/style/theme';
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index f1d1ae7d4..406da8fe1 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import * as React from 'react';
interface SwapIconProps {
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index cd8f290e3..c13e21913 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors } from '@0x/react-shared';
import { darken } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -19,7 +19,9 @@ export interface TextProps {
textDecorationLine?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
hoverColor?: string;
+ letterSpacing?: string | number;
noWrap?: boolean;
+ textAlign?: string;
display?: string;
}
@@ -34,6 +36,8 @@ export const Text = styled(PlainText)`
font-style: ${props => props.fontStyle};
font-weight: ${props => props.fontWeight};
font-size: ${props => props.fontSize};
+ text-align: ${props => props.textAlign};
+ letter-spacing: ${props => props.letterSpacing};
text-decoration-line: ${props => props.textDecorationLine};
${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
${props => (props.center ? 'text-align: center' : '')};
diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx
index a8d18006e..d723757d2 100644
--- a/packages/website/ts/components/visual_order.tsx
+++ b/packages/website/ts/components/visual_order.tsx
@@ -1,4 +1,4 @@
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import * as React from 'react';
import { Party } from 'ts/components/ui/party';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 6abaa840b..d9da0b9d5 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,10 +1,10 @@
-import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
-import { BigNumber, errorUtils } from '@0xproject/utils';
+import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
+import { BigNumber, errorUtils } from '@0x/utils';
import * as _ from 'lodash';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
import * as React from 'react';
-import firstBy = require('thenby');
+import firstBy from 'thenby';
import { Blockchain } from 'ts/blockchain';
import { AccountConnection } from 'ts/components/ui/account_connection';
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 54ace7ae2..7de3afbf8 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -1,6 +1,6 @@
-import { Styles } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import { Styles } from '@0x/react-shared';
+import { BigNumber, logUtils } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';