Show notification and modal on first staking

valory-xyz · Jun 3, 2024 · dbd68ea · dbd68ea
1 parent 0685957
commit dbd68ea
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 8 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -237,7 +237,7 @@ const createMainWindow = () => {
     mainWindow.setSize(width, height);
   });
 
-  ipcMain.on('show-notification', (title, description) => {
+  ipcMain.on('show-notification', (_event, title, description) => {
     showNotification(title, description || undefined);
   });
 

diff --git a/frontend/components/Main/MainHeader.tsx b/frontend/components/Main/MainHeader.tsx
@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Badge, Button, Flex, Popover, Typography } from 'antd';
+import { Badge, Button, Flex, Modal, Popover, Typography } from 'antd';
 import { formatUnits } from 'ethers/lib/utils';
 import Image from 'next/image';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -14,17 +14,71 @@ import { useWallet } from '@/hooks/useWallet';
 import { ServicesService } from '@/service';
 import { WalletService } from '@/service/Wallet';
 
-const { Text } = Typography;
+const { Text, Title, Paragraph } = Typography;
 
 const LOADING_MESSAGE =
   "It may take a while to start your agent, so feel free to close the app. We'll notify you once your agent is running.";
+const OLAS_REQUIRED_FOR_STAKING = Number(
+  formatUnits(
+    `${SERVICE_TEMPLATES[0].configuration.olas_required_to_stake + SERVICE_TEMPLATES[0].configuration.olas_cost_of_bond}`,
+    18,
+  ),
+);
 
 enum ServiceButtonLoadingState {
   Starting,
   Pausing,
   NotLoading,
 }
 
+const FirstRunModal = ({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) => {
+  if (!open) return null;
+  return (
+    <Modal
+      open={open}
+      width={412}
+      onCancel={onClose}
+      footer={[
+        <Button
+          key="ok"
+          type="primary"
+          block
+          size="large"
+          className="mt-8"
+          onClick={onClose}
+        >
+          Got it
+        </Button>,
+      ]}
+    >
+      <Flex align="center" justify="center">
+        <Image
+          src="/splash-robot-head.png"
+          width={100}
+          height={100}
+          alt="OLAS logo"
+        />
+      </Flex>
+      <Title level={5} className="mt-12 text-center">
+        Your agent is running and you&apos;ve staked {OLAS_REQUIRED_FOR_STAKING}{' '}
+        OLAS!
+      </Title>
+      <Paragraph>Your agent is working towards earning rewards.</Paragraph>
+      <Paragraph>
+        Pearl is designed to make it easy for you to earn staking rewards every
+        day. Simply leave the app and agent running in the background for ~1hr a
+        day.
+      </Paragraph>
+    </Modal>
+  );
+};
+
 export const MainHeader = () => {
   const { storeState } = useStore();
   const { services, serviceStatus, setServiceStatus } = useServices();
@@ -39,6 +93,9 @@ export const MainHeader = () => {
     setIsPaused: setIsBalancePollingPaused,
   } = useBalance();
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const handleModalClose = useCallback(() => setIsModalOpen(false), []);
+
   const safeOlasBalanceWithStaked = useMemo(() => {
     if (safeBalance?.OLAS === undefined) return;
     if (totalOlasStakedBalance === undefined) return;
@@ -122,7 +179,14 @@ export const MainHeader = () => {
       })
         .then(() => {
           setServiceStatus(DeploymentStatus.DEPLOYED);
-          showNotification?.('Your agent is now running!');
+          if (totalOlasStakedBalance === 0) {
+            showNotification?.(
+              `Your agent is running and you've staked ${OLAS_REQUIRED_FOR_STAKING} OLAS!`,
+            );
+            setIsModalOpen(true);
+          } else {
+            showNotification?.('Your agent is now running!');
+          }
         })
         .finally(() => {
           setIsBalancePollingPaused(false);
@@ -137,8 +201,9 @@ export const MainHeader = () => {
     serviceTemplate,
     setIsBalancePollingPaused,
     setServiceStatus,
-    wallets,
     showNotification,
+    totalOlasStakedBalance,
+    wallets,
   ]);
 
   const handlePause = useCallback(() => {
@@ -253,14 +318,14 @@ export const MainHeader = () => {
     if (!isDeployable) {
       return (
         <Button type="default" size="large" disabled>
-          Start agent
+          Start agent {totalOlasStakedBalance === 0 && '& stake'}
         </Button>
       );
     }
 
     return (
       <Button type="primary" size="large" onClick={handleStart}>
-        Start agent
+        Start agent {totalOlasStakedBalance === 0 && '& stake'}
       </Button>
     );
   }, [
@@ -273,12 +338,14 @@ export const MainHeader = () => {
     services,
     storeState?.isInitialFunded,
     totalEthBalance,
+    totalOlasStakedBalance,
   ]);
 
   return (
     <Flex justify="start" align="center" gap={10}>
       {agentHead}
       {serviceToggleButton}
+      <FirstRunModal open={isModalOpen} onClose={handleModalClose} />
     </Flex>
   );
 };
diff --git a/frontend/context/ElectronApiProvider.tsx b/frontend/context/ElectronApiProvider.tsx
@@ -28,7 +28,7 @@ type ElectronApiContextProps = {
   saveLogs?: (data: {
     store?: ElectronStore;
     debugData?: Record<string, unknown>;
-  }) => Promise<{ success: true; dirPath: string } | { success: false }>;
+  }) => Promise<{ success: true; dirPath: string } | { success?: false }>;
   openPath?: (filePath: string) => void;
 };
 

diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
@@ -153,6 +153,10 @@ button, input, select, textarea, .ant-input-suffix {
   font-size: 14px !important;
 }
 
+.text-center {
+  text-align: center !important;
+}
+
 .font-weight-600 {
   font-weight: 600 !important;
 }