Merge branch 'main' into release

Author: DarianM

api/package.json

@@ -20,6 +20,7 @@
     "@paralleldrive/cuid2": "^2.3.1",
     "@shared/config-storage-service": "workspace:^",
     "@shared/probabilistic-revenue-share": "workspace:^",
+    "@shared/default-data": "workspace:^",
     "@shared/utils": "workspace:^",
     "hono": "^4.11.3",
     "http-message-signatures": "^1.0.4",

api/src/routes/get-profile.ts

@@ -4,7 +4,9 @@ import { zValidator } from '@hono/zod-validator'
 import {
   ConfigStorageService,
   ConfigStorageServiceError,
+  isConfigStorageNotFoundError,
 } from '@shared/config-storage-service'
+import { getDefaultProfile } from '@shared/default-data'
 import { AWS_PREFIX } from '@shared/defines'
 import {
   numberToBannerFontSize,
@@ -14,6 +16,7 @@ import {
 } from '@shared/types'
 import type {
   BaseToolProfile,
+  Configuration,
   ConfigVersions,
   ElementConfigType,
   Tool,
@@ -44,26 +47,36 @@ app.get(
     const storage = new ConfigStorageService({ ...env, AWS_PREFIX })
 
     try {
-      const fullConfig = await storage.getJson<ConfigVersions>(walletAddress)
-      const legacyProfile = fullConfig[profileId]
-      const profile = convertToProfile(legacyProfile, tool)
-      return json<ToolProfile<typeof tool>>(profile)
+      let profile: ToolProfile<typeof tool> | null = null
+      try {
+        const config = await storage.getJson<Configuration>(walletAddress)
+        profile = config[tool]?.[profileId] ?? null
+      } catch (e) {
+        if (!isConfigStorageNotFoundError(e)) {
+          throw e
+        }
+        // TODO: to be removed after the completion of versioned config migration
+        const legacy = await storage.getJson<ConfigVersions>(
+          walletAddress,
+          true,
+        )
+        profile = convertToProfile(legacy[profileId], tool) ?? null
+      }
+
+      if (!profile)
+        throw new ConfigStorageServiceError(
+          'not-found',
+          404,
+          `No profile found for tool profile ${profileId}`,
+        )
+
+      return json(profile)
     } catch (error) {
       if (error instanceof HTTPException) throw error
-      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',
-            code: '404',
-            cause: {
-              statusCode: error.statusCode,
-              code: error.code,
-              message: error.message,
-            },
-          })
-        }
+      if (isConfigStorageNotFoundError(error)) {
+        return json(getDefaultProfile(tool), 404)
       }
+
       throw createHTTPException(500, 'Config fetch error: ', error)
     }
   },
@@ -73,7 +86,10 @@ app.get(
 function convertToProfile<T extends Tool>(
   config: ElementConfigType,
   tool: T,
-): ToolProfile<T> {
+): ToolProfile<T> | undefined {
+  // means there is no profile for the given tool/profileId
+  if (!config) return
+
   if (tool === 'offerwall') {
     return config.offerwall as ToolProfile<T>
   }

cdn/src/utils/index.ts

@@ -48,7 +48,7 @@ export async function fetchProfile<T extends Tool>(
   url.searchParams.set('id', params.profileId)
 
   const res = await fetch(url)
-  if (!res.ok) {
+  if (!res.ok && res.status !== 404) {
     throw new Error(
       `Failed to fetch config: HTTP ${res.status} ${res.statusText}`,
     )

components/src/offerwall/index.ts

@@ -130,7 +130,10 @@ export class OfferwallModal extends LitElement {
   #dialogRef: Ref<HTMLDialogElement> = createRef()
   #openDialog() {
     if (this.#controller.isPreviewMode) {
-      this.#dialogRef.value!.show()
+      const dialog = this.#dialogRef.value!
+      dialog.inert = true
+      dialog.show()
+      dialog.inert = false
       return
     }
     this.#dialogRef.value!.showModal()

frontend/app/assets/images/landing/illustration_offerwall.svg

@@ -21,11 +21,12 @@ import {
 import { BannerAnimationSelector } from '~/components/banner/BannerAnimationSelector'
 import { BannerPositionSelector } from '~/components/banner/BannerPositionSelector'
 import { BannerThumbnailSelector } from '~/components/banner/BannerThumbnailSelector'
+import { useBuilderSectionHandlers } from '~/hooks/useBuilderSectionHandlers'
 import { useBannerProfile } from '~/stores/banner-store'
-import { useUIActions, useUIState } from '~/stores/uiStore'
+import type { BuilderSection } from '~/stores/uiStore'
 
 interface Props {
-  onRefresh: (section: 'content' | 'appearance') => void
+  onRefresh: (section: BuilderSection) => void
 }
 
 const config = {
@@ -56,25 +57,19 @@ export function BannerBuilder({ onRefresh }: Props) {
 }
 
 function ContentBuilder({ onRefresh }: Props) {
-  const uiState = useUIState()
-  const uiActions = useUIActions()
+  const { isComplete, isOpen, onClick, onToggle, onDone } =
+    useBuilderSectionHandlers('content')
   const [snap, profile] = useBannerProfile({ sync: true })
 
   return (
     <BuilderAccordion
       title="Content"
-      isComplete={uiState.contentComplete}
-      onToggle={(isOpen) => {
-        uiActions.setActiveSection(isOpen ? 'content' : null)
-        if (isOpen) {
-          uiActions.setContentComplete(true)
-        }
-      }}
+      isComplete={isComplete}
+      isOpen={isOpen}
+      onClick={onClick}
+      onToggle={onToggle}
       onRefresh={() => onRefresh('content')}
-      onDone={() => {
-        uiActions.setContentComplete(true)
-      }}
-      initialIsOpen={uiState.activeSection === 'content'}
+      onDone={onDone}
     >
       <TitleInput
         value={snap.title.text}
@@ -107,8 +102,8 @@ function ContentBuilder({ onRefresh }: Props) {
 }
 
 function AppearanceBuilder({ onRefresh }: Props) {
-  const uiState = useUIState()
-  const uiActions = useUIActions()
+  const { isComplete, isOpen, onClick, onToggle, onDone } =
+    useBuilderSectionHandlers('appearance')
   const [snap, profile] = useBannerProfile()
 
   const defaultFontIndex = FONT_FAMILY_OPTIONS.findIndex(
@@ -118,18 +113,12 @@ function AppearanceBuilder({ onRefresh }: Props) {
   return (
     <BuilderAccordion
       title="Appearance"
-      isComplete={uiState.appearanceComplete}
-      onToggle={(isOpen: boolean) => {
-        uiActions.setActiveSection(isOpen ? 'appearance' : null)
-        if (isOpen) {
-          uiActions.setAppearanceComplete(true)
-        }
-      }}
+      isComplete={isComplete}
+      isOpen={isOpen}
+      onClick={onClick}
+      onToggle={onToggle}
       onRefresh={() => onRefresh('appearance')}
-      onDone={() => {
-        uiActions.setAppearanceComplete(true)
-      }}
-      initialIsOpen={uiState.activeSection === 'appearance'}
+      onDone={onDone}
     >
       <InputFieldset label="Text" icon={<SVGText className="w-5 h-5" />}>
         <ToolsDropdown

frontend/app/assets/images/landing/illustration_wordpress_plugin.svg

@@ -7,7 +7,7 @@ import step3 from '~/assets/images/offerwall/illustration_offerwall_step3.svg'
 const StepArrow = () => (
   // adapts length to the container
   <div
-    className="flex h-[56px] w-[56px] shrink-0 rotate-90 items-center self-center xl:h-auto xl:w-[187px] xl:rotate-0"
+    className="flex h-[56px] w-[56px] shrink-0 rotate-90 items-center self-center xl:h-auto xl:w-[180px] xl:rotate-0"
     aria-hidden="true"
   >
     <div className="size-[10px] shrink-0 rounded-full bg-[#9CD6CB]" />
@@ -41,7 +41,7 @@ const Step: React.FC<StepProps> = ({
 export default function HowItWorks() {
   return (
     <section
-      className="flex max-w-[1280px] flex-col gap-2xl rounded-md px-md"
+      className="flex flex-col gap-2xl rounded-md px-md"
       aria-labelledby="how-it-works-heading"
     >
       <header className="flex flex-col items-center gap-md xl:items-start">
@@ -53,10 +53,8 @@ export default function HowItWorks() {
         </Heading4>
         <BodyStandard className="text-center xl:text-left">
           If you have a Google Ad Manager account you can add Web Monetization
-          to your Offerwall.
-          <br />
-          Customize the user choice screen here, then copy the generated script
-          and add it to your website.
+          to your Offerwall. Customize the user choice screen here, then copy
+          the generated script and add it to your website.
         </BodyStandard>
       </header>
 
@@ -76,7 +74,7 @@ export default function HowItWorks() {
         />
         <Step
           image={step3}
-          description="Start receiving support as users choose to use WM"
+          description="Start receiving support as users choose to use Web Monetization"
         />
       </ol>
     </section>

frontend/app/components/banner/BannerBuilder.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+import { subscribe } from 'valtio'
 import {
   Divider,
   ToolsDropdown,
@@ -14,7 +16,7 @@ import {
 import { SVGColorPicker, SVGRoundedCorner, SVGText } from '~/assets/svg'
 import { useOfferwallProfile } from '~/stores/offerwall-store'
 import { toolActions } from '~/stores/toolStore'
-import { useUIActions, useUIState } from '~/stores/uiStore'
+import { useUIState } from '~/stores/uiStore'
 
 interface Props {
   onRefresh: () => void
@@ -30,29 +32,25 @@ export function OfferwallBuilder({ onRefresh }: Props) {
 
 function AppearanceBuilder({ onRefresh }: Props) {
   const uiState = useUIState()
-  const uiActions = useUIActions()
   const [snap, profile] = useOfferwallProfile()
-
   const defaultFontIndex = FONT_FAMILY_OPTIONS.findIndex(
     (option) => option === snap.font.name,
   )
 
+  useEffect(() => {
+    const unsubscribe = subscribe(profile, () => {
+      toolActions.setBuildCompleteStep('filled')
+    })
+
+    return unsubscribe
+  }, [])
+
   return (
     <BuilderAccordion
       title="Appearance"
       isComplete={uiState.appearanceComplete}
-      onToggle={(isOpen: boolean) => {
-        if (!isOpen) {
-          uiActions.setAppearanceComplete(true)
-          toolActions.setBuildCompleteStep('filled')
-        }
-      }}
       onRefresh={onRefresh}
-      onDone={() => {
-        uiActions.setAppearanceComplete(true)
-        toolActions.setBuildCompleteStep('filled')
-      }}
-      initialIsOpen
+      isOpen
     >
       <InputFieldset label="Text" icon={<SVGText className="w-5 h-5" />}>
         <ToolsDropdown

frontend/app/components/offerwall/HowItWorks.tsx

@@ -18,7 +18,8 @@ export default function OfferwallPreview() {
   const snap = useSnapshot(toolState)
 
   const setCssVars = (elem: OfferwallModal, profile: OfferwallProfile) => {
-    applyFontFamily(elem, profile.font.name, TOOL_OFFERWALL, snap.cdnUrl)
+    const fontBaseUrl = new URL('/assets/fonts/', snap.cdnUrl).href
+    applyFontFamily(elem, profile.font.name, TOOL_OFFERWALL, fontBaseUrl)
 
     elem.style.setProperty(
       '--wm-border-radius',