Merge pull request #799 from 0xProject/feature/website/wallet-menu

Add menu for at the top of wallet and top right component

8 files changed, 210 insertions, 195 deletions

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index ae3be6436..806eaeea5 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,23 +1,26 @@
 import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import RaisedButton from 'material-ui/RaisedButton';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
-import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 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 { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
 const ROOT_HEIGHT = 24;
@@ -44,11 +47,7 @@ const styles: Styles = {
 
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render(): React.ReactNode {
-        const isExternallyInjectedProvider = utils.isExternallyInjected(
-            this.props.providerType,
-            this.props.injectedProviderName,
-        );
-        const hoverActiveNode = (
+        const activeNode = (
             <Island className="flex items-center py1 px2" style={styles.root}>
                 {this._renderIcon()}
                 <Container marginLeft="12px" marginRight="12px">
@@ -57,93 +56,34 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 {this._renderInjectedProvider()}
             </Island>
         );
-        const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
-        const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
         return (
             <div style={{ width: 'fit-content', height: 48, float: 'right' }}>
                 <DropDown
-                    hoverActiveNode={hoverActiveNode}
-                    popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
-                    anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
+                    activeNode={activeNode}
+                    popoverContent={this._renderPopoverContent()}
+                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
                 />
             </div>
         );
     }
-    public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
-        if (!this._isBlockchainReady()) {
-            return null;
-        } else if (hasInjectedProvider || hasLedgerProvider) {
-            return (
-                <ProviderPicker
-                    dispatcher={this.props.dispatcher}
-                    networkId={this.props.networkId}
-                    injectedProviderName={this.props.injectedProviderName}
-                    providerType={this.props.providerType}
-                    onToggleLedgerDialog={this.props.onToggleLedgerDialog}
-                    blockchain={this.props.blockchain}
-                />
-            );
-        } else {
-            // Nothing to connect to, show install/info popover
-            return (
-                <div className="px2" style={{ maxWidth: 420 }}>
-                    <div className="center h4 py2" style={{ color: colors.grey700 }}>
-                        Choose a wallet:
-                    </div>
-                    <div className="flex pb3">
-                        <div className="center px2">
-                            <div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
-                            <div className="py2">
-                                <img src="/images/metamask_or_parity.png" width="135" />
-                            </div>
-                            <div>
-                                Use{' '}
-                                <a
-                                    href={constants.URL_METAMASK_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Metamask
-                                </a>{' '}
-                                or{' '}
-                                <a
-                                    href={constants.URL_PARITY_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Parity Signer
-                                </a>
-                            </div>
-                        </div>
-                        <div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }}
-                            />
-                            <div className="py1">or</div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }}
-                            />
-                        </div>
-                        <div className="px2 center">
-                            <div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
-                            <div style={{ paddingTop: 21, paddingBottom: 29 }}>
-                                <img src="/images/ledger_icon.png" style={{ width: 80 }} />
-                            </div>
-                            <div>
-                                <RaisedButton
-                                    style={{ width: '100%' }}
-                                    label="Use Ledger"
-                                    onClick={this.props.onToggleLedgerDialog}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </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 {
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
deleted file mode 100644
index 7937f2e9d..000000000
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { colors, constants as sharedConstants } from '@0xproject/react-shared';
-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';
-
-interface ProviderPickerProps {
-    networkId: number;
-    injectedProviderName: string;
-    providerType: ProviderType;
-    onToggleLedgerDialog: () => void;
-    dispatcher: Dispatcher;
-    blockchain: Blockchain;
-}
-
-interface ProviderPickerState {}
-
-export class ProviderPicker extends React.Component<ProviderPickerProps, ProviderPickerState> {
-    public render(): React.ReactNode {
-        const isLedgerSelected = this.props.providerType === ProviderType.Ledger;
-        const menuStyle = {
-            padding: 10,
-            paddingTop: 15,
-            paddingBottom: 15,
-        };
-        // Show dropdown with two options
-        return (
-            <div style={{ width: 225, overflow: 'hidden' }}>
-                <RadioButtonGroup name="provider" defaultSelected={this.props.providerType}>
-                    <RadioButton
-                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Injected)}
-                        style={{ ...menuStyle, backgroundColor: !isLedgerSelected && colors.grey50 }}
-                        value={ProviderType.Injected}
-                        label={this._renderLabel(this.props.injectedProviderName, !isLedgerSelected)}
-                    />
-                    <RadioButton
-                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Ledger)}
-                        style={{ ...menuStyle, backgroundColor: isLedgerSelected && colors.grey50 }}
-                        value={ProviderType.Ledger}
-                        label={this._renderLabel('Ledger Nano S', isLedgerSelected)}
-                    />
-                </RadioButtonGroup>
-            </div>
-        );
-    }
-    private _renderLabel(title: string, shouldShowNetwork: boolean): React.ReactNode {
-        const label = (
-            <div className="flex">
-                <div style={{ fontSize: 14 }}>{title}</div>
-                {shouldShowNetwork && this._renderNetwork()}
-            </div>
-        );
-        return label;
-    }
-    private _renderNetwork(): React.ReactNode {
-        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-        return (
-            <div className="flex" style={{ marginTop: 1 }}>
-                <div className="relative" style={{ width: 14, paddingLeft: 14 }}>
-                    <img
-                        src={`/images/network_icons/${networkName.toLowerCase()}.png`}
-                        className="absolute"
-                        style={{ top: 6, width: 10 }}
-                    />
-                </div>
-                <div style={{ color: colors.lightGrey, fontSize: 11 }}>{networkName}</div>
-            </div>
-        );
-    }
-    private _onProviderRadioChanged(value: string): void {
-        if (value === ProviderType.Ledger) {
-            this.props.onToggleLedgerDialog();
-        } else {
-            // tslint:disable-next-line:no-floating-promises
-            this.props.blockchain.updateProviderToInjectedAsync();
-        }
-    }
-}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index fac6c131f..778536663 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -199,7 +199,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             cursor: 'pointer',
             paddingTop: 16,
         };
-        const hoverActiveNode = (
+        const activeNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
                 <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
                 <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
@@ -224,7 +224,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         <div className={menuClasses}>
                             <div className="flex justify-between">
                                 <DropDown
-                                    hoverActiveNode={hoverActiveNode}
+                                    activeNode={activeNode}
                                     popoverContent={popoverContent}
                                     anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
                                     targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index fb718d731..edbf8814b 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -17,6 +17,7 @@ export interface ContainerProps {
     maxHeight?: StringOrNum;
     width?: StringOrNum;
     height?: StringOrNum;
+    minWidth?: StringOrNum;
     minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 22cb942f8..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,4 +1,4 @@
-import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
+import Popover from 'material-ui/Popover';
 import * as React from 'react';
 import { MaterialUIPosition } from 'ts/types';
 
@@ -7,13 +7,20 @@ const DEFAULT_STYLE = {
     fontSize: 14,
 };
 
-interface DropDownProps {
-    hoverActiveNode: React.ReactNode;
+export enum DropdownMouseEvent {
+    Hover = 'hover',
+    Click = 'click',
+}
+
+export interface DropDownProps {
+    activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
+    activateEvent?: DropdownMouseEvent;
+    closeEvent?: DropdownMouseEvent;
 }
 
 interface DropDownState {
@@ -25,6 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -58,46 +67,61 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseEnter={this._onHover.bind(this)}
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
-                {this.props.hoverActiveNode}
+                <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
                 <Popover
                     open={this.state.isDropDownOpen}
                     anchorEl={this.state.anchorEl}
                     anchorOrigin={this.props.anchorOrigin}
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
-                    animation={PopoverAnimationVertical}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
+                    animated={false}
                     zDepth={this.props.zDepth}
                 >
-                    <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+                    <div
+                        onMouseEnter={this._onHover.bind(this)}
+                        onMouseLeave={this._onHoverOff.bind(this)}
+                        onClick={this._closePopover.bind(this)}
+                    >
                         {this.props.popoverContent}
                     </div>
                 </Popover>
             </div>
         );
     }
+    private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
+        if (this.props.activateEvent === DropdownMouseEvent.Click) {
+            this.setState({
+                isDropDownOpen: true,
+                anchorEl: event.currentTarget,
+            });
+        }
+    }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        this._checkIfShouldOpenPopover(event);
+        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
+            this._checkIfShouldOpenPopover(event);
+        }
+    }
+    private _onHoverOff(): void {
+        this._isHovering = false;
     }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
             return; // noop
         }
-
         this.setState({
             isDropDownOpen: true,
             anchorEl: event.currentTarget,
         });
     }
-    private _onHoverOff(): void {
-        this._isHovering = false;
-    }
     private _checkIfShouldClosePopover(): void {
-        if (!this.state.isDropDownOpen || this._isHovering) {
+        if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        this._closePopover();
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
+            this._closePopover();
+        }
     }
     private _closePopover(): void {
         this.setState({
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
new file mode 100644
index 000000000..74b8ef6ae
--- /dev/null
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -0,0 +1,88 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { Link } from 'react-router-dom';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+
+export interface SimpleMenuProps {
+    minWidth?: number | string;
+}
+
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => {
+    return (
+        <Container
+            marginLeft="16px"
+            marginRight="16px"
+            marginBottom="16px"
+            minWidth={minWidth}
+            className="flex flex-column"
+        >
+            {children}
+        </Container>
+    );
+};
+
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
+
+export interface SimpleMenuItemProps {
+    displayText: string;
+    onClick?: () => void;
+}
+export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ displayText, onClick }) => {
+    // Falling back to _.noop for onclick retains the hovering effect
+    return (
+        <Container marginTop="16px" className="flex flex-column">
+            <Text
+                fontSize="14px"
+                fontColor={colors.darkGrey}
+                onClick={onClick || _.noop}
+                hoverColor={colors.mediumBlue}
+            >
+                {displayText}
+            </Text>
+        </Container>
+    );
+};
+
+export interface CopyAddressSimpleMenuItemProps {
+    userAddress: string;
+    onClick?: () => void;
+}
+export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimpleMenuItemProps> = ({
+    userAddress,
+    onClick,
+}) => {
+    return (
+        <CopyToClipboard text={userAddress}>
+            <SimpleMenuItem displayText="Copy Address to Clipboard" onClick={onClick} />
+        </CopyToClipboard>
+    );
+};
+
+export interface GoToAccountManagementSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
+    GoToAccountManagementSimpleMenuItemProps
+> = ({ onClick }) => {
+    return (
+        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+            <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
+        </Link>
+    );
+};
+
+export interface DifferentWalletSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const DifferentWalletSimpleMenuItem: React.StatelessComponent<DifferentWalletSimpleMenuItemProps> = ({
+    onClick,
+}) => {
+    return <SimpleMenuItem displayText="Use a Different Wallet..." onClick={onClick} />;
+};
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index c1cb2ade4..315f72854 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -3,7 +3,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
 
 export interface TextProps {
     className?: string;
@@ -17,6 +17,7 @@ export interface TextProps {
     fontWeight?: number | string;
     textDecorationLine?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -37,7 +38,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     &:hover {
-        ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
     }
 `;
 
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 6c8b398c4..1e0b9ec48 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -4,15 +4,22 @@ import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Island } from 'ts/components/ui/island';
+import {
+    CopyAddressSimpleMenuItem,
+    DifferentWalletSimpleMenuItem,
+    GoToAccountManagementSimpleMenuItem,
+    SimpleMenu,
+    SimpleMenuItem,
+} from 'ts/components/ui/simple_menu';
 import { Text } from 'ts/components/ui/text';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { BodyOverlay } from 'ts/components/wallet/body_overlay';
@@ -33,7 +40,6 @@ import {
     TokenByAddress,
     TokenState,
     TokenStateByAddress,
-    WebsitePaths,
 } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
@@ -83,7 +89,6 @@ const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const ETHER_ITEM_KEY = 'ETHER';
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
-const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 const PLACEHOLDER_COLOR = colors.grey300;
 const LOADING_ROWS_COUNT = 6;
 
@@ -187,6 +192,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
+        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
         const userAddress = this.props.userAddress;
         const accountState = this._getAccountState();
         const main = (
@@ -197,15 +203,49 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
             </div>
         );
+        const onClick = _.noop;
+        const accessory = (
+            <DropDown
+                activeNode={
+                    // this container gives the menu button more of a hover target for the drop down
+                    // it prevents accidentally closing the menu by moving off of the button
+                    <Container paddingLeft="100px" paddingRight="15px">
+                        <Text
+                            className="zmdi zmdi-more-horiz"
+                            Tag="i"
+                            fontSize="32px"
+                            fontFamily="Material-Design-Iconic-Font"
+                            fontColor={colors.darkGrey}
+                            onClick={onClick}
+                            hoverColor={colors.mediumBlue}
+                        />
+                    </Container>
+                }
+                popoverContent={
+                    <SimpleMenu minWidth="150px">
+                        <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
+                        <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                        <SimpleMenuItem displayText="Add Tokens..." onClick={this.props.onAddToken} />
+                        <SimpleMenuItem displayText="Remove Tokens..." onClick={this.props.onRemoveToken} />
+                        <GoToAccountManagementSimpleMenuItem />
+                    </SimpleMenu>
+                }
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+                zDepth={1}
+                activateEvent={DropdownMouseEvent.Click}
+                closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
+            />
+        );
         return (
-            <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
-                <StandardIconRow
-                    icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
-                    main={main}
-                    minHeight="60px"
-                    backgroundColor={colors.white}
-                />
-            </Link>
+            <StandardIconRow
+                key={HEADER_ITEM_KEY}
+                icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
+                main={main}
+                accessory={accessory}
+                minHeight="60px"
+                backgroundColor={colors.white}
+            />
         );
     }
     private _renderBody(): React.ReactElement<{}> {