From bab69060de53ea558bb3fea5cc7ac8f12a01fd93 Mon Sep 17 00:00:00 2001
From: NeOMakinG <14963751+NeOMakinG@users.noreply.github.com>
Date: Sat, 21 Dec 2024 05:52:49 +0800
Subject: [PATCH] fix: hide thorswap free fee banner after 2024 (#8435)

---
 .../components/SharedTradeInput/SharedTradeInput.tsx     | 9 ++++++++-
 .../MultiHopTrade/components/SlideTransitionRoute.tsx    | 8 +++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx b/src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx
index dcbebc21e6c..c860c281b72 100644
--- a/src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx
+++ b/src/components/MultiHopTrade/components/SharedTradeInput/SharedTradeInput.tsx
@@ -1,8 +1,10 @@
 import type { CardProps } from '@chakra-ui/react'
 import { Box, Card, Center, Flex, useMediaQuery } from '@chakra-ui/react'
 import type { FormEvent } from 'react'
+import { useMemo } from 'react'
 import type { TradeInputTab } from 'components/MultiHopTrade/types'
 import { ThorFreeFeeBanner } from 'components/ThorFreeFeeBanner/ThorFreeFeeBanner'
+import { THORSWAP_MAXIMUM_YEAR_TRESHOLD } from 'lib/fees/model'
 import { breakpoints } from 'theme/theme'
 
 import { SharedTradeInputHeader } from '../SharedTradeInput/SharedTradeInputHeader'
@@ -46,6 +48,11 @@ export const SharedTradeInput: React.FC<SharedTradeInputProps> = ({
   const [isSmallerThanXl] = useMediaQuery(`(max-width: ${breakpoints.xl})`, { ssr: false })
   const totalHeight = useSharedHeight(tradeInputRef)
 
+  const shouldDisplayThorFreeFeeBanner = useMemo(
+    () => new Date().getUTCFullYear() < THORSWAP_MAXIMUM_YEAR_TRESHOLD,
+    [],
+  )
+
   return (
     <Flex
       id='test-flex'
@@ -55,7 +62,7 @@ export const SharedTradeInput: React.FC<SharedTradeInputProps> = ({
     >
       <Center width='inherit' alignItems='flex-end'>
         <Box width='full' maxWidth='500px'>
-          <ThorFreeFeeBanner />
+          {shouldDisplayThorFreeFeeBanner ? <ThorFreeFeeBanner /> : null}
           <Card
             flex={1}
             width='full'
diff --git a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
index ed3fa39989d..ecbc1aaa87b 100644
--- a/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
+++ b/src/components/MultiHopTrade/components/SlideTransitionRoute.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
 import type { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { ThorFreeFeeBanner } from 'components/ThorFreeFeeBanner/ThorFreeFeeBanner'
+import { THORSWAP_MAXIMUM_YEAR_TRESHOLD } from 'lib/fees/model'
 import { breakpoints } from 'theme/theme'
 
 import type { LimitOrderRoutePaths } from './LimitOrder/types'
@@ -46,10 +47,15 @@ export const SlideTransitionRoute = ({
     [width, height],
   )
 
+  const shouldDisplayThorFreeFeeBanner = useMemo(
+    () => new Date().getUTCFullYear() < THORSWAP_MAXIMUM_YEAR_TRESHOLD,
+    [],
+  )
+
   return (
     <Center width='inherit' alignItems='flex-end'>
       <Box width='full' maxWidth='500px'>
-        <ThorFreeFeeBanner />
+        {shouldDisplayThorFreeFeeBanner ? <ThorFreeFeeBanner /> : null}
         <TradeSlideTransition>
           <Flex
             width='full'