mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-30 12:18:09 +00:00
Merge pull request #341 from trezor/fix/hidden-wallet-toggler
Fix/Hidden wallet toggler in device header
This commit is contained in:
Vladimir Volek
GitHub
commit
0040c5d583
@ -31,11 +31,13 @@ const Tooltip = ({
|
||||
content,
|
||||
readMoreLink,
|
||||
children,
|
||||
enterDelayMs,
|
||||
}) => (
|
||||
<Wrapper className={className}>
|
||||
<RcTooltip
|
||||
arrowContent={<div className="rc-tooltip-arrow-inner" />}
|
||||
placement={placement}
|
||||
mouseEnterDelay={enterDelayMs || 0}
|
||||
overlay={() => (
|
||||
<ContentWrapper>
|
||||
<Content maxWidth={maxWidth}>{content}</Content>
|
||||
@ -66,6 +68,7 @@ Tooltip.propTypes = {
|
||||
PropTypes.string,
|
||||
]),
|
||||
readMoreLink: PropTypes.string,
|
||||
enterDelayMs: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import colors from 'config/colors';
|
||||
import styled from 'styled-components';
|
||||
import ICONS from 'config/icons';
|
||||
|
||||
const SvgWrapper = styled.svg`
|
||||
:hover {
|
||||
@ -15,9 +16,6 @@ const Path = styled.path`
|
||||
fill: ${props => props.color};
|
||||
`;
|
||||
|
||||
export const HIDDEN = 'M25.421,17.28l-3.167-8.8C22.175,8.24,21.858,8,21.542,8h-2.375c-0.475,0-0.792,0.32-0.792,0.8c0,0.48,0.317,0.8,0.792,0.8h1.821l2.612,7.2h-6.017h-3.167H8.4l2.613-7.2h1.821c0.475,0,0.792-0.32,0.792-0.8c0-0.48-0.317-0.8-0.792-0.8h-2.375c-0.317,0-0.633,0.24-0.712,0.56l-3.167,8.8C6.5,17.36,6.5,17.52,6.5,17.6l0,0l0,0l0,0v4c0,1.36,1.029,2.4,2.375,2.4h3.958c1.346,0,2.375-1.04,2.375-2.4v-3.2h1.583v3.2c0,1.36,1.029,2.4,2.375,2.4h3.958c1.346,0,2.375-1.04,2.375-2.4v-4l0,0l0,0l0,0C25.5,17.52,25.5,17.36,25.421,17.28z';
|
||||
export const STANDARD = 'M23.333,10.667H10.667H10c-0.367,0-0.667-0.299-0.667-0.667S9.633,9.333,10,9.333h10V10h1.333V8.667C21.333,8.299,21.035,8,20.667,8H10c-1.105,0-2,0.895-2,2v11.333C8,22.806,9.194,24,10.667,24h12.667C23.701,24,24,23.701,24,23.333v-12C24,10.965,23.701,10.667,23.333,10.667z M20,18.667c-0.737,0-1.333-0.597-1.333-1.333C18.667,16.597,19.263,16,20,16s1.333,0.597,1.333,1.333C21.333,18.07,20.737,18.667,20,18.667z';
|
||||
|
||||
const Icon = ({
|
||||
type = 'standard',
|
||||
size = 24,
|
||||
@ -29,13 +27,13 @@ const Icon = ({
|
||||
hoverColor={hoverColor}
|
||||
width={`${size}`}
|
||||
height={`${size}`}
|
||||
viewBox="0 0 32 32"
|
||||
viewBox="0 0 1024 1024"
|
||||
onClick={onClick}
|
||||
>
|
||||
<Path
|
||||
key={type}
|
||||
color={color}
|
||||
d={type === 'hidden' ? HIDDEN : STANDARD}
|
||||
d={type === 'hidden' ? ICONS.WALLET_HIDDEN : ICONS.WALLET_STANDARD}
|
||||
/>
|
||||
</SvgWrapper>
|
||||
);
|
||||
|
||||
@ -70,6 +70,12 @@ export default {
|
||||
SUCCESS: [
|
||||
'M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z',
|
||||
],
|
||||
WALLET_STANDARD: [
|
||||
'M746.656,341.344l-405.312,0l-21.344,0c-11.744,0 -21.344,-9.568 -21.344,-21.344c0,-11.776 9.6,-21.344 21.344,-21.344l320,0l0,21.344l42.656,0l0,-42.656c0,-11.776 -9.536,-21.344 -21.312,-21.344l-341.344,0c-35.36,0 -64,28.64 -64,64l0,362.656c0,47.136 38.208,85.344 85.344,85.344l405.344,0c11.744,0 21.312,-9.568 21.312,-21.344l0,-384c0,-11.776 -9.568,-21.312 -21.344,-21.312Zm-106.656,256c-23.584,0 -42.656,-19.104 -42.656,-42.656c0,-23.584 19.072,-42.688 42.656,-42.688c23.584,0 42.656,19.104 42.656,42.656c0,23.584 -19.072,42.688 -42.656,42.688Z',
|
||||
],
|
||||
WALLET_HIDDEN: [
|
||||
'M813.472,552.96l-101.344,-281.6c-2.528,-7.68 -12.672,-15.36 -22.784,-15.36l-76,0c-15.2,0 -25.344,10.24 -25.344,25.6c0,15.36 10.144,25.6 25.344,25.6l58.272,0l83.584,230.4l-192.544,0l-101.344,0l-192.512,0l83.616,-230.4l58.272,0c15.2,0 25.344,-10.24 25.344,-25.6c0,-15.36 -10.144,-25.6 -25.344,-25.6l-76,0c-10.144,0 -20.256,7.68 -22.784,17.92l-101.344,281.6c-2.56,0 -2.56,5.12 -2.56,7.68l0,128c0,43.52 32.928,76.8 76,76.8l126.656,0c43.072,0 76,-33.28 76,-76.8l0,-102.4l50.656,0l0,102.4c0,43.52 32.928,76.8 76,76.8l126.656,0c43.072,0 76,-33.28 76,-76.8l0,-128c0.032,-2.56 0.032,-7.68 -2.496,-10.24Z',
|
||||
],
|
||||
QRCODE: [
|
||||
'M832 1024l-64 0l0 -128l64 0l0 128Zm-320 0l-64 0l0 -128l64 0l0 128Zm192 0l-128 0l0 -128l128 0l0 128Zm192 -192l64 0l0 64l64 0l0 128l-128 0l0 -192Zm-896 -192l384 0l0 384l-384 0l0 -384Zm320 320l0 -256l-256 0l0 256l256 0Zm-64 -64l-128 0l0 -128l128 0l0 128Zm512 0l-64 0l0 -64l64 0l0 64Zm-192 -128l0 128l-64 0l0 -64l-64 0l0 -64l128 0Zm128 64l-64 0l0 -64l64 0l0 64Zm192 0l-128 0l0 -64l128 0l0 64Zm-256 -64l-64 0l0 -64l64 0l0 64Zm320 -64l-64 0l0 -64l128 0l0 128l-64 0l0 -64Zm-384 0l-128 0l0 -128l128 0l0 128Zm64 -64l64 0l0 -64l128 0l0 128l-192 0l0 -64Zm-320 -128l64 0l0 -64l64 0l0 128l-128 0l0 -64Zm256 0l-64 0l0 -64l192 0l0 128l-128 0l0 -64Zm-576 -64l128 0l0 64l64 0l0 64l-192 0l0 -128Zm896 64l-128 0l0 -64l256 0l0 128l-128 0l0 -64Zm-576 0l-128 0l0 -64l128 0l0 64Zm192 -64l-64 0l0 -64l64 0l0 64Zm-512 -448l384 0l0 384l-384 0l0 -384Zm576 384l-64 0l0 -128l64 0l0 128Zm64 -384l384 0l0 384l-384 0l0 -384Zm-320 320l0 -256l-256 0l0 256l256 0Zm640 0l0 -256l-256 0l0 256l256 0Zm-704 -64l-128 0l0 -128l128 0l0 128Zm640 0l-128 0l0 -128l128 0l0 128Zm-384 -256l0 64l64 0l0 128l-64 0l0 64l-64 0l0 -256l64 0Z',
|
||||
],
|
||||
|
||||
@ -30,19 +30,6 @@ const Label = styled.div`
|
||||
`;
|
||||
|
||||
class MenuItems extends PureComponent {
|
||||
onDeviceMenuClick(action, device) {
|
||||
if (action === 'reload') {
|
||||
this.props.acquireDevice();
|
||||
} else if (action === 'forget') {
|
||||
this.props.forgetDevice(device);
|
||||
} else if (action === 'clone') {
|
||||
this.props.duplicateDevice(device);
|
||||
} else if (action === 'settings') {
|
||||
this.props.toggleDeviceDropdown(false);
|
||||
this.props.gotoDeviceSettings(device);
|
||||
}
|
||||
}
|
||||
|
||||
showDeviceMenu() {
|
||||
const { device } = this.props;
|
||||
return device && device.mode === 'normal';
|
||||
@ -58,9 +45,14 @@ class MenuItems extends PureComponent {
|
||||
|
||||
render() {
|
||||
if (!this.showDeviceMenu()) return null;
|
||||
const { device } = this.props;
|
||||
return (
|
||||
<Wrapper>
|
||||
{/* <Item onClick={() => this.onDeviceMenuClick('settings', this.props.device)}>
|
||||
{/* <Item onClick={() => {
|
||||
this.props.toggleDeviceDropdown(false);
|
||||
this.props.gotoDeviceSettings(device);
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={icons.COG}
|
||||
size={25}
|
||||
@ -68,28 +60,32 @@ class MenuItems extends PureComponent {
|
||||
/>
|
||||
<Label>Device settings</Label>
|
||||
</Item> */}
|
||||
<Item onClick={() => this.onDeviceMenuClick('forget', this.props.device)}>
|
||||
<Icon
|
||||
icon={icons.EJECT}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
<Label>Forget</Label>
|
||||
</Item>
|
||||
{this.showClone() && (
|
||||
<Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
|
||||
<DeviceIcon device={this.props.device} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Item onClick={() => this.props.duplicateDevice(device)}>
|
||||
<Icon
|
||||
icon={icons.WALLET_STANDARD}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
<Label>Change wallet type</Label>
|
||||
</Item>
|
||||
)}
|
||||
{this.showRenewSession() && (
|
||||
<Item
|
||||
onClick={() => this.onDeviceMenuClick('reload')}
|
||||
onClick={() => this.props.acquireDevice()}
|
||||
>
|
||||
<DeviceIcon device={this.props.device} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Renew session</Label>
|
||||
</Item>
|
||||
)}
|
||||
<Item onClick={() => this.props.forgetDevice(device)}>
|
||||
<Icon
|
||||
icon={icons.EJECT}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
<Label>Forget device</Label>
|
||||
</Item>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
@ -100,8 +96,8 @@ MenuItems.propTypes = {
|
||||
acquireDevice: PropTypes.func.isRequired,
|
||||
forgetDevice: PropTypes.func.isRequired,
|
||||
duplicateDevice: PropTypes.func.isRequired,
|
||||
toggleDeviceDropdown: PropTypes.func.isRequired,
|
||||
gotoDeviceSettings: PropTypes.func.isRequired,
|
||||
// toggleDeviceDropdown: PropTypes.func.isRequired,
|
||||
// gotoDeviceSettings: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default MenuItems;
|
||||
@ -2,7 +2,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import TrezorConnect from 'trezor-connect';
|
||||
import type { TrezorDevice } from 'flowtype';
|
||||
|
||||
import COLORS from 'config/colors';
|
||||
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
||||
@ -45,11 +44,6 @@ const StyledDivider = styled(Divider)`
|
||||
border: none;
|
||||
`;
|
||||
|
||||
type DeviceMenuItem = {
|
||||
type: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
class DeviceMenu extends PureComponent<Props> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
@ -74,19 +68,6 @@ class DeviceMenu extends PureComponent<Props> {
|
||||
window.removeEventListener('mousedown', this.mouseDownHandler, false);
|
||||
}
|
||||
|
||||
onDeviceMenuClick(item: DeviceMenuItem, device: TrezorDevice): void {
|
||||
if (item.type === 'reload') {
|
||||
this.props.acquireDevice();
|
||||
} else if (item.type === 'forget') {
|
||||
this.props.forgetDevice(device);
|
||||
} else if (item.type === 'clone') {
|
||||
this.props.duplicateDevice(device);
|
||||
} else if (item.type === 'settings') {
|
||||
this.props.toggleDeviceDropdown(false);
|
||||
this.props.gotoDeviceSettings(device);
|
||||
}
|
||||
}
|
||||
|
||||
getMenuHeight(): number {
|
||||
return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0;
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ import styled from 'styled-components';
|
||||
import DeviceHeader from 'components/DeviceHeader';
|
||||
import * as deviceUtils from 'utils/device';
|
||||
|
||||
import Tooltip from 'components/Tooltip';
|
||||
import AccountMenu from './components/AccountMenu';
|
||||
import CoinMenu from './components/CoinMenu';
|
||||
import DeviceMenu from './components/DeviceMenu';
|
||||
@ -24,6 +25,9 @@ const Header = styled(DeviceHeader)`
|
||||
flex: 0 0 auto;
|
||||
`;
|
||||
|
||||
const WalletTypeIconWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const Counter = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -203,6 +207,19 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
|
||||
const { selectedDevice, dropdownOpened } = props.wallet;
|
||||
const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
|
||||
const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard';
|
||||
const showWalletType = selectedDevice && selectedDevice.features && selectedDevice.features.passphrase_protection;
|
||||
const isDeviceReady = selectedDevice && selectedDevice.connected && selectedDevice.available;
|
||||
|
||||
let walletTooltipMsg = `You are in your ${walletType} wallet.`;
|
||||
if (isDeviceReady) {
|
||||
walletTooltipMsg = walletType === 'standard'
|
||||
? `${walletTooltipMsg} Click here to access your hidden wallet.`
|
||||
: `${walletTooltipMsg} Click here to access your standard or another hidden wallet`;
|
||||
} else {
|
||||
walletTooltipMsg = `${walletTooltipMsg} To access other wallets please connect your device.`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Sidebar isOpen={props.wallet.showSidebar}>
|
||||
<Header
|
||||
@ -219,9 +236,38 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
isOpen={this.props.wallet.dropdownOpened}
|
||||
icon={(
|
||||
<React.Fragment>
|
||||
<WalletTypeIcon type={selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard'} size={25} color={colors.TEXT_SECONDARY} />
|
||||
{showWalletType ? (
|
||||
<Tooltip
|
||||
content={walletTooltipMsg}
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<WalletTypeIconWrapper>
|
||||
<WalletTypeIcon
|
||||
onClick={(e) => {
|
||||
if (selectedDevice && isDeviceReady) {
|
||||
this.props.duplicateDevice(selectedDevice);
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
hoverColor={isDeviceReady ? colors.TEXT_PRIMARY : colors.TEXT_SECONDARY}
|
||||
type={walletType}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</WalletTypeIconWrapper>
|
||||
</Tooltip>) : null
|
||||
}
|
||||
{this.props.devices.length > 1 && (
|
||||
<Counter>{this.props.devices.length}</Counter>
|
||||
<Tooltip
|
||||
content="Number of devices"
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<Counter>{this.props.devices.length}</Counter>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Icon
|
||||
canAnimate={this.state.clicked === true}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user