Merge pull request #580 from valory-xyz/mohan/debug-multiple-account-…

…requeast fix: debug multiple account request
valory-xyz · Dec 13, 2024 · 03e12b5 · 03e12b5
2 parents dc1846e + a3391e9
commit 03e12b5
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 69 deletions.
diff --git a/frontend/components/AgentSelection.tsx b/frontend/components/AgentSelection.tsx
@@ -1,7 +1,7 @@
 import { Button, Card, Flex, Typography } from 'antd';
 import { entries } from 'lodash';
 import Image from 'next/image';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
 import { AGENT_CONFIG } from '@/config/agents';
 import { COLOR } from '@/constants/colors';
@@ -13,6 +13,7 @@ import { useServices } from '@/hooks/useServices';
 import { useSetup } from '@/hooks/useSetup';
 import { useMasterWalletContext } from '@/hooks/useWallet';
 import { AgentConfig } from '@/types/Agent';
+import { delayInSeconds } from '@/utils/delay';
 
 import { SetupCreateHeader } from './SetupPage/Create/SetupCreateHeader';
 import { CardFlex } from './styled/CardFlex';
@@ -25,29 +26,37 @@ type EachAgentProps = {
   agentConfig: AgentConfig;
 };
 
-const EachAgent = ({
-  showSelected,
-  agentType,
-  agentConfig,
-}: EachAgentProps) => {
-  const { goto: gotoSetup } = useSetup();
-  const { goto: gotoPage } = usePageState();
-  const { selectedAgentType, updateAgentType } = useServices();
-  const { masterSafes, isLoading } = useMasterWalletContext();
+const EachAgent = memo(
+  ({ showSelected, agentType, agentConfig }: EachAgentProps) => {
+    const { goto: gotoSetup } = useSetup();
+    const { goto: gotoPage } = usePageState();
+    const { selectedAgentType, updateAgentType } = useServices();
+    const { masterSafes, isLoading } = useMasterWalletContext();
 
-  const isCurrentAgent = showSelected ? selectedAgentType === agentType : false;
+    const isCurrentAgent = showSelected
+      ? selectedAgentType === agentType
+      : false;
 
-  const handleSelectAgent = useCallback(() => {
-    updateAgentType(agentType);
+    const handleSelectAgent = useCallback(async () => {
+      updateAgentType(agentType);
 
-    const isSafeCreated = masterSafes?.find(
-      (masterSafe) =>
-        masterSafe.evmChainId === AGENT_CONFIG[agentType].evmHomeChainId,
-    );
+      // DO NOTE REMOVE THIS DELAY
+      // NOTE: the delay is added so that agentType is updated in electron store
+      // and re-rendered with the updated agentType
+      await delayInSeconds(0.5);
+
+      const isSafeCreated = masterSafes?.find(
+        (masterSafe) =>
+          masterSafe.evmChainId === AGENT_CONFIG[agentType].evmHomeChainId,
+      );
+
+      // If safe is created for the agent type, then go to main page
+      if (isSafeCreated) {
+        gotoPage(Pages.Main);
+        return;
+      }
 
-    if (isSafeCreated) {
-      gotoPage(Pages.Main);
-    } else {
+      // If safe is NOT created, then go to setup page based on the agent type
       if (agentType === AgentType.Memeooorr) {
         // if the selected type is Memeooorr - should set up the agent first
         gotoPage(Pages.Setup);
@@ -56,53 +65,55 @@ const EachAgent = ({
         gotoPage(Pages.Setup);
         gotoSetup(SetupScreen.SetupEoaFunding);
       }
-    }
-  }, [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,
-        },
-      }}
-    >
-      <Flex vertical>
-        <Flex align="center" justify="space-between" className="mb-8">
-          <Image
-            src={`/agent-${agentType}-icon.png`}
-            width={36}
-            height={36}
-            alt={agentConfig.displayName}
-          />
-          {isCurrentAgent ? (
-            <Text>Selected Agent</Text>
-          ) : (
-            <Button
-              type="primary"
-              onClick={handleSelectAgent}
-              disabled={isLoading}
-            >
-              Select
-            </Button>
-          )}
+    }, [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,
+          },
+        }}
+      >
+        <Flex vertical>
+          <Flex align="center" justify="space-between" className="mb-8">
+            <Image
+              src={`/agent-${agentType}-icon.png`}
+              width={36}
+              height={36}
+              alt={agentConfig.displayName}
+            />
+            {isCurrentAgent ? (
+              <Text>Selected Agent</Text>
+            ) : (
+              <Button
+                type="primary"
+                onClick={handleSelectAgent}
+                disabled={isLoading}
+              >
+                Select
+              </Button>
+            )}
+          </Flex>
         </Flex>
-      </Flex>
 
-      <Title level={5} className="m-0">
-        {agentConfig.displayName}
-      </Title>
+        <Title level={5} className="m-0">
+          {agentConfig.displayName}
+        </Title>
 
-      <Text type="secondary">{agentConfig.description}</Text>
-    </Card>
-  );
-};
+        <Text type="secondary">{agentConfig.description}</Text>
+      </Card>
+    );
+  },
+);
+
+EachAgent.displayName = 'EachAgent';
 
 type AgentSelectionProps = {
   showSelected?: boolean;

diff --git a/frontend/components/ManageStakingPage/StakingContractSection/StakingContractDetails.tsx b/frontend/components/ManageStakingPage/StakingContractSection/StakingContractDetails.tsx
@@ -62,7 +62,17 @@ export const StakingContractDetails = ({
     );
   }
 
+  if (!list || list.length === 0) {
+    return (
+      <Alert
+        message="No staking information available."
+        type="error"
+        showIcon
+      />
+    );
+  }
+
   return (
-    <InfoBreakdownList list={list!} parentStyle={{ gap: 12 }} color="primary" />
+    <InfoBreakdownList list={list} parentStyle={{ gap: 12 }} color="primary" />
   );
 };
diff --git a/frontend/components/SetupPage/Create/SetupEoaFunding.tsx b/frontend/components/SetupPage/Create/SetupEoaFunding.tsx
@@ -181,7 +181,7 @@ const EOA_FUNDING_MAP: Record<
   //     requiredEth: MIN_ETH_BALANCE_THRESHOLDS[EvmChainId.Base].safeCreation,
   //   },
   // }
-};
+} as const;
 
 /**
  * EOA funding setup screen
@@ -221,8 +221,8 @@ export const SetupEoaFunding = () => {
     const indexOfCurrentChain = chains.indexOf(currentChain.toString());
     const nextChainExists = chains.length > indexOfCurrentChain + 1;
 
+    // goto next chain
     if (nextChainExists) {
-      // goto next chain
       setCurrentChain(chains[indexOfCurrentChain + 1] as unknown as EvmChainId);
       return;
     }

diff --git a/frontend/config/agents.ts b/frontend/config/agents.ts
@@ -52,4 +52,4 @@ export const AGENT_CONFIG: {
     description:
       'Autonomously post to Twitter, create and trade memecoins, and interact with other agents.',
   },
-};
+} as const;
diff --git a/frontend/context/StakingContractDetailsProvider.tsx b/frontend/context/StakingContractDetailsProvider.tsx
@@ -68,7 +68,8 @@ const useAllStakingContractDetails = () => {
     {} as Record<string, Partial<StakingContractDetails>>,
   );
 
-  const isAllStakingContractDetailsLoaded = queryResults.every(
+  // TODO: some are failing, not sure why.
+  const isAllStakingContractDetailsLoaded = queryResults.some(
     (query) => query.isSuccess,
   );