arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-27 10:48:22 +00:00
Code Issues Releases Wiki Activity

add more user-friendly error messages

Browse Source
This commit is contained in:
slowbackspace 2019-02-20 16:35:28 +01:00
parent 9c974c6415
commit 48c0b2afce
1 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/modals/QrModal/index.js
View File

@ -38,11 +38,18 @@ const CameraPlaceholder = styled(P)`
padding: 10px 0; padding: 10px 0;
`; `;
const Error = styled(P)` const Error = styled.div`
text-align: center;
padding: 10px 0; padding: 10px 0;
`;
const ErrorTitle = styled(P)`
text-align: center;
color: ${colors.ERROR_PRIMARY}; color: ${colors.ERROR_PRIMARY};
`; `;
const ErrorMessage = styled.span`
text-align: center;
color: ${colors.TEXT_PRIMARY};
`;
const StyledQrReader = styled(QrReader)` const StyledQrReader = styled(QrReader)`
padding: 10px 0; padding: 10px 0;
@ -95,14 +102,25 @@ class QrModal extends React.Component<Props, State> {
} }
handleError = (err: any) => { handleError = (err: any) => {
console.log(err); // log thrown error
this.setState({ console.error(err);
error: err,
});
if (this.props.onError) { if (this.props.onError) {
this.props.onError(err); this.props.onError(err);
} }
if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
this.setState({
error: 'Permission to access the camera was denied.',
});
} else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
this.setState({
error: 'The camera was not recognized.',
});
} else {
this.setState({
error: 'Unknown error. See console logs for details.',
});
}
} }
handleCancel = () => { handleCancel = () => {
@ -123,14 +141,16 @@ class QrModal extends React.Component<Props, State> {
/> />
</CloseLink> </CloseLink>
<Padding> <Padding>
<H2>Scan an address from a QR code</H2> <H2>Scan QR code</H2>
{!this.state.readerLoaded && ( {!this.state.readerLoaded && !this.state.error && <CameraPlaceholder>Waiting for camera...</CameraPlaceholder>}
<CameraPlaceholder> {this.state.error && (
Waiting for camera... <Error>
</CameraPlaceholder> <ErrorTitle>Oops! Something went wrong!</ErrorTitle>
) <ErrorMessage>{this.state.error.toString()}</ErrorMessage>
} </Error>
)}
</Padding> </Padding>
{!this.state.error && (
<StyledQrReader <StyledQrReader
delay={500} delay={500}
onError={this.handleError} onError={this.handleError}
@ -139,13 +159,7 @@ class QrModal extends React.Component<Props, State> {
style={{ width: '100%' }} style={{ width: '100%' }}
showViewFinder={false} showViewFinder={false}
/> />
<Padding>
{this.state.error && (
<Error>
{this.state.error.toString()}
</Error>
)} )}
</Padding>
</Wrapper> </Wrapper>
); );
} }