fix: Relates to #466. Update Webcam error messages to refer to Fether FAQ

packages/fether-react/src/Scanner/Scanner.js

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import QrSigner from '@parity/qr-signer';
+import { ExternalLink } from 'fether-ui';
 
 import loading from '../assets/img/icons/loading.svg';
 
@@ -46,18 +47,17 @@ export default class Scanner extends React.PureComponent {
         switch (e.name) {
           case 'NotAllowedError':
           case 'SecurityError':
-            errorMessage = 'Access to the webcam was refused.';
+            errorMessage = 'Webcam access was refused.';
             break;
           case 'NotFoundError':
           case 'OverconstrainedError':
-            errorMessage = 'No webcam found on the device.';
+            errorMessage = 'Webcam not found on the device.';
             break;
           case 'NotReadableError':
-            errorMessage =
-              'Webcam hardware error. Try restarting your computer';
+            errorMessage = 'Webcam permissions or hardware error.';
             break;
           default:
-            errorMessage = 'Unknown error.';
+            errorMessage = 'Webcam unknown error.';
         }
         this.setState({
           webcamError: errorMessage,
@@ -77,7 +77,16 @@ export default class Scanner extends React.PureComponent {
         {isLoading ? (
           <img alt='loading' src={loading} />
         ) : webcamError ? (
-          <p>{webcamError}</p>
+          <div>
+            <p>
+              {webcamError}&nbsp;Visit the&nbsp;
+              <ExternalLink
+                name='Fether FAQ'
+                href='https://wiki.parity.io/Fether-FAQ#how-to-fix-a-webcam-error'
+              />
+              &nbsp;for help troubleshooting this issue.
+            </p>
+          </div>
         ) : (
           <div>
             <p>{label}</p>

packages/fether-react/src/assets/sass/shared/_basics.scss

@@ -32,6 +32,10 @@ a:visited {
   }
 }
 
+.external-link {
+  color: $blue !important;
+}
+
 button,
 input[type='text'],
 input[type='number'],

packages/fether-ui/src/ExternalLink/ExternalLink.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+
+export const ExternalLink = ({ name, href }) => (
+  <a
+    className='external-link'
+    href={href}
+    target='_blank'
+    rel='noopener noreferrer'
+  >
+    {name}
+  </a>
+);

packages/fether-ui/src/ExternalLink/index.js

@@ -0,0 +1,6 @@
+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './ExternalLink';

packages/fether-ui/src/index.js

@@ -9,6 +9,7 @@ export * from './AddressShort';
 export * from './Card';
 export * from './Clickable';
 export * from './ClickToCopy';
+export * from './ExternalLink';
 export * from './Form';
 export * from './Header';
 export * from './Modal';