Add Error Boundary to Parity Signer (#1675)

* add jenkins config for mac signing (#1666)

* More RC Bugfixes (#1670)

* add jenkins config for mac signing (#1664)

* Fix #1653

* Fix #1648

* Fix #1638

* Fix test

* Electron Alpha Prep (#1671)

* Adjust update flow to not auto update, not publish in CI

* Revert "Adjust update flow to not auto update, not publish in CI"

This reverts commit 74fb382ce8d8cd9e227703ccfa8d6310bffd9dda.

* First pass at new app version modal

* Added app alpha notice that either warns you about alpha, or blocks the whole app.

* Improve newer version detection, add unit tests

* Remove native auto update behavior

* add jenkins config for mac signing (#1664)

* Notice once per session

* copy changes per PR review

* More RC Bugfixes (#1669)

* Fix #1653

* Fix #1648

* Fix #1638

* Fix test

* Add errorable component

* Fix lint

* Change instance order

common/components/Errorable.tsx

@@ -0,0 +1,52 @@
+import { showNotification, TShowNotification } from 'actions/notifications';
+import { connect } from 'react-redux';
+import React from 'react';
+
+interface DispatchProps {
+  showNotification: TShowNotification;
+}
+
+interface OwnProps {
+  /**
+   * Optional custom error message to display when a error is caught, otherwise the
+   * actual error message is displayed to the user
+   */
+  errorMessage?: string;
+  /**
+   * Optional should catch condition, if left undefined then the component will by default
+   * catch all errors, if false, then the component will not catch errors, if true,
+   * the component will catch errors
+   */
+  shouldCatch?: boolean;
+
+  /**
+   * Optional callback handler when an error is encountered and this component
+   * should catch it
+   */
+  onError?(): void;
+}
+
+type Props = DispatchProps & OwnProps;
+
+class ErrorBoundary extends React.Component<Props> {
+  public componentDidCatch(error: Error, info: any) {
+    console.error(error);
+    console.error(info);
+    const { errorMessage, onError, shouldCatch } = this.props;
+
+    if (shouldCatch === false) {
+      throw error;
+    }
+
+    this.props.showNotification('danger', errorMessage || error.message);
+    if (onError) {
+      onError();
+    }
+  }
+
+  public render() {
+    return this.props.children;
+  }
+}
+
+export default connect(null, { showNotification })(ErrorBoundary);

common/components/WalletDecrypt/WalletDecrypt.tsx

@@ -52,6 +52,7 @@ import ParitySignerIcon from 'assets/images/wallets/parity-signer.svg';
 import { wikiLink as paritySignerHelpLink } from 'libs/wallet/non-deterministic/parity';
 import './WalletDecrypt.scss';
 import { withRouter, RouteComponentProps } from 'react-router';
+import { Errorable } from 'components';
 
 interface OwnProps {
   hidden?: boolean;
@@ -271,6 +272,13 @@ const WalletDecrypt = withRouter<Props>(
             {!selectedWallet.isReadOnly && 'Unlock your'} {translate(selectedWallet.lid)}
           </h2>
           <section className="WalletDecrypt-decrypt-form">
+            <Errorable
+              errorMessage={`Oops, looks like ${translateRaw(
+                selectedWallet.lid
+              )} is not supported by your browser`}
+              onError={this.clearWalletChoice}
+              shouldCatch={selectedWallet.lid === this.WALLETS.paritySigner.lid}
+            >
               <selectedWallet.component
                 value={this.state.value}
                 onChange={this.onChange}
@@ -292,6 +300,7 @@ const WalletDecrypt = withRouter<Props>(
                     : undefined
                 }
               />
+            </Errorable>
           </section>
         </div>
       );

common/components/index.ts

@@ -22,4 +22,5 @@ export { default as GenerateKeystoreModal } from './GenerateKeystoreModal';
 export { default as TransactionStatus } from './TransactionStatus';
 export { default as ParityQrSigner } from './ParityQrSigner';
 export { default as ElectronNav } from './ElectronNav';
+export { default as Errorable } from './Errorable';
 export { default as AppAlphaNotice } from './AppAlphaNotice';