diff --git a/packages/ui/src/screens/account_details/components/staking/hooks.ts b/packages/ui/src/screens/account_details/components/staking/hooks.ts index 336652a929..9c4ed0d331 100644 --- a/packages/ui/src/screens/account_details/components/staking/hooks.ts +++ b/packages/ui/src/screens/account_details/components/staking/hooks.ts @@ -157,25 +157,19 @@ export const useStaking = ( offset: delegationsPage * ROWS_PER_PAGE, }, }); + + const [delegationsPagination, setDelegationsPagination] = useState(); + useEffect(() => { - if (delegationsLoading) return; if (delegationsError) { delegationsRefetch({ pagination: false }); } - }, [delegationsError, delegationsLoading, delegationsRefetch]); - useAccountDelegationsQuery({ - variables: { - address, - limit: ROWS_PER_PAGE, - offset: (delegationsPage + 1) * ROWS_PER_PAGE, - }, - }); + }, [delegationsError, delegationsRefetch]); - const [delegationsPagination, setDelegationsPagination] = useState(); const { - data: dData, - error: dError, - refetch: dRefetch, + data: paginationData, + error: paginationError, + refetch: paginationRefetch, } = useAccountDelegationsQuery({ variables: { address, @@ -185,13 +179,15 @@ export const useStaking = ( }, skip: delegationsPagination !== undefined, }); + useEffect(() => { - if (dError) { - dRefetch(); - } else if (dData) { - setDelegationsPagination(dData?.delegations?.pagination?.total ?? 0); + if (paginationError) { + console.error('Error fetching pagination data:', paginationError); + paginationRefetch(); + } else if (paginationData) { + setDelegationsPagination(paginationData?.delegations?.pagination?.total ?? 0); } - }, [dData, dError, dRefetch]); + }, [paginationData, paginationError, paginationRefetch]); // ===================================== // redelegations @@ -208,25 +204,20 @@ export const useStaking = ( offset: redelegationsPage * ROWS_PER_PAGE, }, }); + + const [redelegationsPagination, setRedelegationsPagination] = useState(); + useEffect(() => { - if (redelegationsLoading) return; if (redelegationsError) { + console.error('Error fetching redelegations:', redelegationsError); redelegationsRefetch({ pagination: false }); } - }, [redelegationsError, redelegationsLoading, redelegationsRefetch]); - useAccountRedelegationsQuery({ - variables: { - address, - limit: ROWS_PER_PAGE, - offset: (redelegationsPage + 1) * ROWS_PER_PAGE, - }, - }); + }, [redelegationsError, redelegationsRefetch]); - const [redelegationsPagination, setRedelegationsPagination] = useState(); const { - data: rData, - error: rError, - refetch: rRefetch, + data: redelegationsPaginationData, + error: redelegationsPaginationError, + refetch: redelegationsPaginationRefetch, } = useAccountRedelegationsQuery({ variables: { address, @@ -236,13 +227,17 @@ export const useStaking = ( }, skip: redelegationsPagination !== undefined, }); + useEffect(() => { - if (rError) { - rRefetch(); - } else if (rData) { - setRedelegationsPagination(rData?.redelegations?.pagination?.total ?? 0); + if (redelegationsPaginationError) { + console.error('Error fetching redelegations pagination data:', redelegationsPaginationError); + redelegationsPaginationRefetch(); + } else if (redelegationsPaginationData) { + setRedelegationsPagination( + redelegationsPaginationData?.redelegations?.pagination?.total ?? 0 + ); } - }, [rData, rError, rRefetch]); + }, [redelegationsPaginationData, redelegationsPaginationError, redelegationsPaginationRefetch]); // ===================================== // unbondings @@ -259,25 +254,20 @@ export const useStaking = ( offset: unbondingsPage * ROWS_PER_PAGE, }, }); + + const [undelegationsPagination, setUndelegationsPagination] = useState(); + useEffect(() => { - if (undelegationsLoading) return; if (undelegationsError) { + console.error('Error fetching undelegations:', undelegationsError); undelegationsRefetch({ pagination: false }); } - }, [undelegationsError, undelegationsLoading, undelegationsRefetch]); - useAccountUndelegationsQuery({ - variables: { - address, - limit: ROWS_PER_PAGE, - offset: (unbondingsPage + 1) * ROWS_PER_PAGE, - }, - }); + }, [undelegationsError, undelegationsRefetch]); - const [undelegationsPagination, setUndelegationsPagination] = useState(); const { - data: uData, - error: uError, - refetch: uRefetch, + data: undelegationsPaginationData, + error: undelegationsPaginationError, + refetch: undelegationsPaginationRefetch, } = useAccountUndelegationsQuery({ variables: { address, @@ -287,14 +277,19 @@ export const useStaking = ( }, skip: undelegationsPagination !== undefined, }); + useEffect(() => { - if (uError) { - uRefetch(); - } else if (uData) { - setUndelegationsPagination(uData?.undelegations?.pagination?.total ?? 0); + if (undelegationsPaginationError) { + console.error('Error fetching undelegations pagination data:', undelegationsPaginationError); + undelegationsPaginationRefetch(); + } else if (undelegationsPaginationData) { + setUndelegationsPagination( + undelegationsPaginationData?.undelegations?.pagination?.total ?? 0 + ); } - }, [uData, uError, uRefetch]); + }, [undelegationsPaginationData, undelegationsPaginationError, undelegationsPaginationRefetch]); + // Handle tab change const handleTabChange = useCallback( (_event: SyntheticEvent, newValue: number) => { setState((prevState) => { diff --git a/packages/ui/src/screens/account_details/components/staking/index.tsx b/packages/ui/src/screens/account_details/components/staking/index.tsx index 885878f879..13eaec5807 100644 --- a/packages/ui/src/screens/account_details/components/staking/index.tsx +++ b/packages/ui/src/screens/account_details/components/staking/index.tsx @@ -8,7 +8,6 @@ import Unbondings from '@/screens/account_details/components/staking/components/ import { useStaking } from '@/screens/account_details/components/staking/hooks'; import useStyles from '@/screens/account_details/components/staking/styles'; import { formatCount } from '@/screens/validator_details/components/staking'; -import Loading from '@/components/loading'; import { useAccountRewards } from '@/screens/account_details/hooks'; type StakingProps = { @@ -53,18 +52,12 @@ const Staking: FC = ({ className }) => { return ( - {state.loading ? ( - - ) : ( - <> - - {tabs.map((x) => ( - - {x.component} - - ))} - - )} + + {tabs.map((x) => ( + + {x.component} + + ))} ); };