Merge branch 'staging' of github.com:valory-xyz/olas-operate-app into…

… feat/win-support
valory-xyz · Aug 29, 2024 · d06eb95 · d06eb95
2 parents 8f6cea6 + 8207a61
commit d06eb95
Show file tree

Hide file tree

Showing 26 changed files with 1,367 additions and 909 deletions.
diff --git a/.gitleaksignore b/.gitleaksignore
@@ -27,4 +27,9 @@ d8149e9b5b7bd6a7ed7bc1039900702f1d4f287b:operate/services/manage.py:generic-api-
 99c0f139b037da2587708212fcf6d0e20786d0ba:operate/services/manage.py:generic-api-key:406
 99c0f139b037da2587708212fcf6d0e20786d0ba:operate/services/manage.py:generic-api-key:454
 99c0f139b037da2587708212fcf6d0e20786d0ba:operate/services/manage.py:generic-api-key:455
-91ec07457f69e9a29f63693ac8ef887e4b5f49f0:operate/services/manage.py:generic-api-key:454
+91ec07457f69e9a29f63693ac8ef887e4b5f49f0:operate/services/manage.py:generic-api-key:454
+410bea2bd02ff54da69387fe8f3b58793e09f7b0:operate/services/manage.py:generic-api-key:421
+410bea2bd02ff54da69387fe8f3b58793e09f7b0:operate/services/manage.py:generic-api-key:422
+467e8e64f51fb3659e5af17ba53ab587ec24fc30:operate/services/manage.py:generic-api-key:290
+64afe2ea92daafa2515c054f0e09931622d99f31:operate/services/manage.py:generic-api-key:290
+64afe2ea92daafa2515c054f0e09931622d99f31:operate/services/manage.py:generic-api-key:289
diff --git a/electron/install.js b/electron/install.js
@@ -14,7 +14,7 @@ const homedir = os.homedir();
  * - use "" (nothing as a suffix) for latest release candidate, for example "0.1.0rc26"
  * - use "alpha" for alpha release, for example "0.1.0rc26-alpha"
  */
-const OlasMiddlewareVersion = '0.1.0rc112';
+const OlasMiddlewareVersion = '0.1.0rc118';
 
 const path = require('path');
 const { app } = require('electron');

diff --git a/electron/store.js b/electron/store.js
@@ -1,3 +1,4 @@
+const Store = require('electron-store');
 // set schema to validate store data
 const schema = {
   isInitialFunded: { type: 'boolean', default: false }, // TODO: reconsider this default, can be problematic if user has already funded prior to implementation
@@ -16,8 +17,6 @@ const schema = {
  * @returns {Promise<void>} - A promise that resolves once the store is set up.
  */
 const setupStoreIpc = async (ipcMain, mainWindow) => {
-  const Store = (await import("electron-store")).default;
-
   const store = new Store({ schema });
 
   store.onDidAnyChange((data) => {
@@ -30,7 +29,7 @@ const setupStoreIpc = async (ipcMain, mainWindow) => {
   ipcMain.handle('store-get', (_, key) => store.get(key));
   ipcMain.handle('store-set', (_, key, value) => store.set(key, value));
   ipcMain.handle('store-delete', (_, key) => store.delete(key));
-  ipcMain.handle('store-clear', (_) => store.clear());  
+  ipcMain.handle('store-clear', (_) => store.clear());
 };
 
 module.exports = { setupStoreIpc };
diff --git a/frontend/components/MainPage/header/AgentButton.tsx b/frontend/components/MainPage/header/AgentButton.tsx
@@ -4,7 +4,6 @@ import { useCallback, useMemo } from 'react';
 
 import { Chain, DeploymentStatus } from '@/client';
 import { COLOR } from '@/constants/colors';
-import { LOW_BALANCE } from '@/constants/thresholds';
 import { StakingProgram } from '@/enums/StakingProgram';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
@@ -103,6 +102,7 @@ const AgentNotRunningButton = () => {
   const {
     setIsPaused: setIsBalancePollingPaused,
     safeBalance,
+    isLowBalance,
     totalOlasStakedBalance,
     totalEthBalance,
   } = useBalance();
@@ -211,7 +211,7 @@ const AgentNotRunningButton = () => {
     const isServiceInactive =
       serviceStatus === DeploymentStatus.BUILT ||
       serviceStatus === DeploymentStatus.STOPPED;
-    if (isServiceInactive && safeBalance && safeBalance.ETH < LOW_BALANCE) {
+    if (isServiceInactive && isLowBalance) {
       return false;
     }
 
@@ -237,14 +237,14 @@ const AgentNotRunningButton = () => {
     return hasEnoughOlas && hasEnoughEth;
   }, [
     serviceStatus,
-    safeBalance,
     service,
     storeState?.isInitialFunded,
     isEligibleForStaking,
     isAgentEvicted,
     safeOlasBalanceWithStaked,
     requiredOlas,
     totalEthBalance,
+    isLowBalance,
   ]);
 
   const buttonProps: ButtonProps = {

diff --git a/frontend/components/MainPage/header/index.tsx b/frontend/components/MainPage/header/index.tsx
@@ -2,7 +2,6 @@ import { Flex } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 
 import { DeploymentStatus } from '@/client';
-import { LOW_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useServices } from '@/hooks/useServices';
@@ -12,12 +11,12 @@ import { AgentButton } from './AgentButton';
 import { AgentHead } from './AgentHead';
 
 const useSetupTrayIcon = () => {
-  const { safeBalance } = useBalance();
+  const { isLowBalance } = useBalance();
   const { serviceStatus } = useServices();
   const { setTrayIcon } = useElectronApi();
 
   useEffect(() => {
-    if (safeBalance && safeBalance.ETH < LOW_BALANCE) {
+    if (isLowBalance) {
       setTrayIcon?.('low-gas');
     } else if (serviceStatus === DeploymentStatus.DEPLOYED) {
       setTrayIcon?.('running');
@@ -26,7 +25,7 @@ const useSetupTrayIcon = () => {
     } else if (serviceStatus === DeploymentStatus.BUILT) {
       setTrayIcon?.('logged-out');
     }
-  }, [safeBalance, serviceStatus, setTrayIcon]);
+  }, [isLowBalance, serviceStatus, setTrayIcon]);
 
   return null;
 };

diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx
@@ -18,7 +18,6 @@ import styled from 'styled-components';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls';
 import { useWallet } from '@/hooks/useWallet';
-import { Address } from '@/types/Address';
 import { copyToClipboard } from '@/utils/copyToClipboard';
 import { truncateAddress } from '@/utils/truncate';
 
@@ -35,23 +34,6 @@ const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
 
 export const AddFundsSection = () => {
   const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
-  const { masterSafeAddress } = useWallet();
-
-  const fundingAddress: Address | undefined = masterSafeAddress;
-
-  const truncatedFundingAddress: string | undefined = useMemo(
-    () => fundingAddress && truncateAddress(fundingAddress),
-    [fundingAddress],
-  );
-
-  const handleCopyAddress = useCallback(
-    () =>
-      fundingAddress &&
-      copyToClipboard(fundingAddress).then(() =>
-        message.success('Copied successfully!'),
-      ),
-    [fundingAddress],
-  );
 
   return (
     <>
@@ -75,17 +57,36 @@ export const AddFundsSection = () => {
         </Popover>
       </CustomizedCardSection>
 
-      {isAddFundsVisible && (
-        <>
-          <AddFundsWarningAlertSection />
-          <AddFundsAddressSection
-            truncatedFundingAddress={truncatedFundingAddress}
-            fundingAddress={fundingAddress}
-            handleCopy={handleCopyAddress}
-          />
-          <AddFundsGetTokensSection />
-        </>
-      )}
+      {isAddFundsVisible && <OpenAddFundsSection />}
+    </>
+  );
+};
+
+export const OpenAddFundsSection = () => {
+  const { masterSafeAddress } = useWallet();
+
+  const truncatedFundingAddress: string | undefined = useMemo(
+    () => masterSafeAddress && truncateAddress(masterSafeAddress),
+    [masterSafeAddress],
+  );
+
+  const handleCopyAddress = useCallback(
+    () =>
+      masterSafeAddress &&
+      copyToClipboard(masterSafeAddress).then(() =>
+        message.success('Copied successfully!'),
+      ),
+    [masterSafeAddress],
+  );
+  return (
+    <>
+      <AddFundsWarningAlertSection />
+      <AddFundsAddressSection
+        truncatedFundingAddress={truncatedFundingAddress}
+        fundingAddress={masterSafeAddress}
+        handleCopy={handleCopyAddress}
+      />
+      <AddFundsGetTokensSection />
     </>
   );
 };

diff --git a/frontend/components/MainPage/sections/GasBalanceSection.tsx b/frontend/components/MainPage/sections/GasBalanceSection.tsx
@@ -4,9 +4,9 @@ import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 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';
@@ -33,7 +33,8 @@ const FineDot = styled(Dot)`
 `;
 
 const BalanceStatus = () => {
-  const { isBalanceLoaded, safeBalance } = useBalance();
+  const { isBalanceLoaded, isLowBalance } = useBalance();
+  const { storeState } = useStore();
   const { showNotification } = useElectronApi();
 
   const [isLowBalanceNotificationShown, setIsLowBalanceNotificationShown] =
@@ -42,33 +43,34 @@ const BalanceStatus = () => {
   // show notification if balance is too low
   useEffect(() => {
     if (!isBalanceLoaded) return;
-    if (!safeBalance) return;
     if (!showNotification) return;
+    if (!storeState?.isInitialFunded) return;
 
-    if (safeBalance.ETH < LOW_BALANCE && !isLowBalanceNotificationShown) {
+    if (isLowBalance && !isLowBalanceNotificationShown) {
       showNotification('Trading balance is too low.');
       setIsLowBalanceNotificationShown(true);
     }
 
     // If it has already been shown and the balance has increased,
     // should show the notification again if it goes below the threshold.
-    if (safeBalance.ETH >= LOW_BALANCE && isLowBalanceNotificationShown) {
+    if (!isLowBalance && isLowBalanceNotificationShown) {
       setIsLowBalanceNotificationShown(false);
     }
   }, [
     isBalanceLoaded,
     isLowBalanceNotificationShown,
-    safeBalance,
+    isLowBalance,
     showNotification,
+    storeState?.isInitialFunded,
   ]);
 
   const status = useMemo(() => {
-    if (!safeBalance || safeBalance.ETH < LOW_BALANCE) {
+    if (isLowBalance) {
       return { statusName: 'Too low', StatusComponent: EmptyDot };
     }
 
     return { statusName: 'Fine', StatusComponent: FineDot };
-  }, [safeBalance]);
+  }, [isLowBalance]);
 
   const { statusName, StatusComponent } = status;
   return (

diff --git a/frontend/components/MainPage/sections/NeedsFundsSection.tsx b/frontend/components/MainPage/sections/NeedsFundsSection.tsx
@@ -1,7 +1,9 @@
 import { Flex, Typography } from 'antd';
 import { formatUnits } from 'ethers/lib/utils';
 import { ReactNode, useEffect, useMemo } from 'react';
+import styled from 'styled-components';
 
+import { CustomAlert } from '@/components/Alert';
 import { CHAINS } from '@/constants/chains';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { useBalance } from '@/hooks/useBalance';
@@ -10,13 +12,18 @@ import { useServiceTemplates } from '@/hooks/useServiceTemplates';
 import { useStore } from '@/hooks/useStore';
 import { getMinimumStakedAmountRequired } from '@/utils/service';
 
-import { CustomAlert } from '../../Alert';
-import { AlertTitle } from '../../Alert/AlertTitle';
 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();
 
@@ -99,29 +106,28 @@ export const MainNeedsFunds = () => {
 
   const message: ReactNode = useMemo(
     () => (
-      <Flex vertical gap={4}>
-        <AlertTitle>Your agent needs funds</AlertTitle>
-        <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/MainPage/sections/OlasBalanceSection.tsx b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { CustomAlert } from '@/components/Alert';
 import { COLOR } from '@/constants/colors';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
-import { LOW_BALANCE } from '@/constants/thresholds';
+import { LOW_MASTER_SAFE_BALANCE } from '@/constants/thresholds';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
@@ -122,11 +122,12 @@ const MainOlasBalanceAlert = styled.div`
 `;
 
 const LowTradingBalanceAlert = () => {
-  const { isBalanceLoaded, safeBalance } = useBalance();
+  const { isBalanceLoaded, isLowBalance } = useBalance();
+  const { storeState } = useStore();
 
   if (!isBalanceLoaded) return null;
-  if (!safeBalance) return null;
-  if (safeBalance.ETH >= LOW_BALANCE) return null;
+  if (!storeState?.isInitialFunded) return;
+  if (!isLowBalance) return null;
 
   return (
     <MainOlasBalanceAlert>
@@ -140,7 +141,7 @@ const LowTradingBalanceAlert = () => {
               Trading balance is too low
             </Title>
             <Text>
-              {`To run your agent, add at least $${LOW_BALANCE} XDAI to your account.`}
+              {`To run your agent, add at least $${LOW_MASTER_SAFE_BALANCE} XDAI to your account.`}
             </Text>
             <Text>
               Do it quickly to avoid your agent missing its targets and getting