feat(background): resend last monetization event on reload when overpaying

src/background/services/paymentSession.ts

@@ -11,6 +11,7 @@ import { convert, sleep } from '@/shared/helpers'
 import { transformBalance } from '@/popup/lib/utils'
 import { TabState } from './tabState'
 import type { Tabs } from 'webextension-polyfill'
+import type { MonetizationEventDetails } from '@/shared/messages'
 
 const DEFAULT_INTERVAL_MS = 1000
 const HOUR_MS = 3600 * 1000
@@ -127,12 +128,23 @@ export class PaymentSession {
 
     let outgoingPayment: OutgoingPayment | undefined
 
-    const waitTime = this.tabState.getOverpayingWaitTime(
+    const { waitTime, monetizationEvent } = this.tabState.getOverpayingDetails(
       this.tab,
       this.url,
       this.receiver.id
     )
 
+    if (monetizationEvent) {
+      sendMonetizationEvent({
+        tabId: this.tabId,
+        frameId: this.frameId,
+        payload: {
+          requestId: this.requestId,
+          details: monetizationEvent
+        }
+      })
+    }
+
     await sleep(waitTime)
 
     while (this.active) {
@@ -166,33 +178,34 @@ export class PaymentSession {
 
           outgoingPayment = undefined
 
+          const monetizationEventDetails: MonetizationEventDetails = {
+            amountSent: {
+              currency: receiveAmount.assetCode,
+              value: transformBalance(
+                receiveAmount.value,
+                receiveAmount.assetScale
+              )
+            },
+            incomingPayment,
+            paymentPointer: this.receiver.id
+          }
+
           sendMonetizationEvent({
             tabId: this.tabId,
             frameId: this.frameId,
             payload: {
               requestId: this.requestId,
-              detail: {
-                amountSent: {
-                  currency: receiveAmount.assetCode,
-                  value: transformBalance(
-                    receiveAmount.value,
-                    receiveAmount.assetScale
-                  )
-                },
-                incomingPayment,
-                paymentPointer: this.receiver.id
-              }
+              details: monetizationEventDetails
             }
           })
 
           // TO DO: find a better source of truth for deciding if overpaying is applicable
           if (this.intervalInMs > 1000) {
-            this.tabState.saveOverpaying(
-              this.tab,
-              this.url,
-              this.receiver.id,
-              this.intervalInMs
-            )
+            this.tabState.saveOverpaying(this.tab, this.url, {
+              walletAddressId: this.receiver.id,
+              monetizationEvent: monetizationEventDetails,
+              intervalInMs: this.intervalInMs
+            })
           }
 
           await sleep(this.intervalInMs)
@@ -283,7 +296,7 @@ export class PaymentSession {
           frameId: this.frameId,
           payload: {
             requestId: this.requestId,
-            detail: {
+            details: {
               amountSent: {
                 currency: receiveAmount.assetCode,
                 value: transformBalance(

src/background/services/tabState.ts

@@ -1,10 +1,18 @@
-import { Tabs } from 'webextension-polyfill'
+import type { MonetizationEventDetails } from '@/shared/messages'
+import type { Tabs } from 'webextension-polyfill'
 
 type State = {
+  monetizationEvent: MonetizationEventDetails
   lastPaymentTimestamp: number
   expiresAtTimestamp: number
 }
 
+interface SaveOverpayingDetails {
+  walletAddressId: string
+  monetizationEvent: MonetizationEventDetails
+  intervalInMs: number
+}
+
 export class TabState {
   private state = new WeakMap<Tabs.Tab, Map<string, State>>()
 
@@ -14,28 +22,33 @@ export class TabState {
     return `${url}:${walletAddressId}`
   }
 
-  getOverpayingWaitTime(
+  getOverpayingDetails(
     tab: Tabs.Tab,
     url: string,
     walletAddressId: string
-  ): number {
+  ): { waitTime: number; monetizationEvent?: MonetizationEventDetails } {
     const key = this.getOverpayingStateKey(url, walletAddressId)
     const state = this.state.get(tab)?.get(key)
     const now = Date.now()
 
     if (state && state.expiresAtTimestamp > now) {
-      return state.expiresAtTimestamp - now
+      return {
+        waitTime: state.expiresAtTimestamp - now,
+        monetizationEvent: state.monetizationEvent
+      }
     }
 
-    return 0
+    return {
+      waitTime: 0
+    }
   }
 
   saveOverpaying(
     tab: Tabs.Tab,
     url: string,
-    walletAddressId: string,
-    intervalInMs: number
+    details: SaveOverpayingDetails
   ): void {
+    const { intervalInMs, walletAddressId, monetizationEvent } = details
     if (!intervalInMs) return
 
     const now = Date.now()
@@ -45,8 +58,9 @@ export class TabState {
     const state = this.state.get(tab)?.get(key)
 
     if (!state) {
-      const tabState = this.state.get(tab) || new Map()
+      const tabState = this.state.get(tab) || new Map<string, State>()
       tabState.set(key, {
+        monetizationEvent,
         expiresAtTimestamp: expiresAtTimestamp,
         lastPaymentTimestamp: now
       })

src/content/polyfill.ts

@@ -67,7 +67,7 @@ import type { MonetizationEventPayload } from '@/shared/messages'
 
     constructor(
       type: 'monetization',
-      eventInitDict: MonetizationEventPayload['detail']
+      eventInitDict: MonetizationEventPayload['details']
     ) {
       super(type, { bubbles: true })
       const { amountSent, incomingPayment, paymentPointer } = eventInitDict
@@ -97,7 +97,7 @@ import type { MonetizationEventPayload } from '@/shared/messages'
 
   window.addEventListener(
     '__wm_ext_monetization',
-    (event: CustomEvent<MonetizationEventPayload['detail']>) => {
+    (event: CustomEvent<MonetizationEventPayload['details']>) => {
       if (!(event.target instanceof HTMLLinkElement)) return
       if (!event.target.isConnected) return
 

src/content/services/monetizationTagManager.ts

@@ -73,13 +73,13 @@ export class MonetizationTagManager extends EventEmitter {
     tag.dispatchEvent(new Event('error'))
   }
 
-  dispatchMonetizationEvent({ requestId, detail }: MonetizationEventPayload) {
+  dispatchMonetizationEvent({ requestId, details }: MonetizationEventPayload) {
     this.monetizationTags.forEach((tagDetails, tag) => {
       if (tagDetails.requestId !== requestId) return
 
       tag.dispatchEvent(
         new CustomEvent('__wm_ext_monetization', {
-          detail: mozClone(detail, this.document),
+          detail: mozClone(details, this.document),
           bubbles: true
         })
       )

src/shared/messages.ts

@@ -135,13 +135,15 @@ export enum BackgroundToContentAction {
   EMIT_TOGGLE_WM = 'EMIT_TOGGLE_WM'
 }
 
+export interface MonetizationEventDetails {
+  amountSent: PaymentCurrencyAmount
+  incomingPayment: OutgoingPayment['receiver']
+  paymentPointer: WalletAddress['id']
+}
+
 export interface MonetizationEventPayload {
   requestId: string
-  detail: {
-    amountSent: PaymentCurrencyAmount
-    incomingPayment: OutgoingPayment['receiver']
-    paymentPointer: WalletAddress['id']
-  }
+  details: MonetizationEventDetails
 }
 
 export interface EmitToggleWMPayload {