diff options
Diffstat (limited to 'packages/website/ts/components/top_bar')
3 files changed, 0 insertions, 480 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx deleted file mode 100644 index c88c29b8e..000000000 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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'; -import * as React from 'react'; - -import { Blockchain } from 'ts/blockchain'; -import { AccountConnection } from 'ts/components/ui/account_connection'; -import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; -import { Identicon } from 'ts/components/ui/identicon'; -import { Image } from 'ts/components/ui/image'; -import { Island } from 'ts/components/ui/island'; -import { - CopyAddressSimpleMenuItem, - DifferentWalletSimpleMenuItem, - GoToAccountManagementSimpleMenuItem, - SimpleMenu, -} from 'ts/components/ui/simple_menu'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { colors } from 'ts/style/colors'; -import { AccountState, ProviderType } from 'ts/types'; -import { utils } from 'ts/utils/utils'; - -const ROOT_HEIGHT = 24; - -export interface ProviderDisplayProps { - dispatcher: Dispatcher; - userAddress: string; - networkId: number; - injectedProviderName: string; - providerType: ProviderType; - onToggleLedgerDialog: () => void; - blockchain?: Blockchain; - blockchainIsLoaded: boolean; -} - -interface ProviderDisplayState {} - -const styles: Styles = { - root: { - height: ROOT_HEIGHT, - borderRadius: ROOT_HEIGHT, - }, -}; - -export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> { - public render(): React.ReactNode { - const activeNode = ( - <Island className="flex items-center py1 px2" style={styles.root}> - {this._renderIcon()} - <Container marginLeft="12px" marginRight="12px"> - {this._renderDisplayMessage()} - </Container> - {this._renderInjectedProvider()} - </Island> - ); - return ( - <div style={{ width: 'fit-content', height: 48, float: 'right' }}> - <DropDown - activeNode={activeNode} - popoverContent={this._renderPopoverContent()} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - zDepth={1} - /> - </div> - ); - } - private _renderPopoverContent(): React.ReactNode { - const accountState = this._getAccountState(); - switch (accountState) { - case AccountState.Ready: - return ( - <SimpleMenu> - <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} /> - <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} /> - <GoToAccountManagementSimpleMenuItem /> - </SimpleMenu> - ); - case AccountState.Disconnected: - case AccountState.Locked: - case AccountState.Loading: - default: - return null; - } - } - private _renderIcon(): React.ReactNode { - const accountState = this._getAccountState(); - switch (accountState) { - case AccountState.Ready: - return <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />; - case AccountState.Loading: - return <CircularProgress size={ROOT_HEIGHT} thickness={2} />; - case AccountState.Locked: - return <Image src="/images/lock_icon.svg" height="20px" width="20px" />; - case AccountState.Disconnected: - return <ActionAccountBalanceWallet color={colors.mediumBlue} />; - default: - return null; - } - } - private _renderDisplayMessage(): React.ReactNode { - const accountState = this._getAccountState(); - const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); - const fontColor = this._getDisplayMessageFontColor(); - return ( - <Text fontSize="16px" fontColor={fontColor} fontWeight={500}> - {displayMessage} - </Text> - ); - } - private _getDisplayMessageFontColor(): string { - const accountState = this._getAccountState(); - switch (accountState) { - case AccountState.Loading: - return colors.darkGrey; - case AccountState.Ready: - case AccountState.Locked: - case AccountState.Disconnected: - default: - return colors.black; - } - } - private _renderInjectedProvider(): React.ReactNode { - const accountState = this._getAccountState(); - switch (accountState) { - case AccountState.Ready: - case AccountState.Locked: - return ( - <AccountConnection - accountState={accountState} - injectedProviderName={this.props.injectedProviderName} - /> - ); - case AccountState.Disconnected: - case AccountState.Loading: - default: - return null; - } - } - private _isBlockchainReady(): boolean { - return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); - } - private _getAccountState(): AccountState { - return utils.getAccountState( - this._isBlockchainReady(), - this.props.providerType, - this.props.injectedProviderName, - this.props.userAddress, - ); - } -} diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx deleted file mode 100644 index d5967cd1d..000000000 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ /dev/null @@ -1,279 +0,0 @@ -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 MenuItem from 'material-ui/MenuItem'; -import * as React from 'react'; -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 { 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'; - -export enum TopBarDisplayType { - Default, - Expanded, -} - -export 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[]; - sectionNameToLinks?: ObjectMap<ALink[]>; - displayType?: TopBarDisplayType; - docsInfo?: DocsInfo; - style?: React.CSSProperties; - isNightVersion?: boolean; - onVersionSelected?: (semver: string) => void; - sidebarHeader?: React.ReactNode; - maxWidth?: number; - paddingLeft?: number; - paddingRight?: number; -} - -interface TopBarState { - isDrawerOpen: boolean; -} - -const styles: Styles = { - topBar: { - backgroundColor: colors.white, - width: '100%', - position: 'relative', - top: 0, - paddingBottom: 1, - zIndex: 1, - }, - bottomBar: { - boxShadow: 'rgba(0, 0, 0, 0.187647) 0px 1px 3px', - }, - menuItem: { - fontSize: 14, - color: colors.darkestGrey, - paddingTop: 6, - paddingBottom: 6, - cursor: 'pointer', - fontWeight: 400, - }, -}; - -const DEFAULT_HEIGHT = 68; -const EXPANDED_HEIGHT = 75; - -export class TopBar extends React.Component<TopBarProps, TopBarState> { - public static defaultProps: Partial<TopBarProps> = { - displayType: TopBarDisplayType.Default, - style: {}, - isNightVersion: false, - paddingLeft: 20, - paddingRight: 20, - }; - public static heightForDisplayType(displayType: TopBarDisplayType): number { - const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - return result + 1; - } - constructor(props: TopBarProps) { - super(props); - this.state = { - isDrawerOpen: false, - }; - } - public componentWillReceiveProps(nextProps: TopBarProps): void { - if (nextProps.location.pathname !== this.props.location.pathname) { - this.setState({ - isDrawerOpen: false, - }); - } - } - public render(): React.ReactNode { - const isNightVersion = this.props.isNightVersion; - const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; - const parentClassNames = !isExpandedDisplayType - ? 'flex mx-auto items-center max-width-4' - : 'flex mx-auto items-center'; - const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; - const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; - const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; - const menuClasses = `col col-${ - isExpandedDisplayType ? '4' : '6' - } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; - const menuIconStyle = { - fontSize: 25, - color: isNightVersion ? 'white' : 'black', - cursor: 'pointer', - }; - return ( - <div - style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} - className="pb1 flex items-center" - > - <Container - className={parentClassNames} - width="100%" - maxWidth={this.props.maxWidth} - paddingLeft={this.props.paddingLeft} - paddingRight={this.props.paddingRight} - > - <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"> - <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} - shouldOpenInNewTab={true} - /> - <TopBarMenuItem - title={this.props.translate.get(Key.About, Deco.Cap)} - path={WebsitePaths.About} - style={styles.menuItem} - isNightVersion={isNightVersion} - /> - <TopBarMenuItem - title={this.props.translate.get(Key.Careers, Deco.Cap)} - path={WebsitePaths.Careers} - style={styles.menuItem} - isNightVersion={isNightVersion} - /> - <TopBarMenuItem - title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} - path={WebsitePaths.Portal} - isPrimary={true} - style={styles.menuItem} - className={`${isExpandedDisplayType && 'md-hide'}`} - isNightVersion={isNightVersion} - /> - </div> - </div> - )} - {this._isViewingPortal() && ( - <div className="sm-hide xs-hide"> - <ProviderDisplay - dispatcher={this.props.dispatcher} - userAddress={this.props.userAddress} - networkId={this.props.networkId} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - onToggleLedgerDialog={this.props.onToggleLedgerDialog} - blockchain={this.props.blockchain} - blockchainIsLoaded={this.props.blockchainIsLoaded} - /> - </div> - )} - <div className={'md-hide lg-hide'}> - <div style={menuIconStyle}> - <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} /> - </div> - </div> - </Container> - {this._isViewingPortal() ? this._renderPortalDrawer() : this._renderDrawer()} - </div> - ); - } - private _renderPortalDrawer(): React.ReactNode { - return ( - <Drawer - open={this.state.isDrawerOpen} - docked={false} - openSecondary={true} - onRequestChange={this._onMenuButtonClick.bind(this)} - > - <DrawerMenu - selectedPath={this.props.location.pathname} - userAddress={this.props.userAddress} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - blockchainIsLoaded={this.props.blockchainIsLoaded} - blockchain={this.props.blockchain} - /> - </Drawer> - ); - } - private _renderDrawer(): React.ReactNode { - return ( - <Drawer - open={this.state.isDrawerOpen} - docked={false} - openSecondary={true} - onRequestChange={this._onMenuButtonClick.bind(this)} - > - <div className="clearfix"> - <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> - {this.props.translate.get(Key.Website, Deco.Cap)} - </div> - <Link to={WebsitePaths.Home}> - <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> - </Link> - <Link to={WebsitePaths.Docs}> - <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> - </Link> - {!this._isViewingPortal() && ( - <Link to={WebsitePaths.Portal}> - <MenuItem className="py2"> - {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} - </MenuItem> - </Link> - )} - <Link to={WebsitePaths.Whitepaper} shouldOpenInNewTab={true}> - <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem> - </Link> - <Link to={WebsitePaths.About}> - <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> - </Link> - <Link to={WebsitePaths.Careers}> - <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem> - </Link> - <Link to={constants.URL_BLOG} shouldOpenInNewTab={true}> - <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem> - </Link> - <Link to={WebsitePaths.FAQ}> - <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}> - {this.props.translate.get(Key.Faq, Deco.Cap)} - </MenuItem> - </Link> - </div> - </Drawer> - ); - } - private _onMenuButtonClick(): void { - this.setState({ - isDrawerOpen: !this.state.isDrawerOpen, - }); - } - private _isViewingPortal(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Portal); - } - private _isViewingFAQ(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.FAQ); - } - private _shouldDisplayBottomBar(): boolean { - 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 deleted file mode 100644 index 9f15cffbb..000000000 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { colors, Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { CallToAction } from 'ts/components/ui/button'; - -const DEFAULT_STYLE = { - color: colors.darkestGrey, -}; - -interface TopBarMenuItemProps { - title: string; - path?: string; - isPrimary?: boolean; - shouldOpenInNewTab?: boolean; - style?: React.CSSProperties; - className?: string; - isNightVersion?: boolean; -} - -interface TopBarMenuItemState {} - -export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarMenuItemState> { - public static defaultProps: Partial<TopBarMenuItemProps> = { - isPrimary: false, - style: DEFAULT_STYLE, - className: '', - shouldOpenInNewTab: false, - isNightVersion: false, - }; - public render(): React.ReactNode { - const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color; - const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor; - const itemContent = this.props.isPrimary ? ( - <CallToAction padding="0.8em 1.5em">{this.props.title}</CallToAction> - ) : ( - this.props.title - ); - return ( - <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}> - <Link to={this.props.path} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}> - {itemContent} - </Link> - </div> - ); - } -} |