Added redbox to see erorrs in UI

package.json

@@ -54,6 +54,7 @@
         "react-scale-text": "^1.2.2",
         "react-select": "^1.2.1",
         "react-transition-group": "^2.2.1",
+        "redbox-react": "^1.6.0",
         "redux": "4.0.0",
         "redux-logger": "^3.0.6",
         "redux-raven-middleware": "^1.2.0",

src/js/components/DeviceHeader/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
@@ -34,7 +34,7 @@ const Name = styled.div`
     display: block;
     text-overflow: ellipsis;
     overflow: hidden;
-    white-space: nowrap;
+    white-space: no-wrap;
     font-weight: 500;
     font-size: 14px;
     color: ${colors.TEXT_PRIMARY};
@@ -82,10 +82,6 @@ const Dot = styled.div`
     height: 10px;
 `;
 
-const StyledIcon = styled(Icon)`
-    transform: rotate(180deg);
-`;
-
 const DeviceHeader = ({
     disabled = false,
     handleOpen,
@@ -99,22 +95,20 @@ const DeviceHeader = ({
         <ClickWrapper onClick={!disabled ? handleOpen : null}>
             <ImageWrapper>
                 <Dot color={getStatusColor(status)} />
-                <TrezorImage
+                <TrezorImage status={status} model={trezorModel} />
-                    status={status}
-                    model={trezorModel}
-                />
             </ImageWrapper>
             <LabelWrapper>
                 <Name>{label}</Name>
                 <Status>{getStatusName(status)}</Status>
             </LabelWrapper>
             <IconWrapper>
-                {deviceCount > 1 ? <Counter>{deviceCount}</Counter> : null}
+                {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
-                <StyledIcon
+                <Icon
                     isOpen={isOpen}
                     size={25}
                     color={colors.TEXT_SECONDARY}
                     icon={icons.ARROW_DOWN}
+                    rotateOnActive
                 />
             </IconWrapper>
         </ClickWrapper>

src/js/components/Icon/index.js

@@ -1,7 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled, { css, keyframes } from 'styled-components';
 
-const Icon = ({ icon, size = 32, color = 'black' }) => {
+const rotate180up = keyframes`
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(180deg);
+    }
+`;
+
+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;
+`;
+
+const Path = styled.path``;
+
+const Icon = ({
+    icon, size = 32, color = 'black', isActive = false,
+}) => {
     const styles = {
         svg: {
             display: 'inline-block',
@@ -13,24 +42,27 @@ const Icon = ({ icon, size = 32, color = 'black' }) => {
     };
 
     return (
-        <svg
+        <SvgWrapper
+            isOpen={isOpen}
             style={styles.svg}
             width={`${size}`}
             height={`${size}`}
             viewBox="0 0 1024 1024"
         >
-            <path
+            <Path
+                isActive={isActive}
                 style={styles.path}
                 d={icon}
 
             />
-        </svg>
+        </SvgWrapper>
     );
 };
 
 Icon.propTypes = {
     icon: PropTypes.string.isRequired,
     size: PropTypes.number,
+    isActive: PropTypes.bool,
     color: PropTypes.string,
 };
 

src/js/support/ErrorBoundary.js

@@ -1,23 +1,19 @@
 import React, { Component } from 'react';
+import RedBox from 'redbox-react';
 
 class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
-        this.state = { hasError: false };
+        this.state = { hasError: false, error: false };
     }
 
     componentDidCatch(error, info) {
-        // Display fallback UI
+        this.setState({ hasError: true, error });
-        this.setState({ hasError: true });
-        console.error('error', error);
-        // You can also log the error to an error reporting service
-        // logErrorToMyService(error, info);
     }
 
     render() {
         if (this.state.hasError) {
-        // You can render any custom fallback UI
+            return <RedBox error={this.state.error} />;
-            return <div>Something went wrong.</div>;
         }
         return this.props.children;
     }

yarn.lock

@@ -3234,6 +3234,12 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+  dependencies:
+    stackframe "^0.3.1"
+
 error@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
@@ -8100,6 +8106,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+redbox-react@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.6.0.tgz#e753ac02595bc1bf695b3935889a4f5b1b5a21a1"
+  dependencies:
+    error-stack-parser "^1.3.6"
+    object-assign "^4.0.1"
+    prop-types "^15.5.4"
+    sourcemapped-stacktrace "^1.1.6"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -8861,6 +8876,10 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
 source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -8875,6 +8894,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
+sourcemapped-stacktrace@^1.1.6:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688"
+  dependencies:
+    source-map "0.5.6"
+
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -8956,6 +8981,10 @@ stack-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
 
+stackframe@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
 state-toggle@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a"