feat: add hook tag on pools list

packages/lib/modules/hooks/useHook.ts

@@ -1,18 +1,30 @@
-import { Pool } from '../pool/PoolProvider'
+import {
+  GqlChain,
+  GqlHook,
+  GqlPoolTokenDetail,
+} from '@repo/lib/shared/services/api/generated/graphql'
 import { useHooks } from './HooksProvider'
 import { getChainId } from '@repo/lib/config/app.config'
 
-export function useHook(pool: Pool) {
+export function useHook({
+  hook,
+  poolTokens,
+  chain,
+}: {
+  hook: GqlHook | null | undefined
+  poolTokens: GqlPoolTokenDetail[]
+  chain: GqlChain
+}) {
   const { metadata } = useHooks()
-  const hasHook = !!pool.hook?.address
-  const hasNestedHook = pool.poolTokens.map(token => token.nestedPool?.hook).some(Boolean)
+  const hasHook = !!hook?.address
+  const hasNestedHook = poolTokens.map(token => token.nestedPool?.hook).some(Boolean)
 
   const hookAddresses = [
-    ...(hasHook ? [pool.hook?.address] : []),
-    ...pool.poolTokens.map(token => token.nestedPool?.hook?.address),
+    ...(hasHook ? [hook.address] : []),
+    ...poolTokens.map(token => token.nestedPool?.hook?.address),
   ]
 
-  const chainId = getChainId(pool.chain)
+  const chainId = getChainId(chain)
 
   const hooks = hookAddresses
     .map(hookAddress =>

packages/lib/modules/pool/PoolDetail/PoolHeader/PoolMetaBadges.tsx

@@ -19,6 +19,7 @@ import { getChainShortName } from '@repo/lib/config/app.config'
 import { PoolTypeTag } from '../PoolTypeTag'
 import { PoolVersionTag } from '../../PoolList/PoolListTable/PoolVersionTag'
 import { PoolHookTag } from '../PoolHookTag'
+import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 
 export default function PoolMetaBadges() {
   const { pool, chain } = usePool()
@@ -45,7 +46,11 @@ export default function PoolMetaBadges() {
       <PoolListTokenPills pool={pool} px="sm" py="2" />
       <PoolVersionTag isSmall pool={pool} />
       <PoolTypeTag pool={pool} />
-      <PoolHookTag />
+      <PoolHookTag
+        chain={pool.chain}
+        poolHook={pool.hook}
+        poolTokens={pool.poolTokens as GqlPoolTokenDetail[]}
+      />
       {!shouldHideSwapFee(pool.type) && (
         <Popover trigger="hover">
           <PopoverTrigger>

packages/lib/modules/pool/PoolDetail/PoolHookBanner.tsx

@@ -2,10 +2,15 @@ import { Badge, Card, Center, Heading, HStack, Stack, Text, VStack } from '@chak
 import { useHook } from '../../hooks/useHook'
 import { usePool } from '../PoolProvider'
 import { HookIcon } from '@repo/lib/shared/components/icons/HookIcon'
+import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 
 export function PoolHookBanner() {
   const { pool } = usePool()
-  const { hooks, hasHookData } = useHook(pool)
+  const { hooks, hasHookData } = useHook({
+    hook: pool.hook,
+    poolTokens: pool.poolTokens as GqlPoolTokenDetail[],
+    chain: pool.chain,
+  })
 
   if (!hasHookData) return null
 

packages/lib/modules/pool/PoolDetail/PoolHookTag.tsx

@@ -1,11 +1,33 @@
-import { Badge, Center, Popover, PopoverContent, PopoverTrigger, Text } from '@chakra-ui/react'
+import {
+  Badge,
+  Center,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Text,
+} from '@chakra-ui/react'
 import { HookIcon } from '@repo/lib/shared/components/icons/HookIcon'
 import { useHook } from '../../hooks/useHook'
-import { usePool } from '../PoolProvider'
 
-export function PoolHookTag() {
-  const { pool } = usePool()
-  const { hooks } = useHook(pool)
+import {
+  GqlHook,
+  GqlPoolTokenDetail,
+  GqlChain,
+} from '@repo/lib/shared/services/api/generated/graphql'
+
+type Props = {
+  poolHook: GqlHook | null | undefined
+  poolTokens: GqlPoolTokenDetail[]
+  chain: GqlChain
+}
+
+export function PoolHookTag({ poolHook, poolTokens, chain }: Props) {
+  const { hooks } = useHook({
+    hook: poolHook,
+    poolTokens,
+    chain,
+  })
 
   // TODO: add nested hook support when needed
 
@@ -35,11 +57,13 @@ export function PoolHookTag() {
           </Center>
         </Badge>
       </PopoverTrigger>
-      <PopoverContent px="sm" py="sm" width="fit-content">
-        <Text fontSize="sm" variant="secondary">
-          {hook.name}
-        </Text>
-      </PopoverContent>
+      <Portal>
+        <PopoverContent px="sm" py="sm" width="fit-content">
+          <Text fontSize="sm" variant="secondary">
+            {hook.name}
+          </Text>
+        </PopoverContent>
+      </Portal>
     </Popover>
   )
 }

packages/lib/modules/pool/PoolList/PoolListTable/PoolListTable.tsx

@@ -28,7 +28,7 @@ export function PoolListTable({ pools, count, loading }: Props) {
 
   const rowProps = {
     px: { base: 'sm', sm: '0' },
-    gridTemplateColumns: `32px minmax(320px, 1fr) 100px ${
+    gridTemplateColumns: `32px minmax(320px, 1fr) 150px ${
       userAddress ? furthestLeftColWidth : ''
     } ${userAddress ? numberColumnWidth : furthestLeftColWidth} ${numberColumnWidth} 200px`,
     alignItems: 'center',

packages/lib/modules/pool/PoolList/PoolListTable/PoolListTableRow.tsx

@@ -15,6 +15,8 @@ import { isBoosted } from '../../pool.helpers'
 import { TokenIcon } from '@repo/lib/modules/tokens/TokenIcon'
 import { useErc4626Metadata } from '../../../erc4626/Erc4626MetadataProvider'
 import Image from 'next/image'
+import { PoolHookTag } from '../../PoolDetail/PoolHookTag'
+import { GqlPoolTokenDetail } from '@repo/lib/shared/services/api/generated/graphql'
 
 interface Props extends GridProps {
   pool: PoolListItem
@@ -102,6 +104,11 @@ export function PoolListTableRow({ pool, keyValue, ...rest }: Props) {
                     width={20}
                   />
                 ))}
+                <PoolHookTag
+                  chain={pool.chain}
+                  poolHook={pool.hook}
+                  poolTokens={pool.poolTokens as GqlPoolTokenDetail[]}
+                />
               </HStack>
             </GridItem>
             {userAddress ? (

packages/lib/modules/pool/alerts/usePoolAlerts.tsx

@@ -26,7 +26,11 @@ export function usePoolAlerts(pool: Pool) {
   const pathname = usePathname()
   const router = useRouter()
   const [poolAlerts, setPoolAlerts] = useState<PoolAlert[]>([])
-  const { hooks } = useHook(pool)
+  const { hooks } = useHook({
+    hook: pool.hook,
+    poolTokens: pool.poolTokens as GqlPoolTokenDetail[],
+    chain: pool.chain,
+  })
 
   const getNetworkPoolAlerts = (pool: Pool): PoolAlert[] => {
     const networkPoolsIssues = getNetworkConfig(pool.chain).pools?.issues

packages/lib/shared/services/api/pools.graphql

@@ -38,6 +38,9 @@ query GetPools(
         symbol
       }
     }
+    hook {
+      ...Hook
+    }
     dynamicData {
       totalLiquidity
       lifetimeVolume