Respond to 1102 messages using tab ID

app/scripts/controllers/provider-approval.js

@@ -27,19 +27,19 @@ class ProviderApprovalController {
     })
 
     if (platform && platform.addMessageListener) {
-      platform.addMessageListener(({ action = '', force, origin, siteTitle, siteImage }) => {
+      platform.addMessageListener(({ action = '', force, origin, siteTitle, siteImage }, { tab }) => {
         switch (action) {
           case 'init-provider-request':
-            this._handleProviderRequest(origin, siteTitle, siteImage, force)
+            this._handleProviderRequest(origin, siteTitle, siteImage, force, tab.id)
             break
           case 'init-is-approved':
-            this._handleIsApproved(origin)
+            this._handleIsApproved(origin, tab.id)
             break
           case 'init-is-unlocked':
-            this._handleIsUnlocked()
+            this._handleIsUnlocked(tab.id)
             break
           case 'init-privacy-request':
-            this._handlePrivacyRequest()
+            this._handlePrivacyRequest(tab.id)
             break
         }
       })
@@ -53,11 +53,11 @@ class ProviderApprovalController {
    * @param {string} siteTitle - The title of the document requesting full provider access
    * @param {string} siteImage - The icon of the window requesting full provider access
    */
-  _handleProviderRequest (origin, siteTitle, siteImage, force) {
-    this.store.updateState({ providerRequests: [{ origin, siteTitle, siteImage }] })
+  _handleProviderRequest (origin, siteTitle, siteImage, force, tabID) {
+    this.store.updateState({ providerRequests: [{ origin, siteTitle, siteImage, tabID }] })
     const isUnlocked = this.keyringController.memStore.getState().isUnlocked
     if (!force && this.approvedOrigins[origin] && this.caching && isUnlocked) {
-      this.approveProviderRequest(origin)
+      this.approveProviderRequest(tabID)
       return
     }
     this.openPopup && this.openPopup()
@@ -68,64 +68,66 @@ class ProviderApprovalController {
    *
    * @param {string} origin - Origin of the window
    */
-  _handleIsApproved (origin) {
+  _handleIsApproved (origin, tabID) {
     this.platform && this.platform.sendMessage({
       action: 'answer-is-approved',
       isApproved: this.approvedOrigins[origin] && this.caching,
       caching: this.caching,
-    }, { active: true })
+    }, { id: tabID })
   }
 
   /**
    * Called by a tab to determine if MetaMask is currently locked or unlocked
    */
-  _handleIsUnlocked () {
+  _handleIsUnlocked (tabID) {
     const isUnlocked = this.keyringController.memStore.getState().isUnlocked
-    this.platform && this.platform.sendMessage({ action: 'answer-is-unlocked', isUnlocked }, { active: true })
+    this.platform && this.platform.sendMessage({ action: 'answer-is-unlocked', isUnlocked }, { id: tabID })
   }
 
   /**
    * Called to check privacy mode; if privacy mode is off, this will automatically enable the provider (legacy behavior)
    */
-  _handlePrivacyRequest () {
+  _handlePrivacyRequest (tabID) {
     const privacyMode = this.preferencesController.getFeatureFlags().privacyMode
     if (!privacyMode) {
       this.platform && this.platform.sendMessage({
         action: 'approve-legacy-provider-request',
         selectedAddress: this.publicConfigStore.getState().selectedAddress,
-      }, { active: true })
+      }, { id: tabID })
       this.publicConfigStore.emit('update', this.publicConfigStore.getState())
     }
   }
 
   /**
    * Called when a user approves access to a full Ethereum provider API
    *
-   * @param {string} origin - Origin of the target window to approve provider access
+   * @param {string} tabID - ID of the target window that approved provider access
    */
-  approveProviderRequest (origin) {
+  approveProviderRequest (tabID) {
     this.closePopup && this.closePopup()
     const requests = this.store.getState().providerRequests
+    const origin = requests.find(request => request.tabID === tabID).origin
     this.platform && this.platform.sendMessage({
       action: 'approve-provider-request',
       selectedAddress: this.publicConfigStore.getState().selectedAddress,
-    }, { active: true })
+    }, { id: tabID })
     this.publicConfigStore.emit('update', this.publicConfigStore.getState())
-    const providerRequests = requests.filter(request => request.origin !== origin)
+    const providerRequests = requests.filter(request => request.tabID !== tabID)
     this.store.updateState({ providerRequests })
     this.approvedOrigins[origin] = true
   }
 
   /**
    * Called when a tab rejects access to a full Ethereum provider API
    *
-   * @param {string} origin - Origin of the target window to reject provider access
+   * @param {string} tabID - ID of the target window that rejected provider access
    */
-  rejectProviderRequest (origin) {
+  rejectProviderRequest (tabID) {
     this.closePopup && this.closePopup()
     const requests = this.store.getState().providerRequests
-    this.platform && this.platform.sendMessage({ action: 'reject-provider-request' }, { active: true })
-    const providerRequests = requests.filter(request => request.origin !== origin)
+    const origin = requests.find(request => request.tabID === tabID).origin
+    this.platform && this.platform.sendMessage({ action: 'reject-provider-request' }, { id: tabID })
+    const providerRequests = requests.filter(request => request.tabID !== tabID)
     this.store.updateState({ providerRequests })
     delete this.approvedOrigins[origin]
   }

app/scripts/platforms/extension.js

@@ -65,9 +65,11 @@ class ExtensionPlatform {
   }
 
   sendMessage (message, query = {}) {
-    extension.tabs.query(query, tabs => {
+    const id = query.id
+    delete query.id
+    extension.tabs.query({ ...query }, tabs => {
       tabs.forEach(tab => {
-        extension.tabs.sendMessage(tab.id, message)
+        extension.tabs.sendMessage(id || tab.id, message)
       })
     })
   }

old-ui/app/provider-approval.js

@@ -4,7 +4,7 @@ import { approveProviderRequest, rejectProviderRequest } from '../../ui/app/acti
 import { connect } from 'react-redux'
 class ProviderApproval extends Component {
   render () {
-    const { approveProviderRequest, origin, rejectProviderRequest } = this.props
+    const { approveProviderRequest, origin, tabID, rejectProviderRequest } = this.props
     return (
       <div className="flex-column flex-grow">
         <style dangerouslySetInnerHTML={{__html: `
@@ -28,7 +28,7 @@ class ProviderApproval extends Component {
         <div className="section-title flex-row flex-center">
           <i
             className="fa fa-arrow-left fa-lg cursor-pointer"
-            onClick={() => { rejectProviderRequest(origin) }} />
+            onClick={() => { rejectProviderRequest(tabID) }} />
           <h2 className="page-subtitle">Web3 API Request</h2>
         </div>
         <div className="provider_approval_content">
@@ -38,10 +38,10 @@ class ProviderApproval extends Component {
         <div className="provider_approval_actions">
           <button
             className="btn-green"
-            onClick={() => { approveProviderRequest(origin) }}>APPROVE</button>
+            onClick={() => { approveProviderRequest(tabID) }}>APPROVE</button>
           <button
             className="cancel btn-red"
-            onClick={() => { rejectProviderRequest(origin) }}>REJECT</button>
+            onClick={() => { rejectProviderRequest(tabID) }}>REJECT</button>
         </div>
       </div>
     )
@@ -51,13 +51,14 @@ class ProviderApproval extends Component {
 ProviderApproval.propTypes = {
   approveProviderRequest: PropTypes.func,
   origin: PropTypes.string,
+  tabID: PropTypes.string,
   rejectProviderRequest: PropTypes.func,
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    approveProviderRequest: origin => dispatch(approveProviderRequest(origin)),
-    rejectProviderRequest: origin => dispatch(rejectProviderRequest(origin)),
+    approveProviderRequest: tabID => dispatch(approveProviderRequest(tabID)),
+    rejectProviderRequest: tabID => dispatch(rejectProviderRequest(tabID)),
   }
 }
 

ui/app/actions.js

@@ -2501,15 +2501,15 @@ function setPendingTokens (pendingTokens) {
   }
 }
 
-function approveProviderRequest (origin) {
+function approveProviderRequest (tabID) {
   return (dispatch) => {
-    background.approveProviderRequest(origin)
+    background.approveProviderRequest(tabID)
   }
 }
 
-function rejectProviderRequest (origin) {
+function rejectProviderRequest (tabID) {
   return (dispatch) => {
-    background.rejectProviderRequest(origin)
+    background.rejectProviderRequest(tabID)
   }
 }
 

ui/app/components/pages/provider-approval/provider-approval.component.js

@@ -19,6 +19,7 @@ export default class ProviderApproval extends Component {
       <ProviderPageContainer
         approveProviderRequest={approveProviderRequest}
         origin={providerRequest.origin}
+        tabID={providerRequest.tabID}
         rejectProviderRequest={rejectProviderRequest}
         siteImage={providerRequest.siteImage}
         siteTitle={providerRequest.siteTitle}

ui/app/components/pages/provider-approval/provider-approval.container.js

@@ -4,8 +4,8 @@ import { approveProviderRequest, rejectProviderRequest } from '../../../actions'
 
 function mapDispatchToProps (dispatch) {
   return {
-    approveProviderRequest: origin => dispatch(approveProviderRequest(origin)),
-    rejectProviderRequest: origin => dispatch(rejectProviderRequest(origin)),
+    approveProviderRequest: tabID => dispatch(approveProviderRequest(tabID)),
+    rejectProviderRequest: tabID => dispatch(rejectProviderRequest(tabID)),
   }
 }
 

ui/app/components/provider-page-container/provider-page-container.component.js

@@ -10,20 +10,21 @@ export default class ProviderPageContainer extends PureComponent {
     rejectProviderRequest: PropTypes.func.isRequired,
     siteImage: PropTypes.string,
     siteTitle: PropTypes.string.isRequired,
+    tabID: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
   onCancel = () => {
-    const { origin, rejectProviderRequest } = this.props
-    rejectProviderRequest(origin)
+    const { tabID, rejectProviderRequest } = this.props
+    rejectProviderRequest(tabID)
   }
 
   onSubmit = () => {
-    const { approveProviderRequest, origin } = this.props
-    approveProviderRequest(origin)
+    const { approveProviderRequest, tabID } = this.props
+    approveProviderRequest(tabID)
   }
 
   render () {