diff --git a/frontend/components/Main/MainHeader/FirstRunModal.tsx b/frontend/components/Main/MainHeader/FirstRunModal.tsx index 687edd995..78de3d558 100644 --- a/frontend/components/Main/MainHeader/FirstRunModal.tsx +++ b/frontend/components/Main/MainHeader/FirstRunModal.tsx @@ -2,16 +2,22 @@ import { Button, Flex, Modal, Typography } from 'antd'; import Image from 'next/image'; import { FC } from 'react'; -import { useReward } from '@/hooks/useReward'; +import { useServiceTemplates } from '@/hooks/useServiceTemplates'; +import { getMinimumStakedAmountRequired } from '@/utils/service'; const { Title, Paragraph } = Typography; type FirstRunModalProps = { open: boolean; onClose: () => void }; export const FirstRunModal: FC = ({ open, onClose }) => { - const { minimumStakedAmountRequired } = useReward(); + const { getServiceTemplates } = useServiceTemplates(); if (!open) return null; + + const minimumStakedAmountRequired = getMinimumStakedAmountRequired( + getServiceTemplates()[0], + ); + return ( { const [isModalOpen, setIsModalOpen] = useState(false); const handleModalClose = useCallback(() => setIsModalOpen(false), []); - const { minimumStakedAmountRequired } = useReward(); - const { isInitialStakingLoad, isAgentEvicted, canStartAgent } = useStakingContractInfo(); @@ -172,6 +170,9 @@ export const MainHeader = () => { if (serviceExists) { showNotification?.('Your agent is now running!'); } else { + const minimumStakedAmountRequired = + getMinimumStakedAmountRequired(serviceTemplate); + showNotification?.( `Your agent is running and you've staked ${minimumStakedAmountRequired} OLAS!`, ); @@ -188,7 +189,6 @@ export const MainHeader = () => { } }, [ masterSafeAddress, - minimumStakedAmountRequired, serviceTemplate, services, setIsBalancePollingPaused, diff --git a/frontend/components/Main/MainNeedsFunds.tsx b/frontend/components/Main/MainNeedsFunds.tsx index 404014d87..1f318f56b 100644 --- a/frontend/components/Main/MainNeedsFunds.tsx +++ b/frontend/components/Main/MainNeedsFunds.tsx @@ -2,11 +2,12 @@ import { Flex, Typography } from 'antd'; import { formatUnits } from 'ethers/lib/utils'; import { ReactNode, useEffect, useMemo } from 'react'; -import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates'; 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 { Alert } from '../Alert'; import { CardSection } from '../styled/CardSection'; @@ -15,7 +16,9 @@ const { Text, Paragraph } = Typography; const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' }; const useNeedsFunds = () => { - const serviceTemplate = SERVICE_TEMPLATES[0]; + const { getServiceTemplates } = useServiceTemplates(); + const serviceTemplate = useMemo(() => getServiceTemplates()[0], []); + const { storeState } = useStore(); const { safeBalance, totalOlasStakedBalance } = useBalance(); @@ -25,24 +28,15 @@ const useNeedsFunds = () => { const monthlyGasEstimate = Number( formatUnits(`${serviceTemplate.configuration.monthly_gas_estimate}`, 18), ); - const olasCostOfBond = Number( - formatUnits(`${serviceTemplate.configuration.olas_cost_of_bond}`, 18), - ); - const olasRequiredToStake = Number( - formatUnits( - `${serviceTemplate.configuration.olas_required_to_stake}`, - 18, - ), - ); + + const minimumStakedAmountRequired = + getMinimumStakedAmountRequired(serviceTemplate); + return { eth: monthlyGasEstimate, - olas: olasCostOfBond + olasRequiredToStake, + olas: minimumStakedAmountRequired, }; - }, [ - serviceTemplate.configuration.monthly_gas_estimate, - serviceTemplate.configuration.olas_cost_of_bond, - serviceTemplate.configuration.olas_required_to_stake, - ]); + }, [serviceTemplate]); const hasEnoughEthForInitialFunding = useMemo( () => (safeBalance?.ETH || 0) >= (serviceFundRequirements?.eth || 0), diff --git a/frontend/context/RewardProvider.tsx b/frontend/context/RewardProvider.tsx index c645226ae..0e67a002a 100644 --- a/frontend/context/RewardProvider.tsx +++ b/frontend/context/RewardProvider.tsx @@ -48,8 +48,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => { const [availableRewardsForEpoch, setAvailableRewardsForEpoch] = useState(); const [isEligibleForRewards, setIsEligibleForRewards] = useState(); - const [minimumStakedAmountRequired, setMinimumStakedAmountRequired] = - useState(); const availableRewardsForEpochEth = useMemo(() => { if (!availableRewardsForEpoch) return; @@ -87,7 +85,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => { setAccruedServiceStakingRewards( stakingRewardsInfo?.accruedServiceStakingRewards, ); - setMinimumStakedAmountRequired(stakingRewardsInfo?.minimumStakedAmount); setAvailableRewardsForEpoch(rewards); }, [service]); @@ -114,7 +111,6 @@ export const RewardProvider = ({ children }: PropsWithChildren) => { availableRewardsForEpochEth, isEligibleForRewards, optimisticRewardsEarnedForEpoch, - minimumStakedAmountRequired, updateRewards, }} > diff --git a/frontend/hooks/useReward.ts b/frontend/hooks/useReward.ts index f72b03edc..c269a4430 100644 --- a/frontend/hooks/useReward.ts +++ b/frontend/hooks/useReward.ts @@ -7,7 +7,6 @@ export const useReward = () => { availableRewardsForEpoch, availableRewardsForEpochEth, isEligibleForRewards, - minimumStakedAmountRequired, accruedServiceStakingRewards, } = useContext(RewardContext); @@ -15,7 +14,6 @@ export const useReward = () => { availableRewardsForEpoch, availableRewardsForEpochEth, isEligibleForRewards, - minimumStakedAmountRequired, accruedServiceStakingRewards, }; }; diff --git a/frontend/utils/service.ts b/frontend/utils/service.ts new file mode 100644 index 000000000..0b77f9f8f --- /dev/null +++ b/frontend/utils/service.ts @@ -0,0 +1,13 @@ +import { ServiceTemplate } from "@/client"; +import { formatUnits } from "ethers/lib/utils"; + +export const getMinimumStakedAmountRequired = (serviceTemplate: ServiceTemplate) => { + const olasCostOfBond = Number( + formatUnits(`${serviceTemplate.configuration.olas_cost_of_bond}`, 18) + ); + const olasRequiredToStake = Number( + formatUnits(`${serviceTemplate.configuration.olas_required_to_stake}`, 18) + ); + + return olasCostOfBond + olasRequiredToStake; +}; \ No newline at end of file