diff --git a/src/components/Announcement/Popups/CenterPopup.tsx b/src/components/Announcement/Popups/CenterPopup.tsx
index f9cfa6fb01..23e6422dbf 100644
--- a/src/components/Announcement/Popups/CenterPopup.tsx
+++ b/src/components/Announcement/Popups/CenterPopup.tsx
@@ -4,7 +4,6 @@ import { useMedia } from 'react-use'
 import styled from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -17,6 +16,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Wrapper = styled.div`
diff --git a/src/components/Announcement/Popups/DetailAnnouncementPopup.tsx b/src/components/Announcement/Popups/DetailAnnouncementPopup.tsx
index 04fbcd68cb..5625a397cb 100644
--- a/src/components/Announcement/Popups/DetailAnnouncementPopup.tsx
+++ b/src/components/Announcement/Popups/DetailAnnouncementPopup.tsx
@@ -6,7 +6,6 @@ import styled from 'styled-components'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
 import Modal from 'components/Modal'
 import Row from 'components/Row'
@@ -14,6 +13,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const PaginationButton = styled.div`
diff --git a/src/components/Announcement/Popups/SnippetPopup.tsx b/src/components/Announcement/Popups/SnippetPopup.tsx
index 3a83802a87..3214bf6729 100644
--- a/src/components/Announcement/Popups/SnippetPopup.tsx
+++ b/src/components/Announcement/Popups/SnippetPopup.tsx
@@ -8,7 +8,6 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 
 import NotificationImage from 'assets/images/notification_default.png'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import {
   AnnouncementTemplatePopup,
   PopupContentAnnouncement,
@@ -20,6 +19,7 @@ import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useDetailAnnouncement, useRemovePopup } from 'state/application/hooks'
+import { useNavigateToUrl } from 'utils/redirect'
 
 const IMAGE_HEIGHT = '124px'
 const PADDING_MOBILE = '16px'
diff --git a/src/components/Announcement/Popups/TopBanner.tsx b/src/components/Announcement/Popups/TopBanner.tsx
index 2ee8a5b0e4..bc3efc59a6 100644
--- a/src/components/Announcement/Popups/TopBanner.tsx
+++ b/src/components/Announcement/Popups/TopBanner.tsx
@@ -5,13 +5,13 @@ import { useMedia } from 'react-use'
 import styled, { css, keyframes } from 'styled-components'
 
 import CtaButton from 'components/Announcement/Popups/CtaButton'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup, PopupType } from 'components/Announcement/type'
 import Announcement from 'components/Icons/Announcement'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useActivePopups, useRemoveAllPopupByType } from 'state/application/hooks'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const BannerWrapper = styled.div<{ color?: string }>`
diff --git a/src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx b/src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx
index 01b8948cfd..8d266aa261 100644
--- a/src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/InboxItemPoolPosition.tsx
@@ -12,13 +12,13 @@ import {
   RowItem,
   Title,
 } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 
 function InboxItemBridge({
   announcement,
diff --git a/src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx b/src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx
index 588394a8ae..931e58ef45 100644
--- a/src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/InboxItemPriceAlert.tsx
@@ -6,12 +6,12 @@ import { Flex, Text } from 'rebass'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import { ButtonLight } from 'components/Button'
 import DeltaTokenAmount from 'components/WalletPopup/Transactions/DeltaTokenAmount'
 import useTheme from 'hooks/useTheme'
 import { HistoricalPriceAlert, PriceAlertType } from 'pages/NotificationCenter/const'
+import { useNavigateToUrl } from 'utils/redirect'
 
 export const getSwapUrlPriceAlert = (alert: HistoricalPriceAlert) => {
   const { swapURL } = alert
diff --git a/src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx b/src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx
index 7fc2c278e9..98b23a8bd9 100644
--- a/src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/InboxItemPrivateMessage.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 
 const Desc = styled.div`
diff --git a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx
index 0aca209c00..46d5125fcd 100644
--- a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx
@@ -7,13 +7,13 @@ import styled from 'styled-components'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePoolPosition } from 'components/Announcement/type'
 import { DoubleCurrencyLogoV2 } from 'components/DoubleLogo'
 import { MoneyBag } from 'components/Icons'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { Desc, Time, Title, Wrapper } from './styled'
diff --git a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx
index dde6f45330..4f2ed92249 100644
--- a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PriceAlert.tsx
@@ -5,9 +5,9 @@ import styled from 'styled-components'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { getSwapUrlPriceAlert } from 'components/Announcement/PrivateAnnoucement/InboxItemPriceAlert'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePriceAlert } from 'components/Announcement/type'
 import AlertCondition from 'pages/NotificationCenter/PriceAlerts/AlertCondition'
+import { useNavigateToUrl } from 'utils/redirect'
 import { formatTime } from 'utils/time'
 
 import { Desc, Time, Title, Wrapper } from './styled'
diff --git a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx
index 5eeaef808c..a5c87203c1 100644
--- a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/PrivateMessage.tsx
@@ -2,8 +2,8 @@ import { Flex } from 'rebass'
 
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { AnnouncementTemplatePopup } from 'components/Announcement/type'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 import { formatTime } from 'utils/time'
 
diff --git a/src/components/Announcement/helper.ts b/src/components/Announcement/helper.ts
index 7cc0e9af9b..6dfcf4dfca 100644
--- a/src/components/Announcement/helper.ts
+++ b/src/components/Announcement/helper.ts
@@ -1,14 +1,10 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 import AnnouncementApi from 'services/announcement'
 
 import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
 import { TIMES_IN_SECS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
-import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useAppDispatch } from 'state/hooks'
-import { isValidRedirectURL } from 'utils/redirect'
 
 const LsKey = 'ack-announcements'
 export const getAnnouncementsAckMap = () => JSON.parse(localStorage[LsKey] || '{}')
@@ -47,48 +43,6 @@ export const isPopupCanShow = (
   return !isRead && !isExpired && isRightChain && isOwn
 }
 
-/**
- * this hook to navigate to specific url
- * detect using window.open or navigate (react-router)
- * check change chain if needed
- */
-export const useNavigateToUrl = () => {
-  const navigate = useNavigate()
-  const { chainId: currentChain } = useActiveWeb3React()
-  const { changeNetwork } = useChangeNetwork()
-
-  const redirect = useCallback(
-    (actionURL: string) => {
-      if (actionURL && actionURL.startsWith('/')) {
-        navigate(actionURL)
-        return
-      }
-      const { pathname, host, search } = new URL(actionURL)
-      if (!isValidRedirectURL(actionURL, false)) return
-      if (window.location.host === host) {
-        navigate(`${pathname}${search}`)
-      } else {
-        window.open(actionURL)
-      }
-    },
-    [navigate],
-  )
-
-  return useCallback(
-    (actionURL: string, chainId?: ChainId) => {
-      try {
-        if (!actionURL) return
-        if (chainId && chainId !== currentChain) {
-          changeNetwork(chainId, () => redirect(actionURL), undefined, true)
-        } else {
-          redirect(actionURL)
-        }
-      } catch (error) {}
-    },
-    [changeNetwork, currentChain, redirect],
-  )
-}
-
 export const useInvalidateTags = (reducerPath: string) => {
   const dispatch = useAppDispatch()
   return useCallback(
diff --git a/src/pages/NotificationCenter/GeneralAnnouncement/AnnouncementItem.tsx b/src/pages/NotificationCenter/GeneralAnnouncement/AnnouncementItem.tsx
index 37d2f9fbae..73eb89ec37 100644
--- a/src/pages/NotificationCenter/GeneralAnnouncement/AnnouncementItem.tsx
+++ b/src/pages/NotificationCenter/GeneralAnnouncement/AnnouncementItem.tsx
@@ -7,9 +7,9 @@ import NotificationImage from 'assets/images/notification_default.png'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import CtaButton from 'components/Announcement/Popups/CtaButton'
 import { formatCtaName } from 'components/Announcement/Popups/DetailAnnouncementPopup'
-import { useNavigateToUrl } from 'components/Announcement/helper'
 import { Announcement } from 'components/Announcement/type'
 import { MEDIA_WIDTHS } from 'theme'
+import { useNavigateToUrl } from 'utils/redirect'
 import { escapeScriptHtml } from 'utils/string'
 import { formatTime } from 'utils/time'
 
diff --git a/src/utils/redirect.ts b/src/utils/redirect.ts
index e0ed969327..a2fe854b90 100644
--- a/src/utils/redirect.ts
+++ b/src/utils/redirect.ts
@@ -1,3 +1,10 @@
+import { ChainId } from '@kyberswap/ks-sdk-core'
+import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useActiveWeb3React } from 'hooks'
+import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
+
 const whiteListDomains = [/https:\/\/(.+?\.)?kyberswap\.com$/, /https:\/\/(.+)\.kyberengineering\.io$/]
 export const isValidRedirectURL = (url: string | undefined, checkWhitelist = true) => {
   try {
@@ -15,3 +22,45 @@ export const isValidRedirectURL = (url: string | undefined, checkWhitelist = tru
     return false
   }
 }
+
+/**
+ * this hook to navigate to specific url
+ * detect using window.open or navigate (react-router)
+ * check change chain if needed
+ */
+export const useNavigateToUrl = () => {
+  const navigate = useNavigate()
+  const { chainId: currentChain } = useActiveWeb3React()
+  const { changeNetwork } = useChangeNetwork()
+
+  const redirect = useCallback(
+    (actionURL: string) => {
+      if (actionURL && actionURL.startsWith('/')) {
+        navigate(actionURL)
+        return
+      }
+      const { pathname, host, search } = new URL(actionURL)
+      if (!isValidRedirectURL(actionURL, false)) return
+      if (window.location.host === host) {
+        navigate(`${pathname}${search}`)
+      } else {
+        window.open(actionURL)
+      }
+    },
+    [navigate],
+  )
+
+  return useCallback(
+    (actionURL: string, chainId?: ChainId) => {
+      try {
+        if (!actionURL) return
+        if (chainId && chainId !== currentChain) {
+          changeNetwork(chainId, () => redirect(actionURL), undefined, true)
+        } else {
+          redirect(actionURL)
+        }
+      } catch (error) {}
+    },
+    [changeNetwork, currentChain, redirect],
+  )
+}