refactor: rtk query campagin (#2260)

src/components/Announcement/helper.ts

@@ -1,10 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
-import { useCallback } from 'react'
-import AnnouncementApi from 'services/announcement'
 
 import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
 import { TIMES_IN_SECS } from 'constants/index'
-import { useAppDispatch } from 'state/hooks'
 
 const LsKey = 'ack-announcements'
 export const getAnnouncementsAckMap = () => JSON.parse(localStorage[LsKey] || '{}')
@@ -42,20 +39,3 @@ export const isPopupCanShow = (
   const isExpired = Date.now() < startAt * 1000 || Date.now() > endAt * 1000
   return !isRead && !isExpired && isRightChain && isOwn
 }
-
-export const useInvalidateTags = (reducerPath: string) => {
-  const dispatch = useAppDispatch()
-  return useCallback(
-    (tag: string | string[]) => {
-      dispatch({
-        type: `${reducerPath}/invalidateTags`,
-        payload: Array.isArray(tag) ? tag : [tag],
-      })
-    },
-    [dispatch, reducerPath],
-  )
-}
-
-export const useInvalidateTagAnnouncement = () => {
-  return useInvalidateTags(AnnouncementApi.reducerPath)
-}

src/components/Announcement/index.tsx

@@ -10,13 +10,14 @@ import styled, { css } from 'styled-components'
 
 import AnnouncementView, { Tab } from 'components/Announcement/AnnoucementView'
 import DetailAnnouncementPopup from 'components/Announcement/Popups/DetailAnnouncementPopup'
-import { formatNumberOfUnread, useInvalidateTagAnnouncement } from 'components/Announcement/helper'
+import { formatNumberOfUnread } from 'components/Announcement/helper'
 import { Announcement, PrivateAnnouncement } from 'components/Announcement/type'
 import NotificationIcon from 'components/Icons/NotificationIcon'
 import MenuFlyout from 'components/MenuFlyout'
 import Modal from 'components/Modal'
 import { RTK_QUERY_TAGS } from 'constants/index'
 import useInterval from 'hooks/useInterval'
+import { useInvalidateTagAnnouncement } from 'hooks/useInvalidateTags'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { ApplicationModal } from 'state/application/actions'
 import { useDetailAnnouncement, useModalOpen, useToggleNotificationCenter } from 'state/application/hooks'

src/components/ProtectedRoute.tsx

@@ -3,9 +3,8 @@ import { Navigate } from 'react-router-dom'
 
 import LocalLoader from 'components/LocalLoader'
 import { RTK_QUERY_TAGS } from 'constants/index'
-import kyberAIapi from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useInvalidateTagKyberAi } from 'hooks/useInvalidateTags'
 import { useSessionInfo } from 'state/authen/hooks'
-import { useAppDispatch } from 'state/hooks'
 import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
 type Props = {
@@ -33,20 +32,15 @@ export const ProtectedRouteKyberAI = ({
   const { userInfo } = useSessionInfo()
   const loadedPage = useRef(false)
   const canAccessPage = isWhiteList || waitUtilAuthenEndOnly
-  const dispatch = useAppDispatch()
+  const invalidateTags = useInvalidateTagKyberAi()
 
   useEffect(() => {
     // change account sign in => refresh participant info
     try {
       refetch()
-      dispatch(
-        kyberAIapi.util.invalidateTags([
-          RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI,
-          RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI,
-        ]),
-      )
+      invalidateTags([RTK_QUERY_TAGS.GET_WATCHLIST_TOKENS_KYBER_AI, RTK_QUERY_TAGS.GET_WATCHLIST_INFO_KYBER_AI])
     } catch (error) {}
-  }, [userInfo?.identityId, refetch, dispatch])
+  }, [userInfo?.identityId, refetch, invalidateTags])
 
   if (loading && !loadedPage.current) return <LocalLoader />
   if (!canAccessPage) return <Navigate to={redirectUrl} replace />

src/components/YourCampaignTransactionsModal/index.tsx

@@ -5,19 +5,18 @@ import { CheckCircle, Copy, ExternalLink, Info, X } from 'react-feather'
 import { useSelector } from 'react-redux'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
+import { useGetTxsCampaignQuery } from 'services/campaign'
 import styled, { css } from 'styled-components'
-import useSWR from 'swr'
 
 import Modal from 'components/Modal'
-import { CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE, SWR_KEYS } from 'constants/index'
+import { CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useTheme from 'hooks/useTheme'
 import { AppState } from 'state'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useToggleYourCampaignTransactionsModal } from 'state/application/hooks'
-import { CampaignProofData } from 'state/campaigns/actions'
 import { getEtherscanLink } from 'utils'
 import getShortenAddress from 'utils/getShortenAddress'
 
@@ -32,37 +31,15 @@ export default function YourCampaignTransactionsModal() {
   const above768 = useMedia('(min-width: 768px)')
 
   const selectedCampaign = useSelector((state: AppState) => state.campaigns.selectedCampaign)
-  const { data: userCampaignTransactions } = useSWR<CampaignProofData[]>(
-    account && selectedCampaign
-      ? SWR_KEYS.getCampaignTransactions(
-          selectedCampaign.id,
-          CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE,
-          CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE * (currentPage - 1),
-          account,
-        )
-      : null,
-    async (url: string) => {
-      try {
-        const response = await fetch(url)
-        if (response.ok) {
-          const data = await response.json()
-          if (data && Array.isArray(data.data) && data.data.length) {
-            return data.data.map(
-              (item: any): CampaignProofData => ({
-                id: item.id,
-                chainId: parseInt(item.chainId),
-                utcTimestamp: new Date(item.time).getTime(),
-                txPoint: item.txPoint,
-                txHash: item.tx,
-              }),
-            )
-          }
-        }
-        return []
-      } catch (err) {
-        console.error(err)
-      }
+
+  const { data: userCampaignTransactions } = useGetTxsCampaignQuery(
+    {
+      campaignId: selectedCampaign?.id || 0,
+      limit: CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE,
+      offset: CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE * (currentPage - 1),
+      userAddress: account ?? '',
     },
+    { skip: !selectedCampaign?.id },
   )
 
   const [isCopied, setCopied] = useCopyClipboard()

src/components/swapv2/LimitOrder/ListOrder/index.tsx

@@ -6,11 +6,10 @@ import { Trash } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
-import limitOrderApi, { useGetListOrdersQuery } from 'services/limitOrder'
+import { useGetListOrdersQuery } from 'services/limitOrder'
 import styled from 'styled-components'
 
 import { ReactComponent as NoDataIcon } from 'assets/svg/no-data.svg'
-import { useInvalidateTags } from 'components/Announcement/helper'
 import { ButtonLight } from 'components/Button'
 import Column from 'components/Column'
 import LocalLoader from 'components/LocalLoader'
@@ -22,6 +21,7 @@ import SubscribeNotificationButton from 'components/SubscribeButton'
 import useRequestCancelOrder from 'components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder'
 import { EMPTY_ARRAY, RTK_QUERY_TAGS, TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
+import { useInvalidateTagLimitOrder } from 'hooks/useInvalidateTags'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import useShowLoadingAtLeastTime from 'hooks/useShowLoadingAtLeastTime'
@@ -203,7 +203,7 @@ export default function ListLimitOrder() {
     onReset()
   }, [chainId, orderType])
 
-  const invalidateTag = useInvalidateTags(limitOrderApi.reducerPath)
+  const invalidateTag = useInvalidateTagLimitOrder()
   const refetchOrders = useCallback(() => {
     invalidateTag(RTK_QUERY_TAGS.GET_LIST_ORDERS)
   }, [invalidateTag])

src/constants/index.ts

@@ -5,7 +5,7 @@ import { v4 as uuid } from 'uuid'
 
 import { TransactionFlowState } from 'types/TransactionFlowState'
 
-import { CAMPAIGN_BASE_URL as CAMPAIGN_BASE_DOMAIN } from './env'
+import { CAMPAIGN_BASE_URL } from './env'
 import * as ENV from './env'
 import { EVM_MAINNET_NETWORKS, EVM_NETWORK, NETWORKS_INFO, SUPPORTED_NETWORKS, isEVM } from './networks'
 
@@ -186,16 +186,10 @@ export const CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE = 10000
 export const ELASTIC_BASE_FEE_UNIT = 100_000
 export const KYBERSWAP_SOURCE = '{"source":"kyberswap"}'
 
-export const CAMPAIGN_BASE_URL = `${CAMPAIGN_BASE_DOMAIN}/api/v1/campaigns`
 export const SWR_KEYS = {
-  getGrantProgramLeaderBoard: (id: number | string) => `${CAMPAIGN_BASE_DOMAIN}/api/v1/competitions/${id}/leaderboard`,
-  getListGrantPrograms: `${CAMPAIGN_BASE_DOMAIN}/api/v1/competitions`,
-  getGrantProgram: (id: number | string) => `${CAMPAIGN_BASE_DOMAIN}/api/v1/competitions/${id}`,
-  getListCampaign: CAMPAIGN_BASE_URL,
-  getLeaderboard: (id: number) => CAMPAIGN_BASE_URL + '/' + id + '/leaderboard',
-  getLuckyWinners: (id: number) => CAMPAIGN_BASE_URL + '/' + id + '/lucky-winners',
-  getCampaignTransactions: (campaignId: number, limit: number, offset: number, account: string) =>
-    `${CAMPAIGN_BASE_URL}/${campaignId}/proofs?limit=${limit}&offset=${offset}&userAddress=${account}`,
+  getGrantProgramLeaderBoard: (id: number | string) => `${CAMPAIGN_BASE_URL}/api/v1/competitions/${id}/leaderboard`,
+  getListGrantPrograms: `${CAMPAIGN_BASE_URL}/api/v1/competitions`,
+  getGrantProgram: (id: number | string) => `${CAMPAIGN_BASE_URL}/api/v1/competitions/${id}`,
 }
 
 // https://www.nasdaq.com/glossary/b/bip

src/hooks/useInvalidateTags.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import announcementApi from 'services/announcement'
+import limitOrderApi from 'services/limitOrder'
+
+import kyberAIApi from 'pages/TrueSightV2/hooks/useKyberAIData'
+import { useAppDispatch } from 'state/hooks'
+
+const useInvalidateTags = (api: any) => {
+  const dispatch = useAppDispatch()
+  return useCallback(
+    (tag: string | string[]) => {
+      dispatch(api.util.invalidateTags(Array.isArray(tag) ? tag : [tag]))
+    },
+    [dispatch, api],
+  )
+}
+
+export const useInvalidateTagAnnouncement = () => {
+  return useInvalidateTags(announcementApi)
+}
+
+export const useInvalidateTagKyberAi = () => {
+  return useInvalidateTags(kyberAIApi)
+}
+
+export const useInvalidateTagLimitOrder = () => {
+  return useInvalidateTags(limitOrderApi)
+}