chore: use data api v2 (#1817)

* use data api v2

* lint

* fix build

* remove obsolete type

* add api route

* remove logs

* remove obsolete import

* lint

Author: janndriessen

src/app/api/data/[address]/route.ts

@@ -0,0 +1,23 @@
+import { type NextRequest, NextResponse } from 'next/server'
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ address: string }> },
+) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const { address } = await params
+    const url = `https://api.indexcoop.com/v2/data/${address}?${searchParams.toString()}`
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': process.env.INDEX_COOP_API_V2_KEY,
+      } as HeadersInit,
+    })
+    const json = await res.json()
+    return NextResponse.json(json, { status: 200 })
+  } catch (error) {
+    return NextResponse.json(error, { status: 500 })
+  }
+}

src/app/api/stats/route.ts

@@ -1,17 +1,18 @@
 import { CoinGeckoService, CoingeckoProvider } from '@indexcoop/analytics-sdk'
-import { NextRequest, NextResponse } from 'next/server'
+import { type NextRequest, NextResponse } from 'next/server'
 
 import { fetchTokenMetrics } from '@/lib/utils/api/index-data-provider'
 import { fetchCarryCosts } from '@/lib/utils/fetch'
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url)
 
+  const chainId = Number(searchParams.get('chainId'))
   const tokenAddress = searchParams.get('address')
   const symbol = searchParams.get('symbol')
   const base = searchParams.get('base')
   const baseCurrency = searchParams.get('baseCurrency')
-  if (!tokenAddress || !symbol || !base || !baseCurrency) {
+  if (!chainId || !tokenAddress || !symbol || !base || !baseCurrency) {
     return NextResponse.json('Bad Request', { status: 400 })
   }
   try {
@@ -28,6 +29,7 @@ export async function GET(req: NextRequest) {
       ? (carryCosts[formattedSymbol] ?? null)
       : null
     const metrics = await fetchTokenMetrics({
+      chainId,
       tokenAddress: tokenAddress,
       metrics: ['fees', 'nav', 'navchange'],
     })

src/app/earn/provider.tsx

@@ -13,9 +13,8 @@ import { isAddress } from 'viem'
 import { base } from 'viem/chains'
 
 import { useQueryParams } from '@/app/earn/use-query-params'
-import { ETH, Token } from '@/constants/tokens'
-import { TokenBalance, useBalances } from '@/lib/hooks/use-balance'
-import { QuoteResult } from '@/lib/hooks/use-best-quote/types'
+import { ETH, type Token } from '@/constants/tokens'
+import { type TokenBalance, useBalances } from '@/lib/hooks/use-balance'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { useQuoteResult } from '@/lib/hooks/use-quote-result'
 import { useWallet } from '@/lib/hooks/use-wallet'
@@ -29,6 +28,8 @@ import { calculateApy } from '@/lib/utils/apy'
 
 import { getCurrencyTokens, getYieldTokens } from './constants'
 
+import type { QuoteResult } from '@/lib/hooks/use-best-quote/types'
+
 const hyEthTokenlist = getTokenByChainAndSymbol(1, 'hyETH')
 const hyETH = { ...hyEthTokenlist, image: hyEthTokenlist.logoURI }
 const icETH = getTokenByChainAndSymbol(1, 'icETH')
@@ -176,6 +177,7 @@ export function EarnProvider(props: { children: any }) {
     queryKey: ['token-latest-stats', indexTokenAddress],
     queryFn: async () => {
       const data = await fetchTokenMetrics({
+        chainId: indexToken.chainId!,
         tokenAddress: indexTokenAddress!,
         metrics: ['nav', 'apy', 'pav'],
       })
@@ -199,6 +201,7 @@ export function EarnProvider(props: { children: any }) {
     queryKey: ['token-apy-stats', indexTokenAddress],
     queryFn: async () => {
       const data = await fetchTokenHistoricalData({
+        chainId,
         tokenAddress: indexTokenAddress!,
         metrics: ['apy'],
         interval: 'daily',

src/app/leverage/components/portfolio-widget/columns.tsx

@@ -13,10 +13,11 @@ import * as chains from 'viem/chains'
 import { formatAmount } from '@/app/leverage/utils/currency'
 import { leverageShortTypeMap } from '@/app/leverage/utils/get-leverage-type'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
-import { GetApiV2UserAddressPositionsQueryResponse } from '@/gen'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { cn } from '@/lib/utils/tailwind'
 
+import type { GetApiV2UserAddressPositionsQueryResponse } from '@/gen'
+
 const columnsHelper =
   createColumnHelper<GetApiV2UserAddressPositionsQueryResponse[number]>()
 

src/app/leverage/components/stats/leverage-selector-container.tsx

@@ -11,7 +11,7 @@ import { LeverageSelector } from '@/app/leverage/components/stats/leverage-selec
 import { useQuickStats } from '@/app/leverage/components/stats/use-quick-stats'
 import { getPathForRatio, ratios } from '@/app/leverage/constants'
 import { useLeverageToken } from '@/app/leverage/provider'
-import { LeverageRatio, LeverageType } from '@/app/leverage/types'
+import { type LeverageRatio, LeverageType } from '@/app/leverage/types'
 import { formatPercentage } from '@/app/products/utils/formatters'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
 import { useNetwork } from '@/lib/hooks/use-network'
@@ -31,7 +31,7 @@ export function LeverageSelectorContainer() {
   const {
     data: { token },
     isFetchingQuickStats,
-  } = useQuickStats(market, indexToken)
+  } = useQuickStats(market, { ...indexToken, chainId: chainId ?? 1 })
 
   const { data } = useQuery({
     gcTime: 5 * 60 * 1000,

src/app/leverage/components/stats/use-quick-stats.tsx

@@ -1,4 +1,4 @@
-import { QueryFunctionContext, useQuery } from '@tanstack/react-query'
+import { type QueryFunctionContext, useQuery } from '@tanstack/react-query'
 
 import { formatAmount, formatDollarAmount } from '@/lib/utils'
 
@@ -38,7 +38,12 @@ interface QuickStatsApiResponse {
 
 type QuickStatsQueryKey = [
   string,
-  { address: string | undefined; symbol: string; market: string },
+  {
+    chainId: number
+    address: string | undefined
+    symbol: string
+    market: string
+  },
 ]
 
 export function formatStatsAmount(
@@ -54,18 +59,18 @@ export function formatStatsAmount(
 
 export function useQuickStats(
   market: string,
-  indexToken: { address: string | undefined; symbol: string },
+  indexToken: { address: string | undefined; chainId: number; symbol: string },
 ) {
   async function fetchStats(
     context: QueryFunctionContext<QuickStatsQueryKey>,
   ): Promise<QuickStats> {
-    const [, { address, symbol, market }] = context.queryKey
+    const [, { address, chainId, symbol, market }] = context.queryKey
     const m = market.split(' / ')
     const baseToken = m[0]
     const baseCurrency = m[1].toLowerCase()
     try {
       const response = await fetch(
-        `/api/stats?address=${address}&symbol=${symbol}&base=${baseToken}&baseCurrency=${baseCurrency}`,
+        `/api/stats?address=${address}&chainId=${chainId}&symbol=${symbol}&base=${baseToken}&baseCurrency=${baseCurrency}`,
         {
           method: 'GET',
         },
@@ -106,6 +111,7 @@ export function useQuickStats(
     queryKey: [
       'fetch-quick-stats',
       {
+        chainId: indexToken.chainId,
         symbol: indexToken.symbol,
         address: indexToken.address,
         market,

src/app/leverage/utils/fetch-leverage-token-prices.ts

@@ -1,14 +1,16 @@
-import { getTokenByChainAndAddress, LeverageToken } from '@indexcoop/tokenlists'
+import { getTokenByChainAndAddress } from '@indexcoop/tokenlists'
 
 import { getLeverageType } from '@/app/leverage/utils/get-leverage-type'
 import { formatPrice } from '@/app/products/utils/formatters'
-import { GetApiV2UserAddressPositions200 } from '@/gen'
-import { TokenBalance } from '@/lib/hooks/use-balance'
 import { formatWei } from '@/lib/utils'
 import { fetchTokenMetrics } from '@/lib/utils/api/index-data-provider'
 
 import { leverageTokens } from '../constants'
-import { EnrichedToken } from '../types'
+
+import type { EnrichedToken } from '@/app/leverage/types'
+import type { GetApiV2UserAddressPositions200 } from '@/gen'
+import type { TokenBalance } from '@/lib/hooks/use-balance'
+import type { LeverageToken } from '@indexcoop/tokenlists'
 
 export const calculateAverageEntryPrice = (
   positions: GetApiV2UserAddressPositions200 = [],
@@ -89,6 +91,7 @@ export async function fetchLeverageTokenPrices(
     const navResponses = await Promise.all(
       tokenBalances.map((token) =>
         fetchTokenMetrics({
+          chainId,
           tokenAddress: token.address ?? '',
           metrics: ['nav'],
         }),
@@ -103,7 +106,8 @@ export async function fetchLeverageTokenPrices(
 
     const enrichedTokens = tokenBalances.map((token, idx) => {
       const usd =
-        parseFloat(formatWei(token.balance, token.decimals)) * tokenPrices[idx]
+        Number.parseFloat(formatWei(token.balance, token.decimals)) *
+        tokenPrices[idx]
       return {
         ...token,
         size: formatPrice(usd),

src/app/products/components/product-panel.tsx

@@ -6,13 +6,16 @@ import { Suspense } from 'react'
 
 import { ProductList } from '@/app/products/components/product-list'
 import { productTokens } from '@/app/products/constants/tokens'
-import { ProductRow } from '@/app/products/types/product'
-import { SortBy, SortDirection } from '@/app/products/types/sort'
+import { type SortBy, SortDirection } from '@/app/products/types/sort'
 import { sortProducts } from '@/app/products/utils/sort'
+import { useNetwork } from '@/lib/hooks/use-network'
 import { fetchTokenMetrics } from '@/lib/utils/api/index-data-provider'
 import { calculateApy } from '@/lib/utils/apy'
 
+import type { ProductRow } from '@/app/products/types/product'
+
 export function ProductPanel() {
+  const { chainId } = useNetwork()
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -30,6 +33,7 @@ export function ProductPanel() {
         productTokens.map((token) =>
           token.address
             ? fetchTokenMetrics({
+                chainId: chainId ?? 1,
                 tokenAddress: token.address,
                 metrics: [
                   'nav',

src/components/charts/use-chart-data.ts

@@ -4,12 +4,13 @@ import { useState } from 'react'
 import { isAddress } from 'viem'
 
 import { ChartPeriod } from '@/components/charts/types'
+import { useNetwork } from '@/lib/hooks/use-network'
 import {
+  type IndexData,
+  type IndexDataInterval,
+  type IndexDataMetric,
+  type IndexDataPeriod,
   fetchTokenHistoricalData,
-  IndexData,
-  IndexDataInterval,
-  IndexDataMetric,
-  IndexDataPeriod,
 } from '@/lib/utils/api/index-data-provider'
 import { calculateApy } from '@/lib/utils/apy'
 import { digitsByAddress } from '@/lib/utils/tokens'
@@ -61,7 +62,7 @@ type PartialIndexData = Partial<IndexData> & {
 function formatData(
   data: PartialIndexData[],
   metric: IndexDataMetric,
-  digits: number = 2,
+  digits = 2,
 ) {
   if (metric === 'nav') {
     return data.map((datum) => ({
@@ -91,6 +92,7 @@ export function useChartData(
   indexTokenAddress?: string,
   metric: IndexDataMetric = 'nav',
 ) {
+  const { chainId } = useNetwork()
   const [selectedPeriod, setSelectedPeriod] = useState(
     metric === 'apy' ? ChartPeriod.Week : ChartPeriod.Day,
   )
@@ -106,6 +108,7 @@ export function useChartData(
     queryFn: async () => {
       const { sample, ...fetchSettings } = fetchSettingsByPeriod[selectedPeriod]
       const data = await fetchTokenHistoricalData({
+        chainId: chainId ?? 1,
         metrics: [metric],
         tokenAddress: indexTokenAddress!,
         ...fetchSettings,

src/lib/hooks/use-token-price.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { base } from 'viem/chains'
 
 import { PolygonLegacyTokenList } from '@/app/legacy/config'
-import { ETH, Token } from '@/constants/tokens'
+import { ETH, type Token } from '@/constants/tokens'
 import { useNetwork } from '@/lib/hooks/use-network'
 import { fetchCoingeckoTokenPrice } from '@/lib/utils/api/coingecko'
 import { fetchTokenMetrics } from '@/lib/utils/api/index-data-provider'
@@ -67,6 +67,7 @@ export const getTokenPrice = async (
   }
   if (shouldOverrideNav(token.symbol, chainId)) {
     const dataResponse = await fetchTokenMetrics({
+      chainId,
       tokenAddress,
       metrics: ['nav'],
     })