Merge pull request #269 from valory-xyz/tanya/20-olas-alert

chore: update agent needs funds alert
valory-xyz · Aug 13, 2024 · d917f72 · d917f72
2 parents 7d5bfef + 50b07e1
commit d917f72
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 25 deletions.
diff --git 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
@@ -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(
     () => (
-      <Flex vertical gap={4}>
-        <Text className="font-weight-600 mb-4">Your agent needs funds</Text>
-        <Paragraph className="mb-4">
-          USE THE ACCOUNT CREDENTIALS PROVIDED IN THE “ADD FUNDS” INSTRUCTIONS
-          BELOW.
-        </Paragraph>
-        <Paragraph className="mb-4">
-          To run your agent, you must add these amounts to your account:
-        </Paragraph>
-        {!hasEnoughOlasForInitialFunding && (
-          <Text>
-            <span className="font-weight-600">{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}</span>
-            - for staking.
-          </Text>
-        )}
-        {!hasEnoughEthForInitialFunding && (
-          <Text>
-            <span className="font-weight-600">
-              {`${serviceFundRequirements.eth} XDAI `}
-            </span>
-            - for trading balance.
-          </Text>
-        )}
+      <Flex vertical gap={16}>
+        <Text className="font-weight-600">Your agent needs funds</Text>
+        <Flex gap={24}>
+          {!hasEnoughOlasForInitialFunding && (
+            <div>
+              <FundingValue>{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}</FundingValue>
+              <span className="text-sm">for staking</span>
+            </div>
+          )}
+          {!hasEnoughEthForInitialFunding && (
+            <div>
+              <FundingValue>
+                {`$${serviceFundRequirements.eth} XDAI `}
+              </FundingValue>
+              <span className="text-sm">for trading</span>
+            </div>
+          )}
+        </Flex>
+        <ul className="p-0 m-0 text-sm">
+          <li>Do not add more than these amounts.</li>
+          <li>Use the address in the “Add Funds” section below.</li>
+        </ul>
       </Flex>
     ),
     [

diff --git 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
@@ -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;