arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +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

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

@ -38,11 +38,18 @@ const CameraPlaceholder = styled(P)`
padding: 10px 0;
`;
const Error = styled(P)`
text-align: center;
const Error = styled.div`
padding: 10px 0;
`;
const ErrorTitle = styled(P)`
text-align: center;
color: ${colors.ERROR_PRIMARY};
`;
const ErrorMessage = styled.span`
text-align: center;
color: ${colors.TEXT_PRIMARY};
`;
const StyledQrReader = styled(QrReader)`
padding: 10px 0;
@ -95,14 +102,25 @@ class QrModal extends React.Component<Props, State> {
}
handleError = (err: any) => {
console.log(err);
this.setState({
error: err,
});
// log thrown error
console.error(err);
if (this.props.onError) {
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 = () => {
@ -123,29 +141,25 @@ class QrModal extends React.Component<Props, State> {
/>
</CloseLink>
<Padding>
<H2>Scan an address from a QR code</H2>
{!this.state.readerLoaded && (
<CameraPlaceholder>
Waiting for camera...
</CameraPlaceholder>
)
}
</Padding>
<StyledQrReader
delay={500}
onError={this.handleError}
onScan={this.handleScan}
onLoad={this.onLoad}
style={{ width: '100%' }}
showViewFinder={false}
/>
<Padding>
<H2>Scan QR code</H2>
{!this.state.readerLoaded && !this.state.error && <CameraPlaceholder>Waiting for camera...</CameraPlaceholder>}
{this.state.error && (
<Error>
{this.state.error.toString()}
<ErrorTitle>Oops! Something went wrong!</ErrorTitle>
<ErrorMessage>{this.state.error.toString()}</ErrorMessage>
</Error>
)}
</Padding>
{!this.state.error && (
<StyledQrReader
delay={500}
onError={this.handleError}
onScan={this.handleScan}
onLoad={this.onLoad}
style={{ width: '100%' }}
showViewFinder={false}
/>
)}
</Wrapper>
);
}