feat: Df continous payments

src/background/lib/messages.ts

@@ -33,3 +33,12 @@ export const emitToggleWM = async (
     payload
   })
 }
+
+export const emitToggleContinousPayment = async (
+  payload: BackgroundToContentActionPayload[BackgroundToContentAction.EMIT_TOGGLE_CONTINOUS_PAYMENT]
+) => {
+  return await message.sendToActiveTab({
+    action: BackgroundToContentAction.EMIT_TOGGLE_CONTINOUS_PAYMENT,
+    payload
+  })
+}

src/background/services/background.ts

@@ -60,6 +60,12 @@ export class Background {
               this.tabEvents.onUpdatedTab()
               return
 
+            case PopupToBackgroundAction.TOGGLE_CONTINOUS_PAYMENT:
+              await this.monetizationService.toggleContinousPayment()
+
+              this.tabEvents.onUpdatedTab()
+              return
+
             case PopupToBackgroundAction.PAY_WEBSITE:
               return success(
                 await this.monetizationService.pay(message.payload.amount)
@@ -105,6 +111,9 @@ export class Background {
             case ContentToBackgroundAction.IS_WM_ENABLED:
               return success(await this.storage.getWMState())
 
+            case ContentToBackgroundAction.IS_CONTINOUS_PAYMENT_ENABLED:
+              return success(await this.storage.getContinousPaymentState())
+
             default:
               return
           }

src/background/services/monetization.ts

@@ -7,7 +7,7 @@ import {
   StopMonetizationPayload
 } from '@/shared/messages'
 import { PaymentSession } from './paymentSession'
-import { emitToggleWM } from '../lib/messages'
+import { emitToggleWM, emitToggleContinousPayment } from '../lib/messages'
 import { getCurrentActiveTab, getSender, getTabId } from '../utils'
 
 export class MonetizationService {
@@ -28,10 +28,12 @@ export class MonetizationService {
     payload: StartMonetizationPayload,
     sender: Runtime.MessageSender
   ) {
-    const { connected, enabled } = await this.storage.get([
-      'enabled',
-      'connected'
-    ])
+    const { connected, enabled, enabledContinousPayment } =
+      await this.storage.get([
+        'enabled',
+        'connected',
+        'enabledContinousPayment'
+      ])
 
     const { requestId, walletAddress } = payload
     const { tabId, frameId } = getSender(sender)
@@ -61,7 +63,11 @@ export class MonetizationService {
 
     this.sessions[tabId].set(requestId, session)
 
-    if (connected === true && enabled === true) {
+    if (
+      connected === true &&
+      enabled === true &&
+      enabledContinousPayment === true
+    ) {
       void session.start()
     }
   }
@@ -104,6 +110,18 @@ export class MonetizationService {
     emitToggleWM({ enabled: !enabled })
   }
 
+  async toggleContinousPayment() {
+    const { enabledContinousPayment } = await this.storage.get([
+      'enabledContinousPayment'
+    ])
+    await this.storage.set({
+      enabledContinousPayment: !enabledContinousPayment
+    })
+    emitToggleContinousPayment({
+      enabledContinousPayment: !enabledContinousPayment
+    })
+  }
+
   clearTabSessions(tabId: number) {
     this.logger.debug(`Attempting to clear sessions for tab ${tabId}.`)
     const sessions = this.sessions[tabId]

src/background/services/storage.ts

@@ -14,7 +14,8 @@ const defaultStorage = {
   grant: null,
   rateOfPay: null,
   minRateOfPay: null,
-  maxRateOfPay: null
+  maxRateOfPay: null,
+  enabledContinousPayment: true
 } satisfies Omit<Storage, 'publicKey' | 'privateKey' | 'keyId'>
 
 // TODO: Emit events when certain values are updated:
@@ -65,7 +66,8 @@ export class StorageService extends EventEmitter {
       'minRateOfPay',
       'maxRateOfPay',
       'walletAddress',
-      'publicKey'
+      'publicKey',
+      'enabledContinousPayment'
     ])
 
     const tab = await getCurrentActiveTab(this.browser)
@@ -91,6 +93,14 @@ export class StorageService extends EventEmitter {
     return enabled
   }
 
+  async getContinousPaymentState(): Promise<boolean> {
+    const { enabledContinousPayment } = await this.get([
+      'enabledContinousPayment'
+    ])
+
+    return enabledContinousPayment
+  }
+
   async keyPairExists(): Promise<boolean> {
     const keys = await this.get(['privateKey', 'publicKey', 'keyId'])
     if (

src/background/services/tabEvents.ts

@@ -26,11 +26,17 @@ export class TabEvents {
   }
 
   private changeIcon = async () => {
-    const { enabled } = await this.storage.get(['enabled'])
+    console.log('changeIcon')
+
+    const { enabledContinousPayment } = await this.storage.get([
+      'enabledContinousPayment'
+    ])
+
+    console.log('enabledContinousPayment', enabledContinousPayment)
 
     const iconData = {
-      '34': enabled ? icon34 : iconWarning34,
-      '128': enabled ? icon128 : iconWarning128
+      '34': enabledContinousPayment ? icon34 : iconWarning34,
+      '128': enabledContinousPayment ? icon128 : iconWarning128
     }
 
     if (this.browser.action) {
@@ -49,14 +55,19 @@ export class TabEvents {
   }
 
   onUpdatedTab = async (payload?: IsTabMonetizedPayload) => {
-    const { enabled } = await this.storage.get(['enabled'])
+    console.log('onUpdatedTab')
+
+    const { enabledContinousPayment } = await this.storage.get([
+      'enabledContinousPayment'
+    ])
+    console.log('enabledContinousPayment', enabledContinousPayment)
 
     let iconData = {
-      '34': enabled ? icon34 : iconWarning34,
-      '128': enabled ? icon34 : iconWarning128
+      '34': enabledContinousPayment ? icon34 : iconWarning34,
+      '128': enabledContinousPayment ? icon34 : iconWarning128
     }
 
-    if (enabled) {
+    if (enabledContinousPayment) {
       if (payload) {
         const { value } = payload
 

src/content/lib/messages.ts

@@ -59,3 +59,9 @@ export const isWMEnabled = async () => {
     action: ContentToBackgroundAction.IS_WM_ENABLED
   })
 }
+
+export const isContinousPaymentEnabled = async () => {
+  return await message.send<boolean>({
+    action: ContentToBackgroundAction.IS_CONTINOUS_PAYMENT_ENABLED
+  })
+}

src/content/services/contentScript.ts

@@ -32,7 +32,12 @@ export class ContentScript {
 
             case BackgroundToContentAction.EMIT_TOGGLE_WM:
               this.monetizationTagManager.toggleWM(message.payload)
+              return
 
+            case BackgroundToContentAction.EMIT_TOGGLE_CONTINOUS_PAYMENT:
+              this.monetizationTagManager.toggleContinousPayment(
+                message.payload
+              )
               return
 
             default:

src/content/services/monetizationTagManager.ts

@@ -7,13 +7,15 @@ import { WalletAddress } from '@interledger/open-payments/dist/types'
 import { checkWalletAddressUrlFormat } from '../utils'
 import {
   checkWalletAddressUrlCall,
+  isContinousPaymentEnabled,
   isTabMonetized,
   isWMEnabled,
   resumeMonetization,
   startMonetization,
   stopMonetization
 } from '../lib/messages'
 import {
+  EmitToggleContinousPaymentPayload,
   EmitToggleWMPayload,
   MonetizationEventPayload
 } from '@/shared/messages'
@@ -66,9 +68,15 @@ export class MonetizationTagManager extends EventEmitter {
   }
 
   private async resumeAllMonetization() {
-    const response = await isWMEnabled()
+    const isWMEnabledResponse = await isWMEnabled()
+    const isContinousPaymentEnabledResponse = await isContinousPaymentEnabled()
 
-    if (response.success && response.payload) {
+    if (
+      isWMEnabledResponse.success &&
+      isWMEnabledResponse.payload &&
+      isContinousPaymentEnabledResponse.success &&
+      isContinousPaymentEnabledResponse.payload
+    ) {
       let validTagsCount = 0
 
       this.monetizationTags.forEach((value) => {
@@ -396,7 +404,17 @@ export class MonetizationTagManager extends EventEmitter {
     if (enabled) {
       await this.resumeAllMonetization()
     } else {
-      await this.stopAllMonetization()
+      this.stopAllMonetization()
+    }
+  }
+
+  async toggleContinousPayment({
+    enabledContinousPayment
+  }: EmitToggleContinousPaymentPayload) {
+    if (enabledContinousPayment) {
+      await this.resumeAllMonetization()
+    } else {
+      this.stopAllMonetization()
     }
   }
 }

src/popup/components/layout/header.tsx

@@ -2,10 +2,10 @@ import React, { useContext, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import browser from 'webextension-polyfill'
 import { ArrowBack, Settings } from '../Icons'
-import { Switch } from '../ui/Switch'
+// import { Switch } from '../ui/Switch'
 import { ROUTES_PATH } from '@/popup/Popup'
-import { PopupStateContext, ReducerActionType } from '@/popup/lib/context'
-import { toggleWM } from '@/popup/lib/messages'
+import { PopupStateContext } from '@/popup/lib/context'
+// import { toggleWM } from '@/popup/lib/messages'
 
 const Logo = browser.runtime.getURL('assets/images/logo.svg')
 
@@ -30,11 +30,12 @@ const NavigationButton = () => {
 }
 
 export const Header = () => {
-  const { state, dispatch } = useContext(PopupStateContext)
-  const onChange = async () => {
-    await toggleWM()
-    dispatch({ type: ReducerActionType.TOGGLE_WM, data: {} })
-  }
+  // TO DO - uncomment when decision about global monetization vs continous payment made
+  // const { state, dispatch } = useContext(PopupStateContext)
+  // const onChange = async () => {
+  //   await toggleWM()
+  //   dispatch({ type: ReducerActionType.TOGGLE_WM, data: {} })
+  // }
   return (
     <header className="flex h-8 flex-row items-center justify-between">
       <div className="flex flex-row items-center gap-3">
@@ -43,7 +44,7 @@ export const Header = () => {
       </div>
       <div className="flex flex-row items-center gap-3">
         <NavigationButton />
-        <Switch checked={state.enabled} onChange={onChange} />
+        {/* <Switch checked={state.enabled} onChange={onChange} /> */}
       </div>
     </header>
   )

src/popup/lib/context.tsx

@@ -5,7 +5,8 @@ import { DeepNonNullable, PopupStore } from '@/shared/types'
 export enum ReducerActionType {
   SET_DATA = 'SET_DATA',
   TOGGLE_WM = 'TOGGLE_WM',
-  UPDATE_RATE_OF_PAY = 'UPDATE_RATE_OF_PAY'
+  UPDATE_RATE_OF_PAY = 'UPDATE_RATE_OF_PAY',
+  TOGGLE_CONTINOUS_PAYMENT = 'TOGGLE_CONTINOUS_PAYMENT'
 }
 
 export type PopupState = Required<DeepNonNullable<PopupStore>>
@@ -29,6 +30,10 @@ interface ToggleWMAction extends ReducerActionMock {
   type: ReducerActionType.TOGGLE_WM
 }
 
+interface ToggleContinousPaymentAction extends ReducerActionMock {
+  type: ReducerActionType.TOGGLE_CONTINOUS_PAYMENT
+}
+
 interface UpdateRateOfPayAction extends ReducerActionMock {
   type: ReducerActionType.UPDATE_RATE_OF_PAY
   data: {
@@ -40,6 +45,7 @@ export type ReducerActions =
   | SetDataAction
   | ToggleWMAction
   | UpdateRateOfPayAction
+  | ToggleContinousPaymentAction
 
 export const PopupStateContext = React.createContext<PopupContext>(
   {} as PopupContext
@@ -62,6 +68,12 @@ const reducer = (state: PopupState, action: ReducerActions): PopupState => {
         rateOfPay: action.data.rateOfPay
       }
     }
+    case ReducerActionType.TOGGLE_CONTINOUS_PAYMENT: {
+      return {
+        ...state,
+        enabledContinousPayment: !state.enabledContinousPayment
+      }
+    }
     default:
       return state
   }

src/popup/lib/messages.ts

@@ -40,6 +40,12 @@ export const toggleWM = async () => {
   })
 }
 
+export const toggleContinousPayment = async () => {
+  return await message.send({
+    action: PopupToBackgroundAction.TOGGLE_CONTINOUS_PAYMENT
+  })
+}
+
 export const updateRateOfPay = async (
   payload: PopupToBackgroundActionPayload[PopupToBackgroundAction.UPDATE_RATE_OF_PAY]
 ) => {