feat(hooks-store): add dapp id to hook callData (#4920)

apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/index.tsx

@@ -3,16 +3,16 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import ICON_HOOK from '@cowprotocol/assets/cow-swap/hook.svg'
 import { Command } from '@cowprotocol/types'
 import { BannerOrientation, DismissableInlineBanner } from '@cowprotocol/ui'
-import { useIsSmartContractWallet, useWalletInfo } from '@cowprotocol/wallet'
+import { useIsSmartContractWallet } from '@cowprotocol/wallet'
 
 import { NewModal } from 'common/pure/NewModal'
 
 import { EmptyList, HookDappsList, Wrapper } from './styled'
 
-import { POST_HOOK_REGISTRY, PRE_HOOK_REGISTRY } from '../../hookRegistry'
 import { useAddCustomHookDapp } from '../../hooks/useAddCustomHookDapp'
 import { useCustomHookDapps } from '../../hooks/useCustomHookDapps'
 import { useHookById } from '../../hooks/useHookById'
+import { useInternalHookDapps } from '../../hooks/useInternalHookDapps'
 import { useRemoveCustomHookDapp } from '../../hooks/useRemoveCustomHookDapp'
 import { AddCustomHookForm } from '../../pure/AddCustomHookForm'
 import { HookDappDetails } from '../../pure/HookDappDetails'
@@ -31,7 +31,6 @@ interface HookStoreModal {
 }
 
 export function HookRegistryList({ onDismiss, isPreHook, hookToEdit }: HookStoreModal) {
-  const { chainId } = useWalletInfo()
   const [selectedDapp, setSelectedDapp] = useState<HookDapp | null>(null)
   const [dappDetails, setDappDetails] = useState<HookDapp | null>(null)
 
@@ -51,9 +50,7 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit }: HookStore
     setSearchQuery('')
   }, [])
 
-  const internalHookDapps = useMemo(() => {
-    return (isPreHook ? PRE_HOOK_REGISTRY[chainId] : POST_HOOK_REGISTRY[chainId]) || []
-  }, [isPreHook, chainId])
+  const internalHookDapps = useInternalHookDapps(isPreHook)
 
   const currentDapps = useMemo(() => {
     return isAllHooksTab ? internalHookDapps.concat(customHookDapps) : customHookDapps

apps/cowswap-frontend/src/modules/hooksStore/dapps/ClaimGnoHookApp/const.ts

@@ -1 +1,9 @@
+import { SBCDepositContract as SBCDepositContractType, SBCDepositContractAbi } from '@cowprotocol/abis'
+import { Contract } from '@ethersproject/contracts'
+
 export const SBC_DEPOSIT_CONTRACT_ADDRESS = '0x0B98057eA310F4d31F2a452B414647007d1645d9'
+
+export const SBCDepositContract = new Contract(
+  SBC_DEPOSIT_CONTRACT_ADDRESS,
+  SBCDepositContractAbi,
+) as SBCDepositContractType

apps/cowswap-frontend/src/modules/hooksStore/dapps/ClaimGnoHookApp/index.tsx

@@ -1,17 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { ButtonPrimary } from '@cowprotocol/ui'
 import { UI } from '@cowprotocol/ui'
+import { useWalletProvider } from '@cowprotocol/wallet-provider'
 import { BigNumber } from '@ethersproject/bignumber'
 
 import { formatUnits } from 'ethers/lib/utils'
 
-import { SBC_DEPOSIT_CONTRACT_ADDRESS } from './const'
-import { useSBCDepositContract } from './useSBCDepositContract'
+import { SBC_DEPOSIT_CONTRACT_ADDRESS, SBCDepositContract } from './const'
 
 import { HookDappProps } from '../../types/hooks'
 import { ContentWrapper, Text, LoadingLabel, Wrapper } from '../styled'
 
+const SbcDepositContractInterface = SBCDepositContract.interface
+
 /**
  * Dapp that creates the hook to the connected wallet GNO Rewards.
  *
@@ -20,42 +23,44 @@ import { ContentWrapper, Text, LoadingLabel, Wrapper } from '../styled'
  *    - Master: 0x4fef25519256e24a1fc536f7677152da742fe3ef
  */
 export function ClaimGnoHookApp({ context }: HookDappProps) {
-  const SbcDepositContract = useSBCDepositContract()
+  const provider = useWalletProvider()
   const [claimable, setClaimable] = useState<BigNumber | undefined>(undefined)
   const [gasLimit, setGasLimit] = useState<BigNumber | undefined>(undefined)
   const [error, setError] = useState<boolean>(false)
 
   const loading = (!gasLimit || !claimable) && !error
 
-  const SbcDepositContractInterface = SbcDepositContract?.interface
+  const account = context?.account
+
   const callData = useMemo(() => {
-    if (!SbcDepositContractInterface || !context?.account) {
+    if (!account) {
       return null
     }
 
-    return SbcDepositContractInterface.encodeFunctionData('claimWithdrawal', [context.account])
-  }, [SbcDepositContractInterface, context])
+    return SbcDepositContractInterface.encodeFunctionData('claimWithdrawal', [account])
+  }, [context])
 
   useEffect(() => {
-    if (!SbcDepositContract || !context?.account) {
+    if (!account || !provider) {
       return
     }
+
     const handleError = (e: any) => {
       console.error('[ClaimGnoHookApp] Error getting balance/gasEstimation', e)
       setError(true)
     }
 
     // Get balance
-    SbcDepositContract.withdrawableAmount(context.account)
+    SBCDepositContract.connect(provider)
+      .withdrawableAmount(account)
       .then((claimable) => {
         console.log('[ClaimGnoHookApp] get claimable', claimable)
         setClaimable(claimable)
       })
       .catch(handleError)
 
-    // Get gas estimation
-    SbcDepositContract.estimateGas.claimWithdrawal(context.account).then(setGasLimit).catch(handleError)
-  }, [SbcDepositContract, setClaimable, context])
+    SBCDepositContract.connect(provider).estimateGas.claimWithdrawal(account).then(setGasLimit).catch(handleError)
+  }, [setClaimable, account, provider])
 
   const clickOnAddHook = useCallback(() => {
     if (!callData || !gasLimit || !context || !claimable) {
@@ -85,9 +90,9 @@ export function ClaimGnoHookApp({ context }: HookDappProps) {
   return (
     <Wrapper>
       <ContentWrapper>
-        {!SbcDepositContractInterface ? (
+        {context.chainId !== SupportedChainId.GNOSIS_CHAIN ? (
           'Unsupported network. Please change to Gnosis Chain'
-        ) : !context?.account ? (
+        ) : !account ? (
           'Connect your wallet first'
         ) : (
           <>

apps/cowswap-frontend/src/modules/hooksStore/hookRegistry.tsx

@@ -1,21 +1,26 @@
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { hookDappsRegistry } from '@cowprotocol/hook-dapp-lib'
 
-import { AIRDROP_HOOK_APP } from './dapps/AirdropHookApp/hook'
-import { PRE_BUILD, POST_BUILD } from './dapps/BuildHookApp/hook'
-import { PRE_CLAIM_GNO } from './dapps/ClaimGnoHookApp/hook'
-import { PERMIT_HOOK } from './dapps/PermitHookApp/hook'
+import { AirdropHookApp } from './dapps/AirdropHookApp'
+import { BuildHookApp } from './dapps/BuildHookApp'
+import { ClaimGnoHookApp } from './dapps/ClaimGnoHookApp'
+import { PermitHookApp } from './dapps/PermitHookApp'
 import { HookDapp } from './types/hooks'
 
-export const PRE_HOOK_REGISTRY: Record<SupportedChainId, HookDapp[]> = {
-  [SupportedChainId.MAINNET]: [PRE_BUILD],
-  [SupportedChainId.GNOSIS_CHAIN]: [PRE_CLAIM_GNO, PRE_BUILD],
-  [SupportedChainId.SEPOLIA]: [PRE_BUILD, PERMIT_HOOK, AIRDROP_HOOK_APP],
-  [SupportedChainId.ARBITRUM_ONE]: [PRE_BUILD],
-}
-
-export const POST_HOOK_REGISTRY: Record<SupportedChainId, HookDapp[]> = {
-  [SupportedChainId.MAINNET]: [POST_BUILD],
-  [SupportedChainId.GNOSIS_CHAIN]: [POST_BUILD],
-  [SupportedChainId.SEPOLIA]: [POST_BUILD, AIRDROP_HOOK_APP, PERMIT_HOOK],
-  [SupportedChainId.ARBITRUM_ONE]: [POST_BUILD],
-}
+export const ALL_HOOK_DAPPS = [
+  {
+    ...hookDappsRegistry.BUILD_CUSTOM_HOOK,
+    component: (props) => <BuildHookApp {...props} />,
+  },
+  {
+    ...hookDappsRegistry.CLAIM_GNO_FROM_VALIDATORS,
+    component: (props) => <ClaimGnoHookApp {...props} />,
+  },
+  {
+    ...hookDappsRegistry.PERMIT_TOKEN,
+    component: (props) => <PermitHookApp {...props} />,
+  },
+  {
+    ...hookDappsRegistry.CLAIM_COW_AIRDROP,
+    component: (props) => <AirdropHookApp {...props} />,
+  },
+] as HookDapp[]

apps/cowswap-frontend/src/modules/hooksStore/hooks/useAddHook.ts

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 import { setHooksAtom } from '../state/hookDetailsAtom'
 import { AddHook, CowHookDetailsSerialized, HookDapp } from '../types/hooks'
-import { getHookDappId } from '../utils'
+import { appendDappIdToCallData } from '../utils'
 
 export function useAddHook(dapp: HookDapp, isPreHook: boolean): AddHook {
   const updateHooks = useSetAtom(setHooksAtom)
@@ -16,8 +16,15 @@ export function useAddHook(dapp: HookDapp, isPreHook: boolean): AddHook {
 
       const uuid = uuidv4()
       const hookDetails: CowHookDetailsSerialized = {
-        hookDetails: { ...hookToAdd, uuid },
-        dappId: getHookDappId(dapp),
+        hookDetails: {
+          ...hookToAdd,
+          uuid,
+          hook: {
+            ...hookToAdd.hook,
+            callData: appendDappIdToCallData(hookToAdd.hook.callData, dapp.id),
+          },
+        },
+        dappId: dapp.id,
       }
 
       updateHooks((hooks) => {

apps/cowswap-frontend/src/modules/hooksStore/hooks/useAllHookDapps.ts

@@ -1,17 +1,15 @@
 import { useMemo } from 'react'
 
-import { useWalletInfo } from '@cowprotocol/wallet'
-
 import { useCustomHookDapps } from './useCustomHookDapps'
+import { useInternalHookDapps } from './useInternalHookDapps'
 
-import { POST_HOOK_REGISTRY, PRE_HOOK_REGISTRY } from '../hookRegistry'
 import { HookDapp } from '../types/hooks'
 
 export function useAllHookDapps(isPreHook: boolean): HookDapp[] {
-  const { chainId } = useWalletInfo()
+  const internalHookDapps = useInternalHookDapps(isPreHook)
   const customHookDapps = useCustomHookDapps(isPreHook)
 
   return useMemo(() => {
-    return (isPreHook ? PRE_HOOK_REGISTRY : POST_HOOK_REGISTRY)[chainId].concat(customHookDapps)
-  }, [customHookDapps, chainId])
+    return internalHookDapps.concat(customHookDapps)
+  }, [customHookDapps, internalHookDapps])
 }

apps/cowswap-frontend/src/modules/hooksStore/hooks/useEditHook.ts

@@ -5,6 +5,7 @@ import { CowHookDetails } from '@cowprotocol/hook-dapp-lib'
 
 import { setHooksAtom } from '../state/hookDetailsAtom'
 import { EditHook } from '../types/hooks'
+import { appendDappIdToCallData } from '../utils'
 
 export function useEditHook(isPreHook: boolean): EditHook {
   const updateHooks = useSetAtom(setHooksAtom)
@@ -18,9 +19,17 @@ export function useEditHook(isPreHook: boolean): EditHook {
         if (hookIndex < 0) return state
 
         const typeState = [...state[type]]
+        const hookDetails = typeState[hookIndex]
+
         typeState[hookIndex] = {
-          ...typeState[hookIndex],
-          hookDetails: update,
+          ...hookDetails,
+          hookDetails: {
+            ...update,
+            hook: {
+              ...update.hook,
+              callData: appendDappIdToCallData(update.hook.callData, hookDetails.dappId),
+            },
+          },
         }
 
         return {