fix: ensure correct icon is reflected for monetization state (#355)

interledger · Jun 21, 2024 · e3f0fb7 · e3f0fb7
1 parent 886e1bc
commit e3f0fb7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/background/services/background.ts b/src/background/services/background.ts
@@ -90,8 +90,7 @@ export class Background {
 
             case PopupToBackgroundAction.TOGGLE_WM:
               await this.monetizationService.toggleWM()
-
-              this.tabEvents.onUpdatedTab()
+              await this.tabEvents.onUpdatedTab()
               return
 
             case PopupToBackgroundAction.PAY_WEBSITE:
@@ -112,7 +111,7 @@ export class Background {
               return
 
             case ContentToBackgroundAction.STOP_MONETIZATION:
-              this.monetizationService.stopPaymentSession(
+              await this.monetizationService.stopPaymentSession(
                 message.payload,
                 sender
               )
@@ -131,7 +130,7 @@ export class Background {
               )
 
             case ContentToBackgroundAction.IS_TAB_MONETIZED:
-              this.tabEvents.onUpdatedTab(message.payload)
+              await this.tabEvents.onUpdatedTab(message.payload, sender)
               return
 
             case ContentToBackgroundAction.IS_WM_ENABLED:

diff --git a/src/background/services/tabEvents.ts b/src/background/services/tabEvents.ts
@@ -1,7 +1,9 @@
-import browser, { type Browser, type Tabs } from 'webextension-polyfill'
+import browser from 'webextension-polyfill'
+import type { Browser, Runtime, Tabs } from 'webextension-polyfill'
 import { MonetizationService } from './monetization'
 import { StorageService } from './storage'
 import { IsTabMonetizedPayload } from '@/shared/messages'
+import { getTabId } from '../utils'
 
 const runtime = browser.runtime
 const ICONS = {
@@ -55,15 +57,19 @@ export class TabEvents {
     await this.changeIcon()
   }
 
-  onUpdatedTab = async (payload?: IsTabMonetizedPayload) => {
+  onUpdatedTab = async (
+    payload?: IsTabMonetizedPayload | null,
+    sender?: Runtime.MessageSender
+  ) => {
     const { enabled } = await this.storage.get(['enabled'])
 
     let iconData = enabled ? ICONS.default : ICONS.warning
     if (enabled && payload) {
       const { value: isTabMonetized } = payload
       iconData = isTabMonetized ? ICONS.active : ICONS.inactive
     }
+    const tabId = sender && getTabId(sender)
 
-    await this.browser.action.setIcon({ path: iconData })
+    await this.browser.action.setIcon({ path: iconData, tabId })
   }
 }
diff --git a/src/content/lib/messages.ts b/src/content/lib/messages.ts
@@ -21,6 +21,7 @@ export const checkWalletAddressUrlCall = async (
 export const startMonetization = async (
   payload: ContentToBackgroundActionPayload[ContentToBackgroundAction.START_MONETIZATION]
 ) => {
+  if (!payload.length) return
   return await message.send({
     action: ContentToBackgroundAction.START_MONETIZATION,
     payload
@@ -30,6 +31,7 @@ export const startMonetization = async (
 export const stopMonetization = async (
   payload: ContentToBackgroundActionPayload[ContentToBackgroundAction.STOP_MONETIZATION]
 ) => {
+  if (!payload.length) return
   return await message.send({
     action: ContentToBackgroundAction.STOP_MONETIZATION,
     payload
@@ -39,6 +41,7 @@ export const stopMonetization = async (
 export const resumeMonetization = async (
   payload: ContentToBackgroundActionPayload[ContentToBackgroundAction.RESUME_MONETIZATION]
 ) => {
+  if (!payload.length) return
   return await message.send({
     action: ContentToBackgroundAction.RESUME_MONETIZATION,
     payload

diff --git a/src/content/services/monetizationTagManager.ts b/src/content/services/monetizationTagManager.ts
@@ -415,12 +415,10 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private sendStartMonetization(tags: StartMonetizationPayload[]) {
-    if (!tags.length) return
-
     const isFrameMonetizedMessage = {
       message: ContentToContentAction.IS_FRAME_MONETIZED,
       id: this.id,
-      payload: { isMonetized: true }
+      payload: { isMonetized: tags.length > 0 }
     }
 
     if (this.isTopFrame) {
@@ -443,8 +441,6 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private async sendStopMonetization(tags: StopMonetizationPayload[]) {
-    if (!tags.length) return
-
     await stopMonetization(tags)
 
     // Check if tab still monetized
@@ -467,8 +463,6 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private sendResumeMonetization(tags: ResumeMonetizationPayload[]) {
-    if (!tags.length) return
-
     const isFrameMonetizedMessage = {
       message: ContentToContentAction.IS_FRAME_MONETIZED,
       id: this.id,