feat: user positions summary

apps/main/src/llamalend/entities/lending-vaults.ts

@@ -46,15 +46,23 @@ const {
   validationSuite: userAddressValidationSuite,
 })
 
-const { useQuery: useUserLendingVaultStatsQuery, invalidate: invalidateUserLendingVaultStats } = queryFactory({
+const {
+  useQuery: useUserLendingVaultStatsQuery,
+  getQueryOptions: getUserLendingVaultStatsQueryOptions,
+  invalidate: invalidateUserLendingVaultStats,
+} = queryFactory({
   queryKey: ({ userAddress, contractAddress, blockchainId }: UserContractParams) =>
     ['user-lending-vault', 'stats', { blockchainId }, { contractAddress }, { userAddress }, 'v1'] as const,
   queryFn: async ({ userAddress, contractAddress, blockchainId }: UserContractQuery): Promise<UserMarketStats> =>
     getUserMarketStats(userAddress, blockchainId, contractAddress),
   validationSuite: userContractValidationSuite,
 })
 
-const { useQuery: useUserLendingVaultEarningsQuery, invalidate: invalidateUserLendingVaultEarnings } = queryFactory({
+const {
+  useQuery: useUserLendingVaultEarningsQuery,
+  getQueryOptions: getUserLendingVaultEarningsQueryOptions,
+  invalidate: invalidateUserLendingVaultEarnings,
+} = queryFactory({
   queryKey: ({ userAddress, contractAddress, blockchainId }: UserContractParams) =>
     ['user-lending-vault', 'earnings', { blockchainId }, { contractAddress }, { userAddress }, 'v1'] as const,
   queryFn: ({ userAddress, contractAddress, blockchainId }: UserContractQuery) =>
@@ -111,5 +119,7 @@ export function invalidateAllUserLendingSupplies(userAddress: Address | undefine
 
 export const getUserLendingSuppliesOptions = getUserLendingSuppliesQueryOptions
 export const useUserLendingVaultEarnings = useUserLendingVaultEarningsQuery
+export const getUserLendingVaultEarningsOptions = getUserLendingVaultEarningsQueryOptions
 export const getUserLendingVaultsOptions = getUserLendingVaultsQueryOptions
 export const useUserLendingVaultStats = useUserLendingVaultStatsQuery
+export const getUserLendingVaultStatsOptions = getUserLendingVaultStatsQueryOptions

apps/main/src/llamalend/entities/mint-markets.ts

@@ -40,7 +40,11 @@ const {
 
 export const getUserMintMarketsOptions = getUserMintMarketsQueryOptions
 
-const { useQuery: useUserMintMarketStatsQuery, invalidate: invalidateUserMintMarketStats } = queryFactory({
+const {
+  useQuery: useUserMintMarketStatsQuery,
+  getQueryOptions: getUserMintMarketStatsQueryOptions,
+  invalidate: invalidateUserMintMarketStats,
+} = queryFactory({
   queryKey: ({ userAddress, blockchainId, contractAddress }: UserContractParams) =>
     ['user-mint-markets', 'stats', { blockchainId }, { contractAddress }, { userAddress }, 'v1'] as const,
   queryFn: ({ userAddress, blockchainId, contractAddress }: UserContractQuery) =>
@@ -62,3 +66,4 @@ export const invalidateAllUserMintMarkets = (userAddress: Address | undefined) =
 }
 
 export const useUserMintMarketStats = useUserMintMarketStatsQuery
+export const getUserMintMarketStatsOptions = getUserMintMarketStatsQueryOptions

apps/main/src/llamalend/entities/usd-prices.ts

@@ -1,7 +1,10 @@
 import { ContractParams, queryFactory, rootKeys } from '@ui-kit/lib/model'
 import { contractValidationSuite } from '@ui-kit/lib/model/query/contract-validation'
 
-export const { useQuery: useTokenUsdPrice } = queryFactory({
+export const {
+  useQuery: useTokenUsdPrice,
+  getQueryOptions: getTokenUsdPriceOptions,
+} = queryFactory({
   queryKey: (params: ContractParams) => [...rootKeys.contract(params), 'usd-price'] as const,
   queryFn: async ({ blockchainId, contractAddress }: ContractParams) => {
     const response = await fetch(`https://prices.curve.finance/v1/usd_price/${blockchainId}/${contractAddress}`)

apps/main/src/llamalend/features/market-list/UserPositionSummary.tsx

@@ -0,0 +1,88 @@
+import Grid from '@mui/material/Grid'
+import Skeleton from '@mui/material/Skeleton'
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import { type LlamaMarket } from '@/llamalend/entities/llama-markets'
+import { useUserPositionsSummary } from './hooks/useUserPositionsSummary'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { formatNumber } from '@ui-kit/utils'
+
+const { Spacing } = SizesAndSpaces
+
+type UserPositionStatisticsProps = {
+  markets: LlamaMarket[] | undefined
+  loading: boolean
+}
+
+export const UserPositionSummary = ({ markets, loading }: UserPositionStatisticsProps) => {
+  const { totals, isInitialLoading } = useUserPositionsSummary(markets, { enabled: !loading })
+  const showSkeletons = loading || isInitialLoading
+  const items = [
+    {
+      label: 'Total Collateral Value',
+      value: totals.collateralValue,
+      startAdornment: '$',
+    },
+    {
+      label: 'Total Borrowed',
+      value: totals.borrowedValue,
+      startAdornment: '$',
+    },
+    {
+      label: 'Total Supplied',
+      value: totals.suppliedValue,
+      startAdornment: '$',
+    },
+    {
+      label: 'Claimable Rewards',
+      value: totals.rewardsValue,
+      startAdornment: '$',
+    },
+  ] as const
+
+  return (
+    <Grid container spacing={Spacing.sm} sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+      {items.map(({ label, value, startAdornment }) => (
+        <UserPositionStatisticItem
+          key={label}
+          label={label}
+          startAdornment={startAdornment}
+          isLoading={showSkeletons}
+          value={formatNumber(value ?? 0, { abbreviate: true })}
+        />
+      ))}
+    </Grid>
+  )
+}
+
+const UserPositionStatisticItem = ({
+  label,
+  value,
+  startAdornment,
+  isLoading,
+}: {
+  label: string
+  value: string
+  startAdornment?: string
+  isLoading?: boolean
+}) => (
+  <Grid size={3} padding={Spacing.md}>
+    <Stack>
+      <Typography variant="bodyXsRegular" color="textTertiary">
+        {label}
+      </Typography>
+      {isLoading ? (
+        <Skeleton variant="rectangular" width={110} height={32} />
+      ) : (
+        <Stack direction="row" alignItems="baseline">
+          {startAdornment && (
+            <Typography variant="highlightM" color="textSecondary">
+              {startAdornment}
+            </Typography>
+          )}
+          <Typography variant="highlightXl">{value}</Typography>
+        </Stack>
+      )}
+    </Stack>
+  </Grid>
+)

apps/main/src/llamalend/features/market-list/UserPositionTabs.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { fromEntries } from '@curvefi/prices-api/objects.util'
 import Button from '@mui/material/Button'
 import Stack from '@mui/material/Stack'
@@ -12,7 +12,7 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { MarketRateType } from '@ui-kit/types/market'
 import { LlamaMonitorBotButton } from './LlamaMonitorBotButton'
 import { UserPositionsTable, type UserPositionsTableProps } from './UserPositionsTable'
-import { UserPositionStatistics } from './UserPositionStatistics'
+import { UserPositionSummary } from './UserPositionSummary'
 
 const { Spacing, Height } = SizesAndSpaces
 
@@ -57,6 +57,11 @@ export const UserPositionsTabs = (props: Omit<UserPositionsTableProps, 'tab' | '
 
   const [tab, setTab] = useState<MarketRateType>(defaultTab.value)
 
+  // Update tab when defaultTab changes (e.g., when user positions data loads)
+  useEffect(() => {
+    setTab(defaultTab.value)
+  }, [defaultTab.value])
+
   return (
     <Stack>
       <Stack
@@ -92,7 +97,7 @@ export const UserPositionsTabs = (props: Omit<UserPositionsTableProps, 'tab' | '
         </Stack>
       ) : (
         <>
-          {!isMobile && <UserPositionStatistics />}
+          {!isMobile && <UserPositionSummary markets={markets} loading={props.loading} />}
           <Stack
             direction="row"
             justifyContent="space-between"