diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/molecules/PoolTransactions/index.tsx index 19068d829..2c19d80db 100644 --- a/src/components/molecules/PoolTransactions/index.tsx +++ b/src/components/molecules/PoolTransactions/index.tsx @@ -10,10 +10,11 @@ import { fetchDataForMultipleChains } from '../../../utils/subgraph' import { useSiteMetadata } from '../../../hooks/useSiteMetadata' import NetworkName from '../../atoms/NetworkName' import { retrieveDDOListByDIDs } from '../../../utils/aquarius' -import axios, { CancelToken } from 'axios' +import { CancelToken } from 'axios' import Title from './Title' import styles from './index.module.css' import { DDO, Logger } from '@oceanprotocol/lib' +import { useCancelToken } from '../../../hooks/useCancelToken' const REFETCH_INTERVAL = 20000 @@ -130,11 +131,12 @@ export default function PoolTransactions({ accountId: string }): ReactElement { const [transactions, setTransactions] = useState() - const [isLoading, setIsLoading] = useState(true) + const [isLoading, setIsLoading] = useState(false) const { chainIds } = useUserPreferences() const { appConfig } = useSiteMetadata() const [dataFetchInterval, setDataFetchInterval] = useState() const [data, setData] = useState() + const cancelToken = useCancelToken() const getPoolTransactionData = useCallback(async () => { const variables = { @@ -161,8 +163,9 @@ export default function PoolTransactions({ const getPoolTransactions = useCallback( async (cancelToken: CancelToken) => { - if (!data) return - + if (!data) { + return + } const poolTransactions: PoolTransaction[] = [] const didList: string[] = [] @@ -173,7 +176,10 @@ export default function PoolTransactions({ .replace('0x', 'did:op:') didList.push(did) } - if (didList.length === 0) return + if (didList.length === 0) { + setIsLoading(false) + return + } const ddoList = await retrieveDDOListByDIDs( didList, chainIds, @@ -189,9 +195,11 @@ export default function PoolTransactions({ const sortedTransactions = poolTransactions.sort( (a, b) => b.timestamp - a.timestamp ) + setTransactions(sortedTransactions) + setIsLoading(false) }, - [data] + [data, chainIds, setIsLoading] ) // @@ -203,7 +211,6 @@ export default function PoolTransactions({ async function getTransactions() { try { await getPoolTransactionData() - if (dataFetchInterval) return const interval = setInterval(async () => { await getPoolTransactionData() @@ -224,24 +231,21 @@ export default function PoolTransactions({ // Transform to final transactions // useEffect(() => { - const cancelTokenSource = axios.CancelToken.source() - + if (!cancelToken()) return async function transformData() { try { setIsLoading(true) - await getPoolTransactions(cancelTokenSource.token) + await getPoolTransactions(cancelToken()) } catch (error) { Logger.error('Error fetching pool transactions: ', error.message) - } finally { - setIsLoading(false) } } transformData() return () => { - cancelTokenSource.cancel() + cancelToken() } - }, [getPoolTransactions]) + }, [cancelToken, getPoolTransactions]) return accountId ? ( ([]) const isMounted = useIsMounted() @@ -95,21 +95,20 @@ export default function ComputeJobs({ }, [networkId, ocean, connect]) const fetchJobs = useCallback(async () => { - if (!chainIds || !accountId) { + if (!chainIds || chainIds.length === 0 || !accountId) { + setJobs([]) setIsLoading(false) return } - try { setIsLoading(true) const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo) - isMounted() && setJobs(jobs) + isMounted() && setJobs(jobs.computeJobs) + setIsLoading(jobs.isLoaded) } catch (error) { Logger.error(error.message) - } finally { - setIsLoading(false) } - }, [account, accountId, chainIds, ddo, config, ocean]) + }, [chainIds, accountId, config, ocean, account, ddo, isMounted]) useEffect(() => { fetchJobs() diff --git a/src/components/pages/Profile/History/PoolShares.tsx b/src/components/pages/Profile/History/PoolShares.tsx index 9a8b84120..46220452a 100644 --- a/src/components/pages/Profile/History/PoolShares.tsx +++ b/src/components/pages/Profile/History/PoolShares.tsx @@ -18,6 +18,7 @@ import Decimal from 'decimal.js' import { useProfile } from '../../../../providers/Profile' import { DDO } from '@oceanprotocol/lib' import { useCancelToken } from '../../../../hooks/useCancelToken' +import { useIsMounted } from '../../../../hooks/useIsMounted' import { useUserPreferences } from '../../../../providers/UserPreferences' Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) @@ -172,10 +173,11 @@ export default function PoolShares({ const [dataFetchInterval, setDataFetchInterval] = useState() const { chainIds } = useUserPreferences() const newCancelToken = useCancelToken() + const isMounted = useIsMounted() const fetchPoolSharesAssets = useCallback( async (cancelToken: CancelToken) => { - if (!poolShares || isPoolSharesLoading) return + if (!poolShares || isPoolSharesLoading || !isMounted()) return try { const assets = await getPoolSharesAssets( @@ -186,9 +188,11 @@ export default function PoolShares({ setAssets(assets) } catch (error) { console.error('Error fetching pool shares: ', error.message) + } finally { + setLoading(false) } }, - [poolShares, isPoolSharesLoading] + [poolShares, isPoolSharesLoading, isMounted] ) useEffect(() => { @@ -196,7 +200,6 @@ export default function PoolShares({ async function init() { setLoading(true) await fetchPoolSharesAssets(cancelToken) - setLoading(false) if (dataFetchInterval) return const interval = setInterval(async () => { diff --git a/src/utils/compute.ts b/src/utils/compute.ts index e66bc9f83..b260ddef3 100644 --- a/src/utils/compute.ts +++ b/src/utils/compute.ts @@ -66,6 +66,11 @@ interface TokenOrder { timestamp: number } +interface ComputeResults { + computeJobs: ComputeJobMetaData[] + isLoaded: boolean +} + async function getAssetMetadata( queryDtList: string, cancelToken: CancelToken, @@ -221,9 +226,13 @@ export async function getComputeJobs( ocean: Ocean, account: Account, ddo?: DDO -): Promise { +): Promise { const assetDTAddress = ddo?.dataTokenInfo?.address - + let computeResult: ComputeResults = { + computeJobs: [], + isLoaded: false + } + let isLoading = true const variables = assetDTAddress ? { user: account?.getId().toLowerCase(), @@ -239,16 +248,18 @@ export async function getComputeJobs( assetDTAddress ? [ddo?.chainId] : chainIds ) let data: TokenOrder[] = [] - for (let i = 0; i < result.length; i++) { - if (!result[i]?.tokenOrders) continue + if (!result[i]?.tokenOrders || result[i].tokenOrders.length === 0) continue result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => { data.push(tokenOrder) }) } - if (!ocean || !account || !data) return + if (data.length === 0) { + return computeResult + } + data = data.sort((a, b) => b.timestamp - a.timestamp) const queryDtList = getDtList(data) if (queryDtList === '') return @@ -262,8 +273,13 @@ export async function getComputeJobs( ocean ) const computeJobs = await getJobs(providers, account, assets) + isLoading = false + computeResult = { + computeJobs: computeJobs, + isLoaded: isLoading + } - return computeJobs + return computeResult } export async function createTrustedAlgorithmList(