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/wallet/wallet.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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 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/components/wallet/wallet.tsx')

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/components/wallet/wallet.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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/components/wallet/wallet.tsx')

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

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

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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/wallet/wallet.tsx | 61 ++++++++++++------------
 1 file changed, 31 insertions(+), 30 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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/wallet/wallet.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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 bc7e8ff471d7abe8e65b30d1945f6a989d521f10 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 2 Jul 2018 16:00:34 -0700
Subject: Add better balance formatting rules for balances and usd values

---
 packages/website/ts/components/wallet/wallet.tsx | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1f1e3598a..668a7a537 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,6 +1,5 @@
 import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber, errorUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -83,7 +82,6 @@ const ICON_DIMENSION = 28;
 const BODY_ITEM_KEY = 'BODY';
 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;
@@ -411,19 +409,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         price?: BigNumber,
         isLoading: boolean = false,
     ): React.ReactNode {
-        let result;
-        if (!isLoading) {
-            if (_.isUndefined(price)) {
-                result = '--';
-            } else {
-                const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-                const value = unitAmount.mul(price);
-                const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
-                result = `$${formattedAmount}`;
-            }
-        } else {
-            result = '$0.00';
-        }
+        const result = !isLoading
+            ? _.isUndefined(price)
+                ? '--'
+                : utils.getUsdValueFormattedAmount(amount, decimals, price)
+            : '$0.00';
         return (
             <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
                 <Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">
-- 
cgit 


From 73d8a2adf748e06552a1a7a7a188433c4c41095b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 2 Jul 2018 16:52:20 -0700
Subject: Always show the wrap ether row in between ETH and WETH

---
 packages/website/ts/components/wallet/wallet.tsx | 33 ++++++++++++------------
 1 file changed, 17 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1f1e3598a..a75404637 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -320,8 +320,24 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
         const etherToken = this._getEthToken();
+        const wrapEtherItem = shouldShowWrapEtherItem ? (
+            <WrapEtherItem
+                userAddress={this.props.userAddress}
+                networkId={this.props.networkId}
+                blockchain={this.props.blockchain}
+                dispatcher={this.props.dispatcher}
+                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                direction={accessoryItemConfig.wrappedEtherDirection}
+                etherToken={etherToken}
+                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
+                // tslint:disable:jsx-no-lambda
+                refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
+            />
+        ) : null;
         return (
             <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
+                {this.state.wrappedEtherDirection === Side.Receive && wrapEtherItem}
                 <StandardIconRow
                     icon={icon}
                     main={
@@ -331,23 +347,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         </div>
                     }
                     accessory={this._renderAccessoryItems(accessoryItemConfig)}
-                    backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
                 />
-                {shouldShowWrapEtherItem && (
-                    <WrapEtherItem
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this.props.blockchain}
-                        dispatcher={this.props.dispatcher}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        direction={accessoryItemConfig.wrappedEtherDirection}
-                        etherToken={etherToken}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
-                        // tslint:disable:jsx-no-lambda
-                        refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
-                    />
-                )}
+                {this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
             </div>
         );
     }
-- 
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/wallet/wallet.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/wallet/wallet.tsx')

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