Merge branch 'main' into release

Author: DarianM

.github/workflows/pr-checks.yml

@@ -14,32 +14,23 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  typecheck:
-    name: Typecheck
+  lint:
+    name: Lint and Typecheck
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: ./.github/workflows/setup
+      - run: pnpm format:check
+      - run: pnpm lint:check
       - run: pnpm typecheck
 
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-      - name: Environment setup
-        uses: ./.github/workflows/setup
-      - name: Check lint
-        run: pnpm lint:check
-
-  format:
-    name: Format
+  test:
+    name: Test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Environment setup
         uses: ./.github/workflows/setup
-      - name: Check format
-        run: pnpm format:check
+      - name: Run tests
+        run: pnpm test

api/src/routes/get-profile.ts

@@ -1,16 +1,23 @@
 import { HTTPException } from 'hono/http-exception'
 import z from 'zod'
 import { zValidator } from '@hono/zod-validator'
-import { ConfigStorageService } from '@shared/config-storage-service'
+import {
+  ConfigStorageService,
+  ConfigStorageServiceError,
+} from '@shared/config-storage-service'
 import { AWS_PREFIX } from '@shared/defines'
-import { PROFILE_IDS, TOOLS } from '@shared/types'
+import {
+  numberToBannerFontSize,
+  numberToWidgetFontSize,
+  PROFILE_IDS,
+  TOOLS,
+} from '@shared/types'
 import type {
-  BannerConfig,
+  BaseToolProfile,
   ConfigVersions,
   ElementConfigType,
   Tool,
   ToolProfile,
-  WidgetConfig,
 } from '@shared/types'
 import { app } from '../app.js'
 import { createHTTPException } from '../utils/utils.js'
@@ -43,12 +50,17 @@ app.get(
       return json<ToolProfile<typeof tool>>(profile)
     } catch (error) {
       if (error instanceof HTTPException) throw error
-      if (error instanceof Error) {
-        if (error.message.includes('404')) {
+      if (error instanceof ConfigStorageServiceError) {
+        if (error.code === 'not-found') {
           const msg = 'No saved profile found for given wallet address'
           throw createHTTPException(404, msg, {
-            message: 'Not found', // can include the S3 key here perhaps
+            message: 'Not found',
             code: '404',
+            cause: {
+              statusCode: error.statusCode,
+              code: error.code,
+              message: error.message,
+            },
           })
         }
       }
@@ -62,6 +74,10 @@ function convertToProfile<T extends Tool>(
   config: ElementConfigType,
   tool: T,
 ): ToolProfile<T> {
+  if (tool === 'offerwall') {
+    return config.offerwall as ToolProfile<T>
+  }
+
   return {
     $version: '0.0.1',
     $name: config.versionName,
@@ -70,30 +86,68 @@ function convertToProfile<T extends Tool>(
   } as ToolProfile<T>
 }
 
+/** @legacy */
 function getToolProfile(profile: ElementConfigType, tool: Tool) {
-  switch (tool) {
-    case 'widget':
-      return extract<WidgetConfig>(
-        profile,
-        (key) => key.startsWith('widget') || key.includes('Widget'),
-      )
-    case 'banner':
-      return extract<BannerConfig>(
-        profile,
-        (key) => key.startsWith('banner') || key.includes('Banner'),
-      )
+  if (tool === 'banner') {
+    return {
+      title: {
+        text: profile.bannerTitleText,
+      },
+      description: {
+        text: profile.bannerDescriptionText,
+        isVisible: profile.bannerDescriptionVisible,
+      },
+      font: {
+        name: profile.bannerFontName,
+        size: numberToBannerFontSize(profile.bannerFontSize),
+      },
+      animation: {
+        type: profile.bannerSlideAnimation,
+      },
+      position: profile.bannerPosition,
+      border: {
+        type: profile.bannerBorder,
+      },
+      color: {
+        text: profile.bannerTextColor,
+        background: profile.bannerBackgroundColor,
+      },
+      thumbnail: {
+        value: profile.bannerThumbnail,
+      },
+    } satisfies Omit<ToolProfile<'banner'>, keyof BaseToolProfile>
   }
-}
-
-function extract<R, T = ElementConfigType, K = keyof T>(
-  obj: T,
-  filter: (key: K) => boolean,
-): R {
-  const entries = Object.entries(obj as Record<string, unknown>).filter(
-    ([key]) => filter(key as K),
-  )
-  if (!entries.length) {
-    throw new Error('No matching profile found')
+  if (tool === 'widget') {
+    return {
+      title: {
+        text: profile.widgetTitleText,
+      },
+      description: {
+        text: profile.widgetDescriptionText,
+        isVisible: profile.widgetDescriptionVisible,
+      },
+      font: {
+        name: profile.widgetFontName,
+        size: numberToWidgetFontSize(profile.widgetFontSize),
+      },
+      position: profile.widgetPosition,
+      border: {
+        type: profile.widgetButtonBorder,
+      },
+      color: {
+        text: profile.widgetTextColor,
+        background: profile.widgetBackgroundColor,
+        theme: profile.widgetButtonBackgroundColor,
+      },
+      ctaPayButton: {
+        text: profile.widgetButtonText,
+      },
+      icon: {
+        value: '',
+        color: profile.widgetTriggerBackgroundColor,
+      },
+    } satisfies Omit<ToolProfile<'widget'>, keyof BaseToolProfile>
   }
-  return Object.fromEntries(entries) as R
+
+  throw new Error(`Unsupported tool type: ${tool}`)
 }

cdn/build.js

@@ -60,7 +60,14 @@ function rawPlugin() {
       const namespace = 'raw-loader'
       const filter = /\?raw$/
       build.onResolve({ filter }, (args) => {
-        const resolvedPath = path.join(args.resolveDir, args.path)
+        let resolvedPath = path.join(args.resolveDir, args.path)
+        // resolve TypeScript aliases
+        if (args.path.includes('@c/')) {
+          const filepath = args.path.split('@c/')[1]
+          const root = path.join(process.cwd(), '..')
+          const components = path.join(root, 'components')
+          resolvedPath = path.join(components, 'src', filepath)
+        }
         return { path: resolvedPath, namespace }
       })
       build.onLoad({ filter, namespace }, async (args) => {

cdn/package.json

@@ -18,6 +18,7 @@
     "@fontsource/titillium-web": "^5.2.8",
     "@shared/defines": "workspace:^",
     "@shared/types": "workspace:^",
+    "@shared/utils": "workspace:^",
     "@tools/components": "workspace:*",
     "directory-tree": "^3.5.2",
     "esbuild": "0.27.0",

cdn/src/banner.ts

@@ -34,29 +34,12 @@ function drawBanner(profile: BannerProfile) {
   }
 
   const bannerElement = document.createElement('wm-banner')
-  const config = profile
-
-  const bannerConfig = {
+  bannerElement.config = {
+    ...profile,
     cdnUrl: params.cdnUrl,
-    bannerTitleText: config.bannerTitleText,
-    bannerDescriptionText: config.bannerDescriptionText,
-    isBannerDescriptionVisible: config.bannerDescriptionVisible,
-    bannerBorderRadius: config.bannerBorder,
-    bannerPosition: config.bannerPosition,
-    bannerSlideAnimation: config.bannerSlideAnimation,
-    bannerThumbnail: config.bannerThumbnail,
-    theme: {
-      backgroundColor: config.bannerBackgroundColor,
-      textColor: config.bannerTextColor,
-      fontFamily: config.bannerFontName,
-      fontSize: config.bannerFontSize,
-    },
   }
-  bannerElement.config = bannerConfig
 
-  const position = config.bannerPosition
-    ? config.bannerPosition.toLowerCase()
-    : 'bottom'
+  const position = profile.position ? profile.position.toLowerCase() : 'bottom'
 
   bannerElement.style.position = 'fixed'
   bannerElement.style.left = '0'

cdn/src/offerwall.ts

@@ -0,0 +1,49 @@
+import { API_URL } from '@shared/defines'
+import { OfferwallModal } from '@tools/components'
+import { appendPaymentPointer, fetchProfile, getScriptParams } from './utils'
+import {
+  WebMonetizationCustomOfferwallChoice,
+  type OfferwallChoiceConstructorParams,
+  type GoogleOfcExtendedWindow,
+} from './utils/offerwall'
+
+const NAME = 'wm-offerwall'
+customElements.define(NAME, OfferwallModal)
+
+const params = getScriptParams('offerwall')
+const linkElem = appendPaymentPointer(params.walletAddress)
+
+const STORAGE_KEY_PREFIX = 'wmt.offerwall.'
+const toStorageKey = (key: string) => `${STORAGE_KEY_PREFIX}${key}`
+const storage: OfferwallChoiceConstructorParams['storage'] = {
+  get: (key) => localStorage.getItem(toStorageKey(key)),
+  set: (key, value) => localStorage.setItem(toStorageKey(key), value),
+  delete: (key) => localStorage.removeItem(toStorageKey(key)),
+}
+
+const offerwallConstructorParams: OfferwallChoiceConstructorParams = {
+  elementName: NAME,
+  linkElem,
+  storage,
+  params,
+  fetchConfig: (params) => fetchProfile(API_URL, 'offerwall', params),
+}
+
+// Register the custom choice with the Offerwall.
+const win = window as unknown as GoogleOfcExtendedWindow
+// @ts-expect-error defined by external script
+win.googlefc ||= {}
+// @ts-expect-error defined by external script
+win.googlefc.offerwall ||= {}
+// @ts-expect-error defined by external script
+win.googlefc.offerwall.customchoice ||= {}
+win.googlefc.offerwall.customchoice.registry =
+  new WebMonetizationCustomOfferwallChoice(offerwallConstructorParams)
+
+win.googletag ||= { cmd: [] }
+win.googletag?.cmd?.push(() => {
+  win.googletag?.enableServices?.()
+})
+
+// Uncomment following to show regardless of initialization status
+// win.googlefc.offerwall.customchoice.registry.show()

cdn/src/utils/index.ts

@@ -63,4 +63,5 @@ export function appendPaymentPointer(walletAddressUrl: string) {
   monetizationElement.rel = 'monetization'
   monetizationElement.href = walletAddressUrl
   document.head.appendChild(monetizationElement)
+  return monetizationElement
 }