From 1f7ca428ad6c82380cef24166172c33b13dd6497 Mon Sep 17 00:00:00 2001
From: DaniiRix <danielrix01@protonmail.com>
Date: Tue, 7 Oct 2025 16:33:59 +0530
Subject: [PATCH] feat: added fees 7d change

---
 src/containers/ChainOverview/SmolCharts.tsx   |  2 +-
 src/containers/ChainOverview/SmolStats.tsx    | 21 ++++++++++++++++---
 .../ChainOverview/queries.server.tsx          |  1 +
 src/containers/ChainOverview/types.ts         |  1 +
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/containers/ChainOverview/SmolCharts.tsx b/src/containers/ChainOverview/SmolCharts.tsx
index 21ce3f2803..f1dd905355 100644
--- a/src/containers/ChainOverview/SmolCharts.tsx
+++ b/src/containers/ChainOverview/SmolCharts.tsx
@@ -126,7 +126,7 @@ export function FeesGeneratedChart({ series }: { series: Array<[string, number,
 
 	return (
 		<div className="relative" id="fees-generated-chart">
-			<div id={id} className="my-auto h-[156px]" />
+			<div id={id} className="my-auto h-[140px]" />
 		</div>
 	)
 }
diff --git a/src/containers/ChainOverview/SmolStats.tsx b/src/containers/ChainOverview/SmolStats.tsx
index a786c68d35..de387df571 100644
--- a/src/containers/ChainOverview/SmolStats.tsx
+++ b/src/containers/ChainOverview/SmolStats.tsx
@@ -239,9 +239,24 @@ export const SmolStats = (props: IChainOverviewData) => {
 						>
 							Fees Paid
 						</Tooltip>
-						{props.chainFees.feesGenerated24h != null ? (
-							<p className="text-(--text-form)">{`${formattedNum(props.chainFees.feesGenerated24h ?? 0, true)} (24h)`}</p>
-						) : null}
+
+						<div>
+							{props.chainFees.feesGenerated24h != null ? (
+								<p className="text-(--text-form)">{`${formattedNum(props.chainFees.feesGenerated24h ?? 0, true)} (24h)`}</p>
+							) : null}
+							{props.chainFees.change7d && (
+								<p className="flex items-center justify-end gap-1 text-xs">
+									<span
+										className={`overflow-hidden text-ellipsis whitespace-nowrap ${
+											+props.chainFees.change7d >= 0 ? 'text-(--success)' : 'text-(--error)'
+										}`}
+									>
+										{`${+props.chainFees.change7d >= 0 ? '+' : ''}${props.chainFees.change7d}%`}
+									</span>
+									<span className="text-(--text-form)">7d</span>
+								</p>
+							)}
+						</div>
 					</div>
 					<Suspense fallback={<></>}>
 						<FeesGeneratedChart series={props.chainFees.topProtocolsChart} />
diff --git a/src/containers/ChainOverview/queries.server.tsx b/src/containers/ChainOverview/queries.server.tsx
index f79b6f7b25..ec037f251f 100644
--- a/src/containers/ChainOverview/queries.server.tsx
+++ b/src/containers/ChainOverview/queries.server.tsx
@@ -551,6 +551,7 @@ export async function getChainOverviewData({ chain }: { chain: string }): Promis
 			chainFees: {
 				total24h: chainFees?.total24h ?? null,
 				feesGenerated24h: feesGenerated24h,
+				change7d: fees?.change_7d ?? null,
 				topProtocolsChart: topProtocolsByFeesChart,
 				totalREV24h: chainREV
 			},
diff --git a/src/containers/ChainOverview/types.ts b/src/containers/ChainOverview/types.ts
index bbb4ec87c8..e34b0ce38c 100644
--- a/src/containers/ChainOverview/types.ts
+++ b/src/containers/ChainOverview/types.ts
@@ -61,6 +61,7 @@ export interface IChainOverviewData {
 	chainFees: {
 		total24h: number | null
 		feesGenerated24h: number | null
+		change7d: number | null
 		topProtocolsChart: Array<[string, number, string]> | null
 		totalREV24h: number | null
 	}