refactor(content): simplify MonetizationLinkManager (#538)

- Rename MonetizationTagManager to MonetizationLinkManager (as we want to handle only links in this service)
- Simplify and reorganize MonetizationLinkManager
- TypeScript improvements (check more things)

Co-authored-by: Radu-Cristian Popa <[email protected]>

src/background/services/background.ts

@@ -185,7 +185,7 @@ export class Background {
             // endregion
 
             // region Content
-            case 'CHECK_WALLET_ADDRESS_URL':
+            case 'GET_WALLET_ADDRESS_INFO':
               return success(
                 await getWalletInformation(message.payload.walletAddressUrl),
               );

src/background/services/monetization.ts

@@ -52,7 +52,7 @@ export class MonetizationService {
   }
 
   async startPaymentSession(
-    payload: StartMonetizationPayload[],
+    payload: StartMonetizationPayload,
     sender: Runtime.MessageSender,
   ) {
     if (!payload.length) {
@@ -146,7 +146,7 @@ export class MonetizationService {
   }
 
   async stopPaymentSession(
-    payload: StopMonetizationPayload[],
+    payload: StopMonetizationPayload,
     sender: Runtime.MessageSender,
   ) {
     let needsAdjustAmount = false;
@@ -191,7 +191,7 @@ export class MonetizationService {
   }
 
   async resumePaymentSession(
-    payload: ResumeMonetizationPayload[],
+    payload: ResumeMonetizationPayload,
     sender: Runtime.MessageSender,
   ) {
     const tabId = getTabId(sender);
@@ -243,8 +243,13 @@ export class MonetizationService {
 
   async toggleWM() {
     const { enabled } = await this.storage.get(['enabled']);
-    await this.storage.set({ enabled: !enabled });
-    await this.message.sendToActiveTab('EMIT_TOGGLE_WM', { enabled: !enabled });
+    const nowEnabled = !enabled;
+    await this.storage.set({ enabled: nowEnabled });
+    if (nowEnabled) {
+      await this.resumePaymentSessionActiveTab();
+    } else {
+      this.stopAllSessions();
+    }
   }
 
   async pay(amount: string) {

src/content/container.ts

@@ -2,7 +2,7 @@ import { asClass, asValue, createContainer, InjectionMode } from 'awilix';
 import browser, { type Browser } from 'webextension-polyfill';
 import { createLogger, Logger } from '@/shared/logger';
 import { ContentScript } from './services/contentScript';
-import { MonetizationTagManager } from './services/monetizationTagManager';
+import { MonetizationLinkManager } from './services/monetizationLinkManager';
 import { LOG_LEVEL } from '@/shared/defines';
 import { FrameManager } from './services/frameManager';
 import {
@@ -16,7 +16,7 @@ export interface Cradle {
   document: Document;
   window: Window;
   message: MessageManager<ContentToBackgroundMessage>;
-  monetizationTagManager: MonetizationTagManager;
+  monetizationLinkManager: MonetizationLinkManager;
   frameManager: FrameManager;
   contentScript: ContentScript;
 }
@@ -39,7 +39,7 @@ export const configureContainer = () => {
       .inject(() => ({
         logger: logger.getLogger('content-script:frameManager'),
       })),
-    monetizationTagManager: asClass(MonetizationTagManager)
+    monetizationLinkManager: asClass(MonetizationLinkManager)
       .singleton()
       .inject(() => ({
         logger: logger.getLogger('content-script:tagManager'),

src/content/messages.ts

@@ -1,9 +1,23 @@
-export enum ContentToContentAction {
-  INITIALIZE_IFRAME = 'INITIALIZE_IFRAME',
-  IS_MONETIZATION_ALLOWED_ON_START = 'IS_MONETIZATION_ALLOWED_ON_START',
-  IS_MONETIZATION_ALLOWED_ON_RESUME = 'IS_MONETIZATION_ALLOWED_ON_RESUME',
-  IS_MONETIZATION_ALLOWED_ON_STOP = 'IS_MONETIZATION_ALLOWED_ON_STOP',
-  START_MONETIZATION = 'START_MONETIZATION',
-  STOP_MONETIZATION = 'STOP_MONETIZATION',
-  RESUME_MONETIZATION = 'RESUME_MONETIZATION',
+import type {
+  ResumeMonetizationPayload,
+  StartMonetizationPayload,
+  StopMonetizationPayload,
+} from '@/shared/messages';
+
+export interface ContentToContentMessageMap {
+  INITIALIZE_IFRAME: void;
+  IS_MONETIZATION_ALLOWED_ON_START: StartMonetizationPayload;
+  IS_MONETIZATION_ALLOWED_ON_RESUME: ResumeMonetizationPayload;
+  IS_MONETIZATION_ALLOWED_ON_STOP: StopMonetizationPayload;
+  START_MONETIZATION: StartMonetizationPayload;
+  STOP_MONETIZATION: StopMonetizationPayload;
+  RESUME_MONETIZATION: ResumeMonetizationPayload;
 }
+
+export type ContentToContentMessage = {
+  [K in keyof ContentToContentMessageMap]: {
+    message: K;
+    id: string;
+    payload: ContentToContentMessageMap[K];
+  };
+}[keyof ContentToContentMessageMap];

src/content/services/contentScript.ts

@@ -1,12 +1,12 @@
 import type { ToContentMessage } from '@/shared/messages';
-import { failure } from '@/shared/helpers';
 import type { Cradle } from '@/content/container';
+import { failure } from '@/shared/helpers';
 
 export class ContentScript {
   private browser: Cradle['browser'];
   private window: Cradle['window'];
   private logger: Cradle['logger'];
-  private monetizationTagManager: Cradle['monetizationTagManager'];
+  private monetizationLinkManager: Cradle['monetizationLinkManager'];
   private frameManager: Cradle['frameManager'];
 
   private isFirstLevelFrame: boolean;
@@ -16,14 +16,14 @@ export class ContentScript {
     browser,
     window,
     logger,
-    monetizationTagManager,
+    monetizationLinkManager,
     frameManager,
   }: Cradle) {
     Object.assign(this, {
       browser,
       window,
       logger,
-      monetizationTagManager,
+      monetizationLinkManager,
       frameManager,
     });
 
@@ -40,7 +40,7 @@ export class ContentScript {
 
       if (this.isTopFrame) this.frameManager.start();
 
-      this.monetizationTagManager.start();
+      this.monetizationLinkManager.start();
     }
   }
 
@@ -50,16 +50,10 @@ export class ContentScript {
         try {
           switch (message.action) {
             case 'MONETIZATION_EVENT':
-              this.monetizationTagManager.dispatchMonetizationEvent(
+              this.monetizationLinkManager.dispatchMonetizationEvent(
                 message.payload,
               );
               return;
-
-            case 'EMIT_TOGGLE_WM':
-              this.monetizationTagManager.toggleWM(message.payload);
-
-              return;
-
             default:
               return;
           }

src/content/services/frameManager.ts

@@ -1,11 +1,17 @@
-import { ContentToContentAction } from '../messages';
+import type { ContentToContentMessage } from '../messages';
 import type {
-  ResumeMonetizationPayload,
-  StartMonetizationPayload,
+  ResumeMonetizationPayloadEntry,
+  StartMonetizationPayloadEntry,
   StopMonetizationPayload,
 } from '@/shared/messages';
 import type { Cradle } from '@/content/container';
 
+const HANDLED_MESSAGES: ContentToContentMessage['message'][] = [
+  'INITIALIZE_IFRAME',
+  'IS_MONETIZATION_ALLOWED_ON_START',
+  'IS_MONETIZATION_ALLOWED_ON_RESUME',
+];
+
 export class FrameManager {
   private window: Cradle['window'];
   private document: Cradle['document'];
@@ -103,7 +109,7 @@ export class FrameManager {
 
     const frameDetails = this.frames.get(frame);
 
-    const stopMonetizationTags: StopMonetizationPayload[] =
+    const stopMonetizationTags: StopMonetizationPayload =
       frameDetails?.requestIds.map((requestId) => ({
         requestId,
         intent: 'remove',
@@ -179,18 +185,13 @@ export class FrameManager {
   private bindMessageHandler() {
     this.window.addEventListener(
       'message',
-      (event: any) => {
+      (event: MessageEvent<ContentToContentMessage>) => {
         const { message, payload, id } = event.data;
-        if (
-          ![
-            ContentToContentAction.INITIALIZE_IFRAME,
-            ContentToContentAction.IS_MONETIZATION_ALLOWED_ON_START,
-            ContentToContentAction.IS_MONETIZATION_ALLOWED_ON_RESUME,
-          ].includes(message)
-        ) {
+        if (!HANDLED_MESSAGES.includes(message)) {
           return;
         }
-        const frame = this.findIframe(event.source);
+        const eventSource = event.source as Window;
+        const frame = this.findIframe(eventSource);
         if (!frame) {
           event.stopPropagation();
           return;
@@ -199,50 +200,42 @@ export class FrameManager {
         if (event.origin === this.window.location.href) return;
 
         switch (message) {
-          case ContentToContentAction.INITIALIZE_IFRAME:
+          case 'INITIALIZE_IFRAME':
             event.stopPropagation();
             this.frames.set(frame, {
               frameId: id,
               requestIds: [],
             });
             return;
 
-          case ContentToContentAction.IS_MONETIZATION_ALLOWED_ON_START:
+          case 'IS_MONETIZATION_ALLOWED_ON_START':
             event.stopPropagation();
             if (frame.allow === 'monetization') {
               this.frames.set(frame, {
                 frameId: id,
                 requestIds: payload.map(
-                  (p: StartMonetizationPayload) => p.requestId,
+                  (p: StartMonetizationPayloadEntry) => p.requestId,
                 ),
               });
-              event.source.postMessage(
-                {
-                  message: ContentToContentAction.START_MONETIZATION,
-                  id,
-                  payload,
-                },
+              eventSource.postMessage(
+                { message: 'START_MONETIZATION', id, payload },
                 '*',
               );
             }
 
             return;
 
-          case ContentToContentAction.IS_MONETIZATION_ALLOWED_ON_RESUME:
+          case 'IS_MONETIZATION_ALLOWED_ON_RESUME':
             event.stopPropagation();
             if (frame.allow === 'monetization') {
               this.frames.set(frame, {
                 frameId: id,
                 requestIds: payload.map(
-                  (p: ResumeMonetizationPayload) => p.requestId,
+                  (p: ResumeMonetizationPayloadEntry) => p.requestId,
                 ),
               });
-              event.source.postMessage(
-                {
-                  message: ContentToContentAction.RESUME_MONETIZATION,
-                  id,
-                  payload,
-                },
+              eventSource.postMessage(
+                { message: 'RESUME_MONETIZATION', id, payload },
                 '*',
               );
             }