refactor(offerwall): don't expose private methods on element (#622)

Author: sidvishnoi

cdn/src/utils/offerwall/WebMonetizationCustomOfferwallChoice.ts

@@ -1,5 +1,5 @@
 import type { OfferwallModal } from '@c/offerwall'
-import type { Controller } from '@c/offerwall/controller'
+import type { Actions } from '@c/offerwall/controller'
 import { applyFontFamily } from '@c/utils'
 import {
   BORDER_RADIUS,
@@ -95,7 +95,9 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
 
     const abortController = new AbortController()
     const onDoneResolver = withResolvers<boolean>()
-    const controller: Controller = {
+
+    const owElem = document.createElement(elementName) as OfferwallModal
+    const actions = owElem.setController({
       onExtensionLinkClick() {
         // can start tracking
       },
@@ -106,10 +108,7 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
       onDone() {
         onDoneResolver.resolve(true)
       },
-    }
-
-    const owElem = document.createElement(elementName) as OfferwallModal
-    owElem.setController(controller)
+    })
 
     // in case initialize() wasn't called
     this.#configPromise ??= fetchConfig(params)
@@ -119,7 +118,7 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
     document.body.appendChild(owElem)
 
     try {
-      await this.#runBusinessLogic(owElem, abortController.signal)
+      await this.#runBusinessLogic(actions, abortController.signal)
       onDoneResolver.resolve(true)
     } catch (error) {
       console.error(error)
@@ -157,7 +156,7 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
    *   to give access.
    * - If either of above was within allowed time, give access.
    */
-  #runBusinessLogic = async (elem: OfferwallModal, signal: AbortSignal) => {
+  #runBusinessLogic = async (actions: Actions, signal: AbortSignal) => {
     const { linkElem } = this.#deps
     const wasExtensionInstalledAtStart = isExtensionInstalled()
 
@@ -167,11 +166,11 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
       this.#isWithinAllowedTime(lastEvent.timestamp) &&
       isExtensionInstalled()
     ) {
-      return elem.setScreen('all-set')
+      return actions.setScreen('all-set')
     }
 
     if (wasExtensionInstalledAtStart) {
-      elem.setScreen('contribution-required')
+      actions.setScreen('contribution-required')
       while (true) {
         if (!this.#monetizationEventResolver) {
           // if not initialized
@@ -189,7 +188,7 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
           this.#isForSameWalletAddress(event.paymentPointer) &&
           (await isValidPayment(event.incomingPayment))
         ) {
-          elem.setScreen('all-set')
+          actions.setScreen('all-set')
           this.#setLastEvent({
             type: 'monetization',
             timestamp: Date.now(),
@@ -211,7 +210,7 @@ export class WebMonetizationCustomOfferwallChoice implements OfferwallCustomChoi
       }
     } else {
       await this.#waitForExtensionInstall(signal)
-      elem.setScreen('all-set')
+      actions.setScreen('all-set')
       this.#setLastEvent({ type: 'install', timestamp: Date.now() })
     }
   }

components/src/offerwall/controller.ts

@@ -9,12 +9,10 @@ export interface Controller {
    * render it in a way so it can be embedded in editor's preview interface.
    */
   isPreviewMode?: boolean
+}
 
-  // TODO: add all handlers to controller only, instead of using the element
-  // instance. The element instance should have `setController` as the only
-  // public method.
-  //
-  // requestScreenChange(screen: Screen): void
+export interface Actions {
+  setScreen(screen: Screen): void
 }
 
 export const NO_OP_CONTROLLER: Controller = {

components/src/offerwall/index.ts

@@ -6,7 +6,8 @@ import {
   ContributionRequired,
   InstallRequired,
 } from './components/index.js'
-import { NO_OP_CONTROLLER, type Controller, type Screen } from './controller.js'
+import { NO_OP_CONTROLLER } from './controller.js'
+import type { Actions, Controller, Screen } from './controller.js'
 import styles from './styles.css?raw'
 import styleTokens from './vars.css?raw'
 
@@ -30,15 +31,18 @@ export class OfferwallModal extends LitElement {
   }
 
   #controller: Controller = NO_OP_CONTROLLER
-  setController(controller: Controller) {
+  setController(controller: Controller): Actions {
     if (this.#controller !== NO_OP_CONTROLLER) {
       throw new Error('Controller already set')
     }
     this.#controller = controller
+    return {
+      setScreen: (screen: Screen) => this.#setScreen(screen),
+    }
   }
 
   @state() _screen: Screen = 'install-required'
-  setScreen(screen: Screen) {
+  #setScreen(screen: Screen) {
     if (!ALLOWED_SCREENS.includes(screen)) {
       throw new Error('Invalid screen')
     }

frontend/app/components/offerwall/OfferwallPreview.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useSnapshot } from 'valtio'
 import type { OfferwallModal } from '@c/index'
-import type { Controller } from '@c/offerwall/controller'
 import { applyFontFamily } from '@c/utils'
 import {
   BORDER_RADIUS,
@@ -51,7 +50,7 @@ export default function OfferwallPreview() {
       }
 
       const el = document.querySelector<OfferwallModal>('wm-offerwall')!
-      const controller: Controller = {
+      const actions = el.setController({
         onModalClose: (ev) => {
           ev.preventDefault()
           console.log('onModalClose')
@@ -61,17 +60,16 @@ export default function OfferwallPreview() {
           console.log('onExtensionLinkClick')
           ev.preventDefault()
           setTimeout(() => {
-            el.setScreen('all-set')
+            actions.setScreen('all-set')
           }, 500)
         },
         onDone(ev) {
           console.log('onDone')
           ev.preventDefault()
-          el.setScreen('install-required')
+          actions.setScreen('install-required')
         },
         isPreviewMode: true,
-      }
-      el.setController(controller)
+      })
 
       setIsLoaded(true)
     }