fix: agent needs funds disparity and low balance indicator

frontend/components/MainPage/sections/GasBalanceSection.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { COLOR } from '@/constants/colors';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
+import { useNeedsFunds } from '@/hooks/useNeedsFunds';
 import { useStore } from '@/hooks/useStore';
 import { useWallet } from '@/hooks/useWallet';
 
@@ -34,6 +35,7 @@ const FineDot = styled(Dot)`
 
 const BalanceStatus = () => {
   const { isBalanceLoaded, isLowBalance } = useBalance();
+  const { hasEnoughEthForInitialFunding } = useNeedsFunds();
   const { storeState } = useStore();
   const { showNotification } = useElectronApi();
 
@@ -65,12 +67,20 @@ const BalanceStatus = () => {
   ]);
 
   const status = useMemo(() => {
-    if (isLowBalance) {
-      return { statusName: 'Too low', StatusComponent: EmptyDot };
+    if (!storeState?.isInitialFunded && hasEnoughEthForInitialFunding) {
+      return { statusName: 'Fine', StatusComponent: FineDot };
     }
 
-    return { statusName: 'Fine', StatusComponent: FineDot };
-  }, [isLowBalance]);
+    if (!isLowBalance) {
+      return { statusName: 'Fine', StatusComponent: FineDot };
+    }
+
+    return { statusName: 'Too low', StatusComponent: EmptyDot };
+  }, [
+    hasEnoughEthForInitialFunding,
+    isLowBalance,
+    storeState?.isInitialFunded,
+  ]);
 
   const { statusName, StatusComponent } = status;
   return (

frontend/components/MainPage/sections/NeedsFundsSection.tsx

@@ -1,16 +1,13 @@
 import { Flex, Typography } from 'antd';
-import { formatUnits } from 'ethers/lib/utils';
+import { isNil } from 'lodash-es';
 import { ReactNode, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { CustomAlert } from '@/components/Alert';
-import { CHAINS } from '@/constants/chains';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
-import { useServiceTemplates } from '@/hooks/useServiceTemplates';
-import { useStore } from '@/hooks/useStore';
-import { getMinimumStakedAmountRequired } from '@/utils/service';
+import { useNeedsFunds } from '@/hooks/useNeedsFunds';
 
 import { CardSection } from '../../styled/CardSection';
 
@@ -24,62 +21,6 @@ const FundingValue = styled.div`
   letter-spacing: -0.72px;
 `;
 
-const useNeedsFunds = () => {
-  const { getServiceTemplates } = useServiceTemplates();
-
-  const serviceTemplate = useMemo(
-    () => getServiceTemplates()[0],
-    [getServiceTemplates],
-  );
-
-  const { storeState } = useStore();
-  const { safeBalance, totalOlasStakedBalance } = useBalance();
-
-  const isInitialFunded = storeState?.isInitialFunded;
-
-  const serviceFundRequirements = useMemo(() => {
-    const monthlyGasEstimate = Number(
-      formatUnits(
-        `${serviceTemplate.configurations[CHAINS.GNOSIS.chainId].monthly_gas_estimate}`,
-        18,
-      ),
-    );
-
-    const minimumStakedAmountRequired =
-      getMinimumStakedAmountRequired(serviceTemplate);
-
-    return {
-      eth: monthlyGasEstimate,
-      olas: minimumStakedAmountRequired,
-    };
-  }, [serviceTemplate]);
-
-  const hasEnoughEthForInitialFunding = useMemo(
-    () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0),
-    [serviceFundRequirements?.eth, safeBalance],
-  );
-
-  const hasEnoughOlasForInitialFunding = useMemo(() => {
-    const olasInSafe = safeBalance?.OLAS || 0;
-    const olasStakedBySafe = totalOlasStakedBalance || 0;
-
-    const olasInSafeAndStaked = olasInSafe + olasStakedBySafe;
-
-    return olasInSafeAndStaked >= serviceFundRequirements.olas;
-  }, [
-    safeBalance?.OLAS,
-    totalOlasStakedBalance,
-    serviceFundRequirements?.olas,
-  ]);
-
-  return {
-    hasEnoughEthForInitialFunding,
-    hasEnoughOlasForInitialFunding,
-    serviceFundRequirements,
-    isInitialFunded,
-  };
-};
-
 export const MainNeedsFunds = () => {
   const { isBalanceLoaded } = useBalance();
   const {
@@ -92,11 +33,14 @@ export const MainNeedsFunds = () => {
   const electronApi = useElectronApi();
 
   const isVisible: boolean = useMemo(() => {
-    if (isInitialFunded) return false;
+    if (isNil(isInitialFunded)) return false;
     if (!isBalanceLoaded) return false;
-    if (hasEnoughEthForInitialFunding && hasEnoughOlasForInitialFunding)
+    if (
+      isNil(hasEnoughOlasForInitialFunding) ||
+      isNil(hasEnoughEthForInitialFunding)
+    )
       return false;
-    return true;
+    return !hasEnoughEthForInitialFunding || !hasEnoughOlasForInitialFunding;
   }, [
     hasEnoughEthForInitialFunding,
     hasEnoughOlasForInitialFunding,
@@ -109,13 +53,13 @@ export const MainNeedsFunds = () => {
       <Flex vertical gap={16}>
         <Text className="font-weight-600">Your agent needs funds</Text>
         <Flex gap={24}>
-          {!hasEnoughOlasForInitialFunding && (
+          {hasEnoughOlasForInitialFunding === false && (
             <div>
               <FundingValue>{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}</FundingValue>
               <span className="text-sm">for staking</span>
             </div>
           )}
-          {!hasEnoughEthForInitialFunding && (
+          {hasEnoughEthForInitialFunding === false && (
             <div>
               <FundingValue>
                 {`$${serviceFundRequirements.eth} XDAI `}

frontend/components/SetupPage/SetupRestore.tsx

@@ -1,6 +1,6 @@
 import { CloseOutlined } from '@ant-design/icons';
 import { Button, Col, Flex, Form, Input, Row, Tooltip, Typography } from 'antd';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash-es/isEmpty';
 import { memo, useMemo, useState } from 'react';
 
 import { CardFlex } from '@/components/styled/CardFlex';

frontend/context/BalanceProvider.tsx

@@ -1,6 +1,6 @@
 import { message } from 'antd';
 import { isAddress } from 'ethers/lib/utils';
-import { isNumber } from 'lodash';
+import { isNumber } from 'lodash-es';
 import { ValueOf } from 'next/dist/shared/lib/constants';
 import {
   createContext,

frontend/context/ElectronApiProvider.tsx

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import { createContext, PropsWithChildren } from 'react';
 
 import { ElectronStore, ElectronTrayIconStatus } from '@/types/ElectronApi';

frontend/hooks/useNeedsFunds.ts

@@ -0,0 +1,69 @@
+import { formatUnits } from 'ethers/lib/utils';
+import { useMemo } from 'react';
+
+import { CHAINS } from '@/constants/chains';
+import { getMinimumStakedAmountRequired } from '@/utils/service';
+
+import { useBalance } from './useBalance';
+import { useServiceTemplates } from './useServiceTemplates';
+import { useStore } from './useStore';
+
+export const useNeedsFunds = () => {
+  const { getServiceTemplates } = useServiceTemplates();
+
+  const serviceTemplate = useMemo(
+    () => getServiceTemplates()[0],
+    [getServiceTemplates],
+  );
+
+  const { storeState } = useStore();
+  const { safeBalance, totalOlasStakedBalance } = useBalance();
+
+  const isInitialFunded = storeState?.isInitialFunded;
+
+  const serviceFundRequirements = useMemo(() => {
+    const monthlyGasEstimate = Number(
+      formatUnits(
+        `${serviceTemplate.configurations[CHAINS.GNOSIS.chainId].monthly_gas_estimate}`,
+        18,
+      ),
+    );
+
+    const minimumStakedAmountRequired =
+      getMinimumStakedAmountRequired(serviceTemplate);
+
+    return {
+      eth: monthlyGasEstimate,
+      olas: minimumStakedAmountRequired,
+    };
+  }, [serviceTemplate]);
+
+  const hasEnoughEthForInitialFunding = useMemo<boolean | undefined>(() => {
+    if (!safeBalance?.ETH) return;
+    if (!serviceFundRequirements?.eth) return;
+
+    return (safeBalance.ETH || 0) >= (serviceFundRequirements.eth || 0);
+  }, [serviceFundRequirements?.eth, safeBalance]);
+
+  const hasEnoughOlasForInitialFunding = useMemo<boolean | undefined>(() => {
+    if (!safeBalance?.OLAS) return;
+
+    const olasInSafe = safeBalance.OLAS || 0;
+    const olasStakedBySafe = totalOlasStakedBalance || 0;
+
+    const olasInSafeAndStaked = olasInSafe + olasStakedBySafe;
+
+    return olasInSafeAndStaked >= serviceFundRequirements.olas;
+  }, [
+    safeBalance?.OLAS,
+    totalOlasStakedBalance,
+    serviceFundRequirements?.olas,
+  ]);
+
+  return {
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    serviceFundRequirements,
+    isInitialFunded,
+  };
+};

frontend/package.json

@@ -7,7 +7,7 @@
     "antd": "^5.14.0",
     "ethers": "5.7.2",
     "ethers-multicall": "^0.2.3",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "next": "^14.2.3",
     "react": "^18.3.1",
     "react-canvas-confetti": "1.2.1",
@@ -20,7 +20,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "20.14.10",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18",
@@ -51,4 +51,4 @@
     "start": "next start"
   },
   "version": "0.1.0"
-}
+}

frontend/yarn.lock

@@ -1410,10 +1410,17 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash@^4.14.202":
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.4.tgz#0303b64958ee070059e3a7184048a55159fe20b7"
-  integrity sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==
+"@types/lodash-es@^4.17.12":
+  version "4.17.12"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
+  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
 
 "@types/node@*":
   version "20.12.12"
@@ -4387,6 +4394,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"

package.json

@@ -15,7 +15,7 @@
     "electron-updater": "^6.1.8",
     "ethers": "5.7.2",
     "ethers-multicall": "^0.2.3",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "next": "^14.2.3",
     "ps-tree": "^1.2.0",
     "react": "^18.3.1",

yarn.lock

@@ -3618,6 +3618,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -3638,7 +3643,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==