Added redbox to see erorrs in UI

6 years ago · 88a94ec06e
parent 9e9d1fc03a
commit 88a94ec06e
5 changed files with 76 additions and 24 deletions
--- a/package.json
+++ b/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",
--- a/src/js/components/DeviceHeader/index.js
+++ b/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
-                    status={status}
-                    model={trezorModel}
-                />
+                <TrezorImage status={status} model={trezorModel} />
            </ImageWrapper>
            <LabelWrapper>
                <Name>{label}</Name>
                <Status>{getStatusName(status)}</Status>
            </LabelWrapper>
            <IconWrapper>
-                {deviceCount > 1 ? <Counter>{deviceCount}</Counter> : null}
-                <StyledIcon
+                {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
+                <Icon
                    isOpen={isOpen}
                    size={25}
                    color={colors.TEXT_SECONDARY}
                    icon={icons.ARROW_DOWN}
+                    rotateOnActive
                />
            </IconWrapper>
        </ClickWrapper>
--- a/src/js/components/Icon/index.js
+++ b/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,
 };

--- a/src/js/support/ErrorBoundary.js
+++ b/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 });
-        console.error('error', error);
-        // You can also log the error to an error reporting service
-        // logErrorToMyService(error, info);
+        this.setState({ hasError: true, error });
    }

    render() {
        if (this.state.hasError) {
-        // You can render any custom fallback UI
-            return <div>Something went wrong.</div>;
+            return <RedBox error={this.state.error} />;
        }
        return this.props.children;
    }
--- a/yarn.lock
+++ b/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"