From 60cdc12feb7b284a3a50f14d4bdd40cb6164b1dd Mon Sep 17 00:00:00 2001
From: Felix Bruguera <felixbruguera0@gmail.com>
Date: Sun, 5 Oct 2025 11:04:08 -0400
Subject: [PATCH] feat: add a hash to the TVL by Protocol page and ids to the
 protocol rankings tables

---
 public/pages.json                      | 2 +-
 src/containers/ChainOverview/Table.tsx | 2 +-
 src/containers/ChainOverview/index.tsx | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/pages.json b/public/pages.json
index 2d01f31be..0e8d0c98e 100644
--- a/public/pages.json
+++ b/public/pages.json
@@ -24,7 +24,7 @@
     },
     {
       "name": "TVL by Protocol",
-      "route": "/",
+      "route": "/#protocolRankings",
       "category": "Total Value Locked",
       "description": "Protocols ranked by Total Value Locked in their smart contracts",
       "totalTrackedKey": "tvl.protocols",
diff --git a/src/containers/ChainOverview/Table.tsx b/src/containers/ChainOverview/Table.tsx
index 767af70c8..dcfac43f7 100644
--- a/src/containers/ChainOverview/Table.tsx
+++ b/src/containers/ChainOverview/Table.tsx
@@ -420,7 +420,7 @@ export const ChainProtocolsTable = ({
 	}, [instance, router.query.chain])
 
 	return (
-		<div className={borderless ? 'isolate' : 'isolate rounded-md border border-(--cards-border) bg-(--cards-bg)'}>
+		<div id='protocolRankings' className={borderless ? 'isolate' : 'isolate rounded-md border border-(--cards-border) bg-(--cards-bg)'}>
 			<div className="flex flex-wrap items-center justify-end gap-2 p-3">
 				{borderless ? null : (
 					<div className="mr-auto flex w-full grow text-lg font-semibold md:w-auto">Protocol Rankings</div>
diff --git a/src/containers/ChainOverview/index.tsx b/src/containers/ChainOverview/index.tsx
index 4e06c79dd..111841b1d 100644
--- a/src/containers/ChainOverview/index.tsx
+++ b/src/containers/ChainOverview/index.tsx
@@ -77,6 +77,7 @@ export function ChainOverview(props: IChainOverviewData) {
 				<Suspense
 					fallback={
 						<div
+							id='protocolRankings'
 							style={{ minHeight: `${props.protocols.length * 50 + 200}px` }}
 							className="rounded-md border border-(--cards-border) bg-(--cards-bg)"
 						/>