chore(frontend): cleanup deprecated tool store logic (#613)

Author: DarianM

frontend/app/components/redesign/components/BuilderBackground.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import { cx } from 'class-variance-authority'
-import { useSnapshot } from 'valtio'
 import { ToolsSecondaryButton } from '@/components/ToolsSecondaryButton'
-import { SLIDE_ANIMATION } from '@shared/types'
-import { toolState } from '~/stores/toolStore'
 
 const DOT_PATTERN_SVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="2" fill="white" fill-opacity="0.5" /></svg>`
 
@@ -19,17 +16,15 @@ interface BuilderBackgroundProps {
   className?: string
   children?: React.ReactNode
   onPreviewClick?: () => void
+  isAnimationDisabled?: boolean
 }
 
 export const BuilderBackground: React.FC<BuilderBackgroundProps> = ({
   className = '',
   children,
   onPreviewClick,
+  isAnimationDisabled = false,
 }) => {
-  const snap = useSnapshot(toolState)
-  const isAnimationDisabled =
-    snap.currentConfig.bannerSlideAnimation === SLIDE_ANIMATION.None
-
   const createDotPattern = () => {
     return `data:image/svg+xml;base64,${btoa(DOT_PATTERN_SVG)}`
   }

frontend/app/components/redesign/components/dialogs/ScriptDialog.tsx

@@ -98,14 +98,14 @@ function getScriptAttributes(snapshot: {
   walletAddress: string
   walletAddressId: string
   currentToolType: string
-  activeVersion: string
+  activeTab: string
   cdnUrl: string
 }): ScriptAttribute[] {
   const {
     walletAddress,
     walletAddressId,
     currentToolType: tool,
-    activeVersion: profileId,
+    activeTab: profileId,
     cdnUrl,
   } = snapshot
 

frontend/app/routes/banner.tsx

@@ -18,6 +18,7 @@ import {
   MobileStepsIndicator,
   BuilderProfileTabs,
 } from '@/components'
+import { SLIDE_ANIMATION } from '@shared/types'
 import { BannerBuilder } from '~/components/banner/BannerBuilder'
 import {
   BannerPreview,
@@ -35,6 +36,7 @@ import {
   hydrateSnapshotsFromStorage,
   subscribeProfilesToStorage,
   subscribeProfilesToUpdates,
+  useBannerProfile,
 } from '~/stores/banner-store'
 import {
   toolState,
@@ -85,6 +87,7 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
 export default function Banner() {
   const snap = useSnapshot(toolState)
   const bannerSnap = useSnapshot(banner)
+  const [profile] = useBannerProfile()
   const navigate = useNavigate()
   const uiActions = useUIActions()
   const { save, saveLastAction } = useSaveProfile()
@@ -141,6 +144,7 @@ export default function Banner() {
     }
   }
 
+  const isAnimationDisabled = profile.animation.type === SLIDE_ANIMATION.None
   return (
     <div className="bg-interface-bg-main w-full">
       <div className="flex flex-col items-center pt-[60px] md:pt-3xl">
@@ -260,7 +264,10 @@ export default function Banner() {
                     id="preview"
                     className="w-full mx-auto xl:mx-0 xl:sticky xl:top-md xl:self-start xl:flex-shrink-0 xl:w-[504px] h-fit"
                   >
-                    <BuilderBackground onPreviewClick={handlePreviewClick}>
+                    <BuilderBackground
+                      onPreviewClick={handlePreviewClick}
+                      isAnimationDisabled={isAnimationDisabled}
+                    >
                       <BannerPreview ref={bannerRef} cdnUrl={snap.cdnUrl} />
                     </BuilderBackground>
                   </div>

frontend/app/stores/toolStore.ts

@@ -1,9 +1,6 @@
-import { proxy, subscribe, useSnapshot } from 'valtio'
-import { proxySet } from 'valtio/utils'
-import { getDefaultData } from '@shared/default-data'
+import { proxy, subscribe } from 'valtio'
 import { API_URL, CDN_URL } from '@shared/defines'
 import {
-  type ElementConfigType,
   type Tool,
   type ProfileId,
   type ToolProfiles,
@@ -13,7 +10,6 @@ import {
   PROFILE_A,
 } from '@shared/types'
 import type { StepStatus } from '~/components/redesign/components/StepsIndicator'
-import { APP_BASEPATH } from '~/lib/constants'
 import { actions as bannerActions } from '~/stores/banner-store'
 import { actions as offerwallActions } from '~/stores/offerwall-store'
 import { actions as widgetActions } from '~/stores/widget-store'
@@ -29,63 +25,10 @@ const EXCLUDED_FROM_STORAGE = new Set<keyof typeof toolState>([
   'cdnUrl',
 ])
 
-const STABLE_KEYS = ['version1', 'version2', 'version3'] as const
-const DEFAULT_VERSION_NAMES = [
-  'Default preset 1',
-  'Default preset 2',
-  'Default preset 3',
-] as const
-
-export type StableKey = (typeof STABLE_KEYS)[number]
-
-interface SaveConfigResponse {
-  grantRequired?: string
-  intent?: string
-  error?: string
-  [key: string]: unknown
-}
-
-const createDefaultConfig = (versionName: string): ElementConfigType => ({
-  ...getDefaultData(),
-  versionName,
-})
-
-/** @deprecated */
-export const createDefaultConfigs = (): Record<
-  StableKey,
-  ElementConfigType
-> => {
-  return STABLE_KEYS.reduce(
-    (configs, key, index) => {
-      configs[key] = createDefaultConfig(DEFAULT_VERSION_NAMES[index])
-      return configs
-    },
-    {} as Record<StableKey, ElementConfigType>,
-  )
-}
-
 export const toolState = proxy({
-  configurations: createDefaultConfigs(),
-  /*
-   * savedConfigurations: baseline configs.
-   * tracks the configurations that are saved persistently,
-   * used to compare against local modifications.
-   */
-  savedConfigurations: createDefaultConfigs(),
-  /*
-   * dirtyProfiles: tracks the configurations that are modified locally.
-   */
-  dirtyProfiles: proxySet<StableKey>(),
-  /** @deprecated */
-  activeVersion: 'version1' as StableKey,
   activeTab: PROFILE_A as ProfileId,
   currentToolType: 'unknown' as Tool,
 
-  /** always returns the active configuration */
-  get currentConfig() {
-    return this.configurations[this.activeVersion]
-  },
-
   // UI state
   lastSaveAction: 'save-success' as 'save-success' | 'script',
 
@@ -111,25 +54,7 @@ export const toolState = proxy({
   buildStep: 'unfilled' as StepStatus,
 })
 
-subscribe(toolState, () => {
-  updateChangesTracking(toolState.activeVersion)
-})
-
-export function useCurrentConfig(options?: {
-  sync: boolean
-}): [ElementConfigType, ElementConfigType] {
-  // https://github.com/pmndrs/valtio/issues/132
-  const snapshot = useSnapshot(toolState, options).currentConfig
-  return [snapshot, toolState.currentConfig]
-}
-
 export const toolActions = {
-  get versionOptions() {
-    return STABLE_KEYS.map((key) => ({
-      stableKey: key,
-      versionName: toolState.configurations[key].versionName,
-    }))
-  },
   setActiveTab(profileId: ProfileId) {
     toolState.activeTab = profileId
   },
@@ -174,31 +99,6 @@ export const toolActions = {
       actions.resetProfiles()
     }
   },
-  /** legacy backwards compatibility */
-  setConfigs: (
-    fullConfigObject: Record<StableKey, Partial<ElementConfigType>> | null,
-  ) => {
-    const newFullConfig: Record<StableKey, ElementConfigType> =
-      createDefaultConfigs()
-
-    STABLE_KEYS.forEach((profileId) => {
-      if (!fullConfigObject || !fullConfigObject[profileId]) {
-        return
-      }
-
-      newFullConfig[profileId] = {
-        ...newFullConfig[profileId],
-        ...fullConfigObject[profileId],
-      }
-
-      toolState.configurations[profileId] = { ...newFullConfig[profileId] }
-
-      toolState.savedConfigurations[profileId] = { ...newFullConfig[profileId] }
-    })
-
-    toolState.dirtyProfiles.clear()
-  },
-
   setCurrentToolType: (toolType: Tool) => {
     toolState.currentToolType = toolType
   },
@@ -238,108 +138,10 @@ export const toolActions = {
   setHasRemoteConfigs: (hasRemoteConfigs: boolean) => {
     toolState.hasRemoteConfigs = hasRemoteConfigs
   },
-
-  /**
-   * Checks if any local changes have been made to the configurations.
-   */
-  hasCustomEdits: (): boolean => toolState.dirtyProfiles.size > 0,
-  saveConfig: async () => {
-    if (!toolState.walletAddress) {
-      throw new Error('Wallet address is missing')
-    }
-
-    toolState.isSubmitting = true
-    try {
-      const configToSave = {
-        ...toolState.currentConfig,
-        walletAddress: toolState.walletAddress,
-      }
-
-      const formData = new FormData()
-
-      Object.entries(configToSave).forEach(([key, value]) => {
-        if (value !== undefined && value !== null && key !== 'walletAddress') {
-          formData.append(key, String(value))
-        }
-      })
-
-      formData.append('walletAddress', toolState.walletAddress)
-      formData.append('version', toolState.activeVersion)
-
-      const updatedFullConfig = {
-        ...toolState.configurations,
-        [toolState.activeVersion]: configToSave,
-      }
-
-      formData.append('fullconfig', JSON.stringify(updatedFullConfig))
-      formData.append('intent', 'update')
-
-      const baseUrl = location.origin + APP_BASEPATH
-      const url = new URL(`${baseUrl}/api/config/${toolState.currentToolType}`)
-      const response = await fetch(url, {
-        method: 'PUT',
-        body: formData,
-      })
-      if (!response.ok) {
-        const details = await response.json()
-        throw new Error(`Save request failed with status: ${response.status}`, {
-          cause: { details },
-        })
-      }
-
-      const data = (await response.json()) as SaveConfigResponse
-      if (data?.grantRequired) {
-        return { success: false, data }
-      }
-
-      STABLE_KEYS.forEach((profileId) => {
-        toolState.savedConfigurations[profileId] = {
-          ...toolState.configurations[profileId],
-        }
-      })
-      toolState.dirtyProfiles.clear()
-
-      return { success: true, data }
-    } catch (error) {
-      console.error('Save error:', error)
-      throw error
-    } finally {
-      toolState.isSubmitting = false
-    }
-  },
-
   setGrantResponse: (grantResponse: string, isGrantAccepted: boolean) => {
     toolState.grantResponse = grantResponse
     toolState.isGrantAccepted = isGrantAccepted
   },
-
-  handleTabSelect: (profileId: StableKey) => {
-    toolState.activeVersion = profileId
-  },
-
-  handleVersionNameChange: (newName: string) => {
-    toolState.currentConfig.versionName = newName
-  },
-}
-
-function isConfigModified(profileId: StableKey): boolean {
-  const currentConfig = toolState.configurations[profileId]
-  const savedConfig = toolState.savedConfigurations[profileId]
-
-  if (!currentConfig || !savedConfig) {
-    return false
-  }
-
-  return JSON.stringify(currentConfig) !== JSON.stringify(savedConfig)
-}
-
-function updateChangesTracking(profileId: StableKey) {
-  const isModified = isConfigModified(profileId)
-  if (isModified) {
-    toolState.dirtyProfiles.add(profileId)
-  } else {
-    toolState.dirtyProfiles.delete(profileId)
-  }
 }
 
 /** Load from localStorage on init, remove storage if invalid */
@@ -377,21 +179,9 @@ export function persistState() {
 }
 
 function createStorageState(state: typeof toolState) {
-  const omitted = omit(state, EXCLUDED_FROM_STORAGE)
-
-  return {
-    ...omitted,
-    dirtyProfiles: Array.from(state.dirtyProfiles),
-  }
+  return omit(state, EXCLUDED_FROM_STORAGE)
 }
 
 function parsedStorageData(parsed: Record<string, unknown>) {
-  const omitted = omit(parsed, EXCLUDED_FROM_STORAGE)
-
-  return {
-    ...omitted,
-    dirtyProfiles: proxySet<StableKey>(
-      Array.isArray(parsed.dirtyProfiles) ? parsed.dirtyProfiles : [],
-    ),
-  }
+  return omit(parsed, EXCLUDED_FROM_STORAGE)
 }