From 796d749e565c8247f039df3a3116d93a1cb273a5 Mon Sep 17 00:00:00 2001
From: kanerep <kanerep@icloud.com>
Date: Thu, 9 Oct 2025 11:50:37 +0100
Subject: [PATCH 1/3] feat: add compare protocol button to protocol page

---
 src/containers/ProtocolOverview/index.tsx | 34 ++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/containers/ProtocolOverview/index.tsx b/src/containers/ProtocolOverview/index.tsx
index 0f70fd507..ea2472d82 100644
--- a/src/containers/ProtocolOverview/index.tsx
+++ b/src/containers/ProtocolOverview/index.tsx
@@ -92,6 +92,22 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 		return formattedNum(value, true)
 	}
 
+	const compareProtocolsUrl = () => {
+		// If this is a combined protocol with child versions, compare the child protocols
+		if (props.otherProtocols && props.otherProtocols.length > 1) {
+			const childProtocols = props.otherProtocols
+				.slice(1, 4)
+				.map((p) => `protocol=${encodeURIComponent(p)}`)
+				.join('&')
+			return `/compare-protocols?${childProtocols}`
+		}
+		// Otherwise, compare with top competitor if available
+		if (props.competitors?.length) {
+			return `/compare-protocols?protocol=${encodeURIComponent(props.name)}&protocol=${encodeURIComponent(props.competitors[0].name)}`
+		}
+		return `/compare-protocols?protocol=${encodeURIComponent(props.name)}`
+	}
+
 	return (
 		<ProtocolOverviewLayout
 			isCEX={props.isCEX}
@@ -122,7 +138,16 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 						{props.token.symbol && props.token.symbol !== '-' ? (
 							<span className="mr-auto font-normal">({props.token.symbol})</span>
 						) : null}
-						<Bookmark readableName={props.name} />
+						<div className="flex items-center gap-2">
+							<BasicLink
+								href={compareProtocolsUrl()}
+								className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
+							>
+								<Icon name="repeat" className="h-3 w-3" />
+								<span>Compare</span>
+							</BasicLink>
+							<Bookmark readableName={props.name} />
+						</div>
 					</h1>
 					<ProtocolTVL
 						hasTvl={props.metrics.tvl}
@@ -146,6 +171,13 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 								{props.token.symbol && props.token.symbol !== '-' ? (
 									<span className="mr-auto font-normal">({props.token.symbol})</span>
 								) : null}
+								<BasicLink
+									href={compareProtocolsUrl()}
+									className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
+								>
+									<Icon name="repeat" className="h-3 w-3" />
+									<span>Compare</span>
+								</BasicLink>
 								<Bookmark readableName={props.name} />
 							</h1>
 							<ProtocolTVL

From 3ac1dac6edb9acf5b6673abadc0663fae5e6dceb Mon Sep 17 00:00:00 2001
From: kanerep <kanerep@icloud.com>
Date: Thu, 9 Oct 2025 12:36:19 +0100
Subject: [PATCH 2/3] use memo to get protocol url

---
 src/containers/ProtocolOverview/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/ProtocolOverview/index.tsx b/src/containers/ProtocolOverview/index.tsx
index ea2472d82..33fb1405a 100644
--- a/src/containers/ProtocolOverview/index.tsx
+++ b/src/containers/ProtocolOverview/index.tsx
@@ -92,7 +92,7 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 		return formattedNum(value, true)
 	}
 
-	const compareProtocolsUrl = () => {
+	const compareProtocolsUrl = useMemo(() => {
 		// If this is a combined protocol with child versions, compare the child protocols
 		if (props.otherProtocols && props.otherProtocols.length > 1) {
 			const childProtocols = props.otherProtocols
@@ -106,7 +106,7 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 			return `/compare-protocols?protocol=${encodeURIComponent(props.name)}&protocol=${encodeURIComponent(props.competitors[0].name)}`
 		}
 		return `/compare-protocols?protocol=${encodeURIComponent(props.name)}`
-	}
+	}, [props.otherProtocols, props.competitors, props.name])
 
 	return (
 		<ProtocolOverviewLayout
@@ -140,7 +140,7 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 						) : null}
 						<div className="flex items-center gap-2">
 							<BasicLink
-								href={compareProtocolsUrl()}
+								href={compareProtocolsUrl}
 								className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
 							>
 								<Icon name="repeat" className="h-3 w-3" />
@@ -172,7 +172,7 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 									<span className="mr-auto font-normal">({props.token.symbol})</span>
 								) : null}
 								<BasicLink
-									href={compareProtocolsUrl()}
+									href={compareProtocolsUrl}
 									className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
 								>
 									<Icon name="repeat" className="h-3 w-3" />

From b3ea1d458047abeb70010a8ff423ea7cda8b492a Mon Sep 17 00:00:00 2001
From: kanerep <kanerep@icloud.com>
Date: Thu, 9 Oct 2025 12:49:59 +0100
Subject: [PATCH 3/3] only show icon on mobile and aria-label

---
 src/containers/ProtocolOverview/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/containers/ProtocolOverview/index.tsx b/src/containers/ProtocolOverview/index.tsx
index 33fb1405a..e1d40709e 100644
--- a/src/containers/ProtocolOverview/index.tsx
+++ b/src/containers/ProtocolOverview/index.tsx
@@ -142,9 +142,10 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 							<BasicLink
 								href={compareProtocolsUrl}
 								className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
+								aria-label="Compare protocols"
 							>
 								<Icon name="repeat" className="h-3 w-3" />
-								<span>Compare</span>
+								<span className="hidden sm:inline">Compare</span>
 							</BasicLink>
 							<Bookmark readableName={props.name} />
 						</div>
@@ -174,9 +175,10 @@ export const ProtocolOverview = (props: IProtocolOverviewPageData) => {
 								<BasicLink
 									href={compareProtocolsUrl}
 									className="flex cursor-pointer flex-nowrap items-center gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)"
+									aria-label="Compare protocols"
 								>
 									<Icon name="repeat" className="h-3 w-3" />
-									<span>Compare</span>
+									<span className="hidden sm:inline">Compare</span>
 								</BasicLink>
 								<Bookmark readableName={props.name} />
 							</h1>