From 3031598843080ff4fabb7bfb0ba823be6d545285 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 13:23:13 -0700
Subject: Implement icon button

---
 packages/website/ts/components/ui/text.tsx       |  5 +++--
 packages/website/ts/components/wallet/wallet.tsx | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

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 1f1e3598a..899f8e3a3 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -199,11 +199,26 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
             </div>
         );
+        const onClick = _.noop;
+        const accessory = (
+            <Container marginRight="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>
+        );
         return (
             <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
                 <StandardIconRow
                     icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
                     main={main}
+                    accessory={accessory}
                     minHeight="60px"
                     backgroundColor={colors.white}
                 />
-- 
cgit 


From be64184cfa11dcabd543161b5d7a6726d4e7924d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 13:51:40 -0700
Subject: Clean up a bit of the provider display logic

---
 .../ts/components/top_bar/install_prompt.tsx       | 59 ++++++++++++++
 .../ts/components/top_bar/provider_display.tsx     | 92 +++++-----------------
 packages/website/ts/components/ui/drop_down.tsx    |  2 +-
 3 files changed, 80 insertions(+), 73 deletions(-)
 create mode 100644 packages/website/ts/components/top_bar/install_prompt.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx
new file mode 100644
index 000000000..8d1a9c48a
--- /dev/null
+++ b/packages/website/ts/components/top_bar/install_prompt.tsx
@@ -0,0 +1,59 @@
+import RaisedButton from 'material-ui/RaisedButton';
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { constants } from 'ts/utils/constants';
+
+export interface InstallPromptProps {
+    onToggleLedgerDialog: () => void;
+}
+
+export const InstallPrompt: React.StatelessComponent<InstallPromptProps> = ({ onToggleLedgerDialog }) => {
+    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={onToggleLedgerDialog} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 8743e4320..18afee4ea 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -7,6 +7,7 @@ import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
+import { InstallPrompt } from 'ts/components/top_bar/install_prompt';
 import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
@@ -72,78 +73,25 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         );
     }
     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>
-            );
+        const accountState = this._getAccountState();
+        switch (accountState) {
+            case AccountState.Ready:
+            case AccountState.Locked:
+                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}
+                    />
+                );
+            case AccountState.Disconnected:
+                return <InstallPrompt onToggleLedgerDialog={this.props.onToggleLedgerDialog} />;
+            case AccountState.Loading:
+            default:
+                return null;
         }
     }
     private _renderIcon(): React.ReactNode {
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 22cb942f8..7d900d685 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -66,7 +66,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
                     useLayerForClickAway={false}
-                    animation={PopoverAnimationVertical}
+                    animated={false}
                     zDepth={this.props.zDepth}
                 >
                     <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
-- 
cgit 


From da8cf9981eda4a068c22d0107e07b704afda2584 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 14:25:33 -0700
Subject: Implement simple menu

---
 .../ts/components/top_bar/provider_display.tsx     | 25 ++++---
 .../ts/components/top_bar/provider_picker.tsx      | 79 ----------------------
 packages/website/ts/components/ui/container.tsx    |  1 +
 packages/website/ts/components/ui/drop_down.tsx    |  2 +-
 packages/website/ts/components/ui/simple_menu.tsx  | 34 ++++++++++
 5 files changed, 50 insertions(+), 91 deletions(-)
 delete mode 100644 packages/website/ts/components/top_bar/provider_picker.tsx
 create mode 100644 packages/website/ts/components/ui/simple_menu.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 18afee4ea..3f29d5ff3 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -5,19 +5,21 @@ import RaisedButton from 'material-ui/RaisedButton';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { Link } from 'react-router-dom';
 
 import { Blockchain } from 'ts/blockchain';
 import { InstallPrompt } from 'ts/components/top_bar/install_prompt';
-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 { Island } from 'ts/components/ui/island';
+import { SimpleMenu, SimpleMenuItem } 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 { AccountState, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
@@ -76,19 +78,20 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
         const accountState = this._getAccountState();
         switch (accountState) {
             case AccountState.Ready:
-            case AccountState.Locked:
                 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}
-                    />
+                    <SimpleMenu>
+                        <CopyToClipboard text={this.props.userAddress}>
+                            <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} />
+                        </CopyToClipboard>
+                        <SimpleMenuItem text="Use a Different Wallet..." onClick={this.props.onToggleLedgerDialog} />
+                        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+                            <SimpleMenuItem text="Manage Account" onClick={_.noop} />
+                        </Link>
+                    </SimpleMenu>
                 );
             case AccountState.Disconnected:
                 return <InstallPrompt onToggleLedgerDialog={this.props.onToggleLedgerDialog} />;
+            case AccountState.Locked:
             case AccountState.Loading:
             default:
                 return null;
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/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 7d900d685..3738e50eb 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -49,7 +49,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         // call hoverOff whenever the dropdown receives updated props. This is a hack
         // because it will effectively close the dropdown on any prop update, barring
         // dropdowns from having dynamic content.
-        this._onHoverOff();
+        // this._onHoverOff();
     }
     public render(): React.ReactNode {
         return (
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..29445c965
--- /dev/null
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -0,0 +1,34 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+
+export interface SimpleMenuProps {}
+
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children }) => {
+    return (
+        <Container
+            marginLeft="16px"
+            marginRight="16px"
+            marginBottom="16px"
+            minWidth="220px"
+            className="flex flex-column"
+        >
+            {children}
+        </Container>
+    );
+};
+
+export interface SimpleMenuItemProps {
+    text: string;
+    onClick?: () => void;
+}
+export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
+    <Container marginTop="16px" minWidth="220px" className="flex flex-column">
+        <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
+            {text}
+        </Text>
+    </Container>
+);
-- 
cgit 


From 6daf754f5bb4aa85d0f65bfdaf8910db4401d1cc Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sat, 30 Jun 2018 23:32:06 -0700
Subject: Add menu to wallet

---
 packages/website/ts/components/wallet/wallet.tsx | 40 +++++++++++++++++++-----
 1 file changed, 32 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 899f8e3a3..b43164664 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -5,15 +5,18 @@ import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
 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 } 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 { 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';
@@ -202,14 +205,35 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const onClick = _.noop;
         const accessory = (
             <Container marginRight="15px">
-                <Text
-                    className="zmdi zmdi-more-horiz"
-                    Tag="i"
-                    fontSize="32px"
-                    fontFamily="Material-Design-Iconic-Font"
-                    fontColor={colors.darkGrey}
-                    onClick={onClick}
-                    hoverColor={colors.mediumBlue}
+                <DropDown
+                    hoverActiveNode={
+                        <Text
+                            className="zmdi zmdi-more-horiz"
+                            Tag="i"
+                            fontSize="32px"
+                            fontFamily="Material-Design-Iconic-Font"
+                            fontColor={colors.darkGrey}
+                            onClick={onClick}
+                            hoverColor={colors.mediumBlue}
+                        />
+                    }
+                    popoverContent={
+                        <SimpleMenu>
+                            <CopyToClipboard text={this.props.userAddress}>
+                                <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} />
+                            </CopyToClipboard>
+                            <SimpleMenuItem
+                                text="Use a Different Wallet..."
+                                onClick={this.props.onToggleLedgerDialog}
+                            />
+                            <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+                                <SimpleMenuItem text="Manage Account" onClick={_.noop} />
+                            </Link>
+                        </SimpleMenu>
+                    }
+                    anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                    targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+                    zDepth={1}
                 />
             </Container>
         );
-- 
cgit 


From a6f40d418704a8dca8c787663f00b6bcbdf18ba4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 13:31:43 -0700
Subject: Implement correct behavior for menu in the wallet

---
 packages/website/ts/blockchain_watcher.ts          |  7 +++---
 .../ts/components/top_bar/provider_display.tsx     |  9 ++++----
 packages/website/ts/components/top_bar/top_bar.tsx |  4 ++--
 packages/website/ts/components/ui/drop_down.tsx    | 27 ++++++++++++++++++----
 packages/website/ts/components/ui/simple_menu.tsx  | 14 +++++++----
 packages/website/ts/components/wallet/wallet.tsx   | 22 +++++++++---------
 6 files changed, 52 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts
index df5f73fd1..4b23aa98a 100644
--- a/packages/website/ts/blockchain_watcher.ts
+++ b/packages/website/ts/blockchain_watcher.ts
@@ -10,6 +10,7 @@ export class BlockchainWatcher {
     private _watchBalanceIntervalId: NodeJS.Timer;
     private _prevUserEtherBalanceInWei?: BigNumber;
     private _prevUserAddressIfExists: string;
+    private _prevNodeVersionIfExists: string;
     constructor(dispatcher: Dispatcher, web3Wrapper: Web3Wrapper, shouldPollUserAddress: boolean) {
         this._dispatcher = dispatcher;
         this._shouldPollUserAddress = shouldPollUserAddress;
@@ -43,11 +44,9 @@ export class BlockchainWatcher {
         );
     }
     private async _updateBalanceAsync(): Promise<void> {
-        let prevNodeVersion: string;
-        // Check for node version changes
         const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
-        if (currentNodeVersion !== prevNodeVersion) {
-            prevNodeVersion = currentNodeVersion;
+        if (this._prevNodeVersionIfExists !== currentNodeVersion) {
+            this._prevNodeVersionIfExists = currentNodeVersion;
             this._dispatcher.updateNodeVersion(currentNodeVersion);
         }
 
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 3f29d5ff3..6d02ebd59 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -51,7 +51,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             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">
@@ -61,14 +61,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             </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}
+                    activeNode={activeNode}
                     popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
-                    anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
+                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
                 />
             </div>
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/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 3738e50eb..3f1fec3f4 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -8,12 +8,13 @@ const DEFAULT_STYLE = {
 };
 
 interface DropDownProps {
-    hoverActiveNode: React.ReactNode;
+    activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
+    shouldWaitForClickToActivate?: boolean;
 }
 
 interface DropDownState {
@@ -25,6 +26,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
+        shouldWaitForClickToActivate: false,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -49,7 +51,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         // call hoverOff whenever the dropdown receives updated props. This is a hack
         // because it will effectively close the dropdown on any prop update, barring
         // dropdowns from having dynamic content.
-        // this._onHoverOff();
+        this._onHoverOff();
     }
     public render(): React.ReactNode {
         return (
@@ -58,7 +60,7 @@ 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}
@@ -69,16 +71,31 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     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 {
+        event.stopPropagation();
+        if (this.props.shouldWaitForClickToActivate) {
+            this.setState({
+                isDropDownOpen: true,
+                anchorEl: event.currentTarget,
+            });
+        }
+    }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        this._checkIfShouldOpenPopover(event);
+        if (!this.props.shouldWaitForClickToActivate) {
+            this._checkIfShouldOpenPopover(event);
+        }
     }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 29445c965..22414d101 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -5,15 +5,17 @@ import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 
-export interface SimpleMenuProps {}
+export interface SimpleMenuProps {
+    minWidth?: number | string;
+}
 
-export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children }) => {
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => {
     return (
         <Container
             marginLeft="16px"
             marginRight="16px"
             marginBottom="16px"
-            minWidth="220px"
+            minWidth={minWidth}
             className="flex flex-column"
         >
             {children}
@@ -26,9 +28,13 @@ export interface SimpleMenuItemProps {
     onClick?: () => void;
 }
 export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
-    <Container marginTop="16px" minWidth="220px" className="flex flex-column">
+    <Container marginTop="16px" className="flex flex-column">
         <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
             {text}
         </Text>
     </Container>
 );
+
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index b43164664..fca6c5745 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -206,7 +206,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const accessory = (
             <Container marginRight="15px">
                 <DropDown
-                    hoverActiveNode={
+                    activeNode={
                         <Text
                             className="zmdi zmdi-more-horiz"
                             Tag="i"
@@ -218,7 +218,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         />
                     }
                     popoverContent={
-                        <SimpleMenu>
+                        <SimpleMenu minWidth="150px">
                             <CopyToClipboard text={this.props.userAddress}>
                                 <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} />
                             </CopyToClipboard>
@@ -234,19 +234,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                     targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                     zDepth={1}
+                    shouldWaitForClickToActivate={true}
                 />
             </Container>
         );
         return (
-            <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
-                <StandardIconRow
-                    icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
-                    main={main}
-                    accessory={accessory}
-                    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<{}> {
-- 
cgit 


From 955fdf5d13945fc7267e8ce0cc1f6016c57f3b72 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:03:07 -0700
Subject: Give connected header accessory more padding

---
 packages/website/ts/components/wallet/wallet.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index fca6c5745..ab234ae1b 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -207,15 +207,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             <Container marginRight="15px">
                 <DropDown
                     activeNode={
-                        <Text
-                            className="zmdi zmdi-more-horiz"
-                            Tag="i"
-                            fontSize="32px"
-                            fontFamily="Material-Design-Iconic-Font"
-                            fontColor={colors.darkGrey}
-                            onClick={onClick}
-                            hoverColor={colors.mediumBlue}
-                        />
+                        // 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">
+                            <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">
-- 
cgit 


From 5a7908984e118f2babf7c0680bf17afa148f5122 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:34:50 -0700
Subject: Consolidate logic for common menu items

---
 .../ts/components/top_bar/provider_display.tsx     | 19 +++----
 packages/website/ts/components/ui/simple_menu.tsx  | 66 ++++++++++++++++++----
 packages/website/ts/components/wallet/wallet.tsx   | 22 +++-----
 3 files changed, 74 insertions(+), 33 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 6d02ebd59..c2915f9a9 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -5,8 +5,6 @@ import RaisedButton from 'material-ui/RaisedButton';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
 
 import { Blockchain } from 'ts/blockchain';
 import { InstallPrompt } from 'ts/components/top_bar/install_prompt';
@@ -15,7 +13,12 @@ import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Island } from 'ts/components/ui/island';
-import { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu';
+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';
@@ -79,13 +82,9 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             case AccountState.Ready:
                 return (
                     <SimpleMenu>
-                        <CopyToClipboard text={this.props.userAddress}>
-                            <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} />
-                        </CopyToClipboard>
-                        <SimpleMenuItem text="Use a Different Wallet..." onClick={this.props.onToggleLedgerDialog} />
-                        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
-                            <SimpleMenuItem text="Manage Account" onClick={_.noop} />
-                        </Link>
+                        <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
+                        <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                        <GoToAccountManagementSimpleMenuItem />
                     </SimpleMenu>
                 );
             case AccountState.Disconnected:
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 22414d101..52d97b1ea 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,9 +1,12 @@
 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;
@@ -23,18 +26,61 @@ export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children
     );
 };
 
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
+
 export interface SimpleMenuItemProps {
-    text: string;
+    displayText: string;
     onClick?: () => void;
 }
-export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => (
-    <Container marginTop="16px" className="flex flex-column">
-        <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}>
-            {text}
-        </Text>
-    </Container>
-);
+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>
+    );
+};
 
-SimpleMenu.defaultProps = {
-    minWidth: '220px',
+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 LinkSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<LinkSimpleMenuItemProps> = ({ onClick }) => {
+    return (
+        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+            <SimpleMenuItem displayText="Manage Account..." onClick={_.noop} />
+        </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/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ab234ae1b..b6ae79b74 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -16,7 +16,12 @@ import { DropDown } 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 { SimpleMenu, SimpleMenuItem } from 'ts/components/ui/simple_menu';
+import {
+    CopyAddressSimpleMenuItem,
+    DifferentWalletSimpleMenuItem,
+    GoToAccountManagementSimpleMenuItem,
+    SimpleMenu,
+} 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';
@@ -37,7 +42,6 @@ import {
     TokenByAddress,
     TokenState,
     TokenStateByAddress,
-    WebsitePaths,
 } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
@@ -88,7 +92,6 @@ const HEADER_ITEM_KEY = 'HEADER';
 const ETHER_ITEM_KEY = 'ETHER';
 const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
-const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 const PLACEHOLDER_COLOR = colors.grey300;
 const LOADING_ROWS_COUNT = 6;
 
@@ -223,16 +226,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     }
                     popoverContent={
                         <SimpleMenu minWidth="150px">
-                            <CopyToClipboard text={this.props.userAddress}>
-                                <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} />
-                            </CopyToClipboard>
-                            <SimpleMenuItem
-                                text="Use a Different Wallet..."
-                                onClick={this.props.onToggleLedgerDialog}
-                            />
-                            <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
-                                <SimpleMenuItem text="Manage Account" onClick={_.noop} />
-                            </Link>
+                            <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
+                            <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                            <GoToAccountManagementSimpleMenuItem />
                         </SimpleMenu>
                     }
                     anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-- 
cgit 


From 2dea179333dd14ad74aea65bb6558aac3bb716f4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:44:14 -0700
Subject: More cleanup

---
 packages/website/ts/components/ui/drop_down.tsx  |  1 -
 packages/website/ts/components/wallet/wallet.tsx | 61 ++++++++++++------------
 2 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 3f1fec3f4..947e51be0 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -83,7 +83,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
     private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
-        event.stopPropagation();
         if (this.props.shouldWaitForClickToActivate) {
             this.setState({
                 isDropDownOpen: true,
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index b6ae79b74..56776d255 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -21,6 +21,7 @@ import {
     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';
@@ -207,36 +208,36 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
         const onClick = _.noop;
         const accessory = (
-            <Container marginRight="15px">
-                <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">
-                            <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} />
-                            <GoToAccountManagementSimpleMenuItem />
-                        </SimpleMenu>
-                    }
-                    anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: 'right', vertical: 'top' }}
-                    zDepth={1}
-                    shouldWaitForClickToActivate={true}
-                />
-            </Container>
+            <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}
+                shouldWaitForClickToActivate={true}
+            />
         );
         return (
             <StandardIconRow
-- 
cgit 


From 86d4ffe7e561ec72aa41300fd6c1e8f493ba0306 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Sun, 1 Jul 2018 14:48:01 -0700
Subject: Lint fixes

---
 packages/website/ts/components/top_bar/provider_display.tsx | 13 +++----------
 packages/website/ts/components/ui/drop_down.tsx             |  2 +-
 packages/website/ts/components/ui/simple_menu.tsx           |  5 +----
 packages/website/ts/components/wallet/wallet.tsx            |  2 --
 4 files changed, 5 insertions(+), 17 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index c2915f9a9..74f9beedb 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,7 +1,6 @@
 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 Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
@@ -22,8 +21,7 @@ import {
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
-import { AccountState, ProviderType, WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
+import { AccountState, ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 const ROOT_HEIGHT = 24;
@@ -50,10 +48,6 @@ 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 activeNode = (
             <Island className="flex items-center py1 px2" style={styles.root}>
                 {this._renderIcon()}
@@ -63,12 +57,11 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 {this._renderInjectedProvider()}
             </Island>
         );
-        const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
         return (
             <div style={{ width: 'fit-content', height: 48, float: 'right' }}>
                 <DropDown
                     activeNode={activeNode}
-                    popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
+                    popoverContent={this._renderPopoverContent()}
                     anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
                     targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
@@ -76,7 +69,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             </div>
         );
     }
-    public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
+    private _renderPopoverContent(): React.ReactNode {
         const accountState = this._getAccountState();
         switch (accountState) {
             case AccountState.Ready:
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 947e51be0..c21c69993 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';
 
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 52d97b1ea..c1cab07bd 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -65,10 +65,7 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimp
     );
 };
 
-export interface LinkSimpleMenuItemProps {
-    onClick?: () => void;
-}
-export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<LinkSimpleMenuItemProps> = ({ onClick }) => {
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => {
     return (
         <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
             <SimpleMenuItem displayText="Manage Account..." onClick={_.noop} />
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 56776d255..875e6e78d 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -5,8 +5,6 @@ import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
-import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
-- 
cgit 


From f2af6e4b3ae71abdd068a88bd5d686970649fe8d Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 01:51:59 -0700
Subject: Add optional onClick to Link simple menu item

---
 packages/website/ts/components/ui/simple_menu.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index c1cab07bd..74b8ef6ae 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -65,10 +65,15 @@ export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimp
     );
 };
 
-export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => {
+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={_.noop} />
+            <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
         </Link>
     );
 };
-- 
cgit 


From afbfc8ba1c8d4bf812e3087db50c6a9dd786be79 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 09:06:29 -0700
Subject: Implement clickaway for wallet menu on mobile

---
 packages/website/ts/components/ui/drop_down.tsx  | 32 +++++++++++++++---------
 packages/website/ts/components/wallet/wallet.tsx |  6 +++--
 2 files changed, 24 insertions(+), 14 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index c21c69993..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -7,14 +7,20 @@ const DEFAULT_STYLE = {
     fontSize: 14,
 };
 
-interface DropDownProps {
+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;
-    shouldWaitForClickToActivate?: boolean;
+    activateEvent?: DropdownMouseEvent;
+    closeEvent?: DropdownMouseEvent;
 }
 
 interface DropDownState {
@@ -26,7 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        shouldWaitForClickToActivate: false,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -67,7 +74,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                     anchorOrigin={this.props.anchorOrigin}
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
                     animated={false}
                     zDepth={this.props.zDepth}
                 >
@@ -83,7 +90,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
     private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
-        if (this.props.shouldWaitForClickToActivate) {
+        if (this.props.activateEvent === DropdownMouseEvent.Click) {
             this.setState({
                 isDropDownOpen: true,
                 anchorEl: event.currentTarget,
@@ -92,28 +99,29 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        if (!this.props.shouldWaitForClickToActivate) {
+        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/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 875e6e78d..b891f873a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -10,7 +10,7 @@ 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 } from 'ts/components/ui/drop_down';
+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';
@@ -194,6 +194,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 = (
@@ -234,7 +235,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                 targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                 zDepth={1}
-                shouldWaitForClickToActivate={true}
+                activateEvent={DropdownMouseEvent.Click}
+                closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
             />
         );
         return (
-- 
cgit 


From 2d30c290e9d5420ef6ec9b622ebddf3995239ebc Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 3 Jul 2018 09:22:52 -0700
Subject: Remove InstallPrompt

---
 .../ts/components/top_bar/install_prompt.tsx       | 59 ----------------------
 .../ts/components/top_bar/provider_display.tsx     |  2 -
 2 files changed, 61 deletions(-)
 delete mode 100644 packages/website/ts/components/top_bar/install_prompt.tsx

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx
deleted file mode 100644
index 8d1a9c48a..000000000
--- a/packages/website/ts/components/top_bar/install_prompt.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import RaisedButton from 'material-ui/RaisedButton';
-import * as React from 'react';
-
-import { colors } from 'ts/style/colors';
-import { constants } from 'ts/utils/constants';
-
-export interface InstallPromptProps {
-    onToggleLedgerDialog: () => void;
-}
-
-export const InstallPrompt: React.StatelessComponent<InstallPromptProps> = ({ onToggleLedgerDialog }) => {
-    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={onToggleLedgerDialog} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 74f9beedb..46a32a238 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -6,7 +6,6 @@ import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
-import { InstallPrompt } from 'ts/components/top_bar/install_prompt';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
@@ -81,7 +80,6 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                     </SimpleMenu>
                 );
             case AccountState.Disconnected:
-                return <InstallPrompt onToggleLedgerDialog={this.props.onToggleLedgerDialog} />;
             case AccountState.Locked:
             case AccountState.Loading:
             default:
-- 
cgit