fix: portfolio table sorting

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

@@ -31,18 +31,14 @@
 
   if (!isMounted) return <Skeleton height="500px" w="full" />
 
-  const items = sortedPoolEvents.map(item => ({
-    ...item,
-    id: item[2].id,
-  }))
-
   return (
     <>
       <Box className="hide-scrollbar" overflowX="auto" w="full">
         <Box minWidth="800px">
           <PaginatedTable
             alignItems="flex-start"
-            items={items}
+            getRowId={([_timestamp, _value, poolActivityMetaData]) => poolActivityMetaData.id}
+            items={sortedPoolEvents}
             loading={isLoading}
             noItemsFoundLabel="No pool events found"
             paginationProps={paginationProps}

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

@@ -47,6 +47,7 @@
     >
       <PaginatedTable
         items={pools}
+        getRowId={item => item.id}
         loading={loading}
         noItemsFoundLabel="No pools found"
         paginationProps={paginationProps}

packages/lib/modules/portfolio/PortfolioTable/PortfolioTable.tsx

@@ -19,6 +19,7 @@ import { useUserAccount } from '../../web3/UserAccountProvider'
 import { ConnectWallet } from '../../web3/ConnectWallet'
 import { getCanStake } from '../../pool/actions/stake.helpers'
 import { getProjectConfig, isBalancerProject } from '@repo/lib/config/getProjectConfig'
+import { bn } from '@repo/lib/shared/utils/numbers'
 
 export type PortfolioTableSortingId = 'staking' | 'vebal' | 'liquidity' | 'apr'
 export interface PortfolioSortingData {
@@ -131,10 +132,17 @@ export function PortfolioTable() {
       }
 
       if (currentSortingObj.id === 'apr') {
-        const [aApr] = getTotalApr(a.dynamicData.aprItems)
-        const [bApr] = getTotalApr(b.dynamicData.aprItems)
-
-        return currentSortingObj.desc ? bApr.minus(aApr).toNumber() : aApr.minus(bApr).toNumber()
+        const [aApr] =
+          a.poolType === ExpandedPoolType.StakedAura
+            ? [a.staking?.aura?.apr ?? 0]
+            : getTotalApr(a.dynamicData.aprItems)
+        const [bApr] =
+          b.poolType === ExpandedPoolType.StakedAura
+            ? [b.staking?.aura?.apr ?? 0]
+            : getTotalApr(b.dynamicData.aprItems)
+        return currentSortingObj.desc
+          ? bn(bApr).minus(aApr).toNumber()
+          : bn(aApr).minus(bApr).toNumber()
       }
 
       return 0
@@ -163,6 +171,7 @@ export function PortfolioTable() {
           >
             <PaginatedTable
               alignItems="flex-start"
+              getRowId={row => row.uniqueKey}
               items={sortedPools}
               left={{ base: '-4px', sm: '0' }}
               loading={isLoadingPortfolio}

packages/lib/modules/portfolio/PortfolioTable/useExpandedPools.ts

@@ -15,6 +15,11 @@ export enum ExpandedPoolType {
 export type ExpandedPoolInfo = Pool & {
   poolType: ExpandedPoolType
   poolPositionUsd: number
+  uniqueKey: string
+}
+
+function generateUniqueKey(...args: string[]) {
+  return args.join(' - ')
 }
 
 export function useExpandedPools(pools: Pool[]) {
@@ -37,34 +42,42 @@ export function useExpandedPools(pools: Pool[]) {
       const walletBalanceUsd = pool.userBalance?.walletBalanceUsd || 0
 
       if (stakedBalancesBalUsd > 0) {
+        const poolType = isVeBal ? ExpandedPoolType.Locked : ExpandedPoolType.StakedBal
         expandedPools.push({
           ...pool,
-          poolType: isVeBal ? ExpandedPoolType.Locked : ExpandedPoolType.StakedBal,
+          poolType,
           poolPositionUsd: stakedBalancesBalUsd,
+          uniqueKey: generateUniqueKey(pool.id, poolType),
         })
       }
 
       if (stakedBalancesAuraUsd > 0) {
+        const poolType = ExpandedPoolType.StakedAura
         expandedPools.push({
           ...pool,
-          poolType: ExpandedPoolType.StakedAura,
+          poolType,
           poolPositionUsd: stakedBalancesAuraUsd,
+          uniqueKey: generateUniqueKey(pool.id, poolType),
         })
       }
 
       if (walletBalanceUsd > 0) {
+        const poolType = isVeBal ? ExpandedPoolType.Unlocked : ExpandedPoolType.Unstaked
         expandedPools.push({
           ...pool,
-          poolType: isVeBal ? ExpandedPoolType.Unlocked : ExpandedPoolType.Unstaked,
+          poolType,
           poolPositionUsd: walletBalanceUsd,
+          uniqueKey: generateUniqueKey(pool.id, poolType),
         })
       }
 
       if (stakedBalancesBalUsd === 0 && stakedBalancesAuraUsd === 0 && walletBalanceUsd === 0) {
+        const poolType = ExpandedPoolType.Default
         expandedPools.push({
           ...pool,
-          poolType: ExpandedPoolType.Default,
+          poolType,
           poolPositionUsd: 0,
+          uniqueKey: generateUniqueKey(pool.id, poolType),
         })
       }
     })

packages/lib/shared/components/tables/PaginatedTable.tsx

@@ -10,17 +10,19 @@
   showPagination: boolean
   paginationProps: any // TODO: type this
   noItemsFoundLabel: string
+  getRowId: (item: T, index: number) => React.Key
 }
 
-export function PaginatedTable({
+export function PaginatedTable<T extends any>({
   items,
   loading,
   renderTableRow,
   renderTableHeader,
   showPagination,
   paginationProps,
   noItemsFoundLabel,
-}: Props<any>) {
+  getRowId,
+}: Props<T>) {
   return (
     <>
       <VStack className="hide-scrollbar" overflowX="scroll" w="full">
@@ -29,7 +31,7 @@
           {items.length > 0 && (
             <VStack gap="0">
               {items.map((item, index) => (
-                <Box key={item.id} w="full">
+                <Box key={getRowId(item, index)} w="full">
                   {renderTableRow(item, index)}
                 </Box>
               ))}