From 3031598843080ff4fabb7bfb0ba823be6d545285 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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) => void; + hoverColor?: string; } const PlainText: React.StatelessComponent = ({ 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 { ); + const onClick = _.noop; + const accessory = ( + + + + ); return ( } main={main} + accessory={accessory} minHeight="60px" backgroundColor={colors.white} /> -- cgit v1.2.3 From be64184cfa11dcabd543161b5d7a6726d4e7924d Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 = ({ onToggleLedgerDialog }) => { + return ( +
+
+ Choose a wallet: +
+
+
+
Install a browser wallet
+
+ +
+ +
+
+
+
or
+
+
+
+
Connect to a ledger hardware wallet
+
+ +
+
+ +
+
+
+
+ ); +}; 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 - ); - } else { - // Nothing to connect to, show install/info popover - return ( -
-
- Choose a wallet: -
-
-
-
Install a browser wallet
-
- -
-
- Use{' '} - - Metamask - {' '} - or{' '} - - Parity Signer - -
-
-
-
-
or
-
-
-
-
Connect to a ledger hardware wallet
-
- -
-
- -
-
-
-
- ); + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + return ( + + ); + case AccountState.Disconnected: + return ; + 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 { targetOrigin={this.props.targetOrigin} onRequestClose={this._closePopover.bind(this)} useLayerForClickAway={false} - animation={PopoverAnimationVertical} + animated={false} zDepth={this.props.zDepth} >
-- cgit v1.2.3 From da8cf9981eda4a068c22d0107e07b704afda2584 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 + + + + + + + + + ); case AccountState.Disconnected: return ; + 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 { - 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 ( -
- - - - -
- ); - } - private _renderLabel(title: string, shouldShowNetwork: boolean): React.ReactNode { - const label = ( -
-
{title}
- {shouldShowNetwork && this._renderNetwork()} -
- ); - return label; - } - private _renderNetwork(): React.ReactNode { - const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; - return ( -
-
- -
-
{networkName}
-
- ); - } - 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 { // 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 = ({ children }) => { + return ( + + {children} + + ); +}; + +export interface SimpleMenuItemProps { + text: string; + onClick?: () => void; +} +export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( + + + {text} + + +); -- cgit v1.2.3 From 6daf754f5bb4aa85d0f65bfdaf8910db4401d1cc Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 { const onClick = _.noop; const accessory = ( - + } + popoverContent={ + + + + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + zDepth={1} /> ); -- cgit v1.2.3 From a6f40d418704a8dca8c787663f00b6bcbdf18ba4 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 { - 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 {this._renderIcon()} @@ -61,14 +61,13 @@ export class ProviderDisplay extends React.Component ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; - const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; return (
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 { cursor: 'pointer', paddingTop: 16, }; - const hoverActiveNode = ( + const activeNode = (
{this.props.translate.get(Key.Developers, Deco.Cap)}
@@ -224,7 +224,7 @@ export class TopBar extends React.Component {
{ public static defaultProps: Partial = { style: DEFAULT_STYLE, zDepth: 1, + shouldWaitForClickToActivate: false, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -49,7 +51,7 @@ export class DropDown extends React.Component { // 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 { onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)} > - {this.props.hoverActiveNode} +
{this.props.activeNode}
{ animated={false} zDepth={this.props.zDepth} > -
+
{this.props.popoverContent}
); } + private _onActiveNodeClick(event: React.FormEvent): void { + event.stopPropagation(); + if (this.props.shouldWaitForClickToActivate) { + this.setState({ + isDropDownOpen: true, + anchorEl: event.currentTarget, + }); + } + } private _onHover(event: React.FormEvent): void { this._isHovering = true; - this._checkIfShouldOpenPopover(event); + if (!this.props.shouldWaitForClickToActivate) { + this._checkIfShouldOpenPopover(event); + } } private _checkIfShouldOpenPopover(event: React.FormEvent): 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 = ({ children }) => { +export const SimpleMenu: React.StatelessComponent = ({ children, minWidth }) => { return ( {children} @@ -26,9 +28,13 @@ export interface SimpleMenuItemProps { onClick?: () => void; } export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( - + {text} ); + +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 { const accessory = ( { /> } popoverContent={ - + @@ -234,19 +234,19 @@ export class Wallet extends React.Component { anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} targetOrigin={{ horizontal: 'right', vertical: 'top' }} zDepth={1} + shouldWaitForClickToActivate={true} /> ); return ( - - } - main={main} - accessory={accessory} - minHeight="60px" - backgroundColor={colors.white} - /> - + } + main={main} + accessory={accessory} + minHeight="60px" + backgroundColor={colors.white} + /> ); } private _renderBody(): React.ReactElement<{}> { -- cgit v1.2.3 From 955fdf5d13945fc7267e8ce0cc1f6016c57f3b72 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 { + // 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 + + + } popoverContent={ -- cgit v1.2.3 From 5a7908984e118f2babf7c0680bf17afa148f5122 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 - - - - - - - + + + ); 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 = ({ children ); }; +SimpleMenu.defaultProps = { + minWidth: '220px', +}; + export interface SimpleMenuItemProps { - text: string; + displayText: string; onClick?: () => void; } -export const SimpleMenuItem: React.StatelessComponent = ({ text, onClick }) => ( - - - {text} - - -); +export const SimpleMenuItem: React.StatelessComponent = ({ displayText, onClick }) => { + // Falling back to _.noop for onclick retains the hovering effect + return ( + + + {displayText} + + + ); +}; -SimpleMenu.defaultProps = { - minWidth: '220px', +export interface CopyAddressSimpleMenuItemProps { + userAddress: string; + onClick?: () => void; +} +export const CopyAddressSimpleMenuItem: React.StatelessComponent = ({ + userAddress, + onClick, +}) => { + return ( + + + + ); +}; + +export interface LinkSimpleMenuItemProps { + onClick?: () => void; +} +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent = ({ onClick }) => { + return ( + + + + ); +}; + +export interface DifferentWalletSimpleMenuItemProps { + onClick?: () => void; +} +export const DifferentWalletSimpleMenuItem: React.StatelessComponent = ({ + onClick, +}) => { + return ; }; 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 { } popoverContent={ - - - - - - - + + + } anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} -- cgit v1.2.3 From 2dea179333dd14ad74aea65bb6558aac3bb716f4 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 { ); } private _onActiveNodeClick(event: React.FormEvent): 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 { ); const onClick = _.noop; const accessory = ( - - - - - } - popoverContent={ - - - - - - } - anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'right', vertical: 'top' }} - zDepth={1} - shouldWaitForClickToActivate={true} - /> - + + + + } + popoverContent={ + + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + zDepth={1} + shouldWaitForClickToActivate={true} + /> ); return ( 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') 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 { public render(): React.ReactNode { - const isExternallyInjectedProvider = utils.isExternallyInjected( - this.props.providerType, - this.props.injectedProviderName, - ); const activeNode = ( {this._renderIcon()} @@ -63,12 +57,11 @@ export class ProviderDisplay extends React.Component ); - const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; return (
); } - 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 void; -} -export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent = ({ onClick }) => { +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<{}> = () => { return ( 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 v1.2.3 From f2af6e4b3ae71abdd068a88bd5d686970649fe8d Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 = () => { +export interface GoToAccountManagementSimpleMenuItemProps { + onClick?: () => void; +} +export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< + GoToAccountManagementSimpleMenuItemProps +> = ({ onClick }) => { return ( - + ); }; -- cgit v1.2.3 From afbfc8ba1c8d4bf812e3087db50c6a9dd786be79 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 { public static defaultProps: Partial = { 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 { 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 { ); } private _onActiveNodeClick(event: React.FormEvent): 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 { } private _onHover(event: React.FormEvent): 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): 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 { ); } 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 { 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 v1.2.3 From 2d30c290e9d5420ef6ec9b622ebddf3995239ebc Mon Sep 17 00:00:00 2001 From: Brandon Millman 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') 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 = ({ onToggleLedgerDialog }) => { - return ( -
-
- Choose a wallet: -
-
-
-
Install a browser wallet
-
- -
- -
-
-
-
or
-
-
-
-
Connect to a ledger hardware wallet
-
- -
-
- -
-
-
-
- ); -}; 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 ); case AccountState.Disconnected: - return ; case AccountState.Locked: case AccountState.Loading: default: -- cgit v1.2.3