Merge branch 'main' into feat/portfolio-details-column

# Conflicts:
#	packages/lib/modules/pool/PoolList/PoolListTable/PoolListTableRow.tsx

packages/lib/modules/hooks/useHook.ts

@@ -1,8 +1,9 @@
-import { Pool } from '../pool/PoolProvider'
 import { useHooks } from './HooksProvider'
 import { getChainId } from '@repo/lib/config/app.config'
+import { Pool } from '../pool/PoolProvider'
+import { PoolListItem } from '../pool/pool.types'
 
-export function useHook(pool: Pool) {
+export function useHook(pool: Pool | PoolListItem) {
   const { metadata } = useHooks()
   const hasHook = !!pool.hook?.address
   const hasNestedHook = pool.poolTokens.map(token => token.nestedPool?.hook).some(Boolean)

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

@@ -36,7 +36,7 @@ export default function PoolMetaBadges() {
       <PoolListTokenPills pool={pool} px="sm" py="2" />
       <PoolVersionTag isSmall pool={pool} />
       <PoolTypeTag pool={pool} />
-      <PoolHookTag />
+      <PoolHookTag pool={pool} />
       {!shouldHideSwapFee(pool.type) && <PoolSwapFees pool={pool} />}
     </Flex>
   )

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

@@ -1,14 +1,26 @@
-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()
+import { PoolListItem } from '../pool.types'
+import { Pool } from '../PoolProvider'
+
+type Props = {
+  pool: Pool | PoolListItem
+}
+
+export function PoolHookTag({ pool }: Props) {
   const { hooks } = useHook(pool)
 
   // TODO: add nested hook support when needed
-
   const hook = hooks[0]
 
   if (!hook) return null
@@ -35,11 +47,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/PollListTableDetailsCell.tsx

@@ -6,6 +6,7 @@ import { isBoosted } from '@repo/lib/modules/pool/pool.helpers'
 import { getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils'
 import Image from 'next/image'
 import { Pool } from '@repo/lib/modules/pool/PoolProvider'
+import { PoolHookTag } from '@repo/lib/modules/pool/PoolDetail/PoolHookTag'
 
 interface Props {
   pool: PoolListItem | Pool
@@ -31,6 +32,7 @@ export function PollListTableDetailsCell({ pool }: Props) {
           width={20}
         />
       ))}
+      <PoolHookTag pool={pool} />
     </HStack>
   )
 }

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/actions/add-liquidity/modal/AddLiquidityModal.tsx

@@ -19,6 +19,7 @@ import { AddLiquiditySummary } from './AddLiquiditySummary'
 import { useAddLiquidityReceipt } from '@repo/lib/modules/transactions/transaction-steps/receipts/receipt.hooks'
 import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { ProtocolVersion } from '../../../pool.types'
 
 type Props = {
   isOpen: boolean
@@ -51,6 +52,7 @@ export function AddLiquidityModal({
     chain,
     txHash: addLiquidityTxHash,
     userAddress,
+    protocolVersion: pool.protocolVersion as ProtocolVersion,
   })
 
   useResetStepIndexOnOpen(isOpen, transactionSteps)

packages/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx

@@ -19,6 +19,7 @@ import { RemoveLiquiditySummary } from './RemoveLiquiditySummary'
 import { useRemoveLiquidityReceipt } from '@repo/lib/modules/transactions/transaction-steps/receipts/receipt.hooks'
 import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { ProtocolVersion } from '../../../pool.types'
 
 type Props = {
   isOpen: boolean
@@ -46,6 +47,7 @@ export function RemoveLiquidityModal({
     chain,
     txHash: removeLiquidityTxHash,
     userAddress,
+    protocolVersion: pool.protocolVersion as ProtocolVersion,
   })
 
   useResetStepIndexOnOpen(isOpen, transactionSteps)

packages/lib/modules/swap/SwapProvider.tsx

@@ -53,6 +53,7 @@ import { Pool } from '../pool/PoolProvider'
 import { getChildTokens, getStandardRootTokens, isStandardRootToken } from '../pool/pool.helpers'
 import { supportsNestedActions } from '../pool/actions/LiquidityActionHelpers'
 import { getProjectConfig } from '@repo/lib/config/getProjectConfig'
+import { ProtocolVersion } from '../pool/pool.types'
 
 export type UseSwapResponse = ReturnType<typeof _useSwap>
 export const SwapContext = createContext<UseSwapResponse | null>(null)
@@ -410,7 +411,8 @@ export function _useSwap({ poolActionableTokens, pool, pathParams }: SwapProvide
     isSameAddress(swapState.tokenOut.address, networkConfig.tokens.nativeAsset.address)
   const validAmountOut = bn(swapState.tokenOut.amount).gt(0)
 
-  const protocolVersion = (simulationQuery.data as SdkSimulateSwapResponse)?.protocolVersion || 2
+  const protocolVersion =
+    ((simulationQuery.data as SdkSimulateSwapResponse)?.protocolVersion as ProtocolVersion) || 2
   const { vaultAddress } = useVault(protocolVersion)
 
   const swapAction: SwapAction = useMemo(() => {
@@ -624,6 +626,7 @@ export function _useSwap({ poolActionableTokens, pool, pathParams }: SwapProvide
     isPoolSwap,
     pool,
     poolActionableTokens,
+    protocolVersion,
     replaceUrlPath,
     resetSwapAmounts,
     setTokenSelectKey,

packages/lib/modules/swap/modal/SwapModal.tsx

@@ -49,12 +49,14 @@ export function SwapPreviewModal({
     swapTxHash,
     urlTxHash,
     hasQuoteContext,
+    protocolVersion,
   } = useSwap()
 
   const swapReceipt = useSwapReceipt({
     txHash: swapTxHash,
     userAddress,
     chain: selectedChain,
+    protocolVersion,
   })
 
   useResetStepIndexOnOpen(isOpen, transactionSteps)

packages/lib/modules/transactions/transaction-steps/receipts/receipt-parsers.ts

@@ -14,13 +14,15 @@ import {
 } from 'viem'
 import { HumanTokenAmountWithAddress } from '../../../tokens/token.types'
 import { emptyAddress } from '../../../web3/contracts/wagmi-helpers'
+import { ProtocolVersion } from '@repo/lib/modules/pool/pool.types'
 
 type ParseProps = {
   receiptLogs: Log[]
   chain: GqlChain
   userAddress?: Address
   txValue: bigint
   getToken: (address: Address, chain: GqlChain) => GqlToken | undefined
+  protocolVersion: ProtocolVersion
 }
 
 export type ParseReceipt =
@@ -66,9 +68,10 @@ export function parseRemoveLiquidityReceipt({
   userAddress,
   chain,
   getToken,
+  protocolVersion,
 }: ParseProps) {
   const nativeAssetReceived =
-    (getIncomingWithdrawals(receiptLogs, chain, userAddress) as bigint) || 0n
+    (getIncomingWithdrawals(receiptLogs, chain, protocolVersion, userAddress) as bigint) || 0n
 
   const receivedErc20Tokens: HumanTokenAmountWithAddress[] = getIncomingLogs(
     receiptLogs,
@@ -100,6 +103,7 @@ export function parseSwapReceipt({
   chain,
   getToken,
   txValue,
+  protocolVersion,
 }: ParseProps) {
   /**
    * GET SENT AMOUNT
@@ -122,7 +126,7 @@ export function parseSwapReceipt({
    * GET RECEIVED AMOUNT
    */
   const nativeAssetReceived =
-    (getIncomingWithdrawals(receiptLogs, chain, userAddress) as bigint) || 0n
+    (getIncomingWithdrawals(receiptLogs, chain, protocolVersion, userAddress) as bigint) || 0n
 
   const incomingData = getIncomingLogs(receiptLogs, userAddress)[0]
   const receivedTokenValue = incomingData?.args?.value || 0n
@@ -174,26 +178,35 @@ function getIncomingLogs(logs: Log[], userAddress?: Address) {
   })
 }
 
-// TODO V3 - This works for v2 vault but may not work for v3
-function getIncomingWithdrawals(logs: Log[], chain: GqlChain, userAddress?: Address) {
+function getIncomingWithdrawals(
+  logs: Log[],
+  chain: GqlChain,
+  protocolVersion: ProtocolVersion,
+  userAddress?: Address
+) {
   if (!userAddress) return []
   const networkConfig = getNetworkConfig(chain)
 
+  const from =
+    protocolVersion === 3
+      ? networkConfig.contracts.balancer.batchRouter
+      : networkConfig.contracts.balancer.vaultV2
+
   // Fantom uses the Transfer event instead of Withdrawal
   if (chain === GqlChain.Fantom) {
     return parseEventLogs({
       abi: [
         parseAbiItem('event Transfer(address indexed from, address indexed to, uint256 value)'),
       ],
-      args: { from: networkConfig.contracts.balancer.vaultV2, to: zeroAddress },
+      args: { from: from, to: zeroAddress },
       logs: logs,
     })[0]?.args?.value
   } else {
     // Catches when the wNativeAsset is withdrawn from the vault, assumption is
     // that his means the user is getting the same value in the native asset.
     return parseEventLogs({
       abi: [parseAbiItem('event Withdrawal(address indexed src, uint256 wad)')],
-      args: { src: networkConfig.contracts.balancer.vaultV2 },
+      args: { src: from },
       logs: logs,
     })[0]?.args?.wad
   }

packages/lib/modules/transactions/transaction-steps/receipts/receipt.hooks.integration.spec.ts

@@ -1,40 +1,60 @@
+/* eslint-disable max-len */
 import { testHook } from '@repo/lib/test/utils/custom-renderers'
 import { waitFor } from '@testing-library/react'
 import { getGqlChain } from '@repo/lib/config/app.config'
-import { polAddress } from '@repo/lib/debug-helpers'
+import { ethAddress, polAddress } from '@repo/lib/debug-helpers'
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { Address, Hash } from 'viem'
 import { polygon } from 'viem/chains'
 import { useAddLiquidityReceipt, useRemoveLiquidityReceipt, useSwapReceipt } from './receipt.hooks'
-
-async function testAddReceipt(userAddress: Address, txHash: Hash, chainId = 1) {
+import { ProtocolVersion } from '@repo/lib/modules/pool/pool.types'
+
+async function testAddReceipt(
+  userAddress: Address,
+  txHash: Hash,
+  chainId = 1,
+  protocolVersion: ProtocolVersion = 2
+) {
   const { result } = testHook(() => {
     return useAddLiquidityReceipt({
       chain: getGqlChain(chainId),
       txHash,
       userAddress,
+      protocolVersion,
     })
   })
   return result
 }
 
-async function testRemoveReceipt(userAddress: Address, txHash: Hash, chainId = 1) {
+async function testRemoveReceipt(
+  userAddress: Address,
+  txHash: Hash,
+  chainId = 1,
+  protocolVersion: ProtocolVersion = 2
+) {
   const { result } = testHook(() => {
     return useRemoveLiquidityReceipt({
       txHash,
       userAddress,
       chain: getGqlChain(chainId),
+      protocolVersion,
     })
   })
   return result
 }
 
-async function testSwapReceipt(userAddress: Address, txHash: Hash, chain: GqlChain) {
+async function testSwapReceipt(
+  userAddress: Address,
+  txHash: Hash,
+  chain: GqlChain,
+  protocolVersion: ProtocolVersion = 2
+) {
   const { result } = testHook(() => {
     return useSwapReceipt({
       txHash,
       userAddress,
       chain,
+      protocolVersion,
     })
   })
   return result
@@ -109,10 +129,7 @@ test('queries remove liquidity transaction', async () => {
   expect(result.current.sentBptUnits).toBe('6439.400687368663510166')
 })
 
-/*
-  Skip until dRPC fixes issue with polygon tx queries
-*/
-describe.skip('queries swap transaction', () => {
+describe('queries swap transaction', () => {
   const maticAddress = '0x0000000000000000000000000000000000001010'
   const wMaticAddress = '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270'
   const daiAddress = '0x8f3Cf7ad23Cd3CaDbD9735AFf958023239c6A063'
@@ -176,6 +193,29 @@ describe.skip('queries swap transaction', () => {
       tokenAddress: maticAddress,
     })
   })
+
+  test('when the native asset is the token out that goes through a wrap (from stataEthDAI to WETH and then to ETH)', async () => {
+    const userAddress = '0xf76142b79Db34E57852d68F9c52C0E24f7349647'
+    // https://sepolia.etherscan.io/tx/0xd8ad2a7f8e51be9735ae2886ca936cca62e395524b284f7a97cf7ad33a361a04
+    const txHash = '0xd8ad2a7f8e51be9735ae2886ca936cca62e395524b284f7a97cf7ad33a361a04'
+
+    const protocolVersion = 3
+    const result = await testSwapReceipt(userAddress, txHash, GqlChain.Sepolia, protocolVersion)
+
+    const stataEthDai = '0xde46e43f46ff74a23a65ebb0580cbe3dfe684a17'
+
+    await waitFor(() => expect(result.current.isLoading).toBeFalsy())
+
+    expect(result.current.sentToken).toEqual({
+      humanAmount: '25',
+      tokenAddress: stataEthDai.toLowerCase(),
+    })
+
+    expect(result.current.receivedToken).toEqual({
+      humanAmount: '0.136746996966924842',
+      tokenAddress: ethAddress,
+    })
+  })
 })
 
 test('returns is loading when user is not provided', async () => {

packages/lib/modules/transactions/transaction-steps/receipts/receipt.hooks.ts

@@ -9,11 +9,13 @@ import {
   parseRemoveLiquidityReceipt,
   parseSwapReceipt,
 } from './receipt-parsers'
+import { ProtocolVersion } from '@repo/lib/modules/pool/pool.types'
 
 type BaseReceiptProps = {
   txHash?: Hex
   userAddress: Address
   chain: GqlChain
+  protocolVersion: ProtocolVersion
 }
 
 export type ReceiptProps = BaseReceiptProps & { parseReceipt: ParseReceipt }
@@ -58,7 +60,7 @@ export function useSwapReceipt(props: BaseReceiptProps) {
   }
 }
 
-function useTxReceipt({ txHash, chain, userAddress, parseReceipt }: ReceiptProps) {
+function useTxReceipt({ txHash, chain, userAddress, parseReceipt, protocolVersion }: ReceiptProps) {
   const { getToken, isLoadingTokenPrices } = useTokens()
   const chainId = getChainId(chain)
   // These queries will be cached if we are in the context of a transaction flow
@@ -89,6 +91,7 @@ function useTxReceipt({ txHash, chain, userAddress, parseReceipt }: ReceiptProps
           userAddress,
           txValue,
           getToken,
+          protocolVersion,
         })
       : undefined