Merge pull request #620 from valory-xyz/tanya/needs-funds-update

feat: support additional tokens required for initial funding

electron/store.js

@@ -13,6 +13,7 @@ const schema = {
   lastSelectedAgentType: { type: 'string', default: 'trader' },
   isInitialFunded_trader: { type: 'boolean', default: false },
   isInitialFunded_memeooorr: { type: 'boolean', default: false },
+  isInitialFunded_modius: { type: 'boolean', default: false },
 };
 
 /**

frontend/components/MainPage/sections/AlertSections/LowFunds/EmptyFunds.tsx

@@ -43,7 +43,7 @@ export const EmptyFunds = () => {
             <InlineBanner text="Your safe address" address={masterEoaAddress} />
           )}
           <PurpleDivider />
-          <FundsToActivate stakingFundsRequired otherFundsRequired />
+          <FundsToActivate stakingFundsRequired nativeFundsRequired />
         </Flex>
       }
       type="primary"

frontend/components/MainPage/sections/AlertSections/LowFunds/FundsToActivate.tsx

@@ -16,17 +16,20 @@ const { Text } = Typography;
 
 type FundsToActivateProps = {
   stakingFundsRequired: boolean;
-  otherFundsRequired: boolean;
+  nativeFundsRequired: boolean;
+  additionalFundsRequired?: boolean;
 };
 
 const FUNDS_REQUIRED_FOR_BY_AGENT_TYPE = {
   [AgentType.PredictTrader]: 'for trading',
   [AgentType.Memeooorr]: 'for agent operations',
+  [AgentType.Modius]: 'minimum for investment',
 };
 
 export const FundsToActivate = ({
   stakingFundsRequired = true,
-  otherFundsRequired = true,
+  nativeFundsRequired = true,
+  additionalFundsRequired = true,
 }: FundsToActivateProps) => {
   const { selectedStakingProgramId } = useStakingProgram();
 
@@ -49,6 +52,22 @@ export const FundsToActivate = ({
     return `${native} ${nativeTokenSymbol}`;
   }, [homeChainId, serviceFundRequirements, nativeTokenSymbol]);
 
+  // Calculate additional tokens requirements (Eg. USDC)
+  const additionalTokensRequired = useMemo(() => {
+    const additionalTokens = Object.keys(
+      serviceFundRequirements[homeChainId],
+    ).filter(
+      (token) => token !== TokenSymbol.OLAS && token !== nativeTokenSymbol,
+    );
+
+    if (additionalTokens.length === 0) return [];
+
+    return additionalTokens.map((tokenSymbol) => {
+      const token = serviceFundRequirements[homeChainId][tokenSymbol];
+      return `${token} ${tokenSymbol}`;
+    });
+  }, [homeChainId, serviceFundRequirements, nativeTokenSymbol]);
+
   return (
     <>
       <Text>
@@ -63,12 +82,20 @@ export const FundsToActivate = ({
             staking.
           </div>
         )}
-        {otherFundsRequired && (
+        {nativeFundsRequired && (
           <div>
             {UNICODE_SYMBOLS.BULLET} <Text strong>{nativeTokenRequired}</Text> -
             {` ${FUNDS_REQUIRED_FOR_BY_AGENT_TYPE[selectedAgentType]}.`}
           </div>
         )}
+
+        {additionalFundsRequired &&
+          additionalTokensRequired.map((additionalToken) => (
+            <div key={additionalToken}>
+              {UNICODE_SYMBOLS.BULLET} <Text strong>{additionalToken}</Text> -
+              {` ${FUNDS_REQUIRED_FOR_BY_AGENT_TYPE[selectedAgentType]}.`}
+            </div>
+          ))}
       </Flex>
 
       {masterSafeAddress && (

frontend/components/MainPage/sections/AlertSections/LowFunds/LowFunds.tsx

@@ -1,6 +1,8 @@
 import { round } from 'lodash';
 import { useMemo } from 'react';
 
+import { getNativeTokenSymbol } from '@/config/tokens';
+import { TokenSymbol } from '@/enums/Token';
 import { WalletType } from '@/enums/Wallet';
 import { useMasterBalances } from '@/hooks/useBalanceContext';
 import { useNeedsFunds } from '@/hooks/useNeedsFunds';
@@ -22,8 +24,9 @@ export const LowFunds = () => {
     masterSafeNativeGasBalance,
   } = useMasterBalances();
 
-  const { nativeBalancesByChain, olasBalancesByChain, isInitialFunded } =
-    useNeedsFunds(selectedStakingProgramId);
+  const { balancesByChain, isInitialFunded } = useNeedsFunds(
+    selectedStakingProgramId,
+  );
   const { tokenSymbol, masterThresholds } = useLowFundsDetails();
 
   const chainId = selectedAgentConfig.evmHomeChainId;
@@ -50,15 +53,14 @@ export const LowFunds = () => {
   // Show the empty funds alert if the agent is not funded
   const isEmptyFundsVisible = useMemo(() => {
     if (!isBalanceLoaded) return false;
-    if (!olasBalancesByChain) return false;
-    if (!nativeBalancesByChain) return false;
+    if (!balancesByChain) return false;
 
     // If the agent is not funded, <MainNeedsFunds /> will be displayed
     if (!isInitialFunded) return false;
 
     if (
-      round(nativeBalancesByChain[chainId], 2) === 0 &&
-      round(olasBalancesByChain[chainId], 2) === 0 &&
+      round(balancesByChain[chainId][getNativeTokenSymbol(chainId)], 2) === 0 &&
+      round(balancesByChain[chainId][TokenSymbol.OLAS], 2) === 0 &&
       isSafeSignerBalanceLow
     ) {
       return true;
@@ -69,8 +71,7 @@ export const LowFunds = () => {
     isBalanceLoaded,
     isInitialFunded,
     chainId,
-    nativeBalancesByChain,
-    olasBalancesByChain,
+    balancesByChain,
     isSafeSignerBalanceLow,
   ]);
 

frontend/components/MainPage/sections/AlertSections/LowFunds/MainNeedsFunds.tsx

@@ -18,6 +18,7 @@ export const MainNeedsFunds = () => {
   const {
     hasEnoughEthForInitialFunding,
     hasEnoughOlasForInitialFunding,
+    hasEnoughAdditionalTokensForInitialFunding,
     isInitialFunded,
     needsInitialFunding,
   } = useNeedsFunds(selectedStakingProgramId);
@@ -54,7 +55,10 @@ export const MainNeedsFunds = () => {
 
           <FundsToActivate
             stakingFundsRequired={!hasEnoughOlasForInitialFunding}
-            otherFundsRequired={!hasEnoughEthForInitialFunding}
+            nativeFundsRequired={!hasEnoughEthForInitialFunding}
+            additionalFundsRequired={
+              !hasEnoughAdditionalTokensForInitialFunding
+            }
           />
         </Flex>
       }

frontend/components/MainPage/sections/AlertSections/NewStakingProgramAlert.tsx

@@ -1,25 +1,25 @@
 import { Button, Flex, Typography } from 'antd';
 
 import { Pages } from '@/enums/Pages';
-import { StakingProgramId } from '@/enums/StakingProgram';
 import { usePageState } from '@/hooks/usePageState';
-import { useStakingProgram } from '@/hooks/useStakingProgram';
 
 import { CustomAlert } from '../../../Alert';
 
 const { Text } = Typography;
 
+// TODO: need to figure out how to understand if there are new staking contracts
+// To show this alert; also need to hide it, when a use clicks "review"
 export const NewStakingProgramAlert = () => {
   const { goto } = usePageState();
-  const { activeStakingProgramId, isActiveStakingProgramLoaded } =
-    useStakingProgram();
+  // const { activeStakingProgramId, isActiveStakingProgramLoaded } =
+  //   useStakingProgram();
 
-  // TODO: remove single staking program check
-  if (
-    !isActiveStakingProgramLoaded ||
-    activeStakingProgramId !== StakingProgramId.OptimusAlpha
-  )
-    return null;
+  // // TODO: remove single staking program check
+  // if (
+  //   !isActiveStakingProgramLoaded ||
+  //   activeStakingProgramId !== StakingProgramId.OptimusAlpha
+  // )
+  //   return null;
 
   return (
     <CustomAlert

frontend/components/MainPage/sections/AlertSections/index.tsx

@@ -4,7 +4,6 @@ import { useFeatureFlag } from '@/hooks/useFeatureFlag';
 import { AddBackupWalletAlert } from './AddBackupWalletAlert';
 import { AvoidSuspensionAlert } from './AvoidSuspensionAlert';
 import { LowFunds } from './LowFunds/LowFunds';
-import { NewStakingProgramAlert } from './NewStakingProgramAlert';
 import { NoAvailableSlotsOnTheContract } from './NoAvailableSlotsOnTheContract';
 import { UpdateAvailableAlert } from './UpdateAvailableAlert';
 
@@ -14,7 +13,7 @@ export const AlertSections = () => {
     <CardSection vertical>
       <UpdateAvailableAlert />
       {isBackupViaSafeEnabled && <AddBackupWalletAlert />}
-      <NewStakingProgramAlert />
+      {/* <NewStakingProgramAlert /> */}
       <AvoidSuspensionAlert />
       <LowFunds />
       <NoAvailableSlotsOnTheContract />

frontend/components/SetupPage/Create/SetupEoaFunding.tsx

@@ -18,7 +18,6 @@ import { useSetup } from '@/hooks/useSetup';
 import { useMasterWalletContext } from '@/hooks/useWallet';
 import { copyToClipboard } from '@/utils/copyToClipboard';
 import { delayInSeconds } from '@/utils/delay';
-import { formatEther } from '@/utils/numberFormatters';
 
 import { SetupCreateHeader } from './SetupCreateHeader';
 
@@ -192,9 +191,7 @@ export const SetupEoaFunding = () => {
   return (
     <SetupEoaFundingForChain
       isFunded={isFunded}
-      minRequiredBalance={parseFloat(
-        formatEther(`${currentFundingRequirements}`),
-      )}
+      minRequiredBalance={currentFundingRequirements}
       currency={CHAIN_CONFIG[currentChain].nativeToken.symbol}
       chainName={CHAIN_CONFIG[currentChain].name}
     />

frontend/config/agents.ts

@@ -97,23 +97,28 @@ export const AGENT_CONFIG: {
     middlewareHomeChainId: MiddlewareChain.MODE,
     requiresAgentSafesOn: [EvmChainId.Mode],
     agentSafeFundingRequirements: {
-      [EvmChainId.Mode]: 5260000000000000, // 0.00526 eth
+      [EvmChainId.Mode]: 0.0005,
+    },
+    additionalRequirements: {
+      [EvmChainId.Mode]: {
+        [TokenSymbol.USDC]: 16,
+      },
     },
     operatingThresholds: {
       [WalletOwnerType.Master]: {
         [WalletType.EOA]: {
-          [TokenSymbol.ETH]: 0.0001, // TODO: ensure this is correct
+          [TokenSymbol.ETH]: 0.0002,
         },
         [WalletType.Safe]: {
-          [TokenSymbol.ETH]: 0.0001, // TODO: ensure this is correct
+          [TokenSymbol.ETH]: 0.001,
         },
       },
       [WalletOwnerType.Agent]: {
         [WalletType.EOA]: {
-          [TokenSymbol.ETH]: 0.0001, // TODO: ensure this is correct
+          [TokenSymbol.ETH]: 0.00005,
         },
         [WalletType.Safe]: {
-          [TokenSymbol.ETH]: 0.0001, // TODO: ensure this is correct
+          [TokenSymbol.ETH]: 0.0005,
         },
       },
     },

frontend/config/tokens.ts

@@ -110,6 +110,17 @@ export const MODE_TOKEN_CONFIG: ChainTokenConfig = {
     tokenType: TokenType.Erc20,
     symbol: TokenSymbol.OLAS,
   },
+  /**
+   * @warning USDC is a special case, it has 6 decimals, not 18.
+   * https://explorer.mode.network/address/0xd988097fb8612cc24eeC14542bC03424c656005f?tab=read_contract#313ce567
+   * @note When parsing or formatting units, use `decimals` (6) instead of the standard `ether` sizing (10^18).
+   */
+  [TokenSymbol.USDC]: {
+    address: '0xd988097fb8612cc24eeC14542bC03424c656005f',
+    decimals: 6,
+    tokenType: TokenType.Erc20,
+    symbol: TokenSymbol.USDC,
+  },
 };
 
 export const TOKEN_CONFIG = {

frontend/constants/serviceTemplates.ts

@@ -280,10 +280,10 @@ export const SERVICE_TEMPLATES: ServiceTemplate[] = [
         agent_id: 40,
         threshold: 1,
         use_staking: true,
-        cost_of_bond: 20000000000000000000,
-        monthly_gas_estimate: 5260000000000000,
+        cost_of_bond: +parseEther(20),
+        monthly_gas_estimate: +parseEther(0.00516),
         fund_requirements: {
-          agent: 5000000000000000,
+          agent: +parseEther(0.001),
           safe: 0,
         },
       },

frontend/context/BalanceProvider.tsx

@@ -28,7 +28,7 @@ import { StakedAgentService } from '@/service/agents/StakedAgentService';
 import { Address } from '@/types/Address';
 import { Maybe } from '@/types/Util';
 import { asEvmChainId } from '@/utils/middlewareHelpers';
-import { formatEther } from '@/utils/numberFormatters';
+import { formatUnits } from '@/utils/numberFormatters';
 
 import { MasterWalletContext } from './MasterWalletProvider';
 import { OnlineStatusContext } from './OnlineStatusProvider';
@@ -228,6 +228,7 @@ const getCrossChainWalletBalances = async (
         tokenType,
         symbol: tokenSymbol,
         address: tokenAddress,
+        decimals,
       } of Object.values(tokensOnChain)) {
         const isNative = tokenType === TokenType.NativeGas;
         const isErc20 = tokenType === TokenType.Erc20;
@@ -258,7 +259,7 @@ const getCrossChainWalletBalances = async (
                 evmChainId: providerEvmChainId,
                 symbol: tokenSymbol,
                 isNative: true,
-                balance: Number(formatEther(balance)),
+                balance: Number(formatUnits(balance)),
               }),
           );
         }
@@ -287,7 +288,7 @@ const getCrossChainWalletBalances = async (
               evmChainId: providerEvmChainId,
               symbol: tokenSymbol,
               isNative: false,
-              balance: Number(formatEther(erc20Balances[index])),
+              balance: Number(formatUnits(erc20Balances[index], decimals)),
             }),
           ) as WalletBalanceResult[];
 

frontend/enums/Agent.ts

@@ -2,7 +2,7 @@ export const AgentType = {
   PredictTrader: 'trader',
   // Optimus: 'optimus',
   Memeooorr: 'memeooorr',
-  Modius: 'Modius',
+  Modius: 'modius',
 } as const;
 
 export type AgentType = (typeof AgentType)[keyof typeof AgentType];