fix(frontend)!: independent wallet store for each tool

frontend/app/components/redesign/components/ToolsWalletAddress.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { cx } from 'class-variance-authority'
-import { useSnapshot } from 'valtio'
 import { ToolsSecondaryButton, InputField, Tooltip } from '@/components'
 import { Heading5 } from '@/typography'
 import {
@@ -10,16 +9,16 @@ import {
 } from '@shared/utils'
 import { SVGRefresh, SVGSpinner } from '~/assets/svg'
 import { useConnectWallet } from '~/hooks/useConnectWallet'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import type { ElementErrors } from '~/lib/types'
-import { toolState, toolActions } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
 
 interface Props {
   toolName: 'drawer banner' | 'payment widget' | 'offerwall experience'
 }
 
 export const ToolsWalletAddress = ({ toolName }: Props) => {
-  const snap = useSnapshot(toolState, { sync: true })
+  const [snap, walletActions] = useToolWallet()
   const { connect, disconnect } = useConnectWallet()
   const uiActions = useUIActions()
   const [error, setError] = useState<ElementErrors>()
@@ -57,7 +56,7 @@ export const ToolsWalletAddress = ({ toolName }: Props) => {
       )
 
       const walletAddressInfo = await getWalletAddress(walletAddressUrl)
-      toolActions.setWalletAddressId(walletAddressInfo.id)
+      walletActions.setWalletAddressId(walletAddressInfo.id)
       await connect()
     } catch (error) {
       setError({
@@ -72,10 +71,10 @@ export const ToolsWalletAddress = ({ toolName }: Props) => {
   const handleWalletAddressChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    toolActions.setWalletAddress(e.target.value)
+    walletActions.setWalletAddress(e.target.value)
 
     if (snap.walletConnectStep !== 'unfilled') {
-      toolActions.setConnectWalletStep('unfilled')
+      walletActions.setConnectWalletStep('unfilled')
     }
     if (error) {
       setError(undefined)

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

@@ -1,16 +1,16 @@
 import React from 'react'
-import { useSnapshot } from 'valtio'
 import { ToolsSecondaryButton } from '@/components'
 import { Heading5, BodyEmphasis } from '@/typography'
-import { toolState } from '~/stores/toolStore'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import { BaseDialog } from './BaseDialog'
 
 interface Props {
   grantRedirect: string
 }
 
 export const GrantConfirmationDialog: React.FC<Props> = ({ grantRedirect }) => {
-  const { walletAddress } = useSnapshot(toolState)
+  const [walletSnap] = useToolWallet()
+  const { walletAddress } = walletSnap
   return (
     <BaseDialog
       className="p-8 pb-4

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

@@ -8,6 +8,7 @@ import {
 import type { Tool, ToolProfiles } from '@shared/types'
 import { PROFILE_IDS } from '@shared/types'
 import { useDialog } from '~/hooks/useDialog'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import { toolActions } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
 import { BaseDialog } from './BaseDialog'
@@ -26,6 +27,7 @@ export const ProfilesDialog: React.FC<Props> = ({
   const [isOverriding, setIsOverriding] = useState(false)
   const uiActions = useUIActions()
   const [, closeDialog] = useDialog()
+  const [, walletActions] = useToolWallet()
   const generatedConfigs = React.useMemo(() => {
     if (!fetchedConfigs || !currentLocalConfigs) {
       return []
@@ -83,8 +85,8 @@ export const ProfilesDialog: React.FC<Props> = ({
   })
 
   const onAddWalletAddress = () => {
-    toolActions.setWalletConnected(false)
-    toolActions.setHasRemoteConfigs(false)
+    walletActions.setWalletConnected(false)
+    walletActions.setHasRemoteConfigs(false)
     uiActions.focusWalletInput()
     closeDialog()
   }
@@ -124,8 +126,8 @@ export const ProfilesDialog: React.FC<Props> = ({
       toolActions.setToolProfiles<Tool>(mergedProfiles)
       closeDialog()
 
-      toolActions.setHasRemoteConfigs(true)
-      toolActions.setWalletConnected(true)
+      walletActions.setHasRemoteConfigs(true)
+      walletActions.setWalletConnected(true)
     } catch (error) {
       console.error('Error overriding configurations:', error)
     } finally {

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

@@ -4,6 +4,7 @@ import { SVGMarkStatusSmall, SVGTooltip } from '@/assets'
 import { ToolsPrimaryButton } from '@/components'
 import { TOOL_OFFERWALL } from '@shared/types'
 import { toWalletAddressUrl } from '@shared/utils'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import { toolState } from '~/stores/toolStore'
 import { BaseDialog } from './BaseDialog'
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'
@@ -15,7 +16,14 @@ interface ScriptAttribute {
 
 export const ScriptDialog: React.FC = () => {
   const snap = useSnapshot(toolState)
-  const attributes = getScriptAttributes(snap)
+  const [walletSnap] = useToolWallet()
+  const attributes = getScriptAttributes({
+    walletAddress: walletSnap.walletAddress,
+    walletAddressId: walletSnap.walletAddressId,
+    currentToolType: snap.currentToolType,
+    activeTab: snap.activeTab,
+    cdnUrl: snap.cdnUrl,
+  })
   const { isCopied, handleCopyClick } = useCopyToClipboard(
     toScriptHtml(attributes),
   )

frontend/app/hooks/useConnectWallet.tsx

@@ -8,6 +8,7 @@ import { offerwall } from '~/stores/offerwall-store'
 import { toolActions, toolState } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
 import { widget } from '~/stores/widget-store'
+import { useToolWallet } from './useToolWallet'
 
 function getLegacyOptions() {
   //TODO: refactor ProfilesDialog and remove legacy options
@@ -37,6 +38,7 @@ function getLegacyOptions() {
 export const useConnectWallet = () => {
   const [openDialog, closeDialog] = useDialog()
   const uiActions = useUIActions()
+  const [, walletActions] = useToolWallet()
 
   const resetWalletUIState = useCallback(() => {
     toolActions.setActiveTab(PROFILE_A)
@@ -62,13 +64,13 @@ export const useConnectWallet = () => {
       }
 
       toolActions.setToolProfiles(fetchedProfiles)
-      toolActions.setHasRemoteConfigs(true)
-      toolActions.setWalletConnected(true)
+      walletActions.setHasRemoteConfigs(true)
+      walletActions.setWalletConnected(true)
       resetWalletUIState()
     } catch (err) {
       if (err instanceof ApiError && err.status === 404) {
-        toolActions.setHasRemoteConfigs(false)
-        toolActions.setWalletConnected(true)
+        walletActions.setHasRemoteConfigs(false)
+        walletActions.setWalletConnected(true)
         return
       }
 
@@ -87,15 +89,16 @@ export const useConnectWallet = () => {
       )
       throw err
     }
-  }, [openDialog, resetWalletUIState])
+  }, [openDialog, resetWalletUIState, walletActions])
 
   const disconnect = useCallback(() => {
-    toolActions.resetProfiles()
-    toolActions.setWalletConnected(false)
-    toolActions.setHasRemoteConfigs(false)
+    toolActions.resetToolProfiles()
+    walletActions.setWalletConnected(false)
+    walletActions.setHasRemoteConfigs(false)
+    walletActions.clearWalletStorage()
     resetWalletUIState()
     uiActions.focusWalletInput()
-  }, [uiActions, resetWalletUIState])
+  }, [uiActions, resetWalletUIState, walletActions])
 
   return { connect, disconnect }
 }

frontend/app/hooks/useGrantResponseHandler.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { StatusDialog } from '@/components'
 import { useDialog } from '~/hooks/useDialog'
-import { toolActions } from '~/stores/toolStore'
 
 interface UseGrantResponseHandlerOptions {
   onGrantSuccess: () => void | Promise<unknown>
@@ -19,14 +18,11 @@ export const useGrantResponseHandler = (
     if (!isGrantResponse) return
 
     const handleGrantResponse = async () => {
-      toolActions.setGrantResponse(grantResponse, isGrantAccepted)
-
       if (!isGrantAccepted) {
-        const errorMessage = 'Grant was not accepted'
         openDialog(
           <StatusDialog
             onDone={closeDialog}
-            message={errorMessage}
+            message={grantResponse}
             status="error"
           />,
         )

frontend/app/hooks/useToolWallet.ts

@@ -0,0 +1,35 @@
+import { useLocation } from 'react-router'
+import { useSnapshot } from 'valtio'
+import { TOOL_BANNER, TOOL_OFFERWALL, TOOL_WIDGET } from '@shared/types'
+import { bannerWallet, bannerWalletActions } from '~/stores/banner-store'
+import {
+  offerwallWallet,
+  offerwallWalletActions,
+} from '~/stores/offerwall-store'
+import type { WalletActions, WalletStore } from '~/stores/wallet-store'
+import { widgetWallet, widgetWalletActions } from '~/stores/widget-store'
+
+function getWalletStore(): [WalletStore, WalletActions] {
+  const { pathname } = useLocation()
+  const tool = pathname.split('/')[1]
+
+  switch (tool) {
+    case TOOL_WIDGET:
+      return [widgetWallet, widgetWalletActions]
+    case TOOL_OFFERWALL:
+      return [offerwallWallet, offerwallWalletActions]
+    case TOOL_BANNER:
+      return [bannerWallet, bannerWalletActions]
+
+    default:
+      throw new Error(`Unknown tool type: ${tool}`)
+  }
+}
+
+export function useToolWallet(options?: {
+  sync: boolean
+}): [WalletStore, WalletActions] {
+  const [walletProxy, actions] = getWalletStore()
+  const snap = useSnapshot(walletProxy, options)
+  return [snap, actions]
+}

frontend/app/routes/banner.tsx

@@ -29,11 +29,14 @@ import { useGrantResponseHandler } from '~/hooks/useGrantResponseHandler'
 import { usePathTracker } from '~/hooks/usePathTracker'
 import { useSaveProfile } from '~/hooks/useSaveProfile'
 import { useScrollToWalletAddress } from '~/hooks/useScrollToWalletAddress'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import {
   actions,
   banner,
   hydrateProfilesFromStorage,
   hydrateSnapshotsFromStorage,
+  loadBannerWallet,
+  persistBannerWallet,
   subscribeProfilesToStorage,
   subscribeProfilesToUpdates,
   useBannerProfile,
@@ -86,6 +89,7 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
 
 export default function Banner() {
   const snap = useSnapshot(toolState)
+  const [walletSnap, walletActions] = useToolWallet()
   const bannerSnap = useSnapshot(banner)
   const [profile] = useBannerProfile()
   const navigate = useNavigate()
@@ -109,6 +113,8 @@ export default function Banner() {
 
     loadState(OP_WALLET_ADDRESS)
     persistState()
+    loadBannerWallet()
+    persistBannerWallet()
 
     return () => {
       unsubscribeStorage()
@@ -121,8 +127,8 @@ export default function Banner() {
   })
 
   const handleSave = async (action: 'save-success' | 'script') => {
-    if (!snap.isWalletConnected) {
-      toolActions.setConnectWalletStep('error')
+    if (!walletSnap.isWalletConnected) {
+      walletActions.setConnectWalletStep('error')
       scrollToWalletAddress()
       return
     }
@@ -167,7 +173,7 @@ export default function Banner() {
                     {
                       number: 1,
                       label: 'Connect',
-                      status: snap.walletConnectStep,
+                      status: walletSnap.walletConnectStep,
                     },
                     {
                       number: 2,
@@ -183,7 +189,7 @@ export default function Banner() {
                   <MobileStepsIndicator
                     number={1}
                     label="Connect"
-                    status={snap.walletConnectStep}
+                    status={walletSnap.walletConnectStep}
                   />
                   <ToolsWalletAddress toolName="drawer banner" />
                 </div>

frontend/app/routes/offerwall.tsx

@@ -27,11 +27,14 @@ import { useGrantResponseHandler } from '~/hooks/useGrantResponseHandler'
 import { usePathTracker } from '~/hooks/usePathTracker'
 import { useSaveProfile } from '~/hooks/useSaveProfile'
 import { useScrollToWalletAddress } from '~/hooks/useScrollToWalletAddress'
+import { useToolWallet } from '~/hooks/useToolWallet'
 import {
   actions,
   hydrateProfilesFromStorage,
   hydrateSnapshotsFromStorage,
+  loadOfferwallWallet,
   offerwall,
+  persistOfferwallWallet,
   subscribeProfilesToStorage,
   subscribeProfilesToUpdates,
 } from '~/stores/offerwall-store'
@@ -82,6 +85,7 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
 
 export default function Offerwall() {
   const snap = useSnapshot(toolState)
+  const [walletSnap, walletActions] = useToolWallet()
   const offerwallSnap = useSnapshot(offerwall)
   const navigate = useNavigate()
   const { save, saveLastAction } = useSaveProfile()
@@ -101,6 +105,8 @@ export default function Offerwall() {
 
     loadState(OP_WALLET_ADDRESS)
     persistState()
+    loadOfferwallWallet()
+    persistOfferwallWallet()
 
     return () => {
       unsubscribeStorage()
@@ -113,8 +119,8 @@ export default function Offerwall() {
   })
 
   const handleSave = async (action: 'save-success' | 'script') => {
-    if (!snap.isWalletConnected) {
-      toolActions.setConnectWalletStep('error')
+    if (!walletSnap.isWalletConnected) {
+      walletActions.setConnectWalletStep('error')
       scrollToWalletAddress()
       return
     }
@@ -156,7 +162,7 @@ export default function Offerwall() {
                     {
                       number: 1,
                       label: 'Connect',
-                      status: snap.walletConnectStep,
+                      status: walletSnap.walletConnectStep,
                     },
                     {
                       number: 2,
@@ -172,7 +178,7 @@ export default function Offerwall() {
                   <MobileStepsIndicator
                     number={1}
                     label="Connect"
-                    status={snap.walletConnectStep}
+                    status={walletSnap.walletConnectStep}
                   />
                   <ToolsWalletAddress toolName="offerwall experience" />
                 </div>