From 91cb687871a9e6656b209fda9c9eaab1ccb66325 Mon Sep 17 00:00:00 2001
From: eli-d <64763513+eli-d@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:10:54 +1030
Subject: [PATCH] display `ETH` as `WETH` on swap-related pages

---
 web/src/app/swap/explore/page.tsx | 17 +++++++++++++----
 web/src/stores/useSwapStore.ts    | 19 +++++++++++++++++--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/src/app/swap/explore/page.tsx b/web/src/app/swap/explore/page.tsx
index 19d4711e..ca2b7626 100644
--- a/web/src/app/swap/explore/page.tsx
+++ b/web/src/app/swap/explore/page.tsx
@@ -92,10 +92,19 @@ const ExplorePage = () => {
     [fUSDC],
   );
 
-  const tokensData = useMemo(
-    () => [fUSDCData, ...(tokensData_ ?? [])],
-    [fUSDCData, tokensData_],
-  );
+  const tokensData = useMemo(() => {
+    // Override WETH name to ETH on swap-related pages
+    const tokens =
+      tokensData_?.map((t) => ({
+        ...t,
+        token: {
+          ...t.token,
+          symbol: t.token.symbol === "WETH" ? "ETH" : t.token.symbol,
+          name: t.token.name === "WETH" ? "ETH" : t.token.name,
+        },
+      })) ?? [];
+    return [fUSDCData, ...tokens];
+  }, [fUSDCData, tokensData_]);
 
   const showMockData = useFeatureFlag("ui show demo data");
 
diff --git a/web/src/stores/useSwapStore.ts b/web/src/stores/useSwapStore.ts
index d58b2fbe..7b98eb73 100644
--- a/web/src/stores/useSwapStore.ts
+++ b/web/src/stores/useSwapStore.ts
@@ -41,8 +41,23 @@ export const useSwapStore = create<SwapStore>((set) => ({
   token0: EmptyToken,
   token1: EmptyToken,
 
-  setToken0: (token) => set({ token0: token }),
-  setToken1: (token) => set({ token1: token }),
+  // Override WETH name to ETH on swap-related pages
+  setToken0: (token) =>
+    set({
+      token0: {
+        ...token,
+        symbol: token.symbol === "WETH" ? "ETH" : token.symbol,
+        name: token.name === "WETH" ? "ETH" : token.name,
+      },
+    }),
+  setToken1: (token) =>
+    set({
+      token1: {
+        ...token,
+        symbol: token.symbol === "WETH" ? "ETH" : token.symbol,
+        name: token.name === "WETH" ? "ETH" : token.name,
+      },
+    }),
   flipTokens: () => {
     set(
       ({