Fix encrypt/decrypt beforeunload bugs (#8816)

app/scripts/lib/decrypt-message-manager.js

@@ -82,7 +82,7 @@ export default class DecryptMessageManager extends EventEmitter {
   addUnapprovedMessageAsync (msgParams, req) {
     return new Promise((resolve, reject) => {
       if (!msgParams.from) {
-        reject(new Error('MetaMask Message for Decryption: from field is required.'))
+        reject(new Error('MetaMask Decryption: from field is required.'))
       }
       const msgId = this.addUnapprovedMessage(msgParams, req)
       this.once(`${msgId}:finished`, (data) => {
@@ -90,11 +90,11 @@ export default class DecryptMessageManager extends EventEmitter {
           case 'decrypted':
             return resolve(data.rawData)
           case 'rejected':
-            return reject(ethErrors.provider.userRejectedRequest('MetaMask Message for Decryption: User denied message decryption.'))
+            return reject(ethErrors.provider.userRejectedRequest('MetaMask Decryption: User denied message decryption.'))
           case 'errored':
             return reject(new Error('This message cannot be decrypted'))
           default:
-            return reject(new Error(`MetaMask Message for Decryption: Unknown problem: ${JSON.stringify(msgParams)}`))
+            return reject(new Error(`MetaMask Decryption: Unknown problem: ${JSON.stringify(msgParams)}`))
         }
       })
     })

app/scripts/lib/encryption-public-key-manager.js

@@ -79,7 +79,7 @@ export default class EncryptionPublicKeyManager extends EventEmitter {
   addUnapprovedMessageAsync (address, req) {
     return new Promise((resolve, reject) => {
       if (!address) {
-        reject(new Error('MetaMask Message for EncryptionPublicKey: address field is required.'))
+        reject(new Error('MetaMask Message: address field is required.'))
       }
       const msgId = this.addUnapprovedMessage(address, req)
       this.once(`${msgId}:finished`, (data) => {
@@ -87,9 +87,9 @@ export default class EncryptionPublicKeyManager extends EventEmitter {
           case 'received':
             return resolve(data.rawData)
           case 'rejected':
-            return reject(ethErrors.provider.userRejectedRequest('MetaMask Message for EncryptionPublicKey: User denied message EncryptionPublicKey.'))
+            return reject(ethErrors.provider.userRejectedRequest('MetaMask EncryptionPublicKey: User denied message EncryptionPublicKey.'))
           default:
-            return reject(new Error(`MetaMask Message for EncryptionPublicKey: Unknown problem: ${JSON.stringify(address)}`))
+            return reject(new Error(`MetaMask EncryptionPublicKey: Unknown problem: ${JSON.stringify(address)}`))
         }
       })
     })

ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -52,9 +52,14 @@ export default class ConfirmDecryptMessage extends Component {
     this._removeBeforeUnload()
   }
 
-  _beforeUnload = (event) => {
-    const { clearConfirmTransaction, cancelDecryptMessage } = this.props
+  _beforeUnload = async (event) => {
+    const {
+      clearConfirmTransaction,
+      cancelDecryptMessage,
+      txData,
+    } = this.props
     const { metricsEvent } = this.context
+    await cancelDecryptMessage(txData, event)
     metricsEvent({
       eventOpts: {
         category: 'Messages',
@@ -63,7 +68,6 @@ export default class ConfirmDecryptMessage extends Component {
       },
     })
     clearConfirmTransaction()
-    cancelDecryptMessage(event)
   }
 
   _removeBeforeUnload = () => {
@@ -103,11 +107,12 @@ export default class ConfirmDecryptMessage extends Component {
 
   renderAccount = () => {
     const { fromAccount } = this.state
+    const { t } = this.context
 
     return (
       <div className="request-decrypt-message__account">
         <div className="request-decrypt-message__account-text">
-          { `${this.context.t('account')}:` }
+          { `${t('account')}:` }
         </div>
 
         <div className="request-decrypt-message__account-item">
@@ -123,6 +128,7 @@ export default class ConfirmDecryptMessage extends Component {
   renderBalance = () => {
     const { conversionRate } = this.props
     const { fromAccount: { balance } } = this.state
+    const { t } = this.context
 
     const balanceInEther = conversionUtil(balance, {
       fromNumericBase: 'hex',
@@ -135,7 +141,7 @@ export default class ConfirmDecryptMessage extends Component {
     return (
       <div className="request-decrypt-message__balance">
         <div className="request-decrypt-message__balance-text">
-          { `${this.context.t('balance')}:` }
+          { `${t('balance')}:` }
         </div>
         <div className="request-decrypt-message__balance-value">
           { `${balanceInEther} ETH` }
@@ -168,10 +174,11 @@ export default class ConfirmDecryptMessage extends Component {
   }
 
   renderBody = () => {
-    const { txData } = this.props
+    const { decryptMessageInline, domainMetadata, txData } = this.props
+    const { t } = this.context
 
-    const origin = this.props.domainMetadata[txData.msgParams.origin]
-    const notice = this.context.t('decryptMessageNotice', [origin.name])
+    const origin = domainMetadata[txData.msgParams.origin]
+    const notice = t('decryptMessageNotice', [origin.name])
 
     const {
       hasCopied,
@@ -228,7 +235,7 @@ export default class ConfirmDecryptMessage extends Component {
               'request-decrypt-message__message-lock--pressed': hasDecrypted || hasError,
             })}
             onClick={(event) => {
-              this.props.decryptMessageInline(txData, event).then((result) => {
+              decryptMessageInline(txData, event).then((result) => {
                 if (!result.error) {
                   this.setState({ hasDecrypted: true, rawMessage: result.rawData })
                 } else {
@@ -241,7 +248,7 @@ export default class ConfirmDecryptMessage extends Component {
             <div
               className="request-decrypt-message__message-lock-text"
             >
-              {this.context.t('decryptMetamask')}
+              {t('decryptMetamask')}
             </div>
           </div>
         </div>
@@ -258,13 +265,13 @@ export default class ConfirmDecryptMessage extends Component {
             >
               <Tooltip
                 position="bottom"
-                title={hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard')}
+                title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')}
                 wrapperClassName="request-decrypt-message__message-copy-tooltip"
               >
                 <div
                   className="request-decrypt-message__message-copy-text"
                 >
-                  {this.context.t('decryptCopy')}
+                  {t('decryptCopy')}
                 </div>
                 <img src="images/copy-to-clipboard.svg" />
               </Tooltip>
@@ -286,6 +293,7 @@ export default class ConfirmDecryptMessage extends Component {
       mostRecentOverviewPage,
       txData,
     } = this.props
+    const { metricsEvent, t } = this.context
 
     return (
       <div className="request-decrypt-message__footer">
@@ -296,7 +304,7 @@ export default class ConfirmDecryptMessage extends Component {
           onClick={async (event) => {
             this._removeBeforeUnload()
             await cancelDecryptMessage(txData, event)
-            this.context.metricsEvent({
+            metricsEvent({
               eventOpts: {
                 category: 'Messages',
                 action: 'Decrypt Message Request',
@@ -307,7 +315,7 @@ export default class ConfirmDecryptMessage extends Component {
             history.push(mostRecentOverviewPage)
           }}
         >
-          { this.context.t('cancel') }
+          { t('cancel') }
         </Button>
         <Button
           type="secondary"
@@ -316,7 +324,7 @@ export default class ConfirmDecryptMessage extends Component {
           onClick={async (event) => {
             this._removeBeforeUnload()
             await decryptMessage(txData, event)
-            this.context.metricsEvent({
+            metricsEvent({
               eventOpts: {
                 category: 'Messages',
                 action: 'Decrypt Message Request',
@@ -327,7 +335,7 @@ export default class ConfirmDecryptMessage extends Component {
             history.push(mostRecentOverviewPage)
           }}
         >
-          { this.context.t('decrypt') }
+          { t('decrypt') }
         </Button>
       </div>
     )

ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -46,9 +46,14 @@ export default class ConfirmEncryptionPublicKey extends Component {
     this._removeBeforeUnload()
   }
 
-  _beforeUnload = (event) => {
-    const { clearConfirmTransaction, cancelEncryptionPublicKey } = this.props
+  _beforeUnload = async (event) => {
+    const {
+      clearConfirmTransaction,
+      cancelEncryptionPublicKey,
+      txData,
+    } = this.props
     const { metricsEvent } = this.context
+    await cancelEncryptionPublicKey(txData, event)
     metricsEvent({
       eventOpts: {
         category: 'Messages',
@@ -57,7 +62,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
       },
     })
     clearConfirmTransaction()
-    cancelEncryptionPublicKey(event)
   }
 
   _removeBeforeUnload = () => {
@@ -84,11 +88,12 @@ export default class ConfirmEncryptionPublicKey extends Component {
 
   renderAccount = () => {
     const { fromAccount } = this.state
+    const { t } = this.context
 
     return (
       <div className="request-encryption-public-key__account">
         <div className="request-encryption-public-key__account-text">
-          { `${this.context.t('account')}:` }
+          { `${t('account')}:` }
         </div>
 
         <div className="request-encryption-public-key__account-item">
@@ -103,6 +108,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
 
   renderBalance = () => {
     const { conversionRate } = this.props
+    const { t } = this.context
     const { fromAccount: { balance } } = this.state
 
     const balanceInEther = conversionUtil(balance, {
@@ -116,7 +122,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
     return (
       <div className="request-encryption-public-key__balance">
         <div className="request-encryption-public-key__balance-text">
-          { `${this.context.t('balance')}:` }
+          { `${t('balance')}:` }
         </div>
         <div className="request-encryption-public-key__balance-value">
           { `${balanceInEther} ETH` }
@@ -149,10 +155,11 @@ export default class ConfirmEncryptionPublicKey extends Component {
   }
 
   renderBody = () => {
-    const { txData } = this.props
+    const { domainMetadata, txData } = this.props
+    const { t } = this.context
 
-    const origin = this.props.domainMetadata[txData.origin]
-    const notice = this.context.t('encryptionPublicKeyNotice', [origin.name])
+    const origin = domainMetadata[txData.origin]
+    const notice = t('encryptionPublicKeyNotice', [origin.name])
 
     return (
       <div className="request-encryption-public-key__body">
@@ -191,6 +198,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
       mostRecentOverviewPage,
       txData,
     } = this.props
+    const { t, metricsEvent } = this.context
 
     return (
       <div className="request-encryption-public-key__footer">
@@ -201,7 +209,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
           onClick={async (event) => {
             this._removeBeforeUnload()
             await cancelEncryptionPublicKey(txData, event)
-            this.context.metricsEvent({
+            metricsEvent({
               eventOpts: {
                 category: 'Messages',
                 action: 'Encryption public key Request',
@@ -232,7 +240,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
             history.push(mostRecentOverviewPage)
           }}
         >
-          { this.context.t('provide') }
+          { t('provide') }
         </Button>
       </div>
     )