crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Add menu for at the top of wallet and top right component
This commit is contained in:
Brandon Millman
2018-07-03 11:19:52 -07:00
committed by GitHub
parent a858e2870b 2d30c290e9
commit 9b864517e2
9 changed files with 213 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/website/ts/blockchain_watcher.ts
View File

@@ -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);
}

114
packages/website/ts/components/top_bar/provider_display.tsx
View File

@@ -1,23 +1,26 @@
import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
import { AccountConnection } from 'ts/components/ui/account_connection';
import { Container } from 'ts/components/ui/container';
import { DropDown } from 'ts/components/ui/drop_down';
import { Identicon } from 'ts/components/ui/identicon';
import { Image } from 'ts/components/ui/image';
import { Island } from 'ts/components/ui/island';
import {
CopyAddressSimpleMenuItem,
DifferentWalletSimpleMenuItem,
GoToAccountManagementSimpleMenuItem,
SimpleMenu,
} from 'ts/components/ui/simple_menu';
import { Text } from 'ts/components/ui/text';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
import { AccountState, ProviderType } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const ROOT_HEIGHT = 24;
@@ -44,11 +47,7 @@ const styles: Styles = {
export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
public render(): React.ReactNode {
const isExternallyInjectedProvider = utils.isExternallyInjected(
this.props.providerType,
this.props.injectedProviderName,
);
const hoverActiveNode = (
const activeNode = (
<Island className="flex items-center py1 px2" style={styles.root}>
{this._renderIcon()}
<Container marginLeft="12px" marginRight="12px">
@@ -57,93 +56,34 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
{this._renderInjectedProvider()}
</Island>
);
const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
return (
<div style={{ width: 'fit-content', height: 48, float: 'right' }}>
<DropDown
hoverActiveNode={hoverActiveNode}
popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
activeNode={activeNode}
popoverContent={this._renderPopoverContent()}
anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
zDepth={1}
/>
</div>
);
}
public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
if (!this._isBlockchainReady()) {
return null;
} else if (hasInjectedProvider || hasLedgerProvider) {
return (
<ProviderPicker
dispatcher={this.props.dispatcher}
networkId={this.props.networkId}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
onToggleLedgerDialog={this.props.onToggleLedgerDialog}
blockchain={this.props.blockchain}
/>
);
} else {
// Nothing to connect to, show install/info popover
return (
<div className="px2" style={{ maxWidth: 420 }}>
<div className="center h4 py2" style={{ color: colors.grey700 }}>
Choose a wallet:
</div>
<div className="flex pb3">
<div className="center px2">
<div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
<div className="py2">
<img src="/images/metamask_or_parity.png" width="135" />
</div>
<div>
Use{' '}
<a
href={constants.URL_METAMASK_CHROME_STORE}
target="_blank"
style={{ color: colors.lightBlueA700 }}
>
Metamask
</a>{' '}
or{' '}
<a
href={constants.URL_PARITY_CHROME_STORE}
target="_blank"
style={{ color: colors.lightBlueA700 }}
>
Parity Signer
</a>
</div>
</div>
<div>
<div
className="pl1 ml1"
style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }}
/>
<div className="py1">or</div>
<div
className="pl1 ml1"
style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }}
/>
</div>
<div className="px2 center">
<div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
<div style={{ paddingTop: 21, paddingBottom: 29 }}>
<img src="/images/ledger_icon.png" style={{ width: 80 }} />
</div>
<div>
<RaisedButton
style={{ width: '100%' }}
label="Use Ledger"
onClick={this.props.onToggleLedgerDialog}
/>
</div>
</div>
</div>
</div>
);
private _renderPopoverContent(): React.ReactNode {
const accountState = this._getAccountState();
switch (accountState) {
case AccountState.Ready:
return (
<SimpleMenu>
<CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
<DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
<GoToAccountManagementSimpleMenuItem />
</SimpleMenu>
);
case AccountState.Disconnected:
case AccountState.Locked:
case AccountState.Loading:
default:
return null;
}
}
private _renderIcon(): React.ReactNode {

79
packages/website/ts/components/top_bar/provider_picker.tsx
View File

@@ -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();
}
}
}

4
packages/website/ts/components/top_bar/top_bar.tsx
View File

@@ -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' }}

1
packages/website/ts/components/ui/container.tsx
View File

@@ -17,6 +17,7 @@ export interface ContainerProps {
maxHeight?: StringOrNum;
width?: StringOrNum;
height?: StringOrNum;
minWidth?: StringOrNum;
minHeight?: StringOrNum;
isHidden?: boolean;
className?: string;

52
packages/website/ts/components/ui/drop_down.tsx
View File

@@ -1,4 +1,4 @@
import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
import Popover from 'material-ui/Popover';
import * as React from 'react';
import { MaterialUIPosition } from 'ts/types';
@@ -7,13 +7,20 @@ const DEFAULT_STYLE = {
fontSize: 14,
};
interface DropDownProps {
hoverActiveNode: React.ReactNode;
export enum DropdownMouseEvent {
Hover = 'hover',
Click = 'click',
}
export interface DropDownProps {
activeNode: React.ReactNode;
popoverContent: React.ReactNode;
anchorOrigin: MaterialUIPosition;
targetOrigin: MaterialUIPosition;
style?: React.CSSProperties;
zDepth?: number;
activateEvent?: DropdownMouseEvent;
closeEvent?: DropdownMouseEvent;
}
interface DropDownState {
@@ -25,6 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
public static defaultProps: Partial<DropDownProps> = {
style: DEFAULT_STYLE,
zDepth: 1,
activateEvent: DropdownMouseEvent.Hover,
closeEvent: DropdownMouseEvent.Hover,
};
private _isHovering: boolean;
private _popoverCloseCheckIntervalId: number;
@@ -58,46 +67,61 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
onMouseEnter={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
>
{this.props.hoverActiveNode}
<div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
<Popover
open={this.state.isDropDownOpen}
anchorEl={this.state.anchorEl}
anchorOrigin={this.props.anchorOrigin}
targetOrigin={this.props.targetOrigin}
onRequestClose={this._closePopover.bind(this)}
useLayerForClickAway={false}
animation={PopoverAnimationVertical}
useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
animated={false}
zDepth={this.props.zDepth}
>
<div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
<div
onMouseEnter={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
onClick={this._closePopover.bind(this)}
>
{this.props.popoverContent}
</div>
</Popover>
</div>
);
}
private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
if (this.props.activateEvent === DropdownMouseEvent.Click) {
this.setState({
isDropDownOpen: true,
anchorEl: event.currentTarget,
});
}
}
private _onHover(event: React.FormEvent<HTMLInputElement>): void {
this._isHovering = true;
this._checkIfShouldOpenPopover(event);
if (this.props.activateEvent === DropdownMouseEvent.Hover) {
this._checkIfShouldOpenPopover(event);
}
}
private _onHoverOff(): void {
this._isHovering = false;
}
private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
if (this.state.isDropDownOpen) {
return; // noop
}
this.setState({
isDropDownOpen: true,
anchorEl: event.currentTarget,
});
}
private _onHoverOff(): void {
this._isHovering = false;
}
private _checkIfShouldClosePopover(): void {
if (!this.state.isDropDownOpen || this._isHovering) {
if (!this.state.isDropDownOpen) {
return; // noop
}
this._closePopover();
if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
this._closePopover();
}
}
private _closePopover(): void {
this.setState({

88
packages/website/ts/components/ui/simple_menu.tsx Normal file
View File

@@ -0,0 +1,88 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import { Link } from 'react-router-dom';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
export interface SimpleMenuProps {
minWidth?: number | string;
}
export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => {
return (
<Container
marginLeft="16px"
marginRight="16px"
marginBottom="16px"
minWidth={minWidth}
className="flex flex-column"
>
{children}
</Container>
);
};
SimpleMenu.defaultProps = {
minWidth: '220px',
};
export interface SimpleMenuItemProps {
displayText: string;
onClick?: () => void;
}
export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ displayText, onClick }) => {
// Falling back to _.noop for onclick retains the hovering effect
return (
<Container marginTop="16px" className="flex flex-column">
<Text
fontSize="14px"
fontColor={colors.darkGrey}
onClick={onClick || _.noop}
hoverColor={colors.mediumBlue}
>
{displayText}
</Text>
</Container>
);
};
export interface CopyAddressSimpleMenuItemProps {
userAddress: string;
onClick?: () => void;
}
export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimpleMenuItemProps> = ({
userAddress,
onClick,
}) => {
return (
<CopyToClipboard text={userAddress}>
<SimpleMenuItem displayText="Copy Address to Clipboard" onClick={onClick} />
</CopyToClipboard>
);
};
export interface GoToAccountManagementSimpleMenuItemProps {
onClick?: () => void;
}
export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
GoToAccountManagementSimpleMenuItemProps
> = ({ onClick }) => {
return (
<Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
<SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
</Link>
);
};
export interface DifferentWalletSimpleMenuItemProps {
onClick?: () => void;
}
export const DifferentWalletSimpleMenuItem: React.StatelessComponent<DifferentWalletSimpleMenuItemProps> = ({
onClick,
}) => {
return <SimpleMenuItem displayText="Use a Different Wallet..." onClick={onClick} />;
};

5
packages/website/ts/components/ui/text.tsx
View File

@@ -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)}` : '')};
}
`;

62
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -4,15 +4,22 @@ import * as _ from 'lodash';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
import * as React from 'react';
import { Link } from 'react-router-dom';
import firstBy = require('thenby');
import { Blockchain } from 'ts/blockchain';
import { AccountConnection } from 'ts/components/ui/account_connection';
import { Container } from 'ts/components/ui/container';
import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
import { IconButton } from 'ts/components/ui/icon_button';
import { Identicon } from 'ts/components/ui/identicon';
import { Island } from 'ts/components/ui/island';
import {
CopyAddressSimpleMenuItem,
DifferentWalletSimpleMenuItem,
GoToAccountManagementSimpleMenuItem,
SimpleMenu,
SimpleMenuItem,
} from 'ts/components/ui/simple_menu';
import { Text } from 'ts/components/ui/text';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { BodyOverlay } from 'ts/components/wallet/body_overlay';
@@ -33,7 +40,6 @@ import {
TokenByAddress,
TokenState,
TokenStateByAddress,
WebsitePaths,
} from 'ts/types';
import { analytics } from 'ts/utils/analytics';
import { constants } from 'ts/utils/constants';
@@ -83,7 +89,6 @@ const BODY_ITEM_KEY = 'BODY';
const HEADER_ITEM_KEY = 'HEADER';
const ETHER_ITEM_KEY = 'ETHER';
const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
const PLACEHOLDER_COLOR = colors.grey300;
const LOADING_ROWS_COUNT = 6;
@@ -187,6 +192,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
);
}
private _renderConnectedHeaderRows(): React.ReactElement<{}> {
const isMobile = this.props.screenWidth === ScreenWidths.Sm;
const userAddress = this.props.userAddress;
const accountState = this._getAccountState();
const main = (
@@ -197,15 +203,49 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
<AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
</div>
);
const onClick = _.noop;
const accessory = (
<DropDown
activeNode={
// this container gives the menu button more of a hover target for the drop down
// it prevents accidentally closing the menu by moving off of the button
<Container paddingLeft="100px" paddingRight="15px">
<Text
className="zmdi zmdi-more-horiz"
Tag="i"
fontSize="32px"
fontFamily="Material-Design-Iconic-Font"
fontColor={colors.darkGrey}
onClick={onClick}
hoverColor={colors.mediumBlue}
/>
</Container>
}
popoverContent={
<SimpleMenu minWidth="150px">
<CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
<DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
<SimpleMenuItem displayText="Add Tokens..." onClick={this.props.onAddToken} />
<SimpleMenuItem displayText="Remove Tokens..." onClick={this.props.onRemoveToken} />
<GoToAccountManagementSimpleMenuItem />
</SimpleMenu>
}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
zDepth={1}
activateEvent={DropdownMouseEvent.Click}
closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
/>
);
return (
<Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
<StandardIconRow
icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
main={main}
minHeight="60px"
backgroundColor={colors.white}
/>
</Link>
<StandardIconRow
key={HEADER_ITEM_KEY}
icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
main={main}
accessory={accessory}
minHeight="60px"
backgroundColor={colors.white}
/>
);
}
private _renderBody(): React.ReactElement<{}> {