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,27 +272,35 @@ const WalletDecrypt = withRouter<Props>(
             {!selectedWallet.isReadOnly && 'Unlock your'} {translate(selectedWallet.lid)}
           </h2>
           <section className="WalletDecrypt-decrypt-form">
-            <selectedWallet.component
+            <Errorable
-              value={this.state.value}
+              errorMessage={`Oops, looks like ${translateRaw(
-              onChange={this.onChange}
+                selectedWallet.lid
-              onUnlock={(value: any) => {
+              )} is not supported by your browser`}
-                if (selectedWallet.redirect) {
+              onError={this.clearWalletChoice}
-                  this.props.history.push(selectedWallet.redirect);
+              shouldCatch={selectedWallet.lid === this.WALLETS.paritySigner.lid}
+            >
+              <selectedWallet.component
+                value={this.state.value}
+                onChange={this.onChange}
+                onUnlock={(value: any) => {
+                  if (selectedWallet.redirect) {
+                    this.props.history.push(selectedWallet.redirect);
+                  }
+                  this.onUnlock(value);
+                }}
+                showNotification={this.props.showNotification}
+                isWalletPending={
+                  this.state.selectedWalletKey === InsecureWalletName.KEYSTORE_FILE
+                    ? this.props.isWalletPending
+                    : undefined
                 }
-                this.onUnlock(value);
+                isPasswordPending={
-              }}
+                  this.state.selectedWalletKey === InsecureWalletName.KEYSTORE_FILE
-              showNotification={this.props.showNotification}
+                    ? this.props.isPasswordPending
-              isWalletPending={
+                    : undefined
-                this.state.selectedWalletKey === InsecureWalletName.KEYSTORE_FILE
+                }
-                  ? this.props.isWalletPending
+              />
-                  : undefined
+            </Errorable>
-              }
-              isPasswordPending={
-                this.state.selectedWalletKey === InsecureWalletName.KEYSTORE_FILE
-                  ? this.props.isPasswordPending
-                  : undefined
-              }
-            />
           </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';