mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-30 19:00:53 +00:00
Added redbox to see erorrs in UI
This commit is contained in:
Vladimir Volek
parent
9e9d1fc03a
commit
88a94ec06e
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
29
yarn.lock
29
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user