Merge branch 'main' of github.aaakk.us.kg-personal:valory-xyz/olas-operate-ap…

…p into mohan/notifications
valory-xyz · May 23, 2024 · 3e44eb1 · 3e44eb1
2 parents a307a5d + d9fd7eb
commit 3e44eb1
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ Electron + NextJS + Python Backend application to one-click run Agents.
 
 ## Technologies Used
 - Electron
-- NextJS (20.11 LTS)
+- NodeJS (20.11 LTS)
 - AntD
 - TypeScript
 - Python (3.10)

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
@@ -22,14 +22,13 @@ const RewardsRow = styled(Row)`
   }
 `;
 
-// TODO: Replace with real data
-const isStakingInfoLoaded = false;
-const isStaked = false;
-
 const DisplayRewards = () => {
-  const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
+  const { availableRewardsForEpochEth, isEligibleForRewards } = useReward();
   const { isBalanceLoaded, totalOlasStakedBalance } = useBalance();
 
+  // 20 OLAS is the minimum amount to stake
+  const isStaked = totalOlasStakedBalance === 20;
+
   return (
     <RewardsRow>
       <Col span={12}>
@@ -38,7 +37,7 @@ const DisplayRewards = () => {
           {isBalanceLoaded ? (
             <>
               <Text strong style={{ fontSize: 20 }}>
-                {balanceFormat(availableRewardsForEpochEther, 2)} OLAS
+                {balanceFormat(availableRewardsForEpochEth, 2)} OLAS
               </Text>
               {isEligibleForRewards ? (
                 <Tag color="success">Earned</Tag>
@@ -58,7 +57,7 @@ const DisplayRewards = () => {
       <Col span={12}>
         <Flex vertical gap={4} align="flex-start">
           <Text>Staked amount</Text>
-          {isStakingInfoLoaded ? (
+          {isBalanceLoaded ? (
             <>
               <Text strong style={{ fontSize: 20 }}>
                 {balanceFormat(totalOlasStakedBalance, 2)} OLAS

diff --git a/frontend/components/Setup/Create/SetupBackupSigner.tsx b/frontend/components/Setup/Create/SetupBackupSigner.tsx
@@ -55,12 +55,9 @@ export const SetupBackupSigner = () => {
           >
             Skip for now
           </Button>
-          <Typography.Text color="secondary">
-            <small>
-              Note that in the current version of the app, you will not be able
-              to set up a backup wallet afterward. This functionality is coming
-              soon.
-            </small>
+          <Typography.Text type="secondary" className="text-sm">
+            Note that in the current version of the app, you will not be able to
+            set up a backup wallet afterward. This functionality is coming soon.
           </Typography.Text>
         </FormFlex>
       </Flex>

diff --git a/frontend/components/Setup/Create/SetupCreateHeader.tsx b/frontend/components/Setup/Create/SetupCreateHeader.tsx
@@ -18,9 +18,12 @@ export const SetupCreateHeader = memo(function SetupCreateHeader({
   return (
     <Row>
       <Col span={8}>
-        <Button onClick={handleBack} disabled={disabled}>
-          <ArrowLeftOutlined />
-        </Button>
+        <Button
+          onClick={handleBack}
+          disabled={disabled}
+          icon={<ArrowLeftOutlined />}
+          size="large"
+        />
       </Col>
       <Col span={8}>
         <Flex justify="center">

diff --git a/frontend/components/Setup/Create/SetupEoaFunding.tsx b/frontend/components/Setup/Create/SetupEoaFunding.tsx
@@ -1,5 +1,6 @@
 import {
   CopyOutlined,
+  InfoCircleOutlined,
   // QrcodeOutlined
 } from '@ant-design/icons';
 import {
@@ -45,7 +46,11 @@ const loadingStatuses = [
   SetupEaoFundingStatus.CreatingSafe,
 ];
 
-export const SetupEoaFunding = () => {
+export const SetupEoaFunding = ({
+  isIncomplete,
+}: {
+  isIncomplete?: boolean;
+}) => {
   const { masterEoaAddress: masterEaoAddress, masterSafeAddress } = useWallet();
   const { walletBalances } = useBalance();
   const { backupSigner } = useSetup();
@@ -103,17 +108,15 @@ export const SetupEoaFunding = () => {
     <CardFlex>
       <SetupCreateHeader
         prev={SetupScreen.SetupBackupSigner}
-        disabled={isCreatingSafe}
+        disabled={isCreatingSafe || isIncomplete}
       />
       <Typography.Title level={3}>
-        Deposit {MIN_ETH_BALANCE_THRESHOLDS[Chain.GNOSIS].safeCreation} XDAI
+        Deposit {MIN_ETH_BALANCE_THRESHOLDS[Chain.GNOSIS].safeCreation} XDAI on
+        Gnosis
       </Typography.Title>
       <Typography.Paragraph>
         The app needs these funds to create your account on-chain.
       </Typography.Paragraph>
-      <Typography.Paragraph>
-        Note that this address will not be used after account creation.
-      </Typography.Paragraph>
 
       <CardSection bordertop="true" borderbottom="true">
         <Typography.Text
@@ -153,25 +156,25 @@ const SetupEoaFundingWaiting = ({
           }
         />
       </CardSection>
-      <CardSection bordertop="true" borderbottom="true" vertical gap={10}>
-        <AccountCreationCardFlex gap={10}>
-          <Flex justify="space-between">
-            <Typography.Text className="text-sm" strong>
-              Account creation address
-            </Typography.Text>
-            <Flex gap={10} align="center">
-              <Tooltip title="Copy to clipboard">
-                <CopyOutlined
-                  onClick={() =>
-                    masterEoa &&
-                    copyToClipboard(masterEoa).then(() =>
-                      message.success('Address copied!'),
-                    )
-                  }
-                />
-              </Tooltip>
-
-              {/* {masterEoa && (
+      <AccountCreationCard>
+        <Flex justify="space-between">
+          <Typography.Text className="text-sm" type="secondary">
+            Account creation address
+          </Typography.Text>
+          <Flex gap={10} align="center">
+            <Tooltip title="Copy to clipboard">
+              <CopyOutlined
+                style={ICON_STYLE}
+                onClick={() =>
+                  masterEoa &&
+                  copyToClipboard(masterEoa).then(() =>
+                    message.success('Address copied!'),
+                  )
+                }
+              />
+            </Tooltip>
+
+            {/* {masterEoa && (
                 <Popover
                   title="Scan QR code"
                   content={
@@ -181,30 +184,48 @@ const SetupEoaFundingWaiting = ({
                     />
                   }
                 >
-                  <QrcodeOutlined />
+                  <QrcodeOutlined style={ICON_STYLE}/>
                 </Popover>
               )} */}
-            </Flex>
           </Flex>
+        </Flex>
 
-          <span className="can-select-text break-word">
-            GNO:&nbsp;{masterEoa}
-          </span>
-        </AccountCreationCardFlex>
-        <Button
-          type="link"
-          target="_blank"
-          href={COW_SWAP_GNOSIS_XDAI_OLAS_URL}
-        >
-          Get XDAI on Gnosis Chain{UNICODE_SYMBOLS.EXTERNAL_LINK}
-        </Button>
-      </CardSection>
+        <span className="can-select-text break-word">
+          {`GNO: ${masterEoa}`}
+        </span>
+        <Alert
+          className="account-creation-alert"
+          showIcon
+          icon={<InfoCircleOutlined />}
+          message={
+            'After this point, do not send more funds to this address. Once your account is created, you will be given a new address - send further funds there.'
+          }
+        />
+      </AccountCreationCard>
+      <Button type="link" target="_blank" href={COW_SWAP_GNOSIS_XDAI_OLAS_URL}>
+        Get XDAI on Gnosis Chain {UNICODE_SYMBOLS.EXTERNAL_LINK}
+      </Button>
     </>
   );
 };
 
-const AccountCreationCardFlex = styled(CardFlex)`
-  .ant-card-body {
-    background-color: ${COLOR.ACCOUNT_CREATION_CARD_GRAY};
+const AccountCreationCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  padding: 16px;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23A3AEBB' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='15' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 12px;
+
+  .account-creation-alert {
+    margin-top: 8px;
+    background: #e6f4ff;
+    border: 1px solid #91caff;
+    color: #002c8c;
+    align-items: flex-start;
   }
 `;
+
+const ICON_STYLE = { color: '#606F85' };
diff --git a/frontend/components/Setup/Create/SetupSeedPhrase.tsx b/frontend/components/Setup/Create/SetupSeedPhrase.tsx
@@ -17,7 +17,7 @@ export const SetupSeedPhrase = () => {
 
   return (
     <CardFlex gap={10}>
-      <SetupCreateHeader prev={SetupScreen.SetupPassword} />
+      <SetupCreateHeader prev={SetupScreen.SetupPassword} disabled={true} />
       <Typography.Title level={3}>Back up seed phrase</Typography.Title>
       <Typography.Text>
         Seed phrase is needed to regain access to your account if you forget the

diff --git a/frontend/components/Setup/Setup.tsx b/frontend/components/Setup/Setup.tsx
@@ -30,6 +30,8 @@ export const Setup = () => {
         return <SetupBackupSigner />;
       case SetupScreen.SetupEoaFunding:
         return <SetupEoaFunding />;
+      case SetupScreen.SetupEoaFundingIncomplete:
+        return <SetupEoaFunding isIncomplete />;
       // Restore account
       case SetupScreen.Restore:
         return <SetupRestoreMain />;

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 { useWallet } from '@/hooks/useWallet';
 import { AccountService } from '@/service/Account';
 
 import { FormFlex } from '../styled/FormFlex';
@@ -97,6 +98,8 @@ export const SetupWelcomeLogin = () => {
   const { goto } = useSetup();
   const { goto: gotoPage } = usePageState();
 
+  const { masterEoaAddress, masterSafeAddress } = useWallet();
+
   const [isLoggingIn, setIsLoggingIn] = useState(false);
 
   const [form] = Form.useForm();
@@ -105,14 +108,21 @@ export const SetupWelcomeLogin = () => {
     async ({ password }: { password: string }) => {
       setIsLoggingIn(true);
       AccountService.loginAccount(password)
-        .then(() => gotoPage(PageState.Main))
+        .then(() => {
+          if (masterEoaAddress && !masterSafeAddress) {
+            gotoPage(PageState.Setup);
+            goto(SetupScreen.SetupEoaFundingIncomplete);
+          } else {
+            gotoPage(PageState.Main);
+          }
+        })
         .catch((e) => {
           console.error(e);
           message.error('Invalid password');
         })
         .finally(() => setIsLoggingIn(false));
     },
-    [gotoPage],
+    [goto, gotoPage, masterEoaAddress, masterSafeAddress],
   );
 
   return (

diff --git a/frontend/constants/color.ts b/frontend/constants/color.ts
@@ -8,5 +8,4 @@ export const COLOR = {
   WHITE: '#ffffff',
   BORDER_GRAY: '#f0f0f0',
   BROWN: '#873800',
-  ACCOUNT_CREATION_CARD_GRAY: '#f2f4f9',
 };
diff --git a/frontend/constants/thresholds.ts b/frontend/constants/thresholds.ts
@@ -7,4 +7,4 @@ export const MIN_ETH_BALANCE_THRESHOLDS = {
   },
 };
 
-export const LOW_BALANCE = 0.1;
+export const LOW_BALANCE = 0.5;
diff --git a/frontend/context/BalanceProvider.tsx b/frontend/context/BalanceProvider.tsx
@@ -62,7 +62,8 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
   const { wallets, masterEoaAddress, masterSafeAddress } =
     useContext(WalletContext);
   const { services, serviceAddresses } = useContext(ServicesContext);
-  const { optimisticRewardsEarnedForEpoch } = useContext(RewardContext);
+  const { optimisticRewardsEarnedForEpoch, accruedServiceStakingRewards } =
+    useContext(RewardContext);
 
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
   const [isPaused, setIsPaused] = useState<boolean>(false);
@@ -92,10 +93,12 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
       sumWalletBalances +
       (olasDepositBalance ?? 0) +
       (olasBondBalance ?? 0) +
-      (optimisticRewardsEarnedForEpoch ?? 0);
+      (optimisticRewardsEarnedForEpoch ?? 0) +
+      (accruedServiceStakingRewards ?? 0);
 
     return total;
   }, [
+    accruedServiceStakingRewards,
     isLoaded,
     olasBondBalance,
     olasDepositBalance,
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export const MIN_ETH_BALANCE_THRESHOLDS = { @@
       },
     };
-    export const LOW_BALANCE = 0.1;
+    export const LOW_BALANCE = 0.5;