1- import { useCallback , useEffect , useMemo , useState } from 'react' ;
1+ import { keepPreviousData , useQuery } from '@tanstack/ react-query ' ;
22
33import dayjs from 'dayjs' ;
44
@@ -12,7 +12,6 @@ import { useAccount } from '../../../../../../hooks/useAccount';
1212import { useBlockNumber } from '../../../../../../hooks/useBlockNumber' ;
1313import { useLoadContract } from '../../../../../../hooks/useLoadContract' ;
1414import { queryRate } from '../../../../../../utils/calls' ;
15- import { useGetActiveLoansQuery } from '../../../../../../utils/graphql/rsk/generated' ;
1615import { decimalic } from '../../../../../../utils/math' ;
1716import {
1817 calculateApr ,
@@ -30,35 +29,19 @@ const unsafeOnly = false;
3029
3130export const useGetOpenLoans = ( ) => {
3231 const { account } = useAccount ( ) ;
33- const { value : blockNumber } = useBlockNumber ( ) ;
34- const [ processedBlock , setProcessedBlock ] = useState < number | undefined > ( ) ;
32+ const blockNumber = useBlockNumber ( ) ;
3533 const contract = useLoadContract ( 'protocol' , 'protocol' , RSK_CHAIN_ID ) ;
36- const [ loadingLoans , setLoadingLoans ] = useState ( false ) ;
37- const [ loanItemsSmartContract , setLoanItemsSmartContract ] = useState <
38- LoanItem [ ]
39- > ( [ ] ) ;
4034
4135 const {
42- data,
43- loading : loadingSubgraph ,
44- refetch,
45- } = useGetActiveLoansQuery ( {
46- variables : { user : account } ,
47- } ) ;
48-
49- const loading = useMemo (
50- ( ) => loadingLoans || loadingSubgraph ,
51- [ loadingLoans , loadingSubgraph ] ,
52- ) ;
53-
54- const getUserLoans = useCallback ( async ( ) => {
55- if ( ! account || ! contract ) {
56- setLoadingLoans ( false ) ;
57- return ;
58- }
59-
60- try {
61- setLoadingLoans ( true ) ;
36+ data : loanItemsSmartContract ,
37+ isPending,
38+ error,
39+ } = useQuery ( {
40+ queryKey : [ 'userLoans' , { account, blockNumber } ] ,
41+ queryFn : async ( ) => {
42+ if ( ! account || ! contract ) {
43+ return [ ] ;
44+ }
6245 const loans = await contract . getUserLoans (
6346 account ,
6447 start ,
@@ -69,7 +52,7 @@ export const useGetOpenLoans = () => {
6952 ) ;
7053
7154 if ( ! loans ) {
72- return ;
55+ return [ ] ;
7356 }
7457
7558 const rates = await mapRates ( loans ) ;
@@ -125,29 +108,17 @@ export const useGetOpenLoans = () => {
125108 . filter ( Boolean )
126109 . filter ( item => isSupportedPool ( item . debtAsset , item . collateralAsset ) ) ;
127110
128- setLoanItemsSmartContract ( result ) ;
129- setProcessedBlock ( blockNumber ) ;
130- } catch ( error ) {
131- console . error ( `Error while fetching loans: ${ error } ` ) ;
132- } finally {
133- setLoadingLoans ( false ) ;
134- }
135- } , [ account , blockNumber , contract ] ) ;
136-
137- useEffect ( ( ) => {
138- if ( blockNumber !== processedBlock ) {
139- refetch ( ) ;
140- getUserLoans ( ) ;
141- }
142- } , [ blockNumber , getUserLoans , processedBlock , refetch ] ) ;
143-
144- if ( ! data ?. loans || ! contract || ! loanItemsSmartContract ) {
145- return { data : [ ] , loading } ;
146- }
111+ return result as LoanItem [ ] ;
112+ } ,
113+ enabled : ! ! account && ! ! contract ,
114+ placeholderData : keepPreviousData ,
115+ throwOnError : true ,
116+ } ) ;
147117
148118 return {
149- data : loanItemsSmartContract ,
150- loading,
119+ data : loanItemsSmartContract ?? [ ] ,
120+ loading : isPending ,
121+ error,
151122 } ;
152123} ;
153124
0 commit comments