feat: added fees 7d change

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>
 	)
 }

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} />

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
 			},

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
 	}