Merge branch 'main' into feat/host-runtime

valory-xyz · May 29, 2024 · 4a786b9 · 4a786b9
2 parents a3a7e65 + 6217b24
commit 4a786b9
Show file tree

Hide file tree

Showing 25 changed files with 231 additions and 85 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -10,16 +10,7 @@ on:
             - 'v*.*.*'
 
 jobs:
-    verify-main-branch: # ensures we only release from main
-      runs-on: ubuntu-latest
-      steps:
-      - name: Exit if not on main branch
-        if: github.ref != 'refs/heads/main'
-        run: echo "Not on main branch, exiting" && exit -1
-
     release-middleware:
-        needs: 
-          - "verify-main-branch"
         runs-on: "ubuntu-latest"
         steps:
             - uses: actions/checkout@v2
@@ -47,12 +38,10 @@ jobs:
                 password: ${{ secrets.PYPI_TOKEN }}
                 skip-existing: true
                 packages-dir: dist/
-
     release-operate:
         runs-on: macos-latest
         needs:
           - "release-middleware"
-          - "verify-main-branch"
         steps:           
             - uses: actions/checkout@v2
             - uses: actions/setup-python@v4

diff --git a/electron/install.js b/electron/install.js
@@ -11,7 +11,7 @@ const axios = require("axios")
 const Docker = require('dockerode');
 const { spawnSync } = require('child_process');
 
-const Version = '0.1.0rc25';
+const Version = '0.1.0rc26';
 const OperateDirectory = `${os.homedir()}/.operate`;
 const VenvDir = `${OperateDirectory}/venv`;
 const TempDir = `${OperateDirectory}/temp`;

diff --git a/electron/loading/index.html b/electron/loading/index.html
@@ -29,12 +29,12 @@
     const { ipcRenderer } = require("electron");
     ipcRenderer.on("response", (event, arg) => {
       if (typeof arg === "string") {
-        if (arg.includes(/Installing/)) {
+        if (arg.includes("Installing")) {
           document.getElementById("text").innerHTML =
             `Installing app dependencies...
             <br />
             This might take a while`;
-        } else if (arg.includes(/Development mode/)) {
+        } else if (arg.includes("Development")) {
           document.getElementById("text").innerHTML = arg;
         }
       }

diff --git a/electron/preload.js b/electron/preload.js
@@ -15,6 +15,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     get: (key) => ipcRenderer.invoke('store-get', key),
     set: (key, value) => ipcRenderer.invoke('store-set', key, value),
     delete: (key) => ipcRenderer.invoke('store-delete', key),
+    clear: () => ipcRenderer.invoke('store-clear'),
   },
   setAppHeight: (height) => ipcRenderer.send('set-height', height),
   showNotification: (title, description) =>

diff --git a/electron/store.js b/electron/store.js
@@ -32,6 +32,7 @@ const setupStoreIpc = async (ipcChannel, mainWindow) => {
   ipcChannel.handle('store-get', (_, key) => store.get(key));
   ipcChannel.handle('store-set', (_, key, value) => store.set(key, value));
   ipcChannel.handle('store-delete', (_, key) => store.delete(key));
+  ipcChannel.handle('store-clear', (_) => store.clear());
 };
 
 module.exports = { setupStoreIpc };
diff --git a/frontend/components/Layout/Layout.tsx b/frontend/components/Layout/Layout.tsx
@@ -1,20 +1,57 @@
-import { PropsWithChildren } from 'react';
-import styled from 'styled-components';
+import { WifiOutlined } from '@ant-design/icons';
+import { message } from 'antd';
+import { PropsWithChildren, useContext, useEffect } from 'react';
+import styled, { css } from 'styled-components';
 
 import { COLOR } from '@/constants';
+import { OnlineStatusContext } from '@/context/OnlineStatusProvider';
 
 import { TopBar } from './TopBar';
 
-const Container = styled.div`
+const Container = styled.div<{ blur: 'true' | 'false' }>`
   background-color: ${COLOR.WHITE};
   border-radius: 8px;
+
+  ${(props) =>
+    props.blur === 'true' &&
+    css`
+      filter: blur(2px);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(27, 38, 50, 0.1);
+        z-index: 1;
+      }
+    `}
 `;
 
 export const Layout = ({
   children,
 }: PropsWithChildren & { vertical?: boolean }) => {
+  const { isOnline } = useContext(OnlineStatusContext);
+
+  useEffect(() => {
+    let messageKey;
+    if (!isOnline) {
+      messageKey = message.error({
+        content: 'Network connection is unstable',
+        duration: 0,
+        icon: <WifiOutlined />,
+      });
+    } else {
+      message.destroy(messageKey);
+    }
+  }, [isOnline]);
+
   return (
-    <Container>
+    <Container blur={isOnline ? 'false' : 'true'}>
       <TopBar />
       {children}
     </Container>

diff --git a/frontend/components/Main/MainHeader.tsx b/frontend/components/Main/MainHeader.tsx
@@ -111,12 +111,15 @@ export const MainHeader = () => {
       return ServicesService.createService({
         serviceTemplate,
         deploy: true,
-      }).then(() => {
-        setServiceStatus(DeploymentStatus.DEPLOYED);
-        setIsBalancePollingPaused(false);
-        setServiceButtonState(ServiceButtonLoadingState.NotLoading);
-        showNotification?.('Your agent is now running!');
-      });
+      })
+        .then(() => {
+          setServiceStatus(DeploymentStatus.DEPLOYED);
+          showNotification?.('Your agent is now running!');
+        })
+        .finally(() => {
+          setIsBalancePollingPaused(false);
+          setServiceButtonState(ServiceButtonLoadingState.NotLoading);
+        });
     } catch (error) {
       setIsBalancePollingPaused(false);
       setServiceButtonState(ServiceButtonLoadingState.NotLoading);

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
@@ -18,19 +18,32 @@ const RewardsRow = styled(Row)`
   margin: 0 -24px;
   > .ant-col {
     padding: 24px;
-
     &:not(:last-child) {
       border-right: 1px solid ${COLOR.BORDER_GRAY};
     }
   }
 `;
 
+const Loader = () => (
+  <Flex vertical gap={8}>
+    <Skeleton.Button active size="small" style={{ width: 92 }} />
+    <Skeleton.Button active size="small" style={{ width: 92 }} />
+  </Flex>
+);
+
 const DisplayRewards = () => {
-  const { availableRewardsForEpochEth, isEligibleForRewards } = useReward();
+  const {
+    availableRewardsForEpochEth,
+    isEligibleForRewards,
+    minimumStakedAmountRequired,
+  } = useReward();
   const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
-  // 20 OLAS is the minimum amount to stake
-  const isStaked = totalOlasStakedBalance === 20;
+  // check if the staked amount is greater than the minimum required
+  const isStaked =
+    minimumStakedAmountRequired &&
+    totalOlasStakedBalance &&
+    totalOlasStakedBalance >= minimumStakedAmountRequired;
 
   return (
     <RewardsRow>
@@ -49,10 +62,7 @@ const DisplayRewards = () => {
               )}
             </>
           ) : (
-            <Flex vertical gap={8}>
-              <Skeleton.Button active size="small" style={{ width: 92 }} />
-              <Skeleton.Button active size="small" style={{ width: 92 }} />
-            </Flex>
+            <Loader />
           )}
         </Flex>
       </Col>
@@ -65,20 +75,22 @@ const DisplayRewards = () => {
               <Text strong style={{ fontSize: 20 }}>
                 {balanceFormat(totalOlasStakedBalance, 2)} OLAS
               </Text>
-              {isStaked ? null : <Tag color="processing">Not yet staked</Tag>}
+              {minimumStakedAmountRequired && !isStaked ? (
+                <Tag color="processing">Not yet staked</Tag>
+              ) : null}
             </>
           ) : (
-            <Flex vertical gap={8}>
-              <Skeleton.Button active size="small" style={{ width: 92 }} />
-              <Skeleton.Button active size="small" style={{ width: 92 }} />
-            </Flex>
+            <Loader />
           )}
         </Flex>
       </Col>
     </RewardsRow>
   );
 };
 
+const SHARE_TEXT = `I just earned my first reward through the Operate app powered by #olas!\n\nDownload the Pearl app:`;
+const OPERATE_URL = 'https://olas.network/operate?pearl=first-reward';
+
 const NotifyRewards = () => {
   const { isEligibleForRewards, availableRewardsForEpochEth } = useReward();
   const { totalOlasBalance } = useBalance();
@@ -119,6 +131,16 @@ const NotifyRewards = () => {
     store?.set?.('firstRewardNotificationShown', true);
   }, [store]);
 
+  const onTwitterShare = useCallback(() => {
+    const encodedText = encodeURIComponent(SHARE_TEXT);
+    const encodedURL = encodeURIComponent(OPERATE_URL);
+
+    window.open(
+      `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedURL}`,
+      '_blank',
+    );
+  }, []);
+
   if (!canShowNotification) return null;
 
   return (
@@ -133,8 +155,7 @@ const NotifyRewards = () => {
           block
           size="large"
           className="mt-8"
-          disabled
-          style={{ display: 'none' }} // TODO: add twitter share functionality
+          onClick={onTwitterShare}
         >
           <Flex align="center" justify="center" gap={2}>
             Share on

diff --git a/frontend/components/Setup/SetupWelcome.tsx b/frontend/components/Setup/SetupWelcome.tsx
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AccountIsSetup } from '@/client';
 import { PageState, SetupScreen } from '@/enums';
 import { usePageState, useSetup } from '@/hooks';
+import { useElectronApi } from '@/hooks/useElectronApi';
 import { useWallet } from '@/hooks/useWallet';
 import { AccountService } from '@/service/Account';
 
@@ -22,6 +23,7 @@ import { FormFlex } from '../styled/FormFlex';
 const { Title } = Typography;
 
 export const SetupWelcome = () => {
+  const electronApi = useElectronApi();
   const [isSetup, setIsSetup] = useState<AccountIsSetup>(
     AccountIsSetup.Loading,
   );
@@ -32,8 +34,12 @@ export const SetupWelcome = () => {
         switch (res.is_setup) {
           case true:
             setIsSetup(AccountIsSetup.True);
+
             break;
           case false:
+            // Reset persistent state
+            // if creating new account
+            electronApi.store?.clear?.();
             setIsSetup(AccountIsSetup.False);
             break;
           default:

diff --git a/frontend/context/BalanceProvider.tsx b/frontend/context/BalanceProvider.tsx
@@ -28,6 +28,7 @@ import {
 } from '@/types';
 
 import { ServicesContext } from '.';
+import { OnlineStatusContext } from './OnlineStatusProvider';
 import { RewardContext } from './RewardProvider';
 import { WalletContext } from './WalletProvider';
 
@@ -64,6 +65,7 @@ export const BalanceContext = createContext<{
 });
 
 export const BalanceProvider = ({ children }: PropsWithChildren) => {
+  const { isOnline } = useContext(OnlineStatusContext);
   const { wallets, masterEoaAddress, masterSafeAddress } =
     useContext(WalletContext);
   const { services, serviceAddresses } = useContext(ServicesContext);
@@ -197,7 +199,7 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
     () => {
       updateBalances();
     },
-    isPaused ? null : 5000,
+    isPaused || !isOnline ? null : 5000,
   );
 
   return (

diff --git a/frontend/context/ElectronApiProvider.tsx b/frontend/context/ElectronApiProvider.tsx
@@ -20,6 +20,7 @@ type ElectronApiContextProps = {
     get?: (key: string) => Promise<unknown>;
     set?: (key: string, value: unknown) => Promise<void>;
     delete?: (key: string) => Promise<void>;
+    clear?: () => Promise<void>;
   };
   setAppHeight?: (height: unknown) => void;
   notifyAgentRunning?: () => void;
@@ -40,6 +41,7 @@ export const ElectronApiContext = createContext<ElectronApiContextProps>({
     get: async () => {},
     set: async () => {},
     delete: async () => {},
+    clear: async () => {},
   },
   setAppHeight: () => {},
 });
@@ -74,6 +76,7 @@ export const ElectronApiProvider = ({ children }: PropsWithChildren) => {
           get: getElectronApiFunction('store.get'),
           set: getElectronApiFunction('store.set'),
           delete: getElectronApiFunction('store.delete'),
+          clear: getElectronApiFunction('store.clear'),
         },
         setAppHeight: getElectronApiFunction('setAppHeight'),
         showNotification: getElectronApiFunction('showNotification'),

diff --git a/frontend/context/MasterSafeProvider.tsx b/frontend/context/MasterSafeProvider.tsx
@@ -14,6 +14,7 @@ import { useInterval } from 'usehooks-ts';
 import { GnosisSafeService } from '@/service/GnosisSafe';
 import { Address } from '@/types';
 
+import { OnlineStatusContext } from './OnlineStatusProvider';
 import { WalletContext } from './WalletProvider';
 
 export const MasterSafeContext = createContext<{
@@ -31,6 +32,7 @@ export const MasterSafeContext = createContext<{
 });
 
 export const MasterSafeProvider = ({ children }: PropsWithChildren) => {
+  const { isOnline } = useContext(OnlineStatusContext);
   const { masterSafeAddress, masterEoaAddress } = useContext(WalletContext);
 
   const [masterSafeOwners, setMasterSafeOwners] = useState<Address[]>();
@@ -66,7 +68,9 @@ export const MasterSafeProvider = ({ children }: PropsWithChildren) => {
 
   useInterval(
     updateMasterSafeOwners,
-    masterSafeOwners && masterSafeOwners.length >= 2 ? null : 5000,
+    (masterSafeOwners && masterSafeOwners.length >= 2) || !isOnline
+      ? null
+      : 5000,
   );
 
   return (