Merge pull request #582 from valory-xyz/mohan/navigate-to-switch-if-n…

…o-master fix: navigation on agent switch and other edge-cases (on closing app)
valory-xyz · Dec 16, 2024 · a3b635d · a3b635d
2 parents 4327593 + 138c3c5
commit a3b635d
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 37 deletions.
diff --git a/frontend/components/AgentSelection.tsx b/frontend/components/AgentSelection.tsx
@@ -5,6 +5,7 @@ import { memo, useCallback } from 'react';
 
 import { AGENT_CONFIG } from '@/config/agents';
 import { COLOR } from '@/constants/colors';
+import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates';
 import { AgentType } from '@/enums/Agent';
 import { Pages } from '@/enums/Pages';
 import { SetupScreen } from '@/enums/SetupScreen';
@@ -20,6 +21,18 @@ import { CardFlex } from './styled/CardFlex';
 
 const { Title, Text } = Typography;
 
+const getCardStyle = (isCurrentAgent: boolean) => ({
+  padding: 0,
+  marginBottom: 6,
+  body: {
+    padding: '12px 16px',
+    gap: 6,
+    borderRadius: 'inherit',
+    background: isCurrentAgent ? COLOR.GRAY_1 : 'transparent',
+    opacity: isCurrentAgent ? 0.75 : 1,
+  },
+});
+
 type EachAgentProps = {
   showSelected: boolean;
   agentType: AgentType;
@@ -30,8 +43,14 @@ const EachAgent = memo(
   ({ showSelected, agentType, agentConfig }: EachAgentProps) => {
     const { goto: gotoSetup } = useSetup();
     const { goto: gotoPage } = usePageState();
-    const { selectedAgentType, updateAgentType } = useServices();
-    const { masterSafes, isLoading } = useMasterWalletContext();
+    const {
+      isLoading: isServicesLoading,
+      services,
+      selectedAgentType,
+      updateAgentType,
+    } = useServices();
+    const { masterSafes, isLoading: isMasterWalletLoading } =
+      useMasterWalletContext();
 
     const isCurrentAgent = showSelected
       ? selectedAgentType === agentType
@@ -56,31 +75,47 @@ const EachAgent = memo(
         return;
       }
 
-      // If safe is NOT created, then go to setup page based on the agent type
+      const serviceName = SERVICE_TEMPLATES.find(
+        (service) => service.agentType === agentType,
+      )?.name;
+      const isServiceCreated = services?.find(
+        ({ name }) => name === serviceName,
+      );
+
+      // If service is created but safe is NOT, then setup EOA funding
+      // Eg. This case will happen when the user has created the service and closed the app on/during funding page.
+      if (isServiceCreated) {
+        gotoPage(Pages.Setup);
+        gotoSetup(SetupScreen.SetupEoaFunding);
+        return;
+      }
+
+      // Neither service nor safe is created
       if (agentType === AgentType.Memeooorr) {
         // if the selected type is Memeooorr - should set up the agent first
         gotoPage(Pages.Setup);
         gotoSetup(SetupScreen.SetupYourAgent);
-      } else if (agentType === AgentType.PredictTrader) {
+        return;
+      }
+
+      if (agentType === AgentType.PredictTrader) {
         gotoPage(Pages.Setup);
         gotoSetup(SetupScreen.SetupEoaFunding);
+        return;
       }
-    }, [agentType, gotoPage, gotoSetup, masterSafes, updateAgentType]);
+
+      throw new Error('Invalid agent type');
+    }, [
+      services,
+      agentType,
+      gotoPage,
+      gotoSetup,
+      masterSafes,
+      updateAgentType,
+    ]);
 
     return (
-      <Card
-        key={agentType}
-        style={{ padding: 0, marginBottom: 6 }}
-        styles={{
-          body: {
-            padding: '12px 16px',
-            gap: 6,
-            borderRadius: 'inherit',
-            background: isCurrentAgent ? COLOR.GRAY_1 : 'transparent',
-            opacity: isCurrentAgent ? 0.75 : 1,
-          },
-        }}
-      >
+      <Card key={agentType} {...getCardStyle(isCurrentAgent)}>
         <Flex vertical>
           <Flex align="center" justify="space-between" className="mb-8">
             <Image
@@ -95,7 +130,7 @@ const EachAgent = memo(
               <Button
                 type="primary"
                 onClick={handleSelectAgent}
-                disabled={isLoading}
+                disabled={isServicesLoading || isMasterWalletLoading}
               >
                 Select
               </Button>

diff --git a/frontend/components/SetupPage/SetupWelcome.tsx b/frontend/components/SetupPage/SetupWelcome.tsx
@@ -24,7 +24,7 @@ import { useServices } from '@/hooks/useServices';
 import { useSetup } from '@/hooks/useSetup';
 import { useMasterWalletContext } from '@/hooks/useWallet';
 import { AccountService } from '@/service/Account';
-import { asEvmChainId } from '@/utils/middlewareHelpers';
+import { asEvmChainId, asMiddlewareChain } from '@/utils/middlewareHelpers';
 
 import { FormFlex } from '../styled/FormFlex';
 
@@ -135,11 +135,16 @@ export const SetupWelcomeLogin = () => {
   const { goto } = useSetup();
   const { goto: gotoPage } = usePageState();
 
-  const { selectedService, selectedAgentConfig } = useServices();
+  const {
+    selectedService,
+    selectedAgentConfig,
+    services,
+    isFetched: isServicesFetched,
+  } = useServices();
   const {
     masterSafes,
-    masterWallets: wallets,
     masterEoa,
+    isFetched: isWalletsFetched,
   } = useMasterWalletContext();
   const { isLoaded: isBalanceLoaded, updateBalances } = useBalanceContext();
   const { masterWalletBalances } = useMasterBalances();
@@ -148,12 +153,11 @@ export const SetupWelcomeLogin = () => {
     ? asEvmChainId(selectedService?.home_chain)
     : selectedAgentConfig.evmHomeChainId;
 
-  const masterSafe =
-    masterSafes?.find(
-      (safe) =>
-        selectedServiceOrAgentChainId &&
-        safe.evmChainId === selectedServiceOrAgentChainId,
-    ) ?? null;
+  const masterSafe = masterSafes?.find(
+    (safe) =>
+      selectedServiceOrAgentChainId &&
+      safe.evmChainId === selectedServiceOrAgentChainId,
+  );
 
   const eoaBalanceEth = masterWalletBalances?.find(
     (balance) =>
@@ -181,30 +185,60 @@ export const SetupWelcomeLogin = () => {
     [updateBalances],
   );
 
+  const isServiceCreatedForAgent = useMemo(() => {
+    if (!isServicesFetched) return false;
+    if (!services) return false;
+    if (!selectedService) return false;
+    if (!selectedAgentConfig) return false;
+
+    return services.some(
+      (service) =>
+        service.home_chain ===
+        asMiddlewareChain(selectedAgentConfig.evmHomeChainId),
+    );
+  }, [isServicesFetched, services, selectedService, selectedAgentConfig]);
+
   useEffect(() => {
     if (!canNavigate) return;
-
-    // Navigate only when wallets and balances are loaded
+    if (!isServicesFetched) return;
+    if (!isWalletsFetched) return;
     if (!isBalanceLoaded) return;
 
     setIsLoggingIn(false);
 
+    // If no service is created for the selected agent
+    if (!isServiceCreatedForAgent) {
+      window.console.log(
+        `No service created for chain ${selectedServiceOrAgentChainId}`,
+      );
+      goto(SetupScreen.AgentSelection);
+      return;
+    }
+
+    // If no balance is loaded, redirect to setup screen
     if (!eoaBalanceEth) {
       goto(SetupScreen.SetupEoaFundingIncomplete);
-    } else if (!masterSafe?.address) {
+      return;
+    }
+
+    // if master safe is available
+    if (masterSafe?.address) {
       goto(SetupScreen.SetupCreateSafe);
-    } else {
-      gotoPage(Pages.Main);
+      return;
     }
+
+    gotoPage(Pages.Main);
   }, [
     canNavigate,
-    eoaBalanceEth,
-    goto,
-    gotoPage,
+    isServicesFetched,
+    isWalletsFetched,
     isBalanceLoaded,
+    isServiceCreatedForAgent,
+    eoaBalanceEth,
     masterSafe?.address,
     selectedServiceOrAgentChainId,
-    wallets?.length,
+    goto,
+    gotoPage,
   ]);
 
   return (