From 5a90fece8020f9be5c0f52f6ccf65dacb824b1cd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 5 Mar 2018 13:53:13 +0100 Subject: Moved over all pages/shared components and dependencies to react-shared --- packages/react-shared/package.json | 4 +- .../src/ts/components/anchor_title.tsx | 4 +- .../src/ts/components/markdown_code_block.tsx | 25 +++ .../src/ts/components/markdown_link_block.tsx | 47 ++++++ .../src/ts/components/markdown_section.tsx | 87 ++++++++++ .../src/ts/components/nested_sidebar_menu.tsx | 179 +++++++++++++++++++++ .../src/ts/components/section_header.tsx | 65 ++++++++ .../src/ts/components/version_drop_down.tsx | 46 ++++++ packages/react-shared/src/ts/constants.ts | 4 - packages/react-shared/src/ts/globals.d.ts | 1 + packages/react-shared/src/ts/index.ts | 12 +- packages/react-shared/src/ts/types.ts | 4 + packages/react-shared/src/ts/utils.ts | 5 - packages/react-shared/src/ts/utils/colors.ts | 48 ++++++ packages/react-shared/src/ts/utils/constants.ts | 6 + packages/react-shared/src/ts/utils/utils.ts | 32 ++++ packages/website/package.json | 1 - .../components/dialogs/blockchain_err_dialog.tsx | 2 +- .../dialogs/eth_weth_conversion_dialog.tsx | 2 +- .../ts/components/dialogs/ledger_config_dialog.tsx | 2 +- .../dialogs/portal_disclaimer_dialog.tsx | 2 +- .../dialogs/u2f_not_supported_dialog.tsx | 2 +- packages/website/ts/components/eth_wrappers.tsx | 2 +- packages/website/ts/components/fill_order.tsx | 2 +- .../website/ts/components/fill_warning_dialog.tsx | 2 +- .../flash_messages/token_send_completed.tsx | 2 +- .../flash_messages/transaction_submitted.tsx | 2 +- packages/website/ts/components/footer.tsx | 2 +- .../generate_order/generate_order_form.tsx | 2 +- .../components/generate_order/new_token_form.tsx | 2 +- .../website/ts/components/inputs/address_input.tsx | 2 +- .../ts/components/inputs/balance_bounded_input.tsx | 2 +- .../ts/components/inputs/token_amount_input.tsx | 2 +- .../website/ts/components/inputs/token_input.tsx | 2 +- packages/website/ts/components/portal.tsx | 2 +- packages/website/ts/components/token_balances.tsx | 3 +- .../ts/components/top_bar/provider_display.tsx | 2 +- .../ts/components/top_bar/provider_picker.tsx | 2 +- packages/website/ts/components/top_bar/top_bar.tsx | 6 +- .../ts/components/top_bar/top_bar_menu_item.tsx | 2 +- .../ts/components/track_token_confirmation.tsx | 2 +- .../trade_history/trade_history_item.tsx | 2 +- packages/website/ts/components/ui/alert.tsx | 2 +- packages/website/ts/components/ui/copy_icon.tsx | 2 +- .../website/ts/components/ui/etherscan_icon.tsx | 2 +- packages/website/ts/components/ui/input_label.tsx | 2 +- .../ts/components/ui/lifecycle_raised_button.tsx | 2 +- packages/website/ts/components/ui/party.tsx | 2 +- .../website/ts/components/ui/required_label.tsx | 2 +- packages/website/ts/components/ui/swap_icon.tsx | 2 +- packages/website/ts/globals.d.ts | 1 - packages/website/ts/pages/about/about.tsx | 3 +- packages/website/ts/pages/about/profile.tsx | 3 +- .../website/ts/pages/documentation/comment.tsx | 2 +- .../website/ts/pages/documentation/doc_page.tsx | 3 +- .../website/ts/pages/documentation/docs_info.ts | 2 +- .../ts/pages/documentation/documentation.tsx | 23 +-- .../ts/pages/documentation/event_definition.tsx | 3 +- .../ts/pages/documentation/method_block.tsx | 3 +- .../website/ts/pages/documentation/source_link.tsx | 2 +- packages/website/ts/pages/documentation/type.tsx | 3 +- .../ts/pages/documentation/type_definition.tsx | 3 +- packages/website/ts/pages/faq/faq.tsx | 3 +- packages/website/ts/pages/faq/question.tsx | 2 +- packages/website/ts/pages/landing/landing.tsx | 2 +- .../ts/pages/shared/markdown_code_block.tsx | 25 --- .../ts/pages/shared/markdown_link_block.tsx | 47 ------ .../website/ts/pages/shared/markdown_section.tsx | 84 ---------- .../ts/pages/shared/nested_sidebar_menu.tsx | 177 -------------------- .../website/ts/pages/shared/section_header.tsx | 62 ------- .../website/ts/pages/shared/version_drop_down.tsx | 45 ------ packages/website/ts/pages/wiki/wiki.tsx | 21 ++- packages/website/ts/types.ts | 4 - packages/website/ts/utils/colors.ts | 48 ------ packages/website/ts/utils/configs.ts | 2 - packages/website/ts/utils/mui_theme.ts | 2 +- packages/website/ts/utils/utils.ts | 23 --- 77 files changed, 629 insertions(+), 610 deletions(-) create mode 100644 packages/react-shared/src/ts/components/markdown_code_block.tsx create mode 100644 packages/react-shared/src/ts/components/markdown_link_block.tsx create mode 100644 packages/react-shared/src/ts/components/markdown_section.tsx create mode 100644 packages/react-shared/src/ts/components/nested_sidebar_menu.tsx create mode 100644 packages/react-shared/src/ts/components/section_header.tsx create mode 100644 packages/react-shared/src/ts/components/version_drop_down.tsx delete mode 100644 packages/react-shared/src/ts/constants.ts delete mode 100644 packages/react-shared/src/ts/utils.ts create mode 100644 packages/react-shared/src/ts/utils/colors.ts create mode 100644 packages/react-shared/src/ts/utils/constants.ts create mode 100644 packages/react-shared/src/ts/utils/utils.ts delete mode 100644 packages/website/ts/pages/shared/markdown_code_block.tsx delete mode 100644 packages/website/ts/pages/shared/markdown_link_block.tsx delete mode 100644 packages/website/ts/pages/shared/markdown_section.tsx delete mode 100644 packages/website/ts/pages/shared/nested_sidebar_menu.tsx delete mode 100644 packages/website/ts/pages/shared/section_header.tsx delete mode 100644 packages/website/ts/pages/shared/version_drop_down.tsx delete mode 100644 packages/website/ts/utils/colors.ts (limited to 'packages') diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index e1cc2ad8b..e96659e47 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -7,6 +7,7 @@ "scripts": { "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'", "build": "tsc", + "build:watch": "tsc -w", "clean": "shx rm -rf lib" }, "author": "Fabio Berger", @@ -29,6 +30,7 @@ "react-dom": "15.6.1", "lodash": "^4.17.4", "react-scroll": "^1.5.2", - "react-tap-event-plugin": "^2.0.1" + "react-tap-event-plugin": "^2.0.1", + "react-highlight": "0xproject/react-highlight" } } diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx index aa839cac9..f44354097 100644 --- a/packages/react-shared/src/ts/components/anchor_title.tsx +++ b/packages/react-shared/src/ts/components/anchor_title.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; -import { constants } from '../constants'; import { HeaderSizes, Styles } from '../types'; -import { utils } from '../utils'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { h2: -20, diff --git a/packages/react-shared/src/ts/components/markdown_code_block.tsx b/packages/react-shared/src/ts/components/markdown_code_block.tsx new file mode 100644 index 000000000..2070bb8e1 --- /dev/null +++ b/packages/react-shared/src/ts/components/markdown_code_block.tsx @@ -0,0 +1,25 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import * as HighLight from 'react-highlight'; + +export interface MarkdownCodeBlockProps { + value: string; + language: string; +} + +export interface MarkdownCodeBlockState {} + +export class MarkdownCodeBlock extends React.Component { + // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying + // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { + return nextProps.value !== this.props.value || nextProps.language !== this.props.language; + } + public render() { + return ( + + {this.props.value} + + ); + } +} diff --git a/packages/react-shared/src/ts/components/markdown_link_block.tsx b/packages/react-shared/src/ts/components/markdown_link_block.tsx new file mode 100644 index 000000000..8f5862249 --- /dev/null +++ b/packages/react-shared/src/ts/components/markdown_link_block.tsx @@ -0,0 +1,47 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +export interface MarkdownLinkBlockProps { + href: string; +} + +export interface MarkdownLinkBlockState {} + +export class MarkdownLinkBlock extends React.Component { + // Re-rendering a linkBlock causes it to remain unclickable. + // We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { + return nextProps.href !== this.props.href; + } + public render() { + const href = this.props.href; + const isLinkToSection = _.startsWith(href, '#'); + // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons + if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { + return ( + + {this.props.children} + + ); + } else if (isLinkToSection) { + return ( + + {this.props.children} + + ); + } else { + return {this.props.children}; + } + } + private _onHashUrlClick(href: string) { + const hash = href.split('#')[1]; + utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID); + utils.setUrlHash(hash); + } +} diff --git a/packages/react-shared/src/ts/components/markdown_section.tsx b/packages/react-shared/src/ts/components/markdown_section.tsx new file mode 100644 index 000000000..682b6ef8f --- /dev/null +++ b/packages/react-shared/src/ts/components/markdown_section.tsx @@ -0,0 +1,87 @@ +import * as _ from 'lodash'; +import RaisedButton from 'material-ui/RaisedButton'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; + +import { HeaderSizes } from '../types'; +import { colors } from '../utils/colors'; +import { utils } from '../utils/utils'; + +import { AnchorTitle } from './anchor_title'; +import { MarkdownCodeBlock } from './markdown_code_block'; +import { MarkdownLinkBlock } from './markdown_link_block'; + +export interface MarkdownSectionProps { + sectionName: string; + markdownContent: string; + headerSize?: HeaderSizes; + githubLink?: string; +} + +export interface MarkdownSectionState { + shouldShowAnchor: boolean; +} + +export class MarkdownSection extends React.Component { + public static defaultProps: Partial = { + headerSize: HeaderSizes.H3, + }; + constructor(props: MarkdownSectionProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const sectionName = this.props.sectionName; + const id = utils.getIdFromName(sectionName); + return ( +
+ +
+
+ + + +
+
+ {!_.isUndefined(this.props.githubLink) && ( + + Edit on Github + + )} +
+
+
+ + +
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..2506124af --- /dev/null +++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,179 @@ +import * as _ from 'lodash'; +import MenuItem from 'material-ui/MenuItem'; +import * as React from 'react'; +import { Link as ScrollLink } from 'react-scroll'; + +import { MenuSubsectionsBySection, Styles } from '../types'; +import { colors } from '../utils/colors'; +import { constants } from '../utils/constants'; +import { utils } from '../utils/utils'; + +import { VersionDropDown } from './version_drop_down'; + +export interface NestedSidebarMenuProps { + topLevelMenu: { [topLevel: string]: string[] }; + menuSubsectionsBySection: MenuSubsectionsBySection; + title: string; + shouldDisplaySectionHeaders?: boolean; + onMenuItemClick?: () => void; + selectedVersion?: string; + versions?: string[]; +} + +export interface NestedSidebarMenuState {} + +const styles: Styles = { + menuItemWithHeaders: { + minHeight: 0, + }, + menuItemWithoutHeaders: { + minHeight: 48, + }, + menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, + lineHeight: 2, + padding: 0, + }, +}; + +const titleToIcon: { [title: string]: string } = { + '0x.js': 'zeroExJs.png', + '0x Connect': 'connect.png', + '0x Smart Contracts': 'contracts.png', + Wiki: 'wiki.png', +}; + +export class NestedSidebarMenu extends React.Component { + public static defaultProps: Partial = { + shouldDisplaySectionHeaders: true, + onMenuItemClick: _.noop, + }; + public render() { + const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { + const finalSectionName = sectionName.replace(/-/g, ' '); + if (this.props.shouldDisplaySectionHeaders) { + const id = utils.getIdFromName(sectionName); + return ( +
+
+ {finalSectionName.toUpperCase()} +
+ {this._renderMenuItems(menuItems)} +
+ ); + } else { + return
{this._renderMenuItems(menuItems)}
; + } + }); + return ( +
+ {this._renderEmblem()} + {!_.isUndefined(this.props.versions) && + !_.isUndefined(this.props.selectedVersion) && ( + + )} +
{navigation}
+
+ ); + } + private _renderEmblem() { + return ( +
+
+
+ 0x +
+
+ docs +
+
+
+ | +
+
+
+ +
+
+ {this.props.title} +
+
+
+ ); + } + private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + const menuItemStyles = this.props.shouldDisplaySectionHeaders + ? styles.menuItemWithHeaders + : styles.menuItemWithoutHeaders; + const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; + const menuItems = _.map(menuItemNames, menuItemName => { + const id = utils.getIdFromName(menuItemName); + return ( +
+ + + {menuItemName} + + + {this._renderMenuItemSubsections(menuItemName)} +
+ ); + }); + return menuItems; + } + private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { + if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { + return null; + } + return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); + } + private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { + return ( +
    + {_.map(entityNames, entityName => { + const name = `${menuItemName}-${entityName}`; + const id = utils.getIdFromName(name); + return ( +
  • + + + {entityName} + + +
    • + ); + })} +
+ ); + } + private _onMenuItemClick(name: string): void { + const id = utils.getIdFromName(name); + utils.setUrlHash(id); + this.props.onMenuItemClick(); + } +} diff --git a/packages/react-shared/src/ts/components/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx new file mode 100644 index 000000000..90fabf9ff --- /dev/null +++ b/packages/react-shared/src/ts/components/section_header.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { Element as ScrollElement } from 'react-scroll'; + +import { HeaderSizes } from '../types'; +import { colors } from '../utils/colors'; +import { utils } from '../utils/utils'; + +import { AnchorTitle } from './anchor_title'; + +export interface SectionHeaderProps { + sectionName: string; + headerSize?: HeaderSizes; +} + +export interface SectionHeaderState { + shouldShowAnchor: boolean; +} + +export class SectionHeader extends React.Component { + public static defaultProps: Partial = { + headerSize: HeaderSizes.H2, + }; + constructor(props: SectionHeaderProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const sectionName = this.props.sectionName.replace(/-/g, ' '); + const id = utils.getIdFromName(sectionName); + return ( +
+ + + {sectionName} + + } + id={id} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + +
+ ); + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} diff --git a/packages/react-shared/src/ts/components/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx new file mode 100644 index 000000000..86fe43507 --- /dev/null +++ b/packages/react-shared/src/ts/components/version_drop_down.tsx @@ -0,0 +1,46 @@ +import * as _ from 'lodash'; +import DropDownMenu from 'material-ui/DropDownMenu'; +import MenuItem from 'material-ui/MenuItem'; +import * as React from 'react'; + +import { utils } from '../utils/utils'; + +export interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; +} + +export interface VersionDropDownState {} + +export class VersionDropDown extends React.Component { + public render() { + return ( +
+ + {this._renderDropDownItems()} + +
+ ); + } + private _renderDropDownItems() { + const items = _.map(this.props.versions, version => { + return ; + }); + return items; + } + private _updateSelectedVersion(e: any, index: number, semver: string) { + let path = window.location.pathname; + const lastChar = path[path.length - 1]; + if (_.isFinite(_.parseInt(lastChar))) { + const pathSections = path.split('/'); + pathSections.pop(); + path = pathSections.join('/'); + } + const baseUrl = utils.getCurrentBaseUrl(); + window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`; + } +} diff --git a/packages/react-shared/src/ts/constants.ts b/packages/react-shared/src/ts/constants.ts deleted file mode 100644 index 20d0c6e92..000000000 --- a/packages/react-shared/src/ts/constants.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const constants = { - DOCS_SCROLL_DURATION_MS: 0, - DOCS_CONTAINER_ID: 'documentation', -}; diff --git a/packages/react-shared/src/ts/globals.d.ts b/packages/react-shared/src/ts/globals.d.ts index e69de29bb..875721533 100644 --- a/packages/react-shared/src/ts/globals.d.ts +++ b/packages/react-shared/src/ts/globals.d.ts @@ -0,0 +1 @@ +declare module 'react-highlight'; diff --git a/packages/react-shared/src/ts/index.ts b/packages/react-shared/src/ts/index.ts index d33638e62..dde77b7b9 100644 --- a/packages/react-shared/src/ts/index.ts +++ b/packages/react-shared/src/ts/index.ts @@ -1,6 +1,12 @@ export { AnchorTitle } from './components/anchor_title'; +export { MarkdownLinkBlock } from './components/markdown_link_block'; +export { MarkdownCodeBlock } from './components/markdown_code_block'; +export { MarkdownSection } from './components/markdown_section'; +export { NestedSidebarMenu } from './components/nested_sidebar_menu'; +export { SectionHeader } from './components/section_header'; -export { HeaderSizes, Styles } from './types'; +export { HeaderSizes, Styles, MenuSubsectionsBySection } from './types'; -export { utils } from './utils'; -export { constants } from './constants'; +export { utils } from './utils/utils'; +export { constants } from './utils/constants'; +export { colors } from './utils/colors'; diff --git a/packages/react-shared/src/ts/types.ts b/packages/react-shared/src/ts/types.ts index e4fe7bff9..f9d561d1a 100644 --- a/packages/react-shared/src/ts/types.ts +++ b/packages/react-shared/src/ts/types.ts @@ -7,3 +7,7 @@ export enum HeaderSizes { H2 = 'h2', H3 = 'h3', } + +export interface MenuSubsectionsBySection { + [section: string]: string[]; +} diff --git a/packages/react-shared/src/ts/utils.ts b/packages/react-shared/src/ts/utils.ts deleted file mode 100644 index 822b67496..000000000 --- a/packages/react-shared/src/ts/utils.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const utils = { - setUrlHash(anchorId: string) { - window.location.hash = anchorId; - }, -}; diff --git a/packages/react-shared/src/ts/utils/colors.ts b/packages/react-shared/src/ts/utils/colors.ts new file mode 100644 index 000000000..2eead95c7 --- /dev/null +++ b/packages/react-shared/src/ts/utils/colors.ts @@ -0,0 +1,48 @@ +import { colors as materialUiColors } from 'material-ui/styles'; + +export const colors = { + ...materialUiColors, + gray40: '#F8F8F8', + grey50: '#FAFAFA', + grey100: '#F5F5F5', + lightestGrey: '#F0F0F0', + greyishPink: '#E6E5E5', + grey300: '#E0E0E0', + beigeWhite: '#E4E4E4', + grey350: '#cacaca', + grey400: '#BDBDBD', + lightGrey: '#BBBBBB', + grey500: '#9E9E9E', + grey: '#A5A5A5', + darkGrey: '#818181', + landingLinkGrey: '#919191', + grey700: '#616161', + grey750: '#515151', + grey800: '#424242', + darkerGrey: '#393939', + heroGrey: '#404040', + projectsGrey: '#343333', + darkestGrey: '#272727', + dharmaDarkGrey: '#252525', + lightBlue: '#60A4F4', + lightBlueA700: '#0091EA', + linkBlue: '#1D5CDE', + darkBlue: '#4D5481', + turquois: '#058789', + lightPurple: '#A81CA6', + purple: '#690596', + red200: '#EF9A9A', + red: '#E91751', + red500: '#F44336', + red600: '#E53935', + limeGreen: '#66DE75', + lightGreen: '#4DC55C', + lightestGreen: '#89C774', + brightGreen: '#00C33E', + green400: '#66BB6A', + green: '#4DA24B', + amber600: '#FFB300', + orange: '#E69D00', + amber800: '#FF8F00', + darkYellow: '#caca03', +}; diff --git a/packages/react-shared/src/ts/utils/constants.ts b/packages/react-shared/src/ts/utils/constants.ts new file mode 100644 index 000000000..79d1d9ca3 --- /dev/null +++ b/packages/react-shared/src/ts/utils/constants.ts @@ -0,0 +1,6 @@ +export const constants = { + DOCS_SCROLL_DURATION_MS: 0, + DOCS_CONTAINER_ID: 'documentation', + SCROLL_CONTAINER_ID: 'documentation', + SCROLL_TOP_ID: 'pageScrollTop', +}; diff --git a/packages/react-shared/src/ts/utils/utils.ts b/packages/react-shared/src/ts/utils/utils.ts new file mode 100644 index 000000000..7498342b6 --- /dev/null +++ b/packages/react-shared/src/ts/utils/utils.ts @@ -0,0 +1,32 @@ +import * as _ from 'lodash'; +import { scroller } from 'react-scroll'; + +import { constants } from './constants'; + +export const utils = { + setUrlHash(anchorId: string) { + window.location.hash = anchorId; + }, + scrollToHash(hash: string, containerId: string): void { + let finalHash = hash; + if (_.isEmpty(hash)) { + finalHash = constants.SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(finalHash, { + duration: 0, + offset: 0, + containerId, + }); + }, + getIdFromName(name: string) { + const id = name.replace(/ /g, '-'); + return id; + }, + getCurrentBaseUrl() { + const port = window.location.port; + const hasPort = !_.isUndefined(port); + const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; + return baseUrl; + }, +}; diff --git a/packages/website/package.json b/packages/website/package.json index e6790abbc..74bc2f8a6 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -44,7 +44,6 @@ "react-document-title": "^2.0.3", "react-dom": "15.6.1", "react-ga": "^2.4.1", - "react-highlight": "0xproject/react-highlight", "react-html5video": "^2.1.0", "react-inlinesvg": "^0.5.5", "react-markdown": "^3.2.2", diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 278e2bbf5..7353a8767 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,10 +1,10 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrs, Networks } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; 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 acd4a7110..5c61f0d57 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -6,7 +7,6 @@ import { Blockchain } from 'ts/blockchain'; import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Side, Token } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface EthWethConversionDialogProps { blockchain: Blockchain; diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index bc5f05241..5836fec0e 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -11,7 +12,6 @@ import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index 3ecc454a0..b31667121 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; interface PortalDisclaimerDialogProps { isOpen: boolean; 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 098e3e26d..6ac9cf917 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; interface U2fNotSupportedDialogProps { diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index c2cdf6751..698b30815 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,4 +1,5 @@ import { ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; @@ -17,7 +18,6 @@ import { TokenByAddress, TokenState, } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 51e44134c..d7eecbcd3 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,4 +1,5 @@ import { Order as ZeroExOrder, ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as accounting from 'accounting'; import * as _ from 'lodash'; @@ -21,7 +22,6 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 165d21b34..d3215a6c1 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; interface FillWarningDialogProps { isOpen: boolean; diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx index 18f371624..a3b056758 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx @@ -1,9 +1,9 @@ import { ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { Token } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface TokenSendCompletedProps { diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index 862e382dd..188f1f9a6 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -1,6 +1,6 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; interface TransactionSubmittedProps { etherScanLinkIfExists?: string; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 810460cac..957ed2044 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; @@ -5,7 +6,6 @@ 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 { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; 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 a3f222784..e14991993 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,4 +1,5 @@ import { ECSignature, Order, ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -20,7 +21,6 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; 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 f76830a49..e7f3b93c6 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { Alert } from 'ts/components/ui/alert'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; import { RequiredLabel } from 'ts/components/ui/required_label'; import { AlertTypes, Token, TokenByAddress } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface NewTokenFormProps { blockchain: Blockchain; diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index dd4131140..7ca4af968 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,9 +1,9 @@ +import { colors } from '@0xproject/react-shared'; import { addressUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; import { RequiredLabel } from 'ts/components/ui/required_label'; -import { colors } from 'ts/utils/colors'; interface AddressInputProps { disabled?: boolean; diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index 3bbc7a5f6..253b01871 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; import { RequiredLabel } from 'ts/components/ui/required_label'; import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface BalanceBoundedInputProps { diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 2b167d875..53248c065 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,4 +1,5 @@ import { ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; import { InputErrMsg, Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface TokenAmountInputProps { userAddress: string; diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 5df19b28c..545e9a095 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { InputLabel } from 'ts/components/ui/input_label'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types'; -import { colors } from 'ts/utils/colors'; const TOKEN_ICON_DIMENSION = 80; diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index 4871997ac..d71e821c6 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; @@ -24,7 +25,6 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index e321b247b..9065ba2d8 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,5 +1,5 @@ import { ZeroEx } from '0x.js'; -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import DharmaLoanFrame from 'dharma-loan-frame'; import * as _ from 'lodash'; @@ -34,7 +34,6 @@ import { TokenByAddress, TokenVisibility, } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 39e7f2a8c..89c506d0e 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx index be7e57d6f..6373d4900 100644 --- a/packages/website/ts/components/top_bar/provider_picker.tsx +++ b/packages/website/ts/components/top_bar/provider_picker.tsx @@ -1,10 +1,10 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; interface ProviderPickerProps { diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index df6110de3..58b699b77 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import Menu from 'material-ui/Menu'; @@ -13,10 +13,8 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; -import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; +import { Deco, DocsMenu, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; 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 e70381456..c0e674b17 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,7 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { colors } from 'ts/utils/colors'; const DEFAULT_STYLE = { color: colors.darkestGrey, diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 76971aefa..8c5ba7e6f 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -1,8 +1,8 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; import { Token, TokenByAddress } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface TrackTokenConfirmationProps { 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 7e42e64e6..3bab29691 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,4 +1,5 @@ import { ZeroEx } from '0x.js'; +import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; @@ -8,7 +9,6 @@ import * as ReactTooltip from 'react-tooltip'; import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; import { Party } from 'ts/components/ui/party'; import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types'; -import { colors } from 'ts/utils/colors'; const PRECISION = 5; const IDENTICON_DIAMETER = 40; diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index 54881b499..f81939255 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,6 +1,6 @@ +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import { AlertTypes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface AlertProps { type: AlertTypes; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index df55e0922..d58e50815 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,9 +1,9 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; 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 { colors } from 'ts/utils/colors'; interface CopyIconProps { data: string; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 3b17bd0fa..e7fc51070 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,8 +1,8 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { EtherscanLinkSuffixes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface EtherScanIconProps { diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index e2009ad20..6a3f26155 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,5 +1,5 @@ +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; export interface InputLabelProps { text: string | Element | React.ReactNode; diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 8ff856a75..c85e11884 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index ca2577b61..e120523fd 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,10 +1,10 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; import { EtherscanLinkSuffixes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; const IMAGE_DIMENSION = 100; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index a5e7a22ce..0f96586ec 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,5 +1,5 @@ +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; export interface RequiredLabelProps { label: string | React.ReactNode; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index c41592287..e465a8074 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,6 +1,6 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; interface SwapIconProps { swapTokensFn: () => void; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 19237db14..d43ab0f58 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -7,7 +7,6 @@ declare module 'whatwg-fetch'; declare module 'react-html5video'; declare module 'web3-provider-engine/subproviders/filters'; declare module 'thenby'; -declare module 'react-highlight'; declare module 'react-recaptcha'; declare module 'react-document-title'; declare module 'ethereumjs-tx'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 65dcdfa7b..7f1e0bf80 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index 6d9d10272..4361da103 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,8 +1,7 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; -import { colors } from 'ts/utils/colors'; const IMAGE_DIMENSION = 149; const styles: Styles = { diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx index 5f177e97e..b8902679a 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -1,7 +1,7 @@ +import { MarkdownCodeBlock } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as ReactMarkdown from 'react-markdown'; -import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; interface CommentProps { comment: string; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 2c8f1c103..b3b58c0c8 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,3 +1,4 @@ +import { MenuSubsectionsBySection } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import * as React from 'react'; @@ -7,7 +8,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Documentation } from 'ts/pages/documentation/documentation'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types'; +import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index 31e151fe8..09fb7a2bc 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -1,3 +1,4 @@ +import { MenuSubsectionsBySection } from '@0xproject/react-shared'; import compareVersions = require('compare-versions'); import * as _ from 'lodash'; import { @@ -6,7 +7,6 @@ import { DocsInfoConfig, DocsMenu, DoxityDocObj, - MenuSubsectionsBySection, SectionsMap, SupportedDocJson, TypeDocNode, diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 88331d1a7..3229bbd93 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -1,4 +1,13 @@ -import { Styles } from '@0xproject/react-shared'; +import { + colors, + constants as sharedConstants, + MarkdownSection, + MenuSubsectionsBySection, + NestedSidebarMenu, + SectionHeader, + Styles, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; @@ -11,16 +20,12 @@ import { MethodBlock } from 'ts/pages/documentation/method_block'; import { SourceLink } from 'ts/pages/documentation/source_link'; import { Type } from 'ts/pages/documentation/type'; import { TypeDefinition } from 'ts/pages/documentation/type_definition'; -import { MarkdownSection } from 'ts/pages/shared/markdown_section'; -import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; -import { SectionHeader } from 'ts/pages/shared/section_header'; import { AddressByContractName, DocAgnosticFormat, DoxityDocObj, EtherscanLinkSuffixes, Event, - MenuSubsectionsBySection, Networks, Property, SolidityMethod, @@ -28,8 +33,6 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; -import { colors } from 'ts/utils/colors'; -import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -77,7 +80,7 @@ export class Documentation extends React.Component
-
+
{this._renderDocumentation()}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index aead27d78..06d8a3d79 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,10 +1,9 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Type } from 'ts/pages/documentation/type'; import { Event, EventArg } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index a1f0b38ab..a52ab55c3 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,4 +1,4 @@ -import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; @@ -6,7 +6,6 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { MethodSignature } from 'ts/pages/documentation/method_signature'; import { SourceLink } from 'ts/pages/documentation/source_link'; import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { typeDocUtils } from 'ts/utils/typedoc_utils'; interface MethodBlockProps { diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 31f80aba3..d39ad14c4 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Source } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface SourceLinkProps { source: Source; diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 2fec4c95f..2c90a0567 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; @@ -6,7 +6,6 @@ import * as ReactTooltip from 'react-tooltip'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { TypeDefinition } from 'ts/pages/documentation/type_definition'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index dd83d120d..60f307c68 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -1,4 +1,4 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; @@ -9,7 +9,6 @@ import { Interface } from 'ts/pages/documentation/interface'; import { MethodSignature } from 'ts/pages/documentation/method_signature'; import { Type } from 'ts/pages/documentation/type'; import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface TypeDefinitionProps { diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 70d116622..1be3c3565 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { Question } from 'ts/pages/faq/question'; import { Dispatcher } from 'ts/redux/dispatcher'; import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index 988c04bc9..240dae910 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; -import { colors } from 'ts/utils/colors'; export interface QuestionProps { prompt: string; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 044f0b41f..6699e4e6f 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,3 +1,4 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx deleted file mode 100644 index 6dfb74554..000000000 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import * as HighLight from 'react-highlight'; - -interface MarkdownCodeBlockProps { - value: string; - language: string; -} - -interface MarkdownCodeBlockState {} - -export class MarkdownCodeBlock extends React.Component { - // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying - // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. - public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { - return nextProps.value !== this.props.value || nextProps.language !== this.props.language; - } - public render() { - return ( - - {this.props.value} - - ); - } -} diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx deleted file mode 100644 index b1f68c915..000000000 --- a/packages/website/ts/pages/shared/markdown_link_block.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { utils as sharedUtils } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { configs } from 'ts/utils/configs'; -import { utils } from 'ts/utils/utils'; - -interface MarkdownLinkBlockProps { - href: string; -} - -interface MarkdownLinkBlockState {} - -export class MarkdownLinkBlock extends React.Component { - // Re-rendering a linkBlock causes it to remain unclickable. - // We therefore noop re-renders on this component if it's props haven't changed. - public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { - return nextProps.href !== this.props.href; - } - public render() { - const href = this.props.href; - const isLinkToSection = _.startsWith(href, '#'); - // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons - if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { - return ( - - {this.props.children} - - ); - } else if (isLinkToSection) { - return ( - - {this.props.children} - - ); - } else { - return {this.props.children}; - } - } - private _onHashUrlClick(href: string) { - const hash = href.split('#')[1]; - utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); - sharedUtils.setUrlHash(hash); - } -} diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx deleted file mode 100644 index d03b30f4b..000000000 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import RaisedButton from 'material-ui/RaisedButton'; -import * as React from 'react'; -import * as ReactMarkdown from 'react-markdown'; -import { Element as ScrollElement } from 'react-scroll'; -import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; -import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block'; -import { colors } from 'ts/utils/colors'; -import { utils } from 'ts/utils/utils'; - -interface MarkdownSectionProps { - sectionName: string; - markdownContent: string; - headerSize?: HeaderSizes; - githubLink?: string; -} - -interface MarkdownSectionState { - shouldShowAnchor: boolean; -} - -export class MarkdownSection extends React.Component { - public static defaultProps: Partial = { - headerSize: HeaderSizes.H3, - }; - constructor(props: MarkdownSectionProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render() { - const sectionName = this.props.sectionName; - const id = utils.getIdFromName(sectionName); - return ( -
- -
-
- - - -
-
- {!_.isUndefined(this.props.githubLink) && ( - - Edit on Github - - )} -
-
-
- - -
- ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx deleted file mode 100644 index abbd34c98..000000000 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared'; -import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; -import { VersionDropDown } from 'ts/pages/shared/version_drop_down'; -import { MenuSubsectionsBySection } from 'ts/types'; -import { colors } from 'ts/utils/colors'; -import { utils } from 'ts/utils/utils'; - -interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; - title: string; - shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; - selectedVersion?: string; - versions?: string[]; -} - -interface NestedSidebarMenuState {} - -const styles: Styles = { - menuItemWithHeaders: { - minHeight: 0, - }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { - color: colors.grey800, - fontSize: 14, - lineHeight: 2, - padding: 0, - }, -}; - -const titleToIcon: { [title: string]: string } = { - '0x.js': 'zeroExJs.png', - '0x Connect': 'connect.png', - '0x Smart Contracts': 'contracts.png', - Wiki: 'wiki.png', -}; - -export class NestedSidebarMenu extends React.Component { - public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop, - }; - public render() { - const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { - const finalSectionName = sectionName.replace(/-/g, ' '); - if (this.props.shouldDisplaySectionHeaders) { - const id = utils.getIdFromName(sectionName); - return ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(menuItems)} -
- ); - } else { - return
{this._renderMenuItems(menuItems)}
; - } - }); - return ( -
- {this._renderEmblem()} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && ( - - )} -
{navigation}
-
- ); - } - private _renderEmblem() { - return ( -
-
-
- 0x -
-
- docs -
-
-
- | -
-
-
- -
-
- {this.props.title} -
-
-
- ); - } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { - const menuItemStyles = this.props.shouldDisplaySectionHeaders - ? styles.menuItemWithHeaders - : styles.menuItemWithoutHeaders; - const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { - const id = utils.getIdFromName(menuItemName); - return ( -
- - - {menuItemName} - - - {this._renderMenuItemSubsections(menuItemName)} -
- ); - }); - return menuItems; - } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) { - return null; - } - return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]); - } - private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode { - return ( -
    - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); - return ( -
  • - - - {entityName} - - -
    • - ); - })} -
- ); - } - private _onMenuItemClick(name: string): void { - const id = utils.getIdFromName(name); - sharedUtils.setUrlHash(id); - this.props.onMenuItemClick(); - } -} diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx deleted file mode 100644 index 3f661a1e5..000000000 --- a/packages/website/ts/pages/shared/section_header.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; -import * as React from 'react'; -import { Element as ScrollElement } from 'react-scroll'; -import { colors } from 'ts/utils/colors'; -import { utils } from 'ts/utils/utils'; - -interface SectionHeaderProps { - sectionName: string; - headerSize?: HeaderSizes; -} - -interface SectionHeaderState { - shouldShowAnchor: boolean; -} - -export class SectionHeader extends React.Component { - public static defaultProps: Partial = { - headerSize: HeaderSizes.H2, - }; - constructor(props: SectionHeaderProps) { - super(props); - this.state = { - shouldShowAnchor: false, - }; - } - public render() { - const sectionName = this.props.sectionName.replace(/-/g, ' '); - const id = utils.getIdFromName(sectionName); - return ( -
- - - {sectionName} - - } - id={id} - shouldShowAnchor={this.state.shouldShowAnchor} - /> - -
- ); - } - private _setAnchorVisibility(shouldShowAnchor: boolean) { - this.setState({ - shouldShowAnchor, - }); - } -} diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx deleted file mode 100644 index 1b4dbb375..000000000 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as _ from 'lodash'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; -import { utils } from 'ts/utils/utils'; - -interface VersionDropDownProps { - selectedVersion: string; - versions: string[]; -} - -interface VersionDropDownState {} - -export class VersionDropDown extends React.Component { - public render() { - return ( -
- - {this._renderDropDownItems()} - -
- ); - } - private _renderDropDownItems() { - const items = _.map(this.props.versions, version => { - return ; - }); - return items; - } - private _updateSelectedVersion(e: any, index: number, semver: string) { - let path = window.location.pathname; - const lastChar = path[path.length - 1]; - if (_.isFinite(_.parseInt(lastChar))) { - const pathSections = path.split('/'); - pathSections.pop(); - path = pathSections.join('/'); - } - const baseUrl = utils.getCurrentBaseUrl(); - window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`; - } -} diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index b22ce5826..f338ed9c2 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,4 +1,13 @@ -import { HeaderSizes, Styles } from '@0xproject/react-shared'; +import { + colors, + constants as sharedConstants, + HeaderSizes, + MarkdownSection, + NestedSidebarMenu, + SectionHeader, + Styles, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; @@ -6,12 +15,8 @@ import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { scroller } from 'react-scroll'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { MarkdownSection } from 'ts/pages/shared/markdown_section'; -import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; -import { SectionHeader } from 'ts/pages/shared/section_header'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Article, ArticlesBySection, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -136,11 +141,11 @@ export class Wiki extends React.Component { }} >
-
+
{this._renderWikiArticles()}
@@ -215,7 +220,7 @@ export class Wiki extends React.Component { async () => { await utils.onPageLoadAsync(); const hash = this.props.location.hash.slice(1); - utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); + sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); }, ); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c1b23ce1e..3b0866d70 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -447,10 +447,6 @@ export interface S3FileObject { }; } -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - export enum ProviderType { Injected = 'INJECTED', Ledger = 'LEDGER', diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts deleted file mode 100644 index 2eead95c7..000000000 --- a/packages/website/ts/utils/colors.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { colors as materialUiColors } from 'material-ui/styles'; - -export const colors = { - ...materialUiColors, - gray40: '#F8F8F8', - grey50: '#FAFAFA', - grey100: '#F5F5F5', - lightestGrey: '#F0F0F0', - greyishPink: '#E6E5E5', - grey300: '#E0E0E0', - beigeWhite: '#E4E4E4', - grey350: '#cacaca', - grey400: '#BDBDBD', - lightGrey: '#BBBBBB', - grey500: '#9E9E9E', - grey: '#A5A5A5', - darkGrey: '#818181', - landingLinkGrey: '#919191', - grey700: '#616161', - grey750: '#515151', - grey800: '#424242', - darkerGrey: '#393939', - heroGrey: '#404040', - projectsGrey: '#343333', - darkestGrey: '#272727', - dharmaDarkGrey: '#252525', - lightBlue: '#60A4F4', - lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', - darkBlue: '#4D5481', - turquois: '#058789', - lightPurple: '#A81CA6', - purple: '#690596', - red200: '#EF9A9A', - red: '#E91751', - red500: '#F44336', - red600: '#E53935', - limeGreen: '#66DE75', - lightGreen: '#4DC55C', - lightestGreen: '#89C774', - brightGreen: '#00C33E', - green400: '#66BB6A', - green: '#4DA24B', - amber600: '#FFB300', - orange: '#E69D00', - amber800: '#FF8F00', - darkYellow: '#caca03', -}; diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 388fc8530..7e9ba69de 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -94,8 +94,6 @@ export const configs = { [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, - SCROLL_CONTAINER_ID: 'documentation', - SCROLL_TOP_ID: 'pageScrollTop', SHOULD_DEPRECATE_OLD_WETH_TOKEN: true, SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'], SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [ diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts index 32891baca..41bc2844b 100644 --- a/packages/website/ts/utils/mui_theme.ts +++ b/packages/website/ts/utils/mui_theme.ts @@ -1,5 +1,5 @@ +import { colors } from '@0xproject/react-shared'; import { getMuiTheme } from 'material-ui/styles'; -import { colors } from 'ts/utils/colors'; export const muiTheme = getMuiTheme({ appBar: { diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index a1e11c85a..872b44eeb 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -4,7 +4,6 @@ import deepEqual = require('deep-equal'); import isMobile = require('is-mobile'); import * as _ from 'lodash'; import * as moment from 'moment'; -import { scroller } from 'react-scroll'; import { EtherscanLinkSuffixes, Networks, @@ -199,10 +198,6 @@ export const utils = { return 'production'; } }, - getIdFromName(name: string) { - const id = name.replace(/ /g, '-'); - return id; - }, getAddressBeginAndEnd(address: string): string { const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287 return truncatedAddress; @@ -288,24 +283,6 @@ export const utils = { ); return isTestNetwork; }, - getCurrentBaseUrl() { - const port = window.location.port; - const hasPort = !_.isUndefined(port); - const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; - return baseUrl; - }, - scrollToHash(hash: string, containerId: string): void { - let finalHash = hash; - if (_.isEmpty(hash)) { - finalHash = configs.SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(finalHash, { - duration: 0, - offset: 0, - containerId, - }); - }, async onPageLoadAsync(): Promise { if (document.readyState === 'complete') { return; // Already loaded -- cgit