refactor(hooks-store): use readable string as hook-dapp id (#5093)

Co-authored-by: Anxo Rodriguez <[email protected]>

Author: shoom3301

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

@@ -1,29 +1,24 @@
-import { hookDappsRegistry } from '@cowprotocol/hook-dapp-lib'
+import { HookDappBase, hookDappsRegistry } from '@cowprotocol/hook-dapp-lib'
 
 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'
+import { HookDapp, HookDappInternal } from './types/hooks'
 
-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} />,
-  },
-  hookDappsRegistry.COW_AMM_WITHDRAW,
-  hookDappsRegistry.CLAIM_LLAMAPAY_VESTING,
-  hookDappsRegistry.CREATE_LLAMAPAY_VESTING
-] as HookDapp[]
+const HOOK_DAPPS_OVERRIDES: Record<string, Partial<HookDappInternal>> = {
+  BUILD_CUSTOM_HOOK: { component: (props) => <BuildHookApp {...props} /> },
+  CLAIM_GNO_FROM_VALIDATORS: { component: (props) => <ClaimGnoHookApp {...props} /> },
+  PERMIT_TOKEN: { component: (props) => <PermitHookApp {...props} /> },
+  CLAIM_COW_AIRDROP: { component: (props) => <AirdropHookApp {...props} /> },
+}
+
+export const ALL_HOOK_DAPPS = Object.keys(hookDappsRegistry).map((id) => {
+  const item = (hookDappsRegistry as Record<string, Omit<HookDappBase, 'id'>>)[id]
+
+  return {
+    ...item,
+    ...HOOK_DAPPS_OVERRIDES[id],
+    id,
+  }
+}) as HookDapp[]

libs/hook-dapp-lib/src/hookDappsRegistry.json

@@ -1,6 +1,5 @@
 {
   "BUILD_CUSTOM_HOOK": {
-    "id": "c768665aa144bcf18c14eea0249b6322050e5daeba046d7e94df743a2e504586",
     "type": "INTERNAL",
     "name": "Build your own hook",
     "descriptionShort": "Call any smart contract with your own parameters",
@@ -10,7 +9,6 @@
     "website": "https://docs.cow.fi/cow-protocol/tutorials/hook-dapp"
   },
   "CLAIM_GNO_FROM_VALIDATORS": {
-    "id": "ee4a6b1065cda592972b9ff7448ec111f29a566f137fef101ead7fbf8b01dd0b",
     "type": "INTERNAL",
     "name": "Claim GNO from validators",
     "descriptionShort": "Withdraw rewards from your Gnosis validators.",
@@ -24,7 +22,6 @@
     }
   },
   "PERMIT_TOKEN": {
-    "id": "1db4bacb661a90fb6b475fd5b585acba9745bc373573c65ecc3e8f5bfd5dee1f",
     "type": "INTERNAL",
     "name": "Permit a token",
     "descriptionShort": "Infinite permit an address to spend one token on your behalf.",
@@ -38,7 +35,6 @@
     }
   },
   "CLAIM_COW_AIRDROP": {
-    "id": "40ed08569519f3b58c410ba35a8e684612663a7c9b58025e0a9c3a54551fb0ff",
     "type": "INTERNAL",
     "name": "Claim COW Airdrop",
     "descriptionShort": "Retrieve COW tokens before or after a swap.",
@@ -51,7 +47,6 @@
     }
   },
   "COW_AMM_WITHDRAW": {
-    "id": "5dc71fa5829d976c462bdf37b38b6fd9bbc289252a5a18e61525f8c8a3c775df",
     "name": "CoW AMM Withdraw Liquidity",
     "type": "IFRAME",
     "descriptionShort": "Remove liquidity from a CoW AMM pool before the swap",
@@ -67,7 +62,6 @@
     }
   },
   "CLAIM_LLAMAPAY_VESTING": {
-    "id": "5d2c081d11a01ca0b76e2fafbc0d3c62a4c9945ce404706fb1e49e826c0f99eb",
     "type": "IFRAME",
     "name": "Claim LlamaPay Vesting Hook",
     "description": "The Claim LlamaPay Vesting Hook is a powerful and user-friendly feature designed to streamline the process of claiming funds from LlamaPay vesting contracts. This tool empowers users to easily access and manage their vested tokens, ensuring a smooth and efficient experience in handling time-locked assets.",
@@ -83,7 +77,6 @@
     }
   },
   "CREATE_LLAMAPAY_VESTING": {
-    "id": "a316488cecc23fde8c39d3e748e0cb12bd4d18305826d36576d4bba74bd97baf",
     "type": "IFRAME",
     "name": "Create LlamaPay Vesting",
     "descriptionShort": "Create a LlamaPay vesting contract",

libs/hook-dapp-lib/src/utils.ts

@@ -1,6 +1,18 @@
 import * as hookDappsRegistry from './hookDappsRegistry.json'
 import { CowHook, HookDappBase } from './types'
 
+const hookDapps = Object.keys(hookDappsRegistry).reduce((acc, id) => {
+  const dapp = (hookDappsRegistry as Record<string, Omit<HookDappBase, 'id'>>)[id]
+
+  acc.push({ id, ...dapp })
+  return acc
+}, [] as HookDappBase[])
+
+// permit() function selector
+const PERMIT_SELECTOR = '0xd505accf'
+// TODO: remove it after 01.01.2025
+const PERMIT_DAPP_ID = '1db4bacb661a90fb6b475fd5b585acba9745bc373573c65ecc3e8f5bfd5dee1f'
+
 // Before the hooks store the dappId wasn't included in the hook object
 type StrictCowHook = Omit<CowHook, 'dappId'> & { dappId?: string }
 
@@ -26,6 +38,16 @@ export function matchHooksToDapps(hooks: StrictCowHook[], dapps: HookDappBase[])
         const hook = _hook as CowHook
         const dapp = dappsMap[hook.dappId]
 
+        /**
+         * Permit token is a special case, as it's not a dapp, but a hook
+         */
+        if ((!dapp || hook.dappId === PERMIT_DAPP_ID) && hook.callData.startsWith(PERMIT_SELECTOR)) {
+          return {
+            hook,
+            dapp: hookDappsRegistry.PERMIT_TOKEN as HookDappBase,
+          }
+        }
+
         return {
           hook,
           dapp: dapp || null,
@@ -38,5 +60,5 @@ export function matchHooksToDappsRegistry(
   hooks: StrictCowHook[],
   additionalHookDapps: HookDappBase[] = [],
 ): HookToDappMatch[] {
-  return matchHooksToDapps(hooks, (Object.values(hookDappsRegistry) as HookDappBase[]).concat(additionalHookDapps))
+  return matchHooksToDapps(hooks, hookDapps.concat(additionalHookDapps))
 }