api txs

KyberNetwork · Sep 24, 2023 · c92cb3a · c92cb3a
1 parent 8edb00a
commit c92cb3a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 42 deletions.
diff --git a/src/components/YourCampaignTransactionsModal/index.tsx b/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()

diff --git a/src/constants/index.ts b/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_NETWORK, NETWORKS_INFO, SUPPORTED_NETWORKS, isEVM } from './networks'
 
@@ -176,13 +176,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}`,
-  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}`,
 }
 
 // Epsilon 0 is absolute permittivity of free space whose value is 8.854×10^-12 and unit is C^2N^-1m–2.

diff --git a/src/services/campaign.ts b/src/services/campaign.ts
@@ -12,6 +12,7 @@ import {
   CampaignLeaderboardRanking,
   CampaignLeaderboardReward,
   CampaignLuckyWinner,
+  CampaignProofData,
   CampaignStatus,
   RewardDistribution,
 } from 'state/campaigns/actions'
@@ -185,6 +186,18 @@ const formatLuckyWinners = (data: any[]) => {
   return luckyWinners
 }
 
+const formatTxs = (data: any[]) => {
+  return data.map(
+    (item: any): CampaignProofData => ({
+      id: item.id,
+      chainId: parseInt(item.chainId),
+      utcTimestamp: new Date(item.time).getTime(),
+      txPoint: item.txPoint,
+      txHash: item.tx,
+    }),
+  )
+}
+
 const campaignApi = createApi({
   reducerPath: 'campaignApi',
   baseQuery: fetchBaseQuery({ baseUrl: `${CAMPAIGN_BASE_URL}/api/v1/campaigns` }),
@@ -216,6 +229,16 @@ const campaignApi = createApi({
       }),
       transformResponse: (data: any) => formatLuckyWinners(data?.data || []),
     }),
+    getTxsCampaign: builder.query<
+      CampaignProofData[],
+      { limit: number; offset: number; userAddress: string; campaignId: number }
+    >({
+      query: ({ campaignId, ...params }) => ({
+        params,
+        url: `/${campaignId}/proofs`,
+      }),
+      transformResponse: (data: any) => formatTxs(data?.data || []),
+    }),
     joinCampaign: builder.mutation<any, { token: string | null; address: string; recaptchaId: number }>({
       query: ({ recaptchaId, ...data }) => ({
         data,
@@ -226,7 +249,12 @@ const campaignApi = createApi({
   }),
 })
 
-export const { useGetCampaignsQuery, useGetLeaderboardQuery, useGetLuckyWinnersQuery, useJoinCampaignMutation } =
-  campaignApi
+export const {
+  useGetCampaignsQuery,
+  useGetLeaderboardQuery,
+  useGetLuckyWinnersQuery,
+  useJoinCampaignMutation,
+  useGetTxsCampaignQuery,
+} = campaignApi
 
 export default campaignApi