add more user-friendly error messages

src/components/modals/QrModal/index.js

@@ -38,11 +38,18 @@ const CameraPlaceholder = styled(P)`
     padding: 10px 0;
 `;
 
-const Error = styled(P)`
+const Error = styled.div`
-    text-align: center;
     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);
+        // log thrown error
-        this.setState({
+        console.error(err);
-            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>
+                    <H2>Scan QR code</H2>
-                    {!this.state.readerLoaded && (
+                    {!this.state.readerLoaded && !this.state.error && <CameraPlaceholder>Waiting for camera...</CameraPlaceholder>}
-                        <CameraPlaceholder>
-                            Waiting for camera...
-                        </CameraPlaceholder>
-                    )
-                    }
-                </Padding>
-                <StyledQrReader
-                    delay={500}
-                    onError={this.handleError}
-                    onScan={this.handleScan}
-                    onLoad={this.onLoad}
-                    style={{ width: '100%' }}
-                    showViewFinder={false}
-                />
-                <Padding>
                     {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>
         );
     }