mirror of
https://github.com/trezor/trezor-wallet
synced 2025-01-12 09:00:58 +00:00
Device menu refactor finalized
This commit is contained in:
Vladimir Volek
parent
5e54c2b640
commit
c724b73d5a
@ -1 +1,4 @@
|
||||
solidity
|
||||
coverage
|
||||
images
|
||||
node_modules
|
||||
@ -28,51 +28,46 @@ const Label = styled.div`
|
||||
`;
|
||||
|
||||
class MenuItems extends Component {
|
||||
// makeAction(action, device) {
|
||||
// switch (action) {
|
||||
// case 'reload': this.props.acquireDevice();
|
||||
// break;
|
||||
// case 'forget': this.props.forgetDevice();
|
||||
// break;
|
||||
// case 'clone': this.props.duplicateDevice();
|
||||
// break;
|
||||
// case 'settings': {
|
||||
// this.props.toggleDeviceDropdown(false);
|
||||
// this.props.gotoDeviceSettings(device);
|
||||
// break;
|
||||
// }
|
||||
// default: console.log('no action');
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
showClone() {
|
||||
return this.props.selectedDevice && this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available;
|
||||
return this.props.device && this.props.device.features.passphrase_protection && this.props.device.connected && this.props.device.available;
|
||||
}
|
||||
|
||||
showRenewSession() {
|
||||
return this.props.selectedDevice && this.props.selectedDevice.status !== 'available';
|
||||
return this.props.device && this.props.device.status !== 'available';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Wrapper>
|
||||
<Item>
|
||||
<Item onClick={() => this.onDeviceMenuClick('settings', this.props.device)}>
|
||||
<Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Device settings</Label>
|
||||
</Item>
|
||||
<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>
|
||||
<Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
|
||||
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Create hidden wallet</Label>
|
||||
</Item>
|
||||
)}
|
||||
{this.showRenewSession() && (
|
||||
<Item>
|
||||
<Item onClick={() => this.onDeviceMenuClick('reload')}>
|
||||
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
|
||||
<Label>Renew session</Label>
|
||||
</Item>
|
||||
@ -83,7 +78,7 @@ class MenuItems extends Component {
|
||||
}
|
||||
|
||||
MenuItems.propTypes = {
|
||||
selectedDevice: PropTypes.object.isRequired,
|
||||
device: PropTypes.object.isRequired,
|
||||
acquireDevice: PropTypes.func.isRequired,
|
||||
forgetDevice: PropTypes.func.isRequired,
|
||||
duplicateDevice: PropTypes.func.isRequired,
|
||||
|
||||
@ -16,28 +16,12 @@ import AsideDivider from '../Divider';
|
||||
const Wrapper = styled.div``;
|
||||
const ButtonWrapper = styled.div``;
|
||||
|
||||
export const DeviceSelect = (props: Props) => {
|
||||
const handleOpen = () => {
|
||||
props.toggleDeviceDropdown(!props.deviceDropdownOpened);
|
||||
};
|
||||
|
||||
return (
|
||||
<DeviceHeader
|
||||
onClickWrapper={handleOpen}
|
||||
device={props.wallet.selectedDevice}
|
||||
transport={props.connect.transport}
|
||||
devices={props.devices}
|
||||
isOpen={props.deviceDropdownOpened}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
type DeviceMenuItem = {
|
||||
type: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export class DeviceDropdown extends Component<Props> {
|
||||
class DeviceMenu extends Component<Props> {
|
||||
mouseDownHandler: (event: MouseEvent) => void;
|
||||
|
||||
blurHandler: (event: FocusEvent) => void;
|
||||
@ -96,49 +80,25 @@ export class DeviceDropdown extends Component<Props> {
|
||||
|
||||
componentWillUnmount(): void {
|
||||
window.removeEventListener('mousedown', this.mouseDownHandler, false);
|
||||
// window.removeEventListener('blur', this.blurHandler, false);
|
||||
}
|
||||
|
||||
showDivider() {
|
||||
return this.props.devices.length > 1;
|
||||
}
|
||||
|
||||
showMenuItems() {
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
return selectedDevice && selectedDevice.features;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { devices, onSelectDevice } = this.props;
|
||||
const { transport } = this.props.connect;
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
|
||||
let currentDeviceMenu = null;
|
||||
if (selectedDevice.features) {
|
||||
const deviceMenuItems: Array<DeviceMenuItem> = [];
|
||||
|
||||
if (selectedDevice.status !== 'available') {
|
||||
deviceMenuItems.push({ type: 'reload', label: 'Renew session' });
|
||||
}
|
||||
|
||||
deviceMenuItems.push({ type: 'settings', label: 'Device settings' });
|
||||
if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selectedDevice.available) {
|
||||
deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' });
|
||||
}
|
||||
//if (selected.remember) {
|
||||
deviceMenuItems.push({ type: 'forget', label: 'Forget device' });
|
||||
//}
|
||||
|
||||
|
||||
const deviceMenuButtons = deviceMenuItems.map((item, index) => (
|
||||
<div key={item.type} className={item.type} onClick={event => this.onDeviceMenuClick(item, selectedDevice)}>{item.label}</div>
|
||||
));
|
||||
currentDeviceMenu = deviceMenuButtons.length < 1 ? null : (
|
||||
<div className="device-menu">
|
||||
{deviceMenuButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{currentDeviceMenu}
|
||||
{/* {selectedDevice && selectedDevice.features && <MenuItems {...this.props} />} */}
|
||||
{this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
|
||||
{this.showDivider() && <AsideDivider textLeft="Other devices" />}
|
||||
<DeviceList
|
||||
devices={devices}
|
||||
@ -158,3 +118,5 @@ export class DeviceDropdown extends Component<Props> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DeviceMenu;
|
||||
@ -5,9 +5,10 @@ import Icon from 'components/Icon';
|
||||
import icons from 'config/icons';
|
||||
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
||||
import styled from 'styled-components';
|
||||
import DeviceHeader from 'components/DeviceHeader';
|
||||
import AccountMenu from './components/AccountMenu';
|
||||
import CoinMenu from './components/CoinMenu';
|
||||
import { DeviceSelect, DeviceDropdown } from './components/DeviceMenu';
|
||||
import DeviceMenu from './components/DeviceMenu';
|
||||
import StickyContainer from './components/StickyContainer';
|
||||
|
||||
const TransitionGroupWrapper = styled(TransitionGroup)`
|
||||
@ -139,6 +140,10 @@ class LeftNavigation extends Component {
|
||||
&& this.state.animationType === 'slide-left';
|
||||
}
|
||||
|
||||
handleOpen() {
|
||||
this.props.toggleDeviceDropdown(!this.props.deviceDropdownOpened);
|
||||
}
|
||||
|
||||
shouldRenderCoins() {
|
||||
return !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-right';
|
||||
}
|
||||
@ -150,9 +155,18 @@ class LeftNavigation extends Component {
|
||||
location={this.props.location.pathname}
|
||||
deviceSelection={this.props.deviceDropdownOpened}
|
||||
>
|
||||
{selectedDevice && <DeviceSelect {...this.props} />}
|
||||
{selectedDevice && (
|
||||
<DeviceHeader
|
||||
onClickWrapper={() => this.handleOpen()}
|
||||
device={this.props.wallet.selectedDevice}
|
||||
transport={this.props.connect.transport}
|
||||
devices={this.props.devices}
|
||||
isOpen={this.props.deviceDropdownOpened}
|
||||
{...this.props}
|
||||
/>
|
||||
) }
|
||||
<MenuWrapper>
|
||||
{this.state.shouldRenderDeviceSelection && <DeviceDropdown {...this.props} />}
|
||||
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
|
||||
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
|
||||
{this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
|
||||
</MenuWrapper>
|
||||
|
||||
@ -23,7 +23,7 @@ import WalletInitialize from 'views/Wallet/views/Initialize';
|
||||
import WalletAcquire from 'views/Wallet/views/Acquire';
|
||||
import WalletUnreadableDevice from 'views/Wallet/views/UnreadableDevice';
|
||||
|
||||
import store, { history } from '../store';
|
||||
import store, { history } from 'support/store';
|
||||
|
||||
const App = () => (
|
||||
<Provider store={store}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user