refactor: simplify service loading state management in AgentButton an…

…d StakingContractDetailsProvider
valory-xyz · Dec 6, 2024 · 235e8bf · 235e8bf
1 parent 6ea914d
commit 235e8bf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 17 deletions.
diff --git a/frontend/components/MainPage/header/AgentButton/AgentButton.tsx b/frontend/components/MainPage/header/AgentButton/AgentButton.tsx
@@ -17,11 +17,8 @@ import { AgentStartingButton } from './AgentStartingButton';
 import { AgentStoppingButton } from './AgentStoppingButton';
 
 export const AgentButton = () => {
-  const {
-    selectedService,
-    isFetched: isServicesLoaded,
-    selectedServiceStatusOverride,
-  } = useServices();
+  const { selectedService, isFetched, selectedServiceStatusOverride } =
+    useServices();
 
   const {
     isEligibleForStaking,
@@ -30,7 +27,7 @@ export const AgentButton = () => {
   } = useActiveStakingContractInfo();
 
   const button = useMemo(() => {
-    if (!isServicesLoaded || !isSelectedStakingContractDetailsLoaded) {
+    if (!isFetched || !isSelectedStakingContractDetailsLoaded) {
       return (
         <Button type="primary" size="large" disabled loading>
           Loading...
@@ -68,7 +65,7 @@ export const AgentButton = () => {
 
     return <CannotStartAgentDueToUnexpectedError />;
   }, [
-    isServicesLoaded,
+    isFetched,
     isSelectedStakingContractDetailsLoaded,
     selectedServiceStatusOverride,
     selectedService,

diff --git a/frontend/context/StakingContractDetailsProvider.tsx b/frontend/context/StakingContractDetailsProvider.tsx
@@ -14,13 +14,13 @@ import {
 import { FIVE_SECONDS_INTERVAL } from '@/constants/intervals';
 import { REACT_QUERY_KEYS } from '@/constants/react-query-keys';
 import { StakingProgramId } from '@/enums/StakingProgram';
+import { useService } from '@/hooks/useService';
 import { useServices } from '@/hooks/useServices';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
 import {
   ServiceStakingDetails,
   StakingContractDetails,
 } from '@/types/Autonolas';
-import { asMiddlewareChain } from '@/utils/middlewareHelpers';
 
 import { StakingProgramContext } from './StakingProgramProvider';
 
@@ -171,18 +171,13 @@ export const StakingContractDetailsProvider = ({
   children,
 }: PropsWithChildren) => {
   const [isPaused, setIsPaused] = useState(false);
-  const { selectedService, selectedAgentConfig } = useServices();
+  const { selectedService } = useServices();
+  const { serviceNftTokenId } = useService(selectedService?.service_config_id);
   const { selectedStakingProgramId } = useContext(StakingProgramContext);
 
-  const serviceNftTokenId = !isNil(selectedService?.service_config_id)
-    ? selectedService?.chain_configs?.[
-        asMiddlewareChain(selectedAgentConfig.evmHomeChainId)
-      ]?.chain_data?.token
-    : null;
-
   const {
     data: selectedStakingContractDetails,
-    isFetched,
+    isLoading,
     refetch,
   } = useStakingContractDetailsByStakingProgram({
     serviceNftTokenId,
@@ -200,7 +195,7 @@ export const StakingContractDetailsProvider = ({
     <StakingContractDetailsContext.Provider
       value={{
         selectedStakingContractDetails,
-        isSelectedStakingContractDetailsLoaded: isFetched,
+        isSelectedStakingContractDetailsLoaded: !isLoading,
         isAllStakingContractDetailsRecordLoaded:
           isAllStakingContractDetailsLoaded,
         allStakingContractDetailsRecord,