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