From 9d3a0dac6e52038c4dc4a94febafd38020b9de37 Mon Sep 17 00:00:00 2001 From: Danh Date: Tue, 3 Oct 2023 17:41:51 +0700 Subject: [PATCH] move file --- .../Announcement/Popups/CenterPopup.tsx | 2 +- .../Popups/DetailAnnouncementPopup.tsx | 2 +- .../Announcement/Popups/SnippetPopup.tsx | 2 +- .../Announcement/Popups/TopBanner.tsx | 2 +- .../InboxItemPoolPosition.tsx | 2 +- .../InboxItemPriceAlert.tsx | 2 +- .../InboxItemPrivateMessage.tsx | 2 +- .../NotificationCenter/PoolPosition.tsx | 2 +- .../NotificationCenter/PriceAlert.tsx | 2 +- .../NotificationCenter/PrivateMessage.tsx | 2 +- src/components/Announcement/helper.ts | 46 ----------------- .../GeneralAnnouncement/AnnouncementItem.tsx | 2 +- src/utils/redirect.ts | 49 +++++++++++++++++++ 13 files changed, 60 insertions(+), 57 deletions(-) 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], + ) +}