diff --git a/frontend/components/Main/MainGasBalance.tsx b/frontend/components/Main/MainGasBalance.tsx index f9eb5de6a..0d1f83f26 100644 --- a/frontend/components/Main/MainGasBalance.tsx +++ b/frontend/components/Main/MainGasBalance.tsx @@ -7,6 +7,7 @@ import { COLOR } from '@/constants/colors'; import { LOW_BALANCE } from '@/constants/thresholds'; import { useBalance } from '@/hooks/useBalance'; import { useElectronApi } from '@/hooks/useElectronApi'; +import { useStore } from '@/hooks/useStore'; import { useWallet } from '@/hooks/useWallet'; import { CardSection } from '../styled/CardSection'; @@ -34,6 +35,7 @@ const FineDot = styled(Dot)` const BalanceStatus = () => { const { isBalanceLoaded, safeBalance } = useBalance(); + const { storeState } = useStore(); const { showNotification } = useElectronApi(); const [isLowBalanceNotificationShown, setIsLowBalanceNotificationShown] = @@ -44,6 +46,7 @@ const BalanceStatus = () => { if (!isBalanceLoaded) return; if (!safeBalance) return; if (!showNotification) return; + if (!storeState?.isInitialFunded) return; if (safeBalance.ETH < LOW_BALANCE && !isLowBalanceNotificationShown) { showNotification('Trading balance is too low.'); @@ -60,6 +63,7 @@ const BalanceStatus = () => { isLowBalanceNotificationShown, safeBalance, showNotification, + storeState?.isInitialFunded, ]); const status = useMemo(() => { diff --git a/frontend/components/Main/MainNeedsFunds.tsx b/frontend/components/Main/MainNeedsFunds.tsx index f275136bf..71464a615 100644 --- a/frontend/components/Main/MainNeedsFunds.tsx +++ b/frontend/components/Main/MainNeedsFunds.tsx @@ -1,6 +1,7 @@ import { Flex, Typography } from 'antd'; import { formatUnits } from 'ethers/lib/utils'; import { ReactNode, useEffect, useMemo } from 'react'; +import styled from 'styled-components'; import { UNICODE_SYMBOLS } from '@/constants/symbols'; import { useBalance } from '@/hooks/useBalance'; @@ -12,9 +13,16 @@ import { getMinimumStakedAmountRequired } from '@/utils/service'; import { Alert } from '../Alert'; import { CardSection } from '../styled/CardSection'; -const { Text, Paragraph } = Typography; +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; +`; + const useNeedsFunds = () => { const { getServiceTemplates } = useServiceTemplates(); @@ -94,29 +102,28 @@ export const MainNeedsFunds = () => { const message: ReactNode = useMemo( () => ( - - Your agent needs funds - - USE THE ACCOUNT CREDENTIALS PROVIDED IN THE “ADD FUNDS” INSTRUCTIONS - BELOW. - - - To run your agent, you must add these amounts to your account: - - {!hasEnoughOlasForInitialFunding && ( - - {`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `} - - for staking. - - )} - {!hasEnoughEthForInitialFunding && ( - - - {`${serviceFundRequirements.eth} XDAI `} - - - for trading balance. - - )} + + Your agent needs funds + + {!hasEnoughOlasForInitialFunding && ( +
+ {`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `} + for staking +
+ )} + {!hasEnoughEthForInitialFunding && ( +
+ + {`$${serviceFundRequirements.eth} XDAI `} + + for trading +
+ )} +
+
), [ diff --git a/frontend/components/Main/MainOlasBalance.tsx b/frontend/components/Main/MainOlasBalance.tsx index 28e0170a4..fa6d87b9b 100644 --- a/frontend/components/Main/MainOlasBalance.tsx +++ b/frontend/components/Main/MainOlasBalance.tsx @@ -123,9 +123,11 @@ const MainOlasBalanceAlert = styled.div` const LowTradingBalanceAlert = () => { const { isBalanceLoaded, safeBalance } = useBalance(); + const { storeState } = useStore(); if (!isBalanceLoaded) return null; if (!safeBalance) return null; + if (!storeState?.isInitialFunded) return; if (safeBalance.ETH >= LOW_BALANCE) return null; return ( diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss index 13afcf16c..6999610fb 100644 --- a/frontend/styles/globals.scss +++ b/frontend/styles/globals.scss @@ -66,7 +66,7 @@ button, input, select, textarea, .ant-input-suffix { &--primary { border-color: #ECD7FE; background-color: #F8F0FF; - color: #36075F; + color: #7E22CE; .ant-alert-icon { color: #7E22CE; @@ -136,6 +136,10 @@ button, input, select, textarea, .ant-input-suffix { margin-top: 12px !important; } +.p-0 { + padding: 0 !important; +} + .mx-auto { margin-left: auto !important; margin-right: auto !important;