Feat: Update Categories page (DefiLlama#1803)

* Feat:Update Categories page, add missing categories + combined 24h revenues * update column size --------- Co-authored-by: mintdart <[email protected]>
0xpeluche · Nov 28, 2024 · ddbfd7a · ddbfd7a
1 parent 56730bd
commit ddbfd7a
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 29 deletions.
diff --git a/src/api/categories/fees/index.tsx b/src/api/categories/fees/index.tsx
@@ -1,6 +1,17 @@
 import { DIMENISIONS_OVERVIEW_API, DIMENISIONS_SUMMARY_BASE_API } from '~/constants'
 import { fetchOverCache } from '~/utils/perf'
 
+interface Protocol {
+	category: string | null
+	total24h?: number
+}
+
+type RevenuesResponse = {
+	protocols: Protocol[]
+}
+
+type AggregatedRevenues = Record<string, number>
+
 // - used in /fees and /fees/chain/[chain]
 export const getFeesAndRevenueByChain = async ({
 	chain,
@@ -93,3 +104,36 @@ export const getFeesAndRevenueProtocolsByChain = async ({ chain }: { chain?: str
 		})) ?? []
 	)
 }
+
+// - used in /categories
+export const getRevenuesByCategories = async (): Promise<AggregatedRevenues> => {
+	const apiUrl = `${DIMENISIONS_OVERVIEW_API}/fees/all?dataType=dailyRevenue&excludeTotalDataChart=true&excludeTotalDataChartBreakdown=true`
+
+	const revenues: RevenuesResponse | null = await fetchOverCache(apiUrl)
+		.then((res) => {
+			if (res.status === 200) {
+				return res.json()
+			} else {
+				return null
+			}
+		})
+		.catch((err) => {
+			console.log('Error at ', apiUrl, err)
+			return null
+		})
+
+	return revenues.protocols.reduce((acc: AggregatedRevenues, protocol: Protocol) => {
+		const { category, total24h } = protocol
+		// Filter to ignore negative or abnormally high values
+		if (!category || !total24h || total24h < 0 || total24h > 10e9) {
+			return acc
+		}
+
+		if (!acc[category]) {
+			acc[category] = 0
+		}
+
+		acc[category] += Number(total24h)
+		return acc
+	}, {})
+}
diff --git a/src/components/Table/Defi/columns.tsx b/src/components/Table/Defi/columns.tsx
@@ -1,4 +1,7 @@
 import { ColumnDef, sortingFns } from '@tanstack/react-table'
+import { useEffect, useState } from 'react'
+import { ButtonLight } from '~/components/ButtonStyled'
+import { Icon } from '~/components/Icon'
 import { IconsRow } from '~/components/IconsRow'
 import { CustomLink } from '~/components/Link'
 import { QuestionHelper } from '~/components/QuestionHelper'
@@ -18,25 +21,22 @@ import {
 	toNiceDayMonthYear,
 	toNiceHour
 } from '~/utils'
+import { UpcomingEvent } from '../../../containers/Defi/Protocol/Emissions/UpcomingEvent'
 import { formatColumnOrder } from '../utils'
 import type {
+	AirdropRow,
+	CategoryPerformanceRow,
+	CoinPerformanceRow,
+	IBridgedRow,
 	ICategoryRow,
 	IChainsRow,
-	IForksRow,
-	IOraclesRow,
-	ILSDRow,
 	IEmission,
-	IGovernance,
 	IETFRow,
-	AirdropRow,
-	IBridgedRow,
-	CategoryPerformanceRow,
-	CoinPerformanceRow
+	IForksRow,
+	IGovernance,
+	ILSDRow,
+	IOraclesRow
 } from './types'
-import { useEffect, useState } from 'react'
-import { UpcomingEvent } from '../../../containers/Defi/Protocol/Emissions/UpcomingEvent'
-import { Icon } from '~/components/Icon'
-import { ButtonLight } from '~/components/ButtonStyled'
 
 export const oraclesColumn: ColumnDef<IOraclesRow>[] = [
 	{
@@ -176,13 +176,25 @@ export const categoriesColumn: ColumnDef<ICategoryRow>[] = [
 	{
 		header: 'Protocols',
 		accessorKey: 'protocols',
-		size: 140
+		size: 100
 	},
 	{
 		header: 'Combined TVL',
 		accessorKey: 'tvl',
-		cell: ({ getValue }) => <>{'$' + formattedNum(getValue())}</>,
-		size: 140
+		cell: ({ getValue }) => {
+			const value = getValue() as number | null
+			return value && value > 0 ? <>{'$' + formattedNum(value)}</> : <></>
+		},
+		size: 135
+	},
+	{
+		header: 'Combined 24h Revenue',
+		accessorKey: 'revenue',
+		cell: ({ getValue }) => {
+			const value = getValue() as number | null
+			return value && value > 0 ? <>{'$' + formattedNum(value)}</> : <></>
+		},
+		size: 200
 	},
 	{
 		header: 'Description',

diff --git a/src/containers/Defi/Protocol/index.tsx b/src/containers/Defi/Protocol/index.tsx
@@ -1515,7 +1515,7 @@ function ProtocolContainer({
 										{helperTexts?.users && users?.activeUsers ? <p>Addresses: {helperTexts.users}</p> : null}
 
 										<div className="flex items-center gap-4 flex-wrap">
-											{methodologyUrls?.tvl && methodologyUrls.tvl !== 'dummy.js' && (
+											{methodologyUrls?.tvl && !methodologyUrls.tvl.endsWith('dummy.js') && (
 												<Link href={methodologyUrls.tvl} passHref>
 													<ButtonLight
 														className="flex items-center gap-1"

diff --git a/src/pages/categories.tsx b/src/pages/categories.tsx
@@ -1,38 +1,60 @@
-import * as React from 'react'
 import dynamic from 'next/dynamic'
-import Layout from '~/layout'
-import { ProtocolsChainsSearch } from '~/components/Search/ProtocolsChains'
+import * as React from 'react'
 import { maxAgeForNext } from '~/api'
+import { getRevenuesByCategories } from '~/api/categories/fees'
 import { getCategoriesPageData, getProtocolsRaw } from '~/api/categories/protocols'
-import { useCalcGroupExtraTvlsByDay } from '~/hooks/data'
-import { withPerformanceLogging } from '~/utils/perf'
 import type { IChartProps } from '~/components/ECharts/types'
-import { TableWithSearch } from '~/components/Table/TableWithSearch'
+import { ProtocolsChainsSearch } from '~/components/Search/ProtocolsChains'
 import { categoriesColumn } from '~/components/Table/Defi/columns'
+import { TableWithSearch } from '~/components/Table/TableWithSearch'
+import { useCalcGroupExtraTvlsByDay } from '~/hooks/data'
+import Layout from '~/layout'
+import { withPerformanceLogging } from '~/utils/perf'
 
 const AreaChart = dynamic(() => import('~/components/ECharts/AreaChart'), {
 	ssr: false
 }) as React.FC<IChartProps>
 
 export const getStaticProps = withPerformanceLogging('categories', async () => {
 	const protocols = await getProtocolsRaw()
+	const aggregatedRevenuesByCat = await getRevenuesByCategories()
 	const chartAndColorsData = await getCategoriesPageData()
 
 	let categories = {}
+
 	protocols.protocols.forEach((p) => {
 		const cat = p.category
-		if (categories[cat] === undefined) {
-			categories[cat] = { protocols: 0, tvl: 0 }
+		if (!categories[cat]) {
+			categories[cat] = { protocols: 0, tvl: 0, revenue: 0 }
 		}
 		categories[cat].protocols++
 		categories[cat].tvl += p.tvl
 	})
 
-	const formattedCategories = Object.entries(categories).map(([name, details]: [string, { tvl: number }]) => ({
-		name,
-		...details,
-		description: descriptions[name] || ''
-	}))
+	Object.entries(aggregatedRevenuesByCat).forEach(([category, revenue]) => {
+		if (!categories[category]) {
+			categories[category] = { protocols: 0, tvl: 0, revenue: 0 }
+		}
+		categories[category].revenue = revenue
+	})
+
+	const allCategories = new Set([...Object.keys(categories), ...Object.keys(aggregatedRevenuesByCat)])
+
+	allCategories.forEach((cat) => {
+		if (!categories[cat]) {
+			categories[cat] = { protocols: 0, tvl: 0, revenue: 0 }
+		}
+	})
+
+	const formattedCategories = Object.entries(categories).map(
+		([name, details]: [string, { tvl: number; revenue: number; protocols: number }]) => ({
+			name,
+			protocols: details.protocols > 0 ? details.protocols : '',
+			tvl: details.tvl,
+			revenue: details.revenue,
+			description: descriptions[name] || ''
+		})
+	)
 
 	return {
 		props: {