Prevent signature request component from canceling hardware wallet signing (#11013)

ui/components/app/signature-request/signature-request.component.js

@@ -27,10 +27,14 @@ export default class SignatureRequest extends PureComponent {
   };
 
   componentDidMount() {
+    if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
+      window.addEventListener('beforeunload', this._beforeUnload);
+    }
+  }
+
+  _beforeUnload = (event) => {
     const { clearConfirmTransaction, cancel } = this.props;
     const { metricsEvent } = this.context;
-    if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
-      window.addEventListener('beforeunload', (event) => {
     metricsEvent({
       eventOpts: {
         category: 'Transactions',
@@ -40,9 +44,7 @@ export default class SignatureRequest extends PureComponent {
     });
     clearConfirmTransaction();
     cancel(event);
-      });
-    }
-  }
+  };
 
   formatWallet(wallet) {
     return `${wallet.slice(0, 8)}...${wallet.slice(
@@ -63,6 +65,16 @@ export default class SignatureRequest extends PureComponent {
     const { address: fromAddress } = fromAccount;
     const { message, domain = {} } = JSON.parse(data);
 
+    const onSign = (event) => {
+      window.removeEventListener('beforeunload', this._beforeUnload);
+      sign(event);
+    };
+
+    const onCancel = (event) => {
+      window.removeEventListener('beforeunload', this._beforeUnload);
+      cancel(event);
+    };
+
     return (
       <div className="signature-request page-container">
         <Header fromAccount={fromAccount} />
@@ -86,7 +98,7 @@ export default class SignatureRequest extends PureComponent {
           </div>
         </div>
         <Message data={message} />
-        <Footer cancelAction={cancel} signAction={sign} />
+        <Footer cancelAction={onCancel} signAction={onSign} />
       </div>
     );
   }