Separate animations

src/js/components/Loader/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import PropTypes from 'prop-types';
 import Paragraph from 'components/Paragraph';
+import { DASH, GREEN_COLOR } from 'config/animations';
 import colors from 'config/colors';
 
 const Wrapper = styled.div`
@@ -21,36 +22,6 @@ const SvgWrapper = styled.svg`
     transform-origin: center center;
 `;
 
-const animationDash = keyframes`
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124;
-    }
-`;
-
-const animationColor = keyframes`
-    100%, 0% {
-        stroke: ${colors.GREEN_PRIMARY};
-    }
-    40% {
-        stroke: ${colors.GREEN_PRIMARY};
-    }
-    66% {
-        stroke: ${colors.GREEN_SECONDARY};
-    }
-    80%, 90% {
-        stroke: ${colors.GREEN_TERTIARY};
-    }
-`;
-
 const CircleWrapper = styled.circle`
     ${props => props.isRoute && css`
         stroke: ${colors.GRAY_LIGHT};
@@ -59,7 +30,7 @@ const CircleWrapper = styled.circle`
     ${props => props.isPath && css`
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
-        animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite;
+        animation: ${DASH} 1.5s ease-in-out infinite, ${GREEN_COLOR} 6s ease-in-out infinite;
         stroke-linecap: round;
     `};
 `;

src/js/config/animations.js

@@ -0,0 +1,42 @@
+import { keyframes } from 'styled-components';
+import colors from 'config/colors';
+
+export const ROTATE_180_UP = keyframes`
+    from { transform: rotate(0deg) }
+    to { transform: rotate(180deg) }
+`;
+
+export const ROTATE_180_DOWN = keyframes`
+    from { transform: rotate(180deg) }
+    to { transform: rotate(0deg) }
+`;
+
+export const DASH = keyframes`
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+`;
+
+export const GREEN_COLOR = keyframes`
+    100%, 0% {
+        stroke: ${colors.GREEN_PRIMARY};
+    }
+    40% {
+        stroke: ${colors.GREEN_PRIMARY};
+    }
+    66% {
+        stroke: ${colors.GREEN_SECONDARY};
+    }
+    80%, 90% {
+        stroke: ${colors.GREEN_TERTIARY};
+    }
+`;

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -150,53 +150,35 @@ export class DeviceDropdown extends Component<Props> {
             if (!a.instance || !b.instance) return -1;
             return a.instance > b.instance ? 1 : -1;
         };
-        const deviceList = devices.sort(sortByInstance).map((dev, index) => {
-            if (dev === selected) return null;
-
-            let deviceStatus: string = 'Connected';
-            let css: string = 'device item';
-            if (dev.type === 'unacquired' || (dev.features && dev.status === 'occupied')) {
-                deviceStatus = 'Used in other window';
-                css += ' unacquired';
-            } else if (dev.type === 'unreadable') {
-                deviceStatus = 'Connected';
-                css += ' connected';
-            } else if (!dev.connected) {
-                deviceStatus = 'Disconnected';
-                css += ' disconnected';
-            } else if (!dev.available) {
-                deviceStatus = 'Unavailable';
-                css += ' unavailable';
-            }
-
-            if (dev.features && dev.features.major_version > 1) {
-                css += ' trezor-t';
-            }
 
-            return (
-                <DeviceHeader
-                    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>
-                    )}
-                    label={dev.instanceLabel}
-                    status={getStatus(dev)}
-                    trezorModel={getVersion(dev)}
-                />
-            );
-        });
+        const deviceList = devices.sort(sortByInstance)
+            .map((dev, index) => {
+                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>
+                        )}
+                        label={dev.instanceLabel}
+                        status={getStatus(dev)}
+                        trezorModel={getVersion(dev)}
+                    />
+                );
+            });
 
         return (
             <Wrapper>