mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Device list refactored
This commit is contained in:
parent
8331348ed6
commit
2dcc08edac
@ -80,6 +80,7 @@ const getStatusColor = (deviceStatus) => {
|
||||
};
|
||||
|
||||
export {
|
||||
isWebUSB,
|
||||
getStatus,
|
||||
isDisabled,
|
||||
getStatusName,
|
||||
|
@ -1,32 +1,53 @@
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { getStatus } from 'utils/device';
|
||||
import Icon from 'components/Icon';
|
||||
import DeviceHeader from 'components/DeviceHeader';
|
||||
import icons from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
const IconClick = styled.div``;
|
||||
|
||||
class DeviceList extends Component {
|
||||
sortByInstance(a, b) {
|
||||
if (!a.instance || !b.instance) return -1;
|
||||
return a.instance > b.instance ? 1 : -1;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { devices, selectedDevice } = this.props;
|
||||
console.warn('devices', devices);
|
||||
return (
|
||||
<Wrapper>
|
||||
{this.props.devices.map((device, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => this.props.onSelectDevice(device)}
|
||||
>
|
||||
<div className="label-container">
|
||||
<span className="label">{device.instanceLabel}</span>
|
||||
<span className="status">{getStatus(device)}</span>
|
||||
</div>
|
||||
<div
|
||||
className="forget-button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.onDeviceMenuClick({ type: 'forget', label: '' }, device);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{devices
|
||||
.sort(this.sortByInstance)
|
||||
.map(device => (
|
||||
device !== selectedDevice && (
|
||||
<DeviceHeader
|
||||
key={`${device.instanceLabel}`}
|
||||
onClickWrapper={() => this.props.onSelectDevice(device)}
|
||||
onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)}
|
||||
icon={(
|
||||
<IconClick onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.onDeviceMenuClick({ type: 'forget', label: '' }, device);
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={icons.EJECT}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</IconClick>
|
||||
)}
|
||||
device={device}
|
||||
devices={devices}
|
||||
isHoverable
|
||||
/>
|
||||
)
|
||||
))}
|
||||
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
@ -1,21 +1,18 @@
|
||||
/* @flow */
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import icons from 'config/icons';
|
||||
import colors from 'config/colors';
|
||||
import Icon from 'components/Icon';
|
||||
import TrezorConnect from 'trezor-connect';
|
||||
import type { TrezorDevice } from 'flowtype';
|
||||
import DeviceHeader from 'components/DeviceHeader';
|
||||
import Button from 'components/Button';
|
||||
import { isWebUSB } from 'utils/device';
|
||||
import DeviceList from './components/DeviceList';
|
||||
|
||||
import DeviceHeader from './components/DeviceHeader';
|
||||
|
||||
// import DeviceList from './components/DeviceList';
|
||||
import type { Props } from '../common';
|
||||
|
||||
import AsideDivider from '../Divider';
|
||||
|
||||
const Wrapper = styled.div``;
|
||||
const IconClick = styled.div``;
|
||||
|
||||
export const DeviceSelect = (props: Props) => {
|
||||
const handleOpen = () => {
|
||||
@ -51,7 +48,7 @@ export class DeviceDropdown extends Component<Props> {
|
||||
|
||||
componentDidUpdate() {
|
||||
const { transport } = this.props.connect;
|
||||
if (transport && transport.version.indexOf('webusb') >= 0) TrezorConnect.renderWebUSBButton();
|
||||
if (isWebUSB(transport)) TrezorConnect.renderWebUSBButton();
|
||||
}
|
||||
|
||||
mouseDownHandler(event: MouseEvent): void {
|
||||
@ -100,27 +97,25 @@ export class DeviceDropdown extends Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
showDivider() {
|
||||
return this.props.devices.length > 1;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { devices } = this.props;
|
||||
const { transport } = this.props.connect;
|
||||
const selected: ?TrezorDevice = this.props.wallet.selectedDevice;
|
||||
if (!selected) return;
|
||||
|
||||
let webUsbButton = null;
|
||||
if (transport && transport.version.indexOf('webusb') >= 0) {
|
||||
webUsbButton = <button className="trezor-webusb-button">Check for devices</button>;
|
||||
}
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
|
||||
let currentDeviceMenu = null;
|
||||
if (selected.features) {
|
||||
if (selectedDevice.features) {
|
||||
const deviceMenuItems: Array<DeviceMenuItem> = [];
|
||||
|
||||
if (selected.status !== 'available') {
|
||||
if (selectedDevice.status !== 'available') {
|
||||
deviceMenuItems.push({ type: 'reload', label: 'Renew session' });
|
||||
}
|
||||
|
||||
deviceMenuItems.push({ type: 'settings', label: 'Device settings' });
|
||||
if (selected.features.passphrase_protection && selected.connected && selected.available) {
|
||||
if (selectedDevice.features.passphrase_protection && selectedDevice.connected && selected.available) {
|
||||
deviceMenuItems.push({ type: 'clone', label: 'Create hidden wallet' });
|
||||
}
|
||||
//if (selected.remember) {
|
||||
@ -138,47 +133,21 @@ export class DeviceDropdown extends Component<Props> {
|
||||
);
|
||||
}
|
||||
|
||||
const sortByInstance = (a: TrezorDevice, b: TrezorDevice) => {
|
||||
if (!a.instance || !b.instance) return -1;
|
||||
return a.instance > b.instance ? 1 : -1;
|
||||
};
|
||||
|
||||
const deviceList = devices.sort(sortByInstance)
|
||||
.map((dev) => {
|
||||
if (dev === selected) return null;
|
||||
return (
|
||||
<DeviceHeader
|
||||
key={`${dev.instanceLabel}`}
|
||||
onClickWrapper={() => this.props.onSelectDevice(dev)}
|
||||
onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
|
||||
icon={(
|
||||
<IconClick onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={icons.EJECT}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</IconClick>
|
||||
)}
|
||||
device={dev}
|
||||
devices={devices}
|
||||
isHoverable
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{currentDeviceMenu}
|
||||
{this.props.devices.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
|
||||
{/* <DeviceList devices={devices} /> */}
|
||||
{deviceList}
|
||||
{webUsbButton}
|
||||
{this.showDivider() && <AsideDivider textLeft="Other devices" />}
|
||||
<DeviceList
|
||||
devices={devices}
|
||||
selectedDevice={selectedDevice}
|
||||
/>
|
||||
{isWebUSB(transport) && (
|
||||
<Button
|
||||
className="trezor-webusb-button"
|
||||
text="Check for devices"
|
||||
isWebUsb
|
||||
/>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user