balancer · uiuxxx · Oct 7, 2025 · Oct 2, 2025 · Oct 2, 2025 · Oct 2, 2025
diff --git a/packages/lib/modules/pool/PoolDetail/PoolMyLiquidity.tsx b/packages/lib/modules/pool/PoolDetail/PoolMyLiquidity.tsx
@@ -523,45 +523,63 @@ function StakeButton({ pool }: StakeButtonProps) {
   return (
     <>
       <Popover placement="top-start">
-        <PopoverTrigger>
-          <Button
-            flex="1"
-            isDisabled={!(canStake && hasUnstakedBalance)}
-            maxW="120px"
-            rightIcon={<ChevronUp size="16" />}
-            variant={canStake && hasUnstakedBalance ? 'secondary' : 'disabled'}
-          >
-            Stake
-          </Button>
-        </PopoverTrigger>
-
-        <PopoverContent boxSize="44" height="max-content">
-          <PopoverHeader>
-            <Text color="font.secondary" fontSize="sm" fontWeight="bold">
-              Staking options
-            </Text>
-          </PopoverHeader>
-
-          <PopoverBody>
-            <VStack>
-              <StakingOption
-                apr={balancerMaxApr.toNumber()}
-                icon={<BalancerIconCircular />}
-                onClick={stakeOnBalancer}
-                title="Balancer"
-              />
-
-              <Divider />
-
-              <StakingOption
-                apr={pool.staking?.aura?.apr || 0}
-                icon={<ProtocolIcon protocol={Protocol.Aura} size={28} />}
-                onClick={stakeOnAura}
-                title="Aura"
-              />
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
+        {({ isOpen }) => (
+          <>
+            <PopoverTrigger>
+              <Button
+                flex="1"
+                isDisabled={!(canStake && hasUnstakedBalance)}
+                maxW="120px"
+                position="relative"
+                px="md"
+                rightIcon={canStake && hasUnstakedBalance ? <ChevronUp size="16" /> : undefined}
+                sx={{
+                  '& .chakra-button__icon': {
+                    position: 'absolute',
+                    right: '8px',
+                    marginInlineStart: '0',
+                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s var(--ease-out-cubic)',
+                  },
+                }}
+                variant={canStake && hasUnstakedBalance ? 'secondary' : 'disabled'}
+                w="full"
+              >
+                <span style={{ marginLeft: canStake && hasUnstakedBalance ? '-12px' : '0' }}>
+                  Stake
+                </span>
+              </Button>
+            </PopoverTrigger>
+
+            <PopoverContent boxSize="44" height="max-content">
+              <PopoverHeader>
+                <Text color="font.secondary" fontSize="sm" fontWeight="bold">
+                  Staking options
+                </Text>
+              </PopoverHeader>
+
+              <PopoverBody>
+                <VStack>
+                  <StakingOption
+                    apr={balancerMaxApr.toNumber()}
+                    icon={<BalancerIconCircular />}
+                    onClick={stakeOnBalancer}
+                    title="Balancer"
+                  />
+
+                  <Divider />
+
+                  <StakingOption
+                    apr={pool.staking?.aura?.apr || 0}
+                    icon={<ProtocolIcon protocol={Protocol.Aura} size={28} />}
+                    onClick={stakeOnAura}
+                    title="Aura"
+                  />
+                </VStack>
+              </PopoverBody>
+            </PopoverContent>
+          </>
+        )}
       </Popover>
 
       <PartnerRedirectModal

diff --git a/packages/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/PoolSnapshotValues.tsx b/packages/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/PoolSnapshotValues.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { HStack, Heading, Skeleton, Text, VStack } from '@chakra-ui/react'
+import { HStack, Heading, Skeleton, VStack } from '@chakra-ui/react'
 import { TokenIconStack } from '../../../../tokens/TokenIconStack'
 import { TokenStackPopover } from '../../../../tokens/TokenStackPopover'
 import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
@@ -43,15 +43,16 @@ export function PoolSnapshotValues() {
       }
     : undefined
 
-  const incomeLabel = isCowAmmPool(pool.type) ? 'Surplus (24h)' : 'Fees (24h)'
+  const incomeLabel = isCowAmmPool(pool.type) ? 'Surplus (24h)' : 'Swap fees (24h)'
 
   return (
     <>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            TVL
-          </Text>
+          <LabelWithTooltip
+            label="TVL"
+            tooltip="The Total Value Locked (TVL) of the pool. This is the sum of the value of all the assets in the pool."
+          />
           {isLoadingPool && !Number(tvl) ? ( // Only show loading state when we have no TVL
             <Skeleton height="28px" w="100px" />
           ) : (
@@ -66,7 +67,7 @@ export function PoolSnapshotValues() {
         <VStack align="flex-start" spacing="xxs" w="full">
           <LabelWithTooltip
             label="Swap vol (24h)"
-            tooltip="The swap volume routing through this pool over the last 24 hours. Unlike the daily chart, which tracks volume since the last UTC midnight, this number always reflects a full 24 hour period."
+            tooltip="The swap volume routing through this pool over the last 24 hours from this UI and and aggregator partners (like CowSwap). Unlike the daily chart, which tracks volume since the last UTC midnight, this number always reflects a full 24 hour period."
           />
           {poolStatsValues ? (
             <Heading size="h4">{poolStatsValues.volume24h}</Heading>
@@ -77,9 +78,10 @@ export function PoolSnapshotValues() {
       </FadeInOnView>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            APR for LPs
-          </Text>
+          <LabelWithTooltip
+            label="APR for LPs"
+            tooltip="The APR for Liquidity Providers (LPs) based on the last 24h performance of the pool. It includes yield from various sources, including swap fees, staking incentives, yield-bearing tokens and Merkl incentives. APR ranges are display for pools eligible for veBAL incentives. The lower range is the minimum range for people who don't stake or have no veBAL. The maximim rate is for veBAL holders with the max 2.5x veBAL boost."
+          />
           <MemoizedMainAprTooltip
             aprItems={pool.dynamicData.aprItems}
             chain={pool.chain}
@@ -96,9 +98,11 @@ export function PoolSnapshotValues() {
       </FadeInOnView>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            {incomeLabel}
-          </Text>
+          <LabelWithTooltip
+            label={incomeLabel}
+            tooltip="The swap fees from trades routed through this pool over the last 24 hours from this UI and aggregator partners (like CowSwap). Unlike the daily fee chart, which tracks swap fees since the last UTC midnight, this number always reflects a full 24 hour period."
+          />
+
           {poolStatsValues ? (
             <Heading size="h4">{poolStatsValues.income24h}</Heading>
           ) : (

diff --git a/packages/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/UserSnapshotValues.tsx b/packages/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/UserSnapshotValues.tsx
@@ -16,6 +16,8 @@ import MainAprTooltip from '@repo/lib/shared/components/tooltips/apr-tooltip/Mai
 import { useGetUserPoolRewards } from '../../../useGetUserPoolRewards'
 import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
 import { LabelWithTooltip } from '@repo/lib/shared/components/tooltips/LabelWithTooltip'
+import AuraAprTooltip from '@repo/lib/shared/components/tooltips/apr-tooltip/AuraAprTooltip'
+import { hasAuraStakedBalance } from '../../../user-balance.helpers'
 
 export type PoolMyStatsValues = {
   myLiquidity: number
@@ -53,7 +55,11 @@ export function UserSnapshotValues() {
     return veBalBoostMap[pool.id]
   }, [veBalBoostMap])
 
-  const myAprRaw = getTotalAprRaw(pool.dynamicData.aprItems, boost)
+  // If user has staked on Aura, use Aura APR
+  const myAprRaw =
+    hasAuraStakedBalance(pool) && pool.staking?.aura?.apr
+      ? pool.staking.aura.apr
+      : getTotalAprRaw(pool.dynamicData.aprItems, boost)
 
   const poolMyStatsValues: PoolMyStatsValues | undefined = useMemo(() => {
     if (pool && pool.userBalance && !isLoadingPool && !isLoadingClaiming) {
@@ -67,7 +73,7 @@ export function UserSnapshotValues() {
         myClaimableRewards: myClaimableRewards,
       }
     }
-  }, [veBalBoostMap, pool])
+  }, [veBalBoostMap, pool, myAprRaw])
 
   function onModalClose() {
     previewModalDisclosure.onClose()
@@ -81,9 +87,10 @@ export function UserSnapshotValues() {
     <>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            My liquidity
-          </Text>
+          <LabelWithTooltip
+            label="My liquidity"
+            tooltip="The value of all your tokens in this pool."
+          />
           {poolMyStatsValues ? (
             poolMyStatsValues.myLiquidity ? (
               <HStack onClick={handleClick}>
@@ -111,19 +118,28 @@ export function UserSnapshotValues() {
       </FadeInOnView>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            My APR
-          </Text>
+          <LabelWithTooltip
+            label={hasAuraStakedBalance(pool) && pool.staking?.aura?.apr ? 'My Aura APR' : 'My APR'}
+            tooltip={
+              hasAuraStakedBalance(pool) && pool.staking?.aura?.apr
+                ? 'The APR you are likely to earn this week from staking in this pool on Aura.'
+                : 'The APR you are likely to earn this week from staking in this pool on Balancer.'
+            }
+          />
           {poolMyStatsValues && poolMyStatsValues.myLiquidity ? (
-            <MemoizedMainAprTooltip
-              aprItems={pool.dynamicData.aprItems}
-              chain={pool.chain}
-              height="28px"
-              pool={pool}
-              poolId={pool.id}
-              textProps={{ fontWeight: 'bold', fontSize: '2xl', lineHeight: '28px' }}
-              vebalBoost={boost || '1'}
-            />
+            hasAuraStakedBalance(pool) && pool.staking?.aura?.apr ? (
+              <AuraAprTooltip auraApr={pool.staking.aura.apr} />
+            ) : (
+              <MemoizedMainAprTooltip
+                aprItems={pool.dynamicData.aprItems}
+                chain={pool.chain}
+                height="28px"
+                pool={pool}
+                poolId={pool.id}
+                textProps={{ fontWeight: 'bold', fontSize: '2xl', lineHeight: '28px' }}
+                vebalBoost={boost || '1'}
+              />
+            )
           ) : (
             <Heading size="h4">&mdash;</Heading>
           )}
@@ -137,9 +153,10 @@ export function UserSnapshotValues() {
               tooltip="The amount you could earn each week if you added $10,000 to this pool at its current APR. If there is an APR range, the amount displayed is based on the minimum APR."
             />
           ) : (
-            <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-              My potential weekly yield
-            </Text>
+            <LabelWithTooltip
+              label="My potential weekly yield"
+              tooltip="The amount of incentives you could earn this week from staking in this pool based on your veBAL balance"
+            />
           )}
 
           {poolMyStatsValues ? (
@@ -151,9 +168,10 @@ export function UserSnapshotValues() {
       </FadeInOnView>
       <FadeInOnView scaleUp={false}>
         <VStack align="flex-start" spacing="xxs" w="full">
-          <Text fontSize="sm" fontWeight="semibold" mt="xxs" variant="secondary">
-            My claimable rewards
-          </Text>
+          <LabelWithTooltip
+            label="My claimable incentives"
+            tooltip="The amount of liquidity incentives you can claim from staking in this pool."
+          />
           {poolMyStatsValues ? (
             hasNoRewards ? (
               <Heading size="h4">&mdash;</Heading>

diff --git a/packages/lib/modules/pool/PoolList/PoolListTable/PoolVersionTag.tsx b/packages/lib/modules/pool/PoolList/PoolListTable/PoolVersionTag.tsx
@@ -78,6 +78,7 @@ export function PoolVersionTag({
     <TooltipWithTouch label={isCow ? 'CoW AMM' : isV3 ? 'Balancer v3' : 'Balancer v2'}>
       <BalBadge
         color="font.secondary"
+        cursor="default"
         fontSize="xs"
         h={size}
         p="0"

diff --git a/packages/lib/modules/portfolio/PortfolioTable/PortfolioTable.tsx b/packages/lib/modules/portfolio/PortfolioTable/PortfolioTable.tsx
@@ -30,7 +30,7 @@ import { usePortfolioSorting } from './usePortfolioSorting'
 
 const rowProps = (addExtraColumn: boolean, needsLastColumnWider: boolean) => ({
   px: [0, 4],
-  gridTemplateColumns: `32px minmax(320px, 1fr) minmax(140px, max-content) minmax(100px, max-content) 126px ${addExtraColumn ? '120px' : ''} ${needsLastColumnWider ? '160px' : 'minmax(100px, max-content)'}`,
+  gridTemplateColumns: `32px minmax(320px, 1fr) minmax(180px, max-content) minmax(100px, max-content) 126px ${addExtraColumn ? '120px' : ''} ${needsLastColumnWider ? '160px' : 'minmax(100px, max-content)'}`,
   alignItems: 'center',
   gap: { base: 'xxs', xl: 'lg' },
 })

diff --git a/packages/lib/modules/portfolio/PortfolioTable/PortfolioTableRow.tsx b/packages/lib/modules/portfolio/PortfolioTable/PortfolioTableRow.tsx
@@ -7,6 +7,7 @@ import { useCurrency } from '@repo/lib/shared/hooks/useCurrency'
 import { getPoolPath } from '../../pool/pool.utils'
 import { ProtocolIcon } from '@repo/lib/shared/components/icons/ProtocolIcon'
 import { Protocol } from '../../protocols/useProtocols'
+import { TooltipWithTouch } from '@repo/lib/shared/components/tooltips/TooltipWithTouch'
 import {
   ExpandedPoolInfo,
   ExpandedPoolType,
@@ -109,7 +110,10 @@ export function PortfolioTableRow({ pool, keyValue, veBalBoostMap, ...rest }: Pr
             <GridItem justifySelf="end" px="sm">
               {pool.poolType === ExpandedPoolType.StakedAura ? (
                 pool.staking?.aura?.apr ? (
-                  <AuraAprTooltip auraApr={pool.staking?.aura?.apr} />
+                  <AuraAprTooltip
+                    auraApr={pool.staking?.aura?.apr}
+                    textProps={{ fontWeight: 'medium' }}
+                  />
                 ) : (
                   ' - '
                 )
@@ -147,8 +151,16 @@ function StakingIcons({ pool, showIcon }: { pool: ExpandedPoolInfo; showIcon: bo
 
   return (
     <>
-      {showAuraIcon && <ProtocolIcon protocol={Protocol.Aura} />}
-      {showBalIcon && <ProtocolIcon protocol={Protocol.Balancer} />}
+      {showAuraIcon && (
+        <TooltipWithTouch label="Aura">
+          <ProtocolIcon protocol={Protocol.Aura} />
+        </TooltipWithTouch>
+      )}
+      {showBalIcon && (
+        <TooltipWithTouch label="Balancer">
+          <ProtocolIcon protocol={Protocol.Balancer} />
+        </TooltipWithTouch>
+      )}
     </>
   )
 }