aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/blockchain_watcher.ts7
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx9
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx4
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx27
-rw-r--r--packages/website/ts/components/ui/simple_menu.tsx14
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx22
6 files changed, 52 insertions, 31 deletions
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<{}> {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 23:07:09 +0800