mirror of
https://github.com/trezor/trezor-wallet
synced 2025-08-05 05:15:28 +00:00
added tooltips to device header's icons, wallet btn now clickable
This commit is contained in:
parent
740661b4c6
commit
0a0d1e7715
@ -12,6 +12,7 @@ import styled from 'styled-components';
|
|||||||
import DeviceHeader from 'components/DeviceHeader';
|
import DeviceHeader from 'components/DeviceHeader';
|
||||||
import * as deviceUtils from 'utils/device';
|
import * as deviceUtils from 'utils/device';
|
||||||
|
|
||||||
|
import Tooltip from 'components/Tooltip';
|
||||||
import AccountMenu from './components/AccountMenu';
|
import AccountMenu from './components/AccountMenu';
|
||||||
import CoinMenu from './components/CoinMenu';
|
import CoinMenu from './components/CoinMenu';
|
||||||
import DeviceMenu from './components/DeviceMenu';
|
import DeviceMenu from './components/DeviceMenu';
|
||||||
@ -23,6 +24,9 @@ const Header = styled(DeviceHeader)`
|
|||||||
border-right: 1px solid ${colors.BACKGROUND};
|
border-right: 1px solid ${colors.BACKGROUND};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const WalletTypeIconWrapper = styled.div`
|
||||||
|
`;
|
||||||
|
|
||||||
const Counter = styled.div`
|
const Counter = styled.div`
|
||||||
border: 1px solid ${colors.DIVIDER};
|
border: 1px solid ${colors.DIVIDER};
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -185,6 +189,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
|||||||
const { selectedDevice } = props.wallet;
|
const { selectedDevice } = props.wallet;
|
||||||
const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
|
const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
|
||||||
const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard';
|
const walletType = selectedDevice && !selectedDevice.useEmptyPassphrase ? 'hidden' : 'standard';
|
||||||
|
const passphraseEnabled = selectedDevice && selectedDevice.features && selectedDevice.features.passphrase_protection;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StickyContainer
|
<StickyContainer
|
||||||
@ -204,15 +209,39 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
|||||||
isOpen={this.props.wallet.dropdownOpened}
|
isOpen={this.props.wallet.dropdownOpened}
|
||||||
icon={(
|
icon={(
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{selectedDevice && selectedDevice.features.passphrase_protection ? (
|
{passphraseEnabled ? (
|
||||||
<WalletTypeIcon
|
<Tooltip
|
||||||
type={walletType}
|
content={walletType === 'standard'
|
||||||
size={25}
|
? 'You are in your standard wallet. Click here to access your hidden wallet.'
|
||||||
color={colors.TEXT_SECONDARY}
|
: 'You are in your hidden wallet. Click here to access your standard or another hidden wallet.'
|
||||||
/>) : null
|
}
|
||||||
|
maxWidth={200}
|
||||||
|
placement="bottom"
|
||||||
|
delayed
|
||||||
|
>
|
||||||
|
<WalletTypeIconWrapper>
|
||||||
|
<WalletTypeIcon
|
||||||
|
onClick={(e) => {
|
||||||
|
this.props.duplicateDevice(selectedDevice);
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
hoverColor={colors.TEXT_PRIMARY}
|
||||||
|
type={walletType}
|
||||||
|
size={25}
|
||||||
|
color={colors.TEXT_SECONDARY}
|
||||||
|
/>
|
||||||
|
</WalletTypeIconWrapper>
|
||||||
|
</Tooltip>) : null
|
||||||
}
|
}
|
||||||
{this.props.devices.length > 1 && (
|
{this.props.devices.length > 1 && (
|
||||||
<Counter>{this.props.devices.length}</Counter>
|
<Tooltip
|
||||||
|
content="Number of devices"
|
||||||
|
maxWidth={200}
|
||||||
|
placement="bottom"
|
||||||
|
delayed
|
||||||
|
>
|
||||||
|
<Counter>{this.props.devices.length}</Counter>
|
||||||
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
<Icon
|
<Icon
|
||||||
canAnimate={this.state.clicked === true}
|
canAnimate={this.state.clicked === true}
|
||||||
|
Loading…
Reference in New Issue
Block a user