import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; 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'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { PortalMenu } from 'ts/components/portal_menu'; import { SidebarHeader } from 'ts/components/sidebar_header'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; 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 { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; interface TopBarProps { userAddress?: string; networkId?: number; injectedProviderName?: string; providerType?: ProviderType; onToggleLedgerDialog?: () => void; blockchain?: Blockchain; dispatcher?: Dispatcher; blockchainIsLoaded: boolean; location: Location; translate: Translate; docsVersion?: string; availableDocVersions?: string[]; menu?: DocsMenu; menuSubsectionsBySection?: MenuSubsectionsBySection; shouldFullWidth?: boolean; docsInfo?: DocsInfo; style?: React.CSSProperties; isNightVersion?: boolean; onVersionSelected?: (semver: string) => void; sidebarHeader?: React.ReactNode; } interface TopBarState { isDrawerOpen: boolean; } const styles: Styles = { address: { marginRight: 12, overflow: 'hidden', paddingTop: 4, textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 70, }, topBar: { backgroundcolor: colors.white, height: 59, width: '100%', position: 'relative', top: 0, zIndex: 1100, paddingBottom: 1, }, bottomBar: { boxShadow: 'rgba(0, 0, 0, 0.187647) 0px 1px 3px', }, menuItem: { fontSize: 14, color: colors.darkestGrey, paddingTop: 6, paddingBottom: 6, marginTop: 17, cursor: 'pointer', fontWeight: 400, }, }; export class TopBar extends React.Component { public static defaultProps: Partial = { shouldFullWidth: false, style: {}, isNightVersion: false, }; constructor(props: TopBarProps) { super(props); this.state = { isDrawerOpen: false, }; } public render() { const isNightVersion = this.props.isNightVersion; const isFullWidthPage = this.props.shouldFullWidth; const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`; const developerSectionMenuItems = [ , , , , , , , , , , , ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isFullWidthPage ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', paddingTop: 16, }; const hoverActiveNode = (
{this.props.translate.get(Key.Developers, Deco.Cap)}
); const popoverContent = {developerSectionMenuItems}; return (
{!this._isViewingPortal() && (
)} {this.props.blockchainIsLoaded && (
)}
{this._renderDrawer()}
); } private _renderDrawer() { return (
{this._renderPortalMenu()} {this._renderDocsMenu()} {this._renderWiki()}
{this.props.translate.get(Key.Website, Deco.Cap)}
{this.props.translate.get(Key.Home, Deco.Cap)} {this.props.translate.get(Key.Wiki, Deco.Cap)} {!this._isViewing0xjsDocs() && ( 0x.js {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingConnectDocs() && ( {this.props.translate.get(Key.Connect, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSmartContractsDocs() && ( {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingWeb3WrapperDocs() && ( {this.props.translate.get(Key.Web3Wrapper, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingDeployerDocs() && ( {this.props.translate.get(Key.Deployer, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingJsonSchemasDocs() && ( {this.props.translate.get(Key.JsonSchemas, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSolCovDocs() && ( {this.props.translate.get(Key.SolCov, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingSubprovidersDocs() && ( {this.props.translate.get(Key.Subproviders, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} )} {!this._isViewingPortal() && ( {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} )} {this.props.translate.get(Key.Whitepaper, Deco.Cap)} {this.props.translate.get(Key.About, Deco.Cap)} {this.props.translate.get(Key.Blog, Deco.Cap)} {this.props.translate.get(Key.Faq, Deco.Cap)}
); } private _renderDocsMenu(): React.ReactNode { if ( (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingWeb3WrapperDocs() && !this._isViewingDeployerDocs() && !this._isViewingJsonSchemasDocs() && !this._isViewingSolCovDocs() && !this._isViewingSubprovidersDocs() && !this._isViewingConnectDocs()) || _.isUndefined(this.props.menu) ) { return undefined; } const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return (
); } private _renderWiki(): React.ReactNode { if (!this._isViewingWiki()) { return undefined; } return (
); } private _renderPortalMenu(): React.ReactNode { if (!this._isViewingPortal()) { return undefined; } return (
{this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
); } private _renderUser() { const userAddress = this.props.userAddress; const identiconDiameter = 26; return (
{!_.isEmpty(userAddress) ? userAddress : ''}
{userAddress}
); } private _onMenuButtonClick() { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, }); } private _isViewingPortal() { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } private _isViewingFAQ() { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } private _isViewing0xjsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs); } private _isViewingConnectDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Connect); } private _isViewingSmartContractsDocs() { return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); } private _isViewingWeb3WrapperDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper); } private _isViewingDeployerDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Deployer); } private _isViewingJsonSchemasDocs() { return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas); } private _isViewingSolCovDocs() { return _.includes(this.props.location.pathname, WebsitePaths.SolCov); } private _isViewingSubprovidersDocs() { return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); } private _isViewingWiki() { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } private _shouldDisplayBottomBar() { return ( this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() || this._isViewingSmartContractsDocs() || this._isViewingWeb3WrapperDocs() || this._isViewingDeployerDocs() || this._isViewingJsonSchemasDocs() || this._isViewingSolCovDocs() || this._isViewingSubprovidersDocs() || this._isViewingConnectDocs() ); } } // tslint:disable:max-file-line-count