From ead9d0878112cf4dac41db65845a151ad37b46f8 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 11 Dec 2024 17:03:14 +0530
Subject: [PATCH 1/4] refactor: clean up imports and remove unused QR code
 functionality in AddFundsSection

---
 .../MainPage/sections/AddFundsSection.tsx     | 27 ++-----------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx
index 9a689cd8..d5db6f6b 100644
--- a/frontend/components/MainPage/sections/AddFundsSection.tsx
+++ b/frontend/components/MainPage/sections/AddFundsSection.tsx
@@ -1,16 +1,5 @@
-import {
-  CopyOutlined,
-  // QrcodeOutlined,
-} from '@ant-design/icons';
-import {
-  Button,
-  Flex,
-  message,
-  Popover,
-  // QRCode,
-  Tooltip,
-  Typography,
-} from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { Button, Flex, message, Popover, Tooltip, Typography } from 'antd';
 import Link from 'next/link';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -174,17 +163,5 @@ const AddFundsAddressSection = ({
     </Tooltip>
 
     <Button onClick={handleCopy} icon={<CopyOutlined />} size="large" />
-
-    {/* <Popover
-      title="Scan QR code"
-      content={
-        <QRCode
-          size={250}
-          value={`https://metamask.app.link/send/${fundingAddress}@${100}`}
-        />
-      }
-    >
-      <Button icon={<QrcodeOutlined />} size="large" />
-    </Popover> */}
   </CardSection>
 );

From 7cb42a7de7b3df2bd9bc14b0993460812656c83d Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 11 Dec 2024 17:46:11 +0530
Subject: [PATCH 2/4] feat: add MainNeedsFunds component to display funding
 requirements and integrate with low funds alert

---
 frontend/components/MainPage/index.tsx        |   2 -
 .../MainPage/sections/AddFundsSection.tsx     | 112 +++++++++---------
 .../AlertSections/LowFunds/LowFunds.tsx       |   2 +
 .../AlertSections/LowFunds/MainNeedsFunds.tsx | 111 +++++++++++++++++
 .../AlertSections/LowFunds/useLowFunds.ts     |  31 +++++
 .../MainPage/sections/NeedsFundsSection.tsx   |  99 ----------------
 frontend/constants/symbols.ts                 |   1 +
 7 files changed, 201 insertions(+), 157 deletions(-)
 create mode 100644 frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx
 create mode 100644 frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
 delete mode 100644 frontend/components/MainPage/sections/NeedsFundsSection.tsx

diff --git a/frontend/components/MainPage/index.tsx b/frontend/components/MainPage/index.tsx
index dd30035c..dcd2c5b0 100644
--- a/frontend/components/MainPage/index.tsx
+++ b/frontend/components/MainPage/index.tsx
@@ -16,7 +16,6 @@ import { AddFundsSection } from './sections/AddFundsSection';
 import { AlertSections } from './sections/AlertSections';
 import { GasBalanceSection } from './sections/GasBalanceSection';
 import { KeepAgentRunningSection } from './sections/KeepAgentRunningSection';
-import { MainNeedsFunds } from './sections/NeedsFundsSection';
 import { MainOlasBalance } from './sections/OlasBalanceSection';
 import { RewardsSection } from './sections/RewardsSection';
 import { StakingContractSection } from './sections/StakingContractUpdate';
@@ -78,7 +77,6 @@ export const Main = () => {
         <KeepAgentRunningSection />
         {isStakingContractSectionEnabled && <StakingContractSection />}
         <GasBalanceSection />
-        <MainNeedsFunds />
         <AddFundsSection />
       </Flex>
     </Card>
diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx
index d5db6f6b..0d915a40 100644
--- a/frontend/components/MainPage/sections/AddFundsSection.tsx
+++ b/frontend/components/MainPage/sections/AddFundsSection.tsx
@@ -24,20 +24,6 @@ const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
   }
 `;
 
-const AddFundsGetTokensSection = () => {
-  const { selectedAgentConfig } = useServices();
-  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
-
-  return (
-    <CardSection justify="center" bordertop="true" padding="16px 24px">
-      <Link target="_blank" href={SWAP_URL_BY_EVM_CHAIN[homeChainId]}>
-        Get OLAS + {CHAIN_CONFIG[homeChainId].nativeToken.symbol} on{' '}
-        {CHAIN_CONFIG[homeChainId].name} {UNICODE_SYMBOLS.EXTERNAL_LINK}
-      </Link>
-    </CardSection>
-  );
-};
-
 export const AddFundsSection = () => {
   const fundSectionRef = useRef<HTMLDivElement>(null);
   const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
@@ -77,47 +63,6 @@ export const AddFundsSection = () => {
   );
 };
 
-/**
- * Add funds section
- */
-export const OpenAddFundsSection = forwardRef<HTMLDivElement>((_, ref) => {
-  const { selectedAgentConfig } = useServices();
-  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
-  const { masterSafes } = useMasterWalletContext();
-  const masterSafeAddress = useMemo(
-    () =>
-      masterSafes?.find((wallet) => wallet.evmChainId === homeChainId)?.address,
-    [homeChainId, masterSafes],
-  );
-
-  const truncatedFundingAddress: string | undefined = useMemo(
-    () => masterSafeAddress && truncateAddress(masterSafeAddress, 4),
-    [masterSafeAddress],
-  );
-
-  const handleCopyAddress = useCallback(
-    () =>
-      masterSafeAddress &&
-      copyToClipboard(masterSafeAddress).then(() =>
-        message.success('Copied successfully!'),
-      ),
-    [masterSafeAddress],
-  );
-
-  return (
-    <Flex vertical ref={ref}>
-      <AddFundsWarningAlertSection />
-      <AddFundsAddressSection
-        truncatedFundingAddress={truncatedFundingAddress}
-        fundingAddress={masterSafeAddress}
-        handleCopy={handleCopyAddress}
-      />
-      <AddFundsGetTokensSection />
-    </Flex>
-  );
-});
-OpenAddFundsSection.displayName = 'OpenAddFundsSection';
-
 const AddFundsWarningAlertSection = () => {
   const { selectedAgentConfig } = useServices();
   const { evmHomeChainId: homeChainId } = selectedAgentConfig;
@@ -155,7 +100,7 @@ const AddFundsAddressSection = ({
     <Tooltip
       title={
         <span className="can-select-text flex">
-          {fundingAddress ?? 'Error loading address'}
+          {fundingAddress ?? 'Unable to load address'}
         </span>
       }
     >
@@ -165,3 +110,58 @@ const AddFundsAddressSection = ({
     <Button onClick={handleCopy} icon={<CopyOutlined />} size="large" />
   </CardSection>
 );
+
+const AddFundsGetTokensSection = () => {
+  const { selectedAgentConfig } = useServices();
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
+
+  return (
+    <CardSection justify="center" bordertop="true" padding="16px 24px">
+      <Link target="_blank" href={SWAP_URL_BY_EVM_CHAIN[homeChainId]}>
+        Get OLAS + {CHAIN_CONFIG[homeChainId].nativeToken.symbol} on{' '}
+        {CHAIN_CONFIG[homeChainId].name} {UNICODE_SYMBOLS.EXTERNAL_LINK}
+      </Link>
+    </CardSection>
+  );
+};
+
+/**
+ * Add funds section
+ */
+export const OpenAddFundsSection = forwardRef<HTMLDivElement>((_, ref) => {
+  const { selectedAgentConfig } = useServices();
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
+  const { masterSafes } = useMasterWalletContext();
+  const masterSafeAddress = useMemo(
+    () =>
+      masterSafes?.find((wallet) => wallet.evmChainId === homeChainId)?.address,
+    [homeChainId, masterSafes],
+  );
+
+  const truncatedFundingAddress: string | undefined = useMemo(
+    () => masterSafeAddress && truncateAddress(masterSafeAddress, 4),
+    [masterSafeAddress],
+  );
+
+  const handleCopyAddress = useCallback(
+    () =>
+      masterSafeAddress &&
+      copyToClipboard(masterSafeAddress).then(() =>
+        message.success('Copied successfully!'),
+      ),
+    [masterSafeAddress],
+  );
+
+  return (
+    <Flex vertical ref={ref}>
+      <AddFundsWarningAlertSection />
+      <AddFundsAddressSection
+        truncatedFundingAddress={truncatedFundingAddress}
+        fundingAddress={masterSafeAddress}
+        handleCopy={handleCopyAddress}
+      />
+      <AddFundsGetTokensSection />
+    </Flex>
+  );
+});
+OpenAddFundsSection.displayName = 'OpenAddFundsSection';
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowFunds.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowFunds.tsx
index 10146d0d..26543eec 100644
--- a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowFunds.tsx
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowFunds.tsx
@@ -1,8 +1,10 @@
 import { LowOperatingBalanceAlert } from './LowOperatingBalanceAlert';
 import { LowSafeSignerBalanceAlert } from './LowSafeSignerBalanceAlert';
+import { MainNeedsFunds } from './MainNeedsFunds';
 
 export const LowFunds = () => (
   <>
+    <MainNeedsFunds />
     <LowOperatingBalanceAlert />
     <LowSafeSignerBalanceAlert />
   </>
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx
new file mode 100644
index 00000000..ce30a691
--- /dev/null
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx
@@ -0,0 +1,111 @@
+import { Flex, Typography } from 'antd';
+import { useEffect, useMemo } from 'react';
+
+import { CustomAlert } from '@/components/Alert';
+import { getNativeTokenSymbol } from '@/config/tokens';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { TokenSymbol } from '@/enums/Token';
+import { useElectronApi } from '@/hooks/useElectronApi';
+import { useNeedsFunds } from '@/hooks/useNeedsFunds';
+import { useServices } from '@/hooks/useServices';
+import { useStakingProgram } from '@/hooks/useStakingProgram';
+
+import { InlineBanner } from './InlineBanner';
+import { useLowFundsDetails } from './useLowFunds';
+
+const { Text, Title } = Typography;
+
+export const MainNeedsFunds = () => {
+  const { selectedStakingProgramId } = useStakingProgram();
+
+  const {
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    serviceFundRequirements,
+    isInitialFunded,
+    needsInitialFunding,
+  } = useNeedsFunds(selectedStakingProgramId);
+
+  const { selectedAgentConfig } = useServices();
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
+  const nativeTokenSymbol = getNativeTokenSymbol(homeChainId);
+  const { chainName, masterSafeAddress } = useLowFundsDetails();
+
+  const electronApi = useElectronApi();
+
+  useEffect(() => {
+    if (
+      hasEnoughEthForInitialFunding &&
+      hasEnoughOlasForInitialFunding &&
+      !isInitialFunded
+    ) {
+      electronApi.store?.set?.('isInitialFunded', true);
+    }
+  }, [
+    electronApi.store,
+    hasEnoughEthForInitialFunding,
+    hasEnoughOlasForInitialFunding,
+    isInitialFunded,
+  ]);
+
+  const olasRequired = useMemo(() => {
+    if (hasEnoughOlasForInitialFunding) return null;
+    const olas = serviceFundRequirements[homeChainId][TokenSymbol.OLAS];
+    return `${UNICODE_SYMBOLS.OLAS}${olas} OLAS `;
+  }, [homeChainId, hasEnoughOlasForInitialFunding, serviceFundRequirements]);
+
+  const nativeTokenRequired = useMemo(() => {
+    if (hasEnoughEthForInitialFunding) return null;
+    const native = serviceFundRequirements[homeChainId][nativeTokenSymbol];
+    return `${native} ${nativeTokenSymbol}`;
+  }, [
+    homeChainId,
+    hasEnoughEthForInitialFunding,
+    serviceFundRequirements,
+    nativeTokenSymbol,
+  ]);
+
+  if (!needsInitialFunding) return null;
+
+  return (
+    <CustomAlert
+      fullWidth
+      showIcon
+      message={
+        <Flex vertical gap={8} align="flex-start">
+          <Title level={5} style={{ margin: 0 }}>
+            Fund your agent
+          </Title>
+
+          <Text>
+            To activate your agent, add these amounts on {chainName} chain to
+            your safe:
+          </Text>
+
+          <Flex gap={0} vertical>
+            {!hasEnoughOlasForInitialFunding && (
+              <div>
+                {UNICODE_SYMBOLS.BULLET} <Text strong>{olasRequired}</Text> -
+                for staking.
+              </div>
+            )}
+            {!hasEnoughEthForInitialFunding && (
+              <div>
+                {UNICODE_SYMBOLS.BULLET}{' '}
+                <Text strong>{nativeTokenRequired}</Text> - for trading.
+              </div>
+            )}
+          </Flex>
+
+          {masterSafeAddress && (
+            <InlineBanner
+              text="Your safe address"
+              address={masterSafeAddress}
+            />
+          )}
+        </Flex>
+      }
+      type="primary"
+    />
+  );
+};
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
new file mode 100644
index 00000000..680d9fe3
--- /dev/null
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+
+import { useChainDetails } from '@/hooks/useChainDetails';
+import { useServices } from '@/hooks/useServices';
+import { useMasterWalletContext } from '@/hooks/useWallet';
+
+export const useLowFundsDetails = () => {
+  const { selectedAgentConfig } = useServices();
+  const homeChainId = selectedAgentConfig.evmHomeChainId;
+
+  const { masterSafes } = useMasterWalletContext();
+
+  // master safe details
+  const selectedMasterSafe = useMemo(() => {
+    if (!masterSafes) return;
+    if (!homeChainId) return;
+
+    return masterSafes.find(
+      (masterSafe) => masterSafe.evmChainId === homeChainId,
+    );
+  }, [masterSafes, homeChainId]);
+
+  // current chain details
+  const { name: chainName, symbol: tokenSymbol } = useChainDetails(homeChainId);
+
+  return {
+    chainName,
+    tokenSymbol,
+    masterSafeAddress: selectedMasterSafe?.address,
+  };
+};
diff --git a/frontend/components/MainPage/sections/NeedsFundsSection.tsx b/frontend/components/MainPage/sections/NeedsFundsSection.tsx
deleted file mode 100644
index 0f447a6c..00000000
--- a/frontend/components/MainPage/sections/NeedsFundsSection.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Flex, Typography } from 'antd';
-import { ReactNode, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
-
-import { CustomAlert } from '@/components/Alert';
-import { getNativeTokenSymbol } from '@/config/tokens';
-import { UNICODE_SYMBOLS } from '@/constants/symbols';
-import { TokenSymbol } from '@/enums/Token';
-import { useElectronApi } from '@/hooks/useElectronApi';
-import { useNeedsFunds } from '@/hooks/useNeedsFunds';
-import { useServices } from '@/hooks/useServices';
-import { useStakingProgram } from '@/hooks/useStakingProgram';
-
-import { CardSection } from '../../styled/CardSection';
-
-const { Text } = Typography;
-const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' };
-
-const FundingValue = styled.div`
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 32px;
-  letter-spacing: -0.72px;
-`;
-
-export const MainNeedsFunds = () => {
-  const { selectedStakingProgramId } = useStakingProgram();
-
-  const {
-    hasEnoughEthForInitialFunding,
-    hasEnoughOlasForInitialFunding,
-    serviceFundRequirements,
-    isInitialFunded,
-    needsInitialFunding,
-  } = useNeedsFunds(selectedStakingProgramId);
-
-  const { selectedAgentConfig } = useServices();
-  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
-  const nativeTokenSymbol = getNativeTokenSymbol(homeChainId);
-
-  const electronApi = useElectronApi();
-
-  const message: ReactNode = useMemo(
-    () => (
-      <Flex vertical gap={16}>
-        <Text className="font-weight-600">Your agent needs funds</Text>
-        <Flex gap={24}>
-          {!hasEnoughOlasForInitialFunding && (
-            <div>
-              <FundingValue>{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements[homeChainId][TokenSymbol.OLAS]} OLAS `}</FundingValue>
-              <span className="text-sm">for staking</span>
-            </div>
-          )}
-          {!hasEnoughEthForInitialFunding && (
-            <div>
-              <FundingValue>
-                {`$${serviceFundRequirements[homeChainId][nativeTokenSymbol]} ${nativeTokenSymbol} `}
-              </FundingValue>
-              <span className="text-sm">for trading</span>
-            </div>
-          )}
-        </Flex>
-        <ul className="p-0 m-0 text-sm">
-          <li>Use the address in the “Add Funds” section below.</li>
-        </ul>
-      </Flex>
-    ),
-    [
-      hasEnoughEthForInitialFunding,
-      hasEnoughOlasForInitialFunding,
-      homeChainId,
-      nativeTokenSymbol,
-      serviceFundRequirements,
-    ],
-  );
-
-  useEffect(() => {
-    if (
-      hasEnoughEthForInitialFunding &&
-      hasEnoughOlasForInitialFunding &&
-      !isInitialFunded
-    ) {
-      electronApi.store?.set?.('isInitialFunded', true);
-    }
-  }, [
-    electronApi.store,
-    hasEnoughEthForInitialFunding,
-    hasEnoughOlasForInitialFunding,
-    isInitialFunded,
-  ]);
-
-  if (!needsInitialFunding) return null;
-
-  return (
-    <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>
-      <CustomAlert showIcon message={message} type="primary" fullWidth />
-    </CardSection>
-  );
-};
diff --git a/frontend/constants/symbols.ts b/frontend/constants/symbols.ts
index 5deb8016..0b3c0295 100644
--- a/frontend/constants/symbols.ts
+++ b/frontend/constants/symbols.ts
@@ -3,4 +3,5 @@ export const NA = 'n/a';
 export const UNICODE_SYMBOLS = {
   OLAS: '☴',
   EXTERNAL_LINK: '↗',
+  BULLET: '•',
 };

From b35f02b93462468ea0fe8b1138c2abd6daa7ef29 Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 11 Dec 2024 17:55:11 +0530
Subject: [PATCH 3/4] feat: refactor LowSafeSignerBalanceAlert to use
 useLowFundsDetails hook for improved readability and maintainability

---
 .../LowFunds/LowSafeSignerBalanceAlert.tsx      | 17 ++++++-----------
 .../AlertSections/LowFunds/useLowFunds.ts       |  8 +++++++-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowSafeSignerBalanceAlert.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowSafeSignerBalanceAlert.tsx
index 81e56f78..fad924f1 100644
--- a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowSafeSignerBalanceAlert.tsx
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowSafeSignerBalanceAlert.tsx
@@ -4,19 +4,15 @@ import { useMemo } from 'react';
 import { CustomAlert } from '@/components/Alert';
 import { LOW_AGENT_SAFE_BALANCE } from '@/constants/thresholds';
 import { useMasterBalances } from '@/hooks/useBalanceContext';
-import { useChainDetails } from '@/hooks/useChainDetails';
-import { useServices } from '@/hooks/useServices';
 import { useStore } from '@/hooks/useStore';
-import { useMasterWalletContext } from '@/hooks/useWallet';
 
 import { InlineBanner } from './InlineBanner';
+import { useLowFundsDetails } from './useLowFunds';
 
 const { Text, Title } = Typography;
 
 export const LowSafeSignerBalanceAlert = () => {
   const { storeState } = useStore();
-  const { selectedAgentConfig } = useServices();
-  const { masterEoa } = useMasterWalletContext();
   const { isLoaded: isBalanceLoaded, masterEoaNativeGasBalance } =
     useMasterBalances();
 
@@ -25,8 +21,7 @@ export const LowSafeSignerBalanceAlert = () => {
     return masterEoaNativeGasBalance < LOW_AGENT_SAFE_BALANCE;
   }, [masterEoaNativeGasBalance]);
 
-  const homeChainId = selectedAgentConfig.evmHomeChainId;
-  const { name, symbol } = useChainDetails(homeChainId);
+  const { chainName, tokenSymbol, masterEoaAddress } = useLowFundsDetails();
 
   if (!isBalanceLoaded) return null;
   if (!storeState?.isInitialFunded) return;
@@ -44,18 +39,18 @@ export const LowSafeSignerBalanceAlert = () => {
           </Title>
           <Text>
             To keep your agent operational, add
-            <Text strong>{` ${LOW_AGENT_SAFE_BALANCE} ${symbol} `}</Text>
-            on {name} chain to the safe signer.
+            <Text strong>{` ${LOW_AGENT_SAFE_BALANCE} ${tokenSymbol} `}</Text>
+            on {chainName} chain to the safe signer.
           </Text>
           <Text>
             Your agent is at risk of missing its targets, which would result in
             several days&apos; suspension.
           </Text>
 
-          {masterEoa?.address && (
+          {masterEoaAddress && (
             <InlineBanner
               text="Safe signer address"
-              address={masterEoa.address}
+              address={masterEoaAddress}
             />
           )}
         </Flex>
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
index 680d9fe3..81a0cfdc 100644
--- a/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
@@ -4,11 +4,16 @@ import { useChainDetails } from '@/hooks/useChainDetails';
 import { useServices } from '@/hooks/useServices';
 import { useMasterWalletContext } from '@/hooks/useWallet';
 
+/**
+ * helper hook specific to get low funds details such as
+ * - chain information
+ * - master/eoa safe addresses
+ */
 export const useLowFundsDetails = () => {
   const { selectedAgentConfig } = useServices();
   const homeChainId = selectedAgentConfig.evmHomeChainId;
 
-  const { masterSafes } = useMasterWalletContext();
+  const { masterEoa, masterSafes } = useMasterWalletContext();
 
   // master safe details
   const selectedMasterSafe = useMemo(() => {
@@ -27,5 +32,6 @@ export const useLowFundsDetails = () => {
     chainName,
     tokenSymbol,
     masterSafeAddress: selectedMasterSafe?.address,
+    masterEoaAddress: masterEoa?.address,
   };
 };

From 8e12aad86a4dabfa6aea4cd88f23a585ac38864f Mon Sep 17 00:00:00 2001
From: mohandast52 <mohandast52@gmail.com>
Date: Wed, 11 Dec 2024 18:43:50 +0530
Subject: [PATCH 4/4] feat: refactor LowOperatingBalanceAlert to use
 useLowFundsDetails hook and remove useChainDetails

---
 .../LowFunds/LowOperatingBalanceAlert.tsx     | 26 +++++--------------
 .../AlertSections/LowFunds/useLowFunds.ts     |  6 ++---
 frontend/hooks/useChainDetails.ts             | 16 ------------
 3 files changed, 9 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/hooks/useChainDetails.ts

diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowOperatingBalanceAlert.tsx b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowOperatingBalanceAlert.tsx
index d4e528cb..cb020adb 100644
--- a/frontend/components/MainPage/sections/AlertSections/LowFunds/LowOperatingBalanceAlert.tsx
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/LowOperatingBalanceAlert.tsx
@@ -4,33 +4,19 @@ import { useMemo } from 'react';
 import { CustomAlert } from '@/components/Alert';
 import { LOW_MASTER_SAFE_BALANCE } from '@/constants/thresholds';
 import { useMasterBalances } from '@/hooks/useBalanceContext';
-import { useChainDetails } from '@/hooks/useChainDetails';
-import { useServices } from '@/hooks/useServices';
 import { useStore } from '@/hooks/useStore';
-import { useMasterWalletContext } from '@/hooks/useWallet';
 
 import { InlineBanner } from './InlineBanner';
+import { useLowFundsDetails } from './useLowFunds';
 
 const { Text, Title } = Typography;
 
 export const LowOperatingBalanceAlert = () => {
   const { storeState } = useStore();
-  const { selectedAgentConfig } = useServices();
-  const { masterSafes } = useMasterWalletContext();
   const { isLoaded: isBalanceLoaded, masterSafeNativeGasBalance } =
     useMasterBalances();
 
-  const homeChainId = selectedAgentConfig.evmHomeChainId;
-  const { name, symbol } = useChainDetails(homeChainId);
-
-  const selectedMasterSafe = useMemo(() => {
-    if (!masterSafes) return;
-    if (!homeChainId) return;
-
-    return masterSafes.find(
-      (masterSafe) => masterSafe.evmChainId === homeChainId,
-    );
-  }, [masterSafes, homeChainId]);
+  const { chainName, tokenSymbol, masterSafeAddress } = useLowFundsDetails();
 
   const isLowBalance = useMemo(() => {
     if (!masterSafeNativeGasBalance) return false;
@@ -53,18 +39,18 @@ export const LowOperatingBalanceAlert = () => {
           </Title>
           <Text>
             To run your agent, add at least
-            <Text strong>{` ${LOW_MASTER_SAFE_BALANCE} ${symbol} `}</Text>
-            on {name} chain to your safe.
+            <Text strong>{` ${LOW_MASTER_SAFE_BALANCE} ${tokenSymbol} `}</Text>
+            on {chainName} chain to your safe.
           </Text>
           <Text>
             Your agent is at risk of missing its targets, which would result in
             several days&apos; suspension.
           </Text>
 
-          {selectedMasterSafe?.address && (
+          {masterSafeAddress && (
             <InlineBanner
               text="Your safe address"
-              address={selectedMasterSafe.address}
+              address={masterSafeAddress}
             />
           )}
         </Flex>
diff --git a/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
index 81a0cfdc..b97c8f5d 100644
--- a/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
+++ b/frontend/components/MainPage/sections/AlertSections/LowFunds/useLowFunds.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useChainDetails } from '@/hooks/useChainDetails';
+import { CHAIN_CONFIG } from '@/config/chains';
 import { useServices } from '@/hooks/useServices';
 import { useMasterWalletContext } from '@/hooks/useWallet';
 
@@ -26,11 +26,11 @@ export const useLowFundsDetails = () => {
   }, [masterSafes, homeChainId]);
 
   // current chain details
-  const { name: chainName, symbol: tokenSymbol } = useChainDetails(homeChainId);
+  const { name: chainName, nativeToken } = CHAIN_CONFIG[homeChainId];
 
   return {
     chainName,
-    tokenSymbol,
+    tokenSymbol: nativeToken.symbol,
     masterSafeAddress: selectedMasterSafe?.address,
     masterEoaAddress: masterEoa?.address,
   };
diff --git a/frontend/hooks/useChainDetails.ts b/frontend/hooks/useChainDetails.ts
deleted file mode 100644
index 40b8feb5..00000000
--- a/frontend/hooks/useChainDetails.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { CHAIN_CONFIG } from '@/config/chains';
-import { EvmChainId } from '@/enums/Chain';
-
-export const useChainDetails = (chainId: EvmChainId) => {
-  if (!chainId) throw new Error('Chain ID is required');
-
-  const details = CHAIN_CONFIG[chainId];
-  if (!details) {
-    throw new Error(`Chain details not found for chain ID: ${chainId}`);
-  }
-
-  return {
-    name: details.name,
-    symbol: details.nativeToken.symbol,
-  };
-};