fix: start button stuck on loading (#550)

* feat: update Skeleton component in SettingsPage for improved loading state * refactor: simplify service loading state management in AgentButton and StakingContractDetailsProvider * fix: add missing braces for conditional checks in AgentNotRunningButton and StakingRewardsThisEpoch components
valory-xyz · Dec 9, 2024 · c0a8bc6 · c0a8bc6
1 parent e608a85
commit c0a8bc6
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 20 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/components/MainPage/header/AgentButton/AgentNotRunningButton.tsx b/frontend/components/MainPage/header/AgentButton/AgentNotRunningButton.tsx
@@ -108,8 +108,9 @@ export const AgentNotRunningButton = () => {
       !isNil(hasEnoughServiceSlots) &&
       !hasEnoughServiceSlots &&
       !isServiceStaked
-    )
+    ) {
       return false;
+    }
 
     const masterSafeOlasBalance = masterSafeBalances?.find(
       (walletBalanceResult) =>

diff --git a/frontend/components/MainPage/sections/RewardsSection/StakingRewardsThisEpoch.tsx b/frontend/components/MainPage/sections/RewardsSection/StakingRewardsThisEpoch.tsx
@@ -53,12 +53,15 @@ export const StakingRewardsThisEpoch = () => {
 
   const popoverContent = useMemo(() => {
     if (!isActiveStakingProgramLoaded) return <Skeleton.Input />;
-    if (!activeStakingProgramMeta)
+
+    if (!activeStakingProgramMeta) {
       return (
         <div style={{ maxWidth: POPOVER_WIDTH_MEDIUM }}>
           You&apos;re not yet in a staking program!
         </div>
       );
+    }
+
     return (
       <div style={{ maxWidth: POPOVER_WIDTH_MEDIUM }}>
         The epoch for {stakingProgramMeta?.name} ends each day at ~{' '}

diff --git a/frontend/components/SettingsPage/index.tsx b/frontend/components/SettingsPage/index.tsx
@@ -110,7 +110,7 @@ const SettingsMain = () => {
   }, [masterSafeBackupAddresses]);
 
   const walletBackup = useMemo(() => {
-    if (!ownersIsFetched) return <Skeleton />;
+    if (!ownersIsFetched) return <Skeleton.Input />;
     if (!masterSafeBackupAddress) return <NoBackupWallet />;
     if (!selectedService?.home_chain) return null;
 

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,