From 964deb2f2314a0e88b9d6a42f4762cce758cbe01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Mon, 27 Nov 2023 09:18:59 +0100
Subject: [PATCH] feat(trading): update title on rewards and fees pages (#5347)

---
 apps/trading/client-pages/fees/fees.tsx       | 12 +++++++++++-
 apps/trading/client-pages/rewards/rewards.tsx | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/trading/client-pages/fees/fees.tsx b/apps/trading/client-pages/fees/fees.tsx
index 84322714e..134c26a1a 100644
--- a/apps/trading/client-pages/fees/fees.tsx
+++ b/apps/trading/client-pages/fees/fees.tsx
@@ -1,11 +1,21 @@
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
+import { usePageTitleStore } from '../../stores';
+import { titlefy } from '@vegaprotocol/utils';
+import { useEffect } from 'react';
 
 export const Fees = () => {
   const t = useT();
+  const title = t('Fees');
+  const { updateTitle } = usePageTitleStore((store) => ({
+    updateTitle: store.updateTitle,
+  }));
+  useEffect(() => {
+    updateTitle(titlefy([title]));
+  }, [updateTitle, title]);
   return (
     <div className="container p-4 mx-auto">
-      <h1 className="px-4 pb-4 text-2xl">{t('Fees')}</h1>
+      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
       <FeesContainer />
     </div>
   );
diff --git a/apps/trading/client-pages/rewards/rewards.tsx b/apps/trading/client-pages/rewards/rewards.tsx
index 488853ad1..0daf75611 100644
--- a/apps/trading/client-pages/rewards/rewards.tsx
+++ b/apps/trading/client-pages/rewards/rewards.tsx
@@ -1,11 +1,21 @@
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
+import { usePageTitleStore } from '../../stores';
+import { titlefy } from '@vegaprotocol/utils';
+import { useEffect } from 'react';
 
 export const Rewards = () => {
   const t = useT();
+  const title = t('Rewards');
+  const { updateTitle } = usePageTitleStore((store) => ({
+    updateTitle: store.updateTitle,
+  }));
+  useEffect(() => {
+    updateTitle(titlefy([title]));
+  }, [updateTitle, title]);
   return (
     <div className="container mx-auto p-4">
-      <h1 className="px-4 pb-4 text-2xl">{t('Rewards')}</h1>
+      <h1 className="px-4 pb-4 text-2xl">{title}</h1>
       <RewardsContainer />
     </div>
   );