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

frontend/app/components/redesign/components/StepsIndicator.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { SVGGreenVector, SVGErrorVector } from '~/assets/svg'
+import type { StepStatus } from '~/stores/toolStore'
 
-export type StepStatus = 'unfilled' | 'filled' | 'error'
 type TextPosition = 'top' | 'bottom'
 
 interface StepProps {

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 {
@@ -11,16 +10,21 @@ import {
 import { SVGRefresh, SVGSpinner } from '~/assets/svg'
 import { useConnectWallet } from '~/hooks/useConnectWallet'
 import type { ElementErrors } from '~/lib/types'
-import { toolState, toolActions } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
+import type { WalletActions, WalletStore } from '~/stores/wallet-store'
 
 interface Props {
+  store: WalletStore
+  walletActions: WalletActions
   toolName: 'drawer banner' | 'payment widget' | 'offerwall experience'
 }
 
-export const ToolsWalletAddress = ({ toolName }: Props) => {
-  const snap = useSnapshot(toolState, { sync: true })
-  const { connect, disconnect } = useConnectWallet()
+export const ToolsWalletAddress = ({
+  store: snap,
+  walletActions,
+  toolName,
+}: Props) => {
+  const { connect, disconnect } = useConnectWallet(snap, walletActions)
   const uiActions = useUIActions()
   const [error, setError] = useState<ElementErrors>()
   const [isLoading, setIsLoading] = useState(false)
@@ -57,7 +61,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 +76,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,17 @@
 import React from 'react'
-import { useSnapshot } from 'valtio'
 import { ToolsSecondaryButton } from '@/components'
 import { Heading5, BodyEmphasis } from '@/typography'
-import { toolState } from '~/stores/toolStore'
 import { BaseDialog } from './BaseDialog'
 
 interface Props {
+  walletAddress: string
   grantRedirect: string
 }
 
-export const GrantConfirmationDialog: React.FC<Props> = ({ grantRedirect }) => {
-  const { walletAddress } = useSnapshot(toolState)
+export const GrantConfirmationDialog: React.FC<Props> = ({
+  walletAddress,
+  grantRedirect,
+}) => {
   return (
     <BaseDialog
       className="p-8 pb-4

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

@@ -10,15 +10,18 @@ import { PROFILE_IDS } from '@shared/types'
 import { useDialog } from '~/hooks/useDialog'
 import { toolActions } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
+import type { WalletActions } from '~/stores/wallet-store'
 import { BaseDialog } from './BaseDialog'
 
 interface Props {
+  walletActions: WalletActions
   fetchedConfigs?: ToolProfiles<Tool>
   currentLocalConfigs?: ToolProfiles<Tool>
   modifiedVersions?: readonly string[]
 }
 
 export const ProfilesDialog: React.FC<Props> = ({
+  walletActions,
   fetchedConfigs,
   currentLocalConfigs,
   modifiedVersions = [],
@@ -83,8 +86,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 +127,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 { toWalletAddressUrl } from '@shared/utils'
 import { toolState } from '~/stores/toolStore'
+import type { WalletStore } from '~/stores/wallet-store'
 import { BaseDialog } from './BaseDialog'
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'
 
@@ -12,9 +13,19 @@ interface ScriptAttribute {
   value: string
 }
 
-export const ScriptDialog: React.FC = () => {
+interface Props {
+  wallet: WalletStore
+}
+
+export const ScriptDialog: React.FC<Props> = ({ wallet }) => {
   const snap = useSnapshot(toolState)
-  const attributes = getScriptAttributes(snap)
+  const attributes = getScriptAttributes({
+    walletAddress: wallet.walletAddress,
+    walletAddressId: wallet.walletAddressId,
+    currentToolType: snap.currentToolType,
+    activeTab: snap.activeTab,
+    cdnUrl: snap.cdnUrl,
+  })
   const { isCopied, handleCopyClick } = useCopyToClipboard(
     toScriptHtml(attributes),
   )

frontend/app/hooks/useConnectWallet.tsx

@@ -7,6 +7,7 @@ import { banner } from '~/stores/banner-store'
 import { offerwall } from '~/stores/offerwall-store'
 import { toolActions, toolState } from '~/stores/toolStore'
 import { useUIActions } from '~/stores/uiStore'
+import type { WalletActions, WalletStore } from '~/stores/wallet-store'
 import { widget } from '~/stores/widget-store'
 
 function getLegacyOptions() {
@@ -34,7 +35,10 @@ function getLegacyOptions() {
   }
 }
 
-export const useConnectWallet = () => {
+export const useConnectWallet = (
+  wallet: WalletStore,
+  walletActions: WalletActions,
+) => {
   const [openDialog, closeDialog] = useDialog()
   const uiActions = useUIActions()
 
@@ -53,6 +57,7 @@ export const useConnectWallet = () => {
       if (options.hasConflicts) {
         openDialog(
           <ProfilesDialog
+            walletActions={walletActions}
             fetchedConfigs={fetchedProfiles}
             currentLocalConfigs={options.profiles}
             modifiedVersions={options.updates}
@@ -62,13 +67,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 +92,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/useSaveProfile.tsx

@@ -10,6 +10,7 @@ import { ApiError } from '~/lib/helpers'
 import { actions as bannerActions } from '~/stores/banner-store'
 import { actions as offerwallActions } from '~/stores/offerwall-store'
 import { toolState } from '~/stores/toolStore'
+import type { WalletStore } from '~/stores/wallet-store'
 import { actions as widgetActions } from '~/stores/widget-store'
 
 function getToolActions() {
@@ -25,7 +26,7 @@ function getToolActions() {
   }
 }
 
-export const useSaveProfile = () => {
+export const useSaveProfile = (wallet: WalletStore) => {
   const [openDialog, closeDialog] = useDialog()
 
   const save = useCallback(
@@ -37,7 +38,10 @@ export const useSaveProfile = () => {
 
         if (result.grantRedirect) {
           openDialog(
-            <GrantConfirmationDialog grantRedirect={result.grantRedirect} />,
+            <GrantConfirmationDialog
+              walletAddress={wallet.walletAddress}
+              grantRedirect={result.grantRedirect}
+            />,
           )
           return
         }
@@ -46,7 +50,7 @@ export const useSaveProfile = () => {
           actions.commitProfile()
 
           if (action === 'script') {
-            openDialog(<ScriptDialog />)
+            openDialog(<ScriptDialog wallet={wallet} />)
           } else {
             openDialog(<StatusDialog onDone={closeDialog} />)
           }

frontend/app/hooks/useToolWallet.ts

@@ -0,0 +1,12 @@
+import { useSnapshot } from 'valtio'
+import type { WalletActions, WalletStore } from '~/stores/wallet-store'
+
+type WalletBundle = { wallet: WalletStore; actions: WalletActions }
+
+export function useToolWallet(
+  { wallet, actions }: WalletBundle,
+  options?: { sync: boolean },
+): [WalletStore, WalletActions] {
+  const snap = useSnapshot(wallet, options)
+  return [snap, actions]
+}

frontend/app/routes/banner.tsx

@@ -29,11 +29,16 @@ 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,
+  bannerWallet,
+  bannerWalletActions,
   hydrateProfilesFromStorage,
   hydrateSnapshotsFromStorage,
+  loadBannerWallet,
+  persistBannerWallet,
   subscribeProfilesToStorage,
   subscribeProfilesToUpdates,
   useBannerProfile,
@@ -86,11 +91,15 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
 
 export default function Banner() {
   const snap = useSnapshot(toolState)
+  const [walletSnap, walletActions] = useToolWallet({
+    wallet: bannerWallet,
+    actions: bannerWalletActions,
+  })
   const bannerSnap = useSnapshot(banner)
   const [profile] = useBannerProfile()
   const navigate = useNavigate()
   const uiActions = useUIActions()
-  const { save, saveLastAction } = useSaveProfile()
+  const { save, saveLastAction } = useSaveProfile(bannerWallet)
   const { walletAddressRef, scrollToWalletAddress } = useScrollToWalletAddress()
   const [isLoading, setIsLoading] = useState(false)
   const [isLoadingScript, setIsLoadingScript] = useState(false)
@@ -109,6 +118,8 @@ export default function Banner() {
 
     loadState(OP_WALLET_ADDRESS)
     persistState()
+    loadBannerWallet()
+    persistBannerWallet()
 
     return () => {
       unsubscribeStorage()
@@ -121,8 +132,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 +178,7 @@ export default function Banner() {
                     {
                       number: 1,
                       label: 'Connect',
-                      status: snap.walletConnectStep,
+                      status: walletSnap.walletConnectStep,
                     },
                     {
                       number: 2,
@@ -183,9 +194,13 @@ export default function Banner() {
                   <MobileStepsIndicator
                     number={1}
                     label="Connect"
-                    status={snap.walletConnectStep}
+                    status={walletSnap.walletConnectStep}
+                  />
+                  <ToolsWalletAddress
+                    store={walletSnap}
+                    walletActions={walletActions}
+                    toolName="drawer banner"
                   />
-                  <ToolsWalletAddress toolName="drawer banner" />
                 </div>
 
                 <div className="flex flex-col xl:flex-row gap-2xl">