Merge pull request #799 from 0xProject/feature/website/wallet-menu
Add menu for at the top of wallet and top right component
This commit is contained in:
Brandon Millman
GitHub
@@ -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 {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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' }}
|
||||
|
||||
Reference in New Issue
Block a user