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

… feature/improve-app-closing-and-kill-procs
valory-xyz · Oct 4, 2024 · cf496da · cf496da
2 parents 522aad5 + a77003b
commit cf496da
Show file tree

Hide file tree

Showing 32 changed files with 847 additions and 156 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -130,9 +130,9 @@ jobs:
         run: yarn build:frontend
         env:
           NODE_ENV: ${{ matrix.env }}
-          DEV_RPC: https://virtual.gnosis.rpc.tenderly.co/78ca845d-2b24-44a6-9ce2-869a979e8b5b
+          DEV_RPC: https://virtual.gnosis.rpc.tenderly.co/7e67e659-9a8a-4830-b430-76203f1abde8
           IS_STAGING: ${{ github.ref != 'refs/heads/main' && 'true' || 'false' }}
-          FORK_URL: https://virtual.gnosis.rpc.tenderly.co/78ca845d-2b24-44a6-9ce2-869a979e8b5b
+          FORK_URL: https://virtual.gnosis.rpc.tenderly.co/7e67e659-9a8a-4830-b430-76203f1abde8
 
       # Run the build and notarization process for production
       - name: Build, notarize, and publish (Production)

diff --git a/.github/workflows/release_win.yml b/.github/workflows/release_win.yml
@@ -14,7 +14,7 @@ jobs:
           - env: "production"
             rpc: "https://rpc-gate.autonolas.tech/gnosis-rpc/"
           - env: "development"
-            rpc: "https://virtual.gnosis.rpc.tenderly.co/78ca845d-2b24-44a6-9ce2-869a979e8b5b"
+            rpc: "https://virtual.gnosis.rpc.tenderly.co/7e67e659-9a8a-4830-b430-76203f1abde8"
     defaults:
       run:
         shell: bash

diff --git a/electron/install.js b/electron/install.js
@@ -6,15 +6,15 @@ const process = require('process');
 const axios = require('axios');
 const { spawnSync } = require('child_process');
 const { logger } = require('./logger');
-const { execSync} = require('child_process');
+const { execSync } = require('child_process');
 const { paths } = require('./constants');
 const homedir = os.homedir();
 /**
  * current version of the pearl release
  * - 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.0rc153';
+const OlasMiddlewareVersion = '0.1.0rc158';
 
 const path = require('path');
 const { app } = require('electron');
@@ -55,18 +55,16 @@ const TendermintUrls = {
   },
 };
 
-
 function execSyncExitCode(cmd) {
   try {
     execSync(cmd);
     return 0;
-  } 
-  catch (error) {
-    logger.electron(error.status);  // Might be 127 in your example.
+  } catch (error) {
+    logger.electron(error.status); // Might be 127 in your example.
     logger.electron(error.message); // Holds the message you typically want.
-      logger.electron(error.stderr.toString());  // Holds the stderr output. Use `.toString()`.
-        logger.electron(error.stdout.toString());  // Holds the stdout output. Use `.toString()`.
-   return error.status;
+    logger.electron(error.stderr.toString()); // Holds the stderr output. Use `.toString()`.
+    logger.electron(error.stdout.toString()); // Holds the stdout output. Use `.toString()`.
+    return error.status;
   }
 }
 
@@ -94,7 +92,6 @@ function runCmdUnix(command, options) {
   logger.electron(`===== stderr =====  \n${output.stderr}`);
 }
 
-
 function runSudoUnix(command, options) {
   let bin = getBinPath(command);
   if (!bin) {
@@ -132,7 +129,7 @@ function isTendermintInstalledUnix() {
 function isTendermintInstalledWindows() {
   return true;
   //always installed cause bundled in
-    return execSyncExitCode('tendermint --help') === 0;
+  return execSyncExitCode('tendermint --help') === 0;
 }
 
 async function downloadFile(url, dest) {
@@ -171,24 +168,23 @@ async function installTendermintWindows() {
   logger.electron(`Installing tendermint binary`);
   try {
     execSync('tar -xvf tendermint.tar.gz');
-  } catch (error){
-    logger.electron(error.status);  // Might be 127 in your example.
+  } catch (error) {
+    logger.electron(error.status); // Might be 127 in your example.
     logger.electron(error.message); // Holds the message you typically want.
-      logger.electron(error.stderr.toString());  // Holds the stderr output. Use `.toString()`.
-        logger.electron(error.stdout.toString());  // Holds the stdout output. Use `.toString()`.
+    logger.electron(error.stderr.toString()); // Holds the stderr output. Use `.toString()`.
+    logger.electron(error.stdout.toString()); // Holds the stdout output. Use `.toString()`.
   }
 
-  const bin_dir = homedir + "//AppData//Local//Microsoft//WindowsApps//"
+  const bin_dir = homedir + '//AppData//Local//Microsoft//WindowsApps//';
   if (!Env.CI) {
     if (!fs.existsSync(bin_dir)) {
-     fs.mkdirSync(bin_dir, {recursive: true});
+      fs.mkdirSync(bin_dir, { recursive: true });
     }
-    fs.copyFileSync("tendermint.exe", bin_dir + "tendermint.exe");
+    fs.copyFileSync('tendermint.exe', bin_dir + 'tendermint.exe');
   }
   process.chdir(cwd);
 }
 
-
 async function installTendermintUnix() {
   logger.electron(`Installing tendermint for ${os.platform()}-${process.arch}`);
   const cwd = process.cwd();
@@ -259,14 +255,14 @@ async function setupUbuntu(ipcChannel) {
   }
 }
 
-
-
 async function setupWindows(ipcChannel) {
   logger.electron('Creating required directories');
   await createDirectory(`${paths.dotOperateDirectory}`);
   await createDirectory(`${paths.tempDir}`);
 
-  logger.electron('Checking tendermint installation: ' + isTendermintInstalledWindows());
+  logger.electron(
+    'Checking tendermint installation: ' + isTendermintInstalledWindows(),
+  );
   if (!isTendermintInstalledWindows()) {
     ipcChannel.send('response', 'Installing tendermint');
     logger.electron('Installing tendermint');

diff --git a/electron/main.js b/electron/main.js
@@ -72,6 +72,12 @@ let tray = null;
 
 let operateDaemon, operateDaemonPid, nextAppProcess, nextAppProcessPid;
 
+// @ts-ignore - Workaround for the missing type definitions
+const nextApp = next({
+  dev: false,
+  dir: path.join(__dirname),
+});
+
 const getActiveWindow = () => splashWindow ?? mainWindow;
 
 function showNotification(title, body) {
@@ -306,29 +312,21 @@ async function launchDaemonDev() {
 }
 
 async function launchNextApp() {
-  const nextApp = next({
-    dev: false,
-    dir: path.join(__dirname),
-    port: appConfig.ports.prod.next,
-    env: {
-      GNOSIS_RPC:
-        process.env.NODE_ENV === 'production'
-          ? process.env.FORK_URL
-          : process.env.DEV_RPC,
-      NEXT_PUBLIC_BACKEND_PORT:
-        process.env.NODE_ENV === 'production'
-          ? appConfig.ports.prod.operate
-          : appConfig.ports.dev.operate,
-    },
-  });
+  logger.electron('Launching Next App');
+
+  logger.electron('Preparing Next App');
   await nextApp.prepare();
 
+  logger.electron('Getting Next App Handler');
   const handle = nextApp.getRequestHandler();
+
+  logger.electron('Creating Next App Server');
   const server = http.createServer((req, res) => {
     handle(req, res); // Handle requests using the Next.js request handler
   });
-  server.listen(appConfig.ports.prod.next, (err) => {
-    if (err) throw err;
+
+  logger.electron('Listening on Next App Server');
+  server.listen(appConfig.ports.prod.next, () => {
     logger.next(
       `> Next server running on http://localhost:${appConfig.ports.prod.next}`,
     );

diff --git a/frontend/components/MainPage/index.tsx b/frontend/components/MainPage/index.tsx
@@ -5,11 +5,13 @@ import { useEffect } from 'react';
 import { Pages } from '@/enums/PageState';
 import { StakingProgramId } from '@/enums/StakingProgram';
 import { useBalance } from '@/hooks/useBalance';
+import { useMasterSafe } from '@/hooks/useMasterSafe';
 import { usePageState } from '@/hooks/usePageState';
 import { useServices } from '@/hooks/useServices';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
 
 import { MainHeader } from './header';
+import { AddBackupWalletAlert } from './sections/AddBackupWalletAlert';
 import { AddFundsSection } from './sections/AddFundsSection';
 import { GasBalanceSection } from './sections/GasBalanceSection';
 import { KeepAgentRunningSection } from './sections/KeepAgentRunningSection';
@@ -21,6 +23,7 @@ import { StakingContractUpdate } from './sections/StakingContractUpdate';
 
 export const Main = () => {
   const { goto } = usePageState();
+  const { backupSafeAddress } = useMasterSafe();
   const { updateServicesState } = useServices();
   const { updateBalances, isLoaded, setIsLoaded } = useBalance();
   const { activeStakingProgramId: currentStakingProgram } = useStakingProgram();
@@ -32,6 +35,11 @@ export const Main = () => {
     }
   }, [isLoaded, setIsLoaded, updateBalances, updateServicesState]);
 
+  const hideMainOlasBalanceTopBorder = [
+    !backupSafeAddress,
+    currentStakingProgram === StakingProgramId.Alpha,
+  ].some((condition) => !!condition);
+
   return (
     <Card
       title={<MainHeader />}
@@ -54,10 +62,12 @@ export const Main = () => {
       style={{ borderTopColor: 'transparent' }}
     >
       <Flex vertical>
+        {!backupSafeAddress && <AddBackupWalletAlert />}
         {currentStakingProgram === StakingProgramId.Alpha && (
           <NewStakingProgramAlertSection />
         )}
-        <MainOlasBalance />
+
+        <MainOlasBalance isBorderTopVisible={!hideMainOlasBalanceTopBorder} />
         <MainRewards />
         <KeepAgentRunningSection />
         <StakingContractUpdate />

diff --git a/frontend/components/MainPage/sections/AddBackupWalletAlert.tsx b/frontend/components/MainPage/sections/AddBackupWalletAlert.tsx
@@ -0,0 +1,34 @@
+import { Flex, Typography } from 'antd';
+
+import { Pages } from '@/enums/PageState';
+import { usePageState } from '@/hooks/usePageState';
+
+import { CustomAlert } from '../../Alert';
+import { CardSection } from '../../styled/CardSection';
+
+const { Text } = Typography;
+
+export const AddBackupWalletAlert = () => {
+  const { goto } = usePageState();
+
+  return (
+    <CardSection>
+      <CustomAlert
+        type="warning"
+        fullWidth
+        showIcon
+        message={
+          <Flex align="center" justify="space-between" gap={2}>
+            <span>Add backup wallet</span>
+            <Text
+              className="pointer hover-underline text-primary"
+              onClick={() => goto(Pages.AddBackupWalletViaSafe)}
+            >
+              See instructions
+            </Text>
+          </Flex>
+        }
+      />
+    </CardSection>
+  );
+};
diff --git a/frontend/components/MainPage/sections/OlasBalanceSection.tsx b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
@@ -103,7 +103,10 @@ const AvoidSuspensionAlert = () => {
   );
 };
 
-export const MainOlasBalance = () => {
+type MainOlasBalanceProps = { isBorderTopVisible?: boolean };
+export const MainOlasBalance = ({
+  isBorderTopVisible = true,
+}: MainOlasBalanceProps) => {
   const { storeState } = useStore();
   const { isBalanceLoaded, totalOlasBalance } = useBalance();
   const { goto } = usePageState();
@@ -128,7 +131,7 @@ export const MainOlasBalance = () => {
     <CardSection
       vertical
       gap={8}
-      bordertop="true"
+      bordertop={isBorderTopVisible ? 'true' : 'false'}
       borderbottom="true"
       padding="16px 24px"
     >

diff --git a/frontend/components/MainPage/sections/RewardsSection.tsx b/frontend/components/MainPage/sections/RewardsSection.tsx
@@ -1,10 +1,12 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Skeleton, Tag, Tooltip, Typography } from 'antd';
 import Image from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { Pages } from '@/enums/PageState';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
+import { usePageState } from '@/hooks/usePageState';
 import { useReward } from '@/hooks/useReward';
 import { useStore } from '@/hooks/useStore';
 import { balanceFormat } from '@/utils/numberFormatters';
@@ -27,6 +29,7 @@ const getFormattedReward = (reward: number | undefined) =>
 const DisplayRewards = () => {
   const { availableRewardsForEpochEth, isEligibleForRewards } = useReward();
   const { isBalanceLoaded } = useBalance();
+  const { goto } = usePageState();
 
   const reward = getFormattedReward(availableRewardsForEpochEth);
 
@@ -46,6 +49,7 @@ const DisplayRewards = () => {
           <InfoCircleOutlined />
         </Tooltip>
       </Text>
+
       {isBalanceLoaded ? (
         <Flex align="center" gap={12}>
           <Text className="text-xl font-weight-600">{reward} OLAS&nbsp;</Text>
@@ -58,6 +62,15 @@ const DisplayRewards = () => {
       ) : (
         <Loader />
       )}
+
+      <Text
+        type="secondary"
+        className="text-sm pointer hover-underline"
+        onClick={() => goto(Pages.RewardsHistory)}
+      >
+        See rewards history
+        <RightOutlined style={{ fontSize: 12, paddingLeft: 6 }} />
+      </Text>
     </CardSection>
   );
 };

diff --git a/frontend/components/Pages/AddBackupWalletViaSafePage/index.tsx b/frontend/components/Pages/AddBackupWalletViaSafePage/index.tsx
@@ -0,0 +1,42 @@
+import { Card, Flex, Typography } from 'antd';
+
+import { CardTitle } from '@/components/Card/CardTitle';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { DISCORD_TICKET_URL } from '@/constants/urls';
+import { useWallet } from '@/hooks/useWallet';
+
+import { GoToMainPageButton } from '../GoToMainPageButton';
+
+const { Text } = Typography;
+
+export const AddBackupWalletViaSafePage = () => {
+  const { masterSafeAddress } = useWallet();
+
+  return (
+    <Card
+      title={<CardTitle title="Add backup wallet via Safe" />}
+      bordered={false}
+      extra={<GoToMainPageButton />}
+    >
+      <Flex vertical gap={16}>
+        <Flex vertical gap={4}>
+          <Text>Manually add backup wallet via Safe interface:</Text>
+          <a
+            target="_blank"
+            href={`https://app.safe.global/settings/setup?safe=gno:${masterSafeAddress}`}
+          >
+            Add backup wallet {UNICODE_SYMBOLS.EXTERNAL_LINK}
+          </a>
+        </Flex>
+
+        <Flex vertical gap={4}>
+          <Text>Not sure how?</Text>
+          <a target="_blank" href={DISCORD_TICKET_URL}>
+            Get community assistance via Discord ticket{' '}
+            {UNICODE_SYMBOLS.EXTERNAL_LINK}
+          </a>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};
diff --git a/frontend/components/Pages/GoToMainPageButton.tsx b/frontend/components/Pages/GoToMainPageButton.tsx
@@ -0,0 +1,17 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+import { Pages } from '@/enums/PageState';
+import { usePageState } from '@/hooks/usePageState';
+
+export const GoToMainPageButton = () => {
+  const { goto } = usePageState();
+
+  return (
+    <Button
+      size="large"
+      icon={<CloseOutlined />}
+      onClick={() => goto(Pages.Main)}
+    />
+  );
+};