Merge pull request #1652 from mars-protocol/develop

Author: Patricie29

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mars-v2-frontend",
-  "version": "2.11.5",
+  "version": "2.11.6",
   "homepage": "./",
   "private": false,
   "license": "SEE LICENSE IN LICENSE FILE",
@@ -46,9 +46,9 @@
     "mobx": "^6.13.7",
     "moment": "^2.30.1",
     "next": "^15.5.4",
-    "react": "19.1.1",
+    "react": "19.2.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.0",
     "react-draggable": "^4.5.0",
     "react-helmet-async": "^2.0.5",
     "react-qr-code": "^2.0.18",

src/api/managedVaults/getManagedVaultDepositors.ts

@@ -0,0 +1,28 @@
+import { FETCH_TIMEOUT } from 'constants/query'
+import { fetchWithTimeout } from 'utils/fetch'
+import { getUrl } from 'utils/url'
+
+interface ManagedVaultDepositorsApiResponse {
+  denom_owners: ManagedVaultDepositor[]
+  pagination: {
+    next_key: string | null
+    total: string
+  }
+}
+
+export default async function getManagedVaultDepositors(vaultTokensDenom: string) {
+  try {
+    const baseUrl = `https://neutron-rest.cosmos-apis.com/cosmos/bank/v1beta1/denom_owners_by_query?denom=${vaultTokensDenom}`
+
+    const url = getUrl(baseUrl, '')
+    const response = await fetchWithTimeout(url, FETCH_TIMEOUT)
+
+    if (!response.ok) return []
+    const data: ManagedVaultDepositorsApiResponse = await response.json()
+
+    return data.denom_owners
+  } catch (error) {
+    console.error('Could not fetch managed vault depositors.', error)
+    return []
+  }
+}

src/components/managedVaults/vaultDetails/common/VaultStats.tsx

@@ -14,7 +14,7 @@ interface Props {
 export default function VaultStats(props: Props) {
   const { stats } = props
   return (
-    <div className='p-3 space-y-3 text-white/60'>
+    <div className='p-3 space-y-4 text-white/60'>
       {stats.map((stat, index) => (
         <React.Fragment key={index}>
           <div className='flex justify-between items-center'>

src/components/managedVaults/vaultDetails/overview/DepositorTable/VaultDepositorsTable.tsx

@@ -0,0 +1,55 @@
+import useVaultDepositorsColumns from 'components/managedVaults/vaultDetails/overview/DepositorTable/useVaultDepositorsColumns'
+import Table from 'components/common/Table'
+import useManagedVaultDepositors from 'hooks/managedVaults/useManagedVaultDepositors'
+import { CircularProgress } from 'components/common/CircularProgress'
+import Text from 'components/common/Text'
+
+interface Props {
+  vaultTokensDenom: string
+  vaultAddress: string
+  baseTokensDenom: string
+  vaultTokensAmount: string
+  ownerAddress: string
+}
+
+export default function VaultDepositorsTable(props: Props) {
+  const { vaultTokensDenom, vaultAddress, baseTokensDenom, vaultTokensAmount, ownerAddress } = props
+  const managedVaultDepositorsData = useManagedVaultDepositors(vaultTokensDenom)
+
+  const columns = useVaultDepositorsColumns(
+    vaultAddress,
+    baseTokensDenom,
+    vaultTokensAmount,
+    ownerAddress,
+  )
+
+  if (managedVaultDepositorsData.isLoading) {
+    return (
+      <div className='flex justify-center items-center h-full w-full'>
+        <CircularProgress size={50} />
+      </div>
+    )
+  }
+
+  if ((managedVaultDepositorsData.data || []).length === 0) {
+    return (
+      <div className='flex justify-center items-center h-full w-full'>
+        <Text size='sm' className='text-white/60'>
+          This vault has no depositors.
+        </Text>
+      </div>
+    )
+  }
+
+  return (
+    <Table
+      title='Depositors'
+      columns={columns}
+      data={managedVaultDepositorsData.data || []}
+      tableBodyClassName='text-white/80'
+      initialSorting={[{ id: 'percentage', desc: true }]}
+      spacingClassName='p-2'
+      hideCard
+    />
+  )
+}

src/components/managedVaults/vaultDetails/overview/DepositorTable/column/UserAddress.tsx

@@ -0,0 +1,50 @@
+import Image from 'next/image'
+import Text from 'components/common/Text'
+import useManagedVaultOwnerInfo from 'hooks/managedVaults/useManagedVaultOwnerInfo'
+import useManagedVaultOwnerPosition from 'hooks/managedVaults/useManagedVaultOwnerPosition'
+import { BN } from 'utils/helpers'
+import { truncate } from 'utils/formatters'
+
+interface Props {
+  address: string
+  vaultAddress?: string
+  ownerAddress?: string
+}
+
+export default function UserAddress(props: Props) {
+  const { address, vaultAddress, ownerAddress } = props
+  const { vaultOwnerInfo, isLoading: isOwnerInfoLoading } = useManagedVaultOwnerInfo(address)
+  const { data: ownerPosition } = useManagedVaultOwnerPosition(vaultAddress || '', address)
+
+  // Check if owner has holdings (shares > 0)
+  const isOwner = ownerAddress && address === ownerAddress
+  const hasHoldings = isOwner && ownerPosition?.shares && BN(ownerPosition.shares).isGreaterThan(0)
+
+  return (
+    <div className='flex items-center gap-2'>
+      <span className='h-8 w-8'>
+        <Image
+          src={vaultOwnerInfo.avatar.url}
+          alt={vaultOwnerInfo.name}
+          width={vaultOwnerInfo.avatar.width}
+          height={vaultOwnerInfo.avatar.height}
+          className='rounded-full w-8 h-8'
+        />
+      </span>
+      <div className='flex items-center gap-1.5'>
+        <Text size='xs' className='inline-block text-white/60 bg-white/10 rounded px-1.5 py-0.5'>
+          {isOwnerInfoLoading ? truncate(address, [2, 6]) : vaultOwnerInfo.name}
+        </Text>
+        {hasHoldings && (
+          <Text
+            size='xs'
+            tag='div'
+            className='px-1.5 py-0.5 rounded flex items-center justify-center text-success bg-success/20'
+          >
+            Vault Owner
+          </Text>
+        )}
+      </div>
+    </div>
+  )
+}

src/components/managedVaults/vaultDetails/overview/DepositorTable/column/UserValue.tsx

@@ -0,0 +1,35 @@
+import DisplayCurrency from 'components/common/DisplayCurrency'
+import Loading from 'components/common/Loading'
+import { BN } from 'utils/helpers'
+import { BNCoin } from 'types/classes/BNCoin'
+import { useManagedVaultConvertToBaseTokens } from 'hooks/managedVaults/useManagedVaultConvertToBaseTokens'
+
+interface Props {
+  value: ManagedVaultDepositor
+  baseTokensDenom: string
+  vaultAddress: string
+}
+
+export default function UserValue(props: Props) {
+  const { value, baseTokensDenom, vaultAddress } = props
+
+  const { data: userVaultTokensAmount, isLoading } = useManagedVaultConvertToBaseTokens(
+    vaultAddress,
+    value.balance.amount ?? '0',
+  )
+
+  if (isLoading) {
+    return (
+      <div className='flex items-center justify-end'>
+        <Loading className='w-12 h-4' />
+      </div>
+    )
+  }
+
+  return (
+    <DisplayCurrency
+      coin={BNCoin.fromDenomAndBigNumber(baseTokensDenom, BN(userVaultTokensAmount ?? 0))}
+      className='text-xs'
+    />
+  )
+}

src/components/managedVaults/vaultDetails/overview/DepositorTable/useVaultDepositorsColumns.tsx

@@ -0,0 +1,60 @@
+import UserAddress from 'components/managedVaults/vaultDetails/overview/DepositorTable/column/UserAddress'
+import UserValue from 'components/managedVaults/vaultDetails/overview/DepositorTable/column/UserValue'
+import { ColumnDef } from '@tanstack/react-table'
+import { FormattedNumber } from 'components/common/FormattedNumber'
+import { useMemo } from 'react'
+
+const calculatePercentage = (userBalance: string, totalVaultTokens: string): number => {
+  return totalVaultTokens && userBalance
+    ? (Number(userBalance) / Number(totalVaultTokens)) * 100
+    : 0
+}
+
+export default function useVaultDepositorsColumns(
+  vaultAddress: string,
+  baseTokensDenom: string,
+  vaultTokensAmount: string,
+  ownerAddress: string,
+) {
+  return useMemo<ColumnDef<ManagedVaultDepositor>[]>(() => {
+    return [
+      {
+        header: 'Depositor',
+        id: 'depositor',
+        cell: ({ row }) => (
+          <UserAddress
+            address={row.original.address}
+            vaultAddress={vaultAddress}
+            ownerAddress={ownerAddress}
+          />
+        ),
+      },
+      {
+        header: 'Percent of Vault Shares',
+        id: 'percentage',
+        enableSorting: true,
+        accessorFn: (row) => calculatePercentage(row.balance?.amount || '0', vaultTokensAmount),
+        cell: ({ row }) => {
+          const percentage = calculatePercentage(
+            row.original.balance?.amount || '0',
+            vaultTokensAmount,
+          )
+          return (
+            <FormattedNumber amount={percentage} options={{ suffix: '%' }} className='text-xs' />
+          )
+        },
+      },
+      {
+        header: 'Value',
+        id: 'value',
+        cell: ({ row }) => (
+          <UserValue
+            value={row.original}
+            vaultAddress={vaultAddress}
+            baseTokensDenom={baseTokensDenom}
+          />
+        ),
+      },
+    ]
+  }, [vaultAddress, baseTokensDenom, vaultTokensAmount, ownerAddress])
+}

src/components/managedVaults/vaultDetails/overview/VaultSummary.tsx

@@ -9,6 +9,7 @@ import useBorrowMarketAssetsTableData from 'components/borrow/Table/useBorrowMar
 import useLendingMarketAssetsTableData from 'components/earn/lend/Table/useLendingMarketAssetsTableData'
 import useAccount from 'hooks/accounts/useAccount'
 import useHealthComputer from 'hooks/health-computer/useHealthComputer'
+import VaultDepositorsTable from 'components/managedVaults/vaultDetails/overview/DepositorTable/VaultDepositorsTable'
 import { BN } from 'utils/helpers'
 import { BNCoin } from 'types/classes/BNCoin'
 import { CardWithTabs } from 'components/common/Card/CardWithTabs'
@@ -115,7 +116,7 @@ export default function VaultSummary(props: Props) {
         title: 'Balances',
         renderContent: () =>
           accountData ? (
-            <div className='h-64 overflow-y-auto bg-white/5 scrollbar-hide'>
+            <div className='h-74 overflow-y-auto bg-white/5 scrollbar-hide'>
               <AccountBalancesTable
                 account={accountData}
                 borrowingData={borrowAssetsData}
@@ -141,7 +142,7 @@ export default function VaultSummary(props: Props) {
       tabsArray.push({
         title: 'Strategies',
         renderContent: () => (
-          <div className='h-64 overflow-y-auto bg-white/5 scrollbar-hide'>
+          <div className='h-74 overflow-y-auto bg-white/5 scrollbar-hide'>
             <AccountStrategiesTable account={accountData} hideCard />
           </div>
         ),
@@ -155,14 +156,31 @@ export default function VaultSummary(props: Props) {
       tabsArray.push({
         title: 'Perp Positions',
         renderContent: () => (
-          <div className='h-64 overflow-y-auto bg-white/5 scrollbar-hide'>
+          <div className='h-74 overflow-y-auto bg-white/5 scrollbar-hide'>
             <AccountPerpPositionTable account={accountData} hideCard />
           </div>
         ),
         notificationCount: perpsCount,
       })
     }
 
+    if (accountData) {
+      tabsArray.push({
+        title: 'Depositors',
+        renderContent: () => (
+          <div className='h-74 overflow-y-auto bg-white/5 scrollbar-hide'>
+            <VaultDepositorsTable
+              vaultTokensDenom={details.vault_tokens_denom}
+              vaultAddress={details.vault_address}
+              baseTokensDenom={details.base_tokens_denom}
+              vaultTokensAmount={details.vault_tokens_amount}
+              ownerAddress={details.ownerAddress || ''}
+            />
+          </div>
+        ),
+      })
+    }
+
     return tabsArray
   }, [
     accountData,
@@ -175,6 +193,11 @@ export default function VaultSummary(props: Props) {
     leverage,
     netWorth.amount,
     positionValue.amount,
+    details.vault_tokens_denom,
+    details.vault_address,
+    details.base_tokens_denom,
+    details.vault_tokens_amount,
+    details.ownerAddress,
   ])
 
   return <CardWithTabs tabs={tabs} textSizeClass='text-base' />

src/components/managedVaults/vaultDetails/performance/UserMetrics.tsx

@@ -3,6 +3,7 @@ import AssetImage from 'components/common/assets/AssetImage'
 import DisplayCurrency from 'components/common/DisplayCurrency'
 import { FormattedNumber } from 'components/common/FormattedNumber'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import { Tooltip } from 'components/common/Tooltip'
 import useVaultAssets from 'hooks/assets/useVaultAssets'
 import { useManagedVaultConvertToBaseTokens } from 'hooks/managedVaults/useManagedVaultConvertToBaseTokens'
 import useManagedVaultUserPosition from 'hooks/managedVaults/useManagedVaultUserPosition'
@@ -42,15 +43,16 @@ export default function UserMetrics(props: Props) {
     },
     {
       value: userPosition?.pnl || 0,
-      label: 'Your Total Earnings',
+      label: 'Your Estimated PnL',
       isCurrency: true,
       formatOptions: { maxDecimals: 2, minDecimals: 2 },
       isProfitOrLoss: true,
       showSignPrefix: true,
+      hasTooltip: true,
     },
     {
       value: calculateROI(userVaultTokensAmount ?? 0),
-      label: 'Your ROI',
+      label: 'Your Estimated ROI',
       formatOptions: { maxDecimals: 2, minDecimals: 2, suffix: '%' },
       isProfitOrLoss: true,
     },
@@ -88,7 +90,16 @@ export default function UserMetrics(props: Props) {
 
         return (
           <div key={index} className='relative text-center py-4 sm:flex-1'>
-            <TitleAndSubCell title={value} sub={metric.label} />
+            {metric.hasTooltip ? (
+              <Tooltip
+                content='This is an estimate based on average vault performance, not your actual earnings.'
+                type='info'
+              >
+                {<TitleAndSubCell title={value} sub={metric.label} />}
+              </Tooltip>
+            ) : (
+              <TitleAndSubCell title={value} sub={metric.label} />
+            )}
             {index < metrics.length - 1 && (
               <div className='hidden sm:block absolute right-0 top-1/2 h-8 w-[1px] bg-white/10 -translate-y-1/2' />
             )}