diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js
index 9ec80d71..bd61bde0 100644
--- a/src/js/components/DeviceHeader/index.js
+++ b/src/js/components/DeviceHeader/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'components/Icon';
@@ -82,38 +82,54 @@ const Dot = styled.div`
height: 10px;
`;
-const DeviceHeader = ({
- disabled = false,
- handleOpen,
- status,
- label,
- deviceCount,
- isOpen = false,
- trezorModel,
-}) => (
-
-
-
-
-
-
-
- {label}
- {getStatusName(status)}
-
-
- {deviceCount > 1 && {deviceCount}}
-
-
-
-
-);
+class DeviceHeader extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ clicked: false,
+ };
+ }
+
+ handleClick() {
+ this.setState({ clicked: true });
+ if (!this.props.disabled) {
+ this.props.handleOpen();
+ }
+ }
+
+ render() {
+ console.log('cananitem', this.state.clicked);
+ const {
+ status, label, deviceCount, isOpen, trezorModel,
+ } = this.props;
+ return (
+
+ this.handleClick()}>
+
+
+
+
+
+ {label}
+ {getStatusName(status)}
+
+
+ {deviceCount > 1 && {deviceCount}}
+
+
+
+
+ );
+ }
+}
+
DeviceHeader.propTypes = {
deviceCount: PropTypes.number,
diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js
index 20711ffb..fe1980ec 100644
--- a/src/js/components/Icon/index.js
+++ b/src/js/components/Icon/index.js
@@ -1,12 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
const rotate180up = keyframes`
from {
transform: rotate(0deg);
}
-
to {
transform: rotate(180deg);
}
@@ -16,50 +15,41 @@ const rotate180down = keyframes`
from {
transform: rotate(180deg);
}
-
to {
transform: rotate(0deg);
}
`;
const SvgWrapper = styled.svg`
- animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards;
+ animation: ${props => (props.canAnimate ? (props.isActive ? rotate180up : rotate180down) : null)} 0.2s linear 1 forwards;
`;
const Path = styled.path``;
const Icon = ({
- icon, size = 32, color = 'black', isActive = false,
-}) => {
- const styles = {
- svg: {
+ icon, size = 32, color = 'black', isActive, canAnimate,
+}) => (
+
-
-
- );
-};
+ }}
+ width={`${size}`}
+ height={`${size}`}
+ viewBox="0 0 1024 1024"
+ >
+
+
+);
Icon.propTypes = {
+ canAnimate: PropTypes.bool,
icon: PropTypes.string.isRequired,
size: PropTypes.number,
isActive: PropTypes.bool,
diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
index 4fd6045d..cdc3589f 100644
--- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@@ -64,7 +64,7 @@ export const DeviceSelect = (props: Props) => {
handleOpen={handleOpen}
label={selected.instanceLabel}
status={getStatus(selected)}
- deviceCount={deviceCount}
+ deviceCount={devices.length}
isOpen={props.deviceDropdownOpened}
trezorModel={getVersion(selected)}
/>