Feature/deprecate dtfs

package.json

@@ -35,7 +35,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@rainbow-me/rainbowkit": "2.2.10",
     "@reserve-protocol/dtf-rebalance-lib": "^3.2.1",
-    "@reserve-protocol/react-zapper": "^1.5.9",
+    "@reserve-protocol/react-zapper": "^1.5.11",
     "@reserve-protocol/rtokens": "^1.1.23",
     "@reserve-protocol/trusted-fillers-sdk": "^0.3.0",
     "@sentry/react": "^9.16.0",

src/components/layout/navigation/TokenNavigation.tsx

@@ -1,3 +1,4 @@
+import { useDTFStatus } from '@/hooks/use-dtf-status'
 import { t } from '@lingui/macro'
 import AuctionsIcon from 'components/icons/AuctionsIcon'
 import GovernanceIcon from 'components/icons/GovernanceIcon'
@@ -7,6 +8,7 @@ import StakeIcon from 'components/icons/StakeIcon'
 import { CurrentRTokenLogo } from 'components/icons/TokenLogo'
 import { navigationIndexAtom } from 'components/section-navigation/atoms'
 import useSectionNavigate from '@/components/section-navigation/use-section-navigate'
+import useRToken from 'hooks/useRToken'
 import { useAtomValue } from 'jotai'
 import React, { useEffect, useMemo, useState } from 'react'
 import { ChevronDown, ChevronRight } from 'lucide-react'
@@ -24,6 +26,7 @@ interface NavigationItem {
   label: string
   route: string
   subnav?: SubNavItem[]
+  disabled?: boolean
 }
 
 interface NavContentProps extends NavigationItem {
@@ -141,16 +144,30 @@ const NavContent = ({
   )
 }
 
-const NavItem = (props: NavigationItem) => (
-  <NavLink
-    className="mb-1 no-underline block"
-    to={props.route}
-  >
-    {({ isActive }) => <NavContent {...props} isActive={isActive} />}
-  </NavLink>
-)
+const NavItem = (props: NavigationItem) => {
+  if (props.disabled) {
+    return (
+      <div className="mb-1 block opacity-50 pointer-events-none">
+        <NavContent {...props} isActive={false} />
+      </div>
+    )
+  }
+
+  return (
+    <NavLink
+      className="mb-1 no-underline block"
+      to={props.route}
+    >
+      {({ isActive }) => <NavContent {...props} isActive={isActive} />}
+    </NavLink>
+  )
+}
 
 const TokenNavigation = () => {
+  const rToken = useRToken()
+  const status = useDTFStatus(rToken?.address, rToken?.chainId)
+  const isDeprecated = status === 'deprecated'
+
   const navigation: NavigationItem[] = useMemo(
     () => [
       {
@@ -179,11 +196,13 @@ const TokenNavigation = () => {
         icon: <AuctionsIcon />,
         label: t`Auctions`,
         route: ROUTES.AUCTIONS,
+        disabled: isDeprecated,
       },
       {
         icon: <GovernanceIcon />,
         label: t`Governance`,
         route: ROUTES.GOVERNANCE,
+        disabled: isDeprecated,
       },
       {
         icon: <ManagerIcon />,
@@ -202,7 +221,7 @@ const TokenNavigation = () => {
         ],
       },
     ],
-    []
+    [isDeprecated]
   )
 
   return (

src/components/ui/data-table.tsx

@@ -204,6 +204,7 @@ interface DataTableComponentProps<TData, TValue>
   initialSorting?: SortingState
   loading?: boolean
   loadingSkeleton?: React.ReactNode
+  getRowClassName?: (row: Row<TData>) => string | undefined
 }
 
 const CustomTableRow = ({
@@ -215,6 +216,7 @@ const CustomTableRow = ({
   expandedRows,
   index,
   hoverRowComponent,
+  getRowClassName,
 }: {
   row: Row<any>
   handleRowClick: (row: Row<any>, event: React.MouseEvent) => void
@@ -227,6 +229,7 @@ const CustomTableRow = ({
     row: Row<any>
     children: React.ReactNode
   }) => React.ReactElement
+  getRowClassName?: (row: Row<any>) => string | undefined
 }) => {
   const baseRow = (
     <TableRow
@@ -240,7 +243,8 @@ const CustomTableRow = ({
           'bg-card border border-border rounded-tl-lg rounded-tr-lg',
         expandedRows[index - 1]
           ? '!border-t-[0]'
-          : '[&:not(:first-child)]:!border-t-[1px]'
+          : '[&:not(:first-child)]:!border-t-[1px]',
+        getRowClassName?.(row)
       )}
     >
       {row.getVisibleCells().map((cell) => (
@@ -276,6 +280,7 @@ function DataTable<TData, TValue>({
   initialSorting = [],
   loading = false,
   loadingSkeleton,
+  getRowClassName,
 }: DataTableComponentProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>(initialSorting)
   const [paginationState, setPaginationState] = React.useState<PaginationState>(
@@ -375,6 +380,7 @@ function DataTable<TData, TValue>({
                   expandedRows={expandedRows}
                   index={index}
                   hoverRowComponent={hoverRowComponent}
+                  getRowClassName={getRowClassName}
                 />
                 {!!renderSubComponent && row.getIsExpanded() && (
                   <tr

src/hooks/use-dtf-status.ts

@@ -0,0 +1,95 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+const RESERVE_API = 'https://api.reserve.org/'
+const REFRESH_INTERVAL = 1000 * 60 * 10 // 10 minutes
+
+// Hardcoded snapshot of deprecated DTFs for instant lookup before API loads
+const KNOWN_DEPRECATED: { address: string; chainId: number }[] = [
+  { address: '0x005f893ecd7bf9667195642f7649da8163e23658', chainId: 1 },
+  { address: '0xacdf0dba4b9839b96221a8487e9ca660a48212be', chainId: 1 },
+  { address: '0x78da5799cf427fee11e9996982f4150ece7a99a7', chainId: 1 },
+  { address: '0xfc0b1eef20e4c68b3dcf36c4537cfa7ce46ca70b', chainId: 1 },
+  { address: '0xcc7ff230365bd730ee4b352cc2492cedac49383e', chainId: 8453 },
+  { address: '0x641b0453487c9d14c5df96d45a481ef1dc84e31f', chainId: 8453 },
+  { address: '0x47686106181b3cefe4eaf94c4c10b48ac750370b', chainId: 8453 },
+  { address: '0xfe45eda533e97198d9f3deeda9ae6c147141f6f9', chainId: 8453 },
+  { address: '0xf8ef6e785473e82527908b06023ac3e401ccfdcd', chainId: 8453 },
+  { address: '0xd600e748c17ca237fcb5967fa13d688aff17be78', chainId: 8453 },
+  { address: '0x8f0987ddb485219c767770e2080e5cc01ddc772a', chainId: 8453 },
+  { address: '0xc9a3e2b3064c1c0546d3d0edc0a748e9f93cf18d', chainId: 8453 },
+  { address: '0x89ff8f639d402839205a6bf03cc01bdffa4768b7', chainId: 8453 },
+  { address: '0x0bbf664d46becc28593368c97236faa0fb397595', chainId: 42161 },
+]
+
+const KNOWN_DEPRECATED_ADDRESSES = new Set(
+  KNOWN_DEPRECATED.map((d) => d.address)
+)
+
+type DTFStatusItem = {
+  address: string
+  chainId: number
+  status: 'active' | 'deprecated'
+}
+
+const useDiscoverDTFs = () => {
+  return useQuery({
+    queryKey: ['discover-dtfs-status'],
+    queryFn: async (): Promise<DTFStatusItem[]> => {
+      const response = await fetch(`${RESERVE_API}discover/dtfs`)
+      if (!response.ok) throw new Error('Failed to fetch dtf list')
+      const data = await response.json()
+      return data.map((item: any) => ({
+        address: item.address?.toLowerCase(),
+        chainId: item.chainId,
+        status: item.status ?? 'active',
+      }))
+    },
+    refetchInterval: REFRESH_INTERVAL,
+    staleTime: REFRESH_INTERVAL,
+  })
+}
+
+const isKnownDeprecated = (address: string, chainId?: number): boolean => {
+  const lower = address.toLowerCase()
+  return KNOWN_DEPRECATED.some(
+    (d) => d.address === lower && d.chainId === chainId
+  )
+}
+
+export const useDTFStatus = (
+  address?: string,
+  chainId?: number
+): 'active' | 'deprecated' => {
+  const { data } = useDiscoverDTFs()
+
+  if (!address) return 'active'
+
+  // Fast path: check hardcoded list before API loads
+  if (!data) {
+    return isKnownDeprecated(address, chainId) ? 'deprecated' : 'active'
+  }
+
+  const match = data.find(
+    (item) =>
+      item.address === address.toLowerCase() && item.chainId === chainId
+  )
+
+  return match?.status ?? 'active'
+}
+
+export const useDeprecatedAddresses = (): Set<string> => {
+  const { data } = useDiscoverDTFs()
+
+  return useMemo(() => {
+    if (!data) return KNOWN_DEPRECATED_ADDRESSES
+
+    const deprecated = new Set<string>()
+    for (const item of data) {
+      if (item.status === 'deprecated') {
+        deprecated.add(item.address)
+      }
+    }
+    return deprecated
+  }, [data])
+}

src/hooks/useIndexDTFList.ts

@@ -1,5 +1,3 @@
-import { ChainId } from '@/utils/chains'
-// import { RESERVE_API } from '@/utils/constants'
 import { useQuery } from '@tanstack/react-query'
 import { Address } from 'viem'
 
@@ -18,51 +16,45 @@ export type IndexDTFItem = {
   performance: Performance[]
   performancePercent: number
   chainId: number
+  status: 'active' | 'deprecated'
   brand?: {
     icon?: string
     cover?: string
     tags?: string[]
   }
 }
 
-const calculatePercentageChange = (performance: Performance[]) => {
-  if (performance.length === 0) {
-    return 0
-  }
-  const firstValue = performance[0].value
-  const lastValue = performance[performance.length - 1].value
-  return ((lastValue - firstValue) / firstValue) * 100
-}
-
 const REFRESH_INTERVAL = 1000 * 60 * 10 // 10 minutes
 
 const useIndexDTFList = () => {
   return useQuery({
     queryKey: ['index-dtf-list'],
     queryFn: async (): Promise<IndexDTFItem[]> => {
-      const f = async (chain: number) => {
-        const response = await fetch(
-          `${RESERVE_API}discover/dtf?chainId=${chain}&limit=100`
-        )
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch dtf list')
-        }
-
-        const data = await response.json()
+      const response = await fetch(`${RESERVE_API}discover/dtfs?performance=true&brand=true`)
 
-        return data.map((item: any) => ({
-          ...item,
-          performancePercent: calculatePercentageChange(item.performance),
-          performance: item.performance,
-        })) as IndexDTFItem[]
+      if (!response.ok) {
+        throw new Error('Failed to fetch dtf list')
       }
 
-      const responses = await Promise.all(
-        [ChainId.Base, ChainId.Mainnet, ChainId.BSC].map(f)
-      )
+      const data = await response.json()
 
-      return responses.flat().sort((x, y) => y.marketCap - x.marketCap)
+      return data
+        .filter((item: any) => item.type === 'index')
+        .map((item: any) => ({
+          address: item.address,
+          symbol: item.symbol,
+          name: item.name,
+          price: item.price,
+          fee: item.fee,
+          marketCap: item.marketCap,
+          chainId: item.chainId,
+          basket: item.basket,
+          status: item.status ?? 'active',
+          performance: item.performance ?? [],
+          performancePercent: 0,
+          brand: item.brand,
+        }))
+        .sort((x: IndexDTFItem, y: IndexDTFItem) => y.marketCap - x.marketCap)
     },
     refetchInterval: REFRESH_INTERVAL,
     staleTime: REFRESH_INTERVAL,

src/state/dtf/atoms.ts

@@ -224,6 +224,8 @@ export const hasBridgedAssetsAtom = atom((get) => {
   )
 })
 
+export const indexDTFStatusAtom = atom<'active' | 'deprecated'>('active')
+
 export const isSingletonRebalanceAtom = atom((get) => {
   const version = get(indexDTFVersionAtom)
 

src/views/discover/components/index/components/index-dtf-card.tsx

@@ -20,7 +20,10 @@ const IndexDTFCard = ({ dtf }: { dtf: IndexDTFItem }) => {
 
   return (
     <Link
-      className="bg-background flex rounded-3xl gap-3 p-3"
+      className={cn(
+        'bg-background flex rounded-3xl gap-3 p-3',
+        dtf.status === 'deprecated' && 'opacity-30'
+      )}
       to={getFolioRoute(dtf.address, dtf.chainId)}
     >
       <div className="relative h-[100px] w-[100px] rounded-xl overflow-hidden flex-shrink-0">

src/views/discover/components/index/components/index-dtf-table.tsx

@@ -250,6 +250,9 @@ const IndexDTFTable = ({
             : undefined
         }
         onRowClick={handleRowClick}
+        getRowClassName={(row) =>
+          row.original.status === 'deprecated' ? 'opacity-30' : undefined
+        }
         className={cn(
           'hidden lg:block',
           '[&_table]:bg-card [&_table]:rounded-[20px] [&_table]:text-base',

src/views/discover/components/index/hooks/use-filtered-dtf-index.tsx

@@ -14,6 +14,10 @@ const useFilteredDTFIndex = () => {
     }
 
     const filtered = data.filter((dtf) => {
+      if (!search && dtf.status === 'deprecated') {
+        return false
+      }
+
       if (!chains.length || !chains.includes(dtf.chainId)) {
         return false
       }