Merge pull request #315 from valory-xyz/mohan/staking-contract-ui

feat: move the staking contract info to the main screen

frontend/components/MainPage/index.tsx

@@ -17,6 +17,7 @@ import { MainNeedsFunds } from './sections/NeedsFundsSection';
 import { NewStakingProgramAlertSection } from './sections/NewStakingProgramAlertSection';
 import { MainOlasBalance } from './sections/OlasBalanceSection';
 import { MainRewards } from './sections/RewardsSection';
+import { StakingContractUpdate } from './sections/stakingContractUpdate';
 
 export const Main = () => {
   const { goto } = usePageState();
@@ -59,6 +60,7 @@ export const Main = () => {
         <MainOlasBalance />
         <MainRewards />
         <KeepAgentRunningSection />
+        <StakingContractUpdate />
         <GasBalanceSection />
         <MainNeedsFunds />
         <AddFundsSection />

frontend/components/MainPage/sections/StakingContractUpdate.tsx

@@ -0,0 +1,49 @@
+import { RightOutlined } from '@ant-design/icons';
+import { Button, Flex, Skeleton, Typography } from 'antd';
+
+import { Pages } from '@/enums/PageState';
+import { usePageState } from '@/hooks/usePageState';
+import { useStakingProgram } from '@/hooks/useStakingProgram';
+
+import { CardSection } from '../../styled/CardSection';
+
+const { Text } = Typography;
+
+export const StakingContractUpdate = () => {
+  const { goto } = usePageState();
+  const { activeStakingProgramMeta, isLoadedActiveStakingProgram } =
+    useStakingProgram();
+
+  return (
+    <CardSection bordertop="true" padding="16px 24px">
+      <Flex
+        gap={16}
+        justify="space-between"
+        align="center"
+        style={{ width: '100%' }}
+      >
+        <Text type="secondary">Staking contract</Text>
+
+        {isLoadedActiveStakingProgram ? (
+          <Button
+            type="link"
+            className="p-0"
+            onClick={() => goto(Pages.ManageStaking)}
+          >
+            {activeStakingProgramMeta ? (
+              <>
+                {activeStakingProgramMeta.name}
+                &nbsp;
+                <RightOutlined />
+              </>
+            ) : (
+              'Not staked'
+            )}
+          </Button>
+        ) : (
+          <Skeleton.Input />
+        )}
+      </Flex>
+    </CardSection>
+  );
+};

frontend/components/ManageStakingPage/StakingContractSection/StakingContractTag.tsx

@@ -10,7 +10,7 @@ export const StakingContractTag = ({
   if (status === StakingProgramStatus.New) {
     return <Tag color="blue">New</Tag>;
   } else if (status === StakingProgramStatus.Selected) {
-    return <Tag>Selected</Tag>;
+    return <Tag color="purple">Active</Tag>;
   }
   return null;
 };

frontend/components/ManageStakingPage/StakingContractSection/index.tsx

@@ -23,7 +23,7 @@ import { getMinimumStakedAmountRequired } from '@/utils/service';
 import { AlertInsufficientMigrationFunds, AlertNoSlots } from './alerts';
 import { StakingContractTag } from './StakingContractTag';
 
-// const { Text } = Typography;
+const { Title } = Typography;
 
 const { useToken } = theme;
 
@@ -94,22 +94,24 @@ export const StakingContractSection = ({
     [serviceTemplate, stakingProgram],
   );
 
+  // Check if there are enough OLAS to migrate
   const hasEnoughOlasToMigrate = useMemo(() => {
     if (safeBalance?.OLAS === undefined || totalOlasStakedBalance === undefined)
       return false;
 
     const balanceForMigration = safeBalance.OLAS + totalOlasStakedBalance;
-
     if (minimumOlasRequiredToMigrate === undefined) return false;
 
     return balanceForMigration >= minimumOlasRequiredToMigrate;
   }, [minimumOlasRequiredToMigrate, safeBalance?.OLAS, totalOlasStakedBalance]);
 
-  const hasEnoughSlots =
-    stakingContractInfoForStakingProgram?.maxNumServices &&
-    stakingContractInfoForStakingProgram?.serviceIds &&
-    stakingContractInfoForStakingProgram?.maxNumServices >
-      stakingContractInfoForStakingProgram?.serviceIds?.length;
+  // Check if there are enough SLOTS available
+  const hasEnoughSlots = useMemo(() => {
+    if (!stakingContractInfoForStakingProgram) return false;
+
+    const { maxNumServices, serviceIds } = stakingContractInfoForStakingProgram;
+    return maxNumServices && serviceIds && maxNumServices > serviceIds.length;
+  }, [stakingContractInfoForStakingProgram]);
 
   const activeStakingContractSupportsMigration =
     !activeStakingProgram ||
@@ -240,34 +242,36 @@ export const StakingContractSection = ({
     return;
   }, [activeStakingProgram, defaultStakingProgram, stakingProgram]);
 
+  const cardStyle = useMemo(() => {
+    if (isSelected || !activeStakingProgram) {
+      return { background: token.colorPrimaryBg };
+    }
+    return {};
+  }, [isSelected, activeStakingProgram, token.colorPrimaryBg]);
+
+  // If the staking program is deprecated, don't render the section
   if (STAKING_PROGRAM_META[stakingProgram].deprecated) {
     return null;
   }
 
   return (
     <>
       <CardSection
-        style={
-          isSelected || !activeStakingProgram
-            ? { background: token.colorBgContainerDisabled }
-            : {}
-        }
+        style={cardStyle}
         bordertop="true"
         borderbottom="true"
         vertical
         gap={16}
       >
-        {/* Title */}
         <Flex gap={12}>
-          <Typography.Title
+          <Title
             level={5}
             className="m-0"
-          >{`${stakingProgramMeta?.name} contract`}</Typography.Title>
+          >{`${stakingProgramMeta?.name} contract`}</Title>
           <StakingContractTag status={contractTagStatus} />
         </Flex>
 
         {/* TODO: redisplay once bugs resolved */}
-
         {/* 
           {stakingContractInfo?.availableRewards && (
             <ContractParameter
@@ -283,13 +287,15 @@ export const StakingContractSection = ({
             />
           )} 
        */}
+
         <a
           href={`https://gnosisscan.io/address/${stakingContractAddress}`}
           target="_blank"
         >
           View contract details {UNICODE_SYMBOLS.EXTERNAL_LINK}
         </a>
         {activeStakingContractSupportsMigration && cantMigrateAlert}
+
         {/* Switch to program button */}
         {![activeStakingProgram, defaultStakingProgram].includes(
           stakingProgram,
@@ -322,10 +328,12 @@ export const StakingContractSection = ({
                 }
               }}
             >
-              Switch
+              Switch and run agent
             </Button>
           </Popover>
         )}
+
+        {/* show funding address */}
         {!isSelected &&
           activeStakingContractSupportsMigration &&
           !hasEnoughOlasToMigrate && (

frontend/components/SettingsPage/index.tsx

@@ -16,7 +16,6 @@ import { CardTitle } from '../Card/CardTitle';
 import { CardSection } from '../styled/CardSection';
 import { AddBackupWalletPage } from './AddBackupWalletPage';
 import { DebugInfoSection } from './DebugInfoSection';
-import { SettingsStakingContractSection } from './SettingsStakingContractSection';
 
 const { Text, Paragraph } = Typography;
 
@@ -76,6 +75,7 @@ const SettingsMain = () => {
           <Text style={{ lineHeight: 1 }}>********</Text>
         </Flex>
       </CardSection>
+
       {/* Wallet backup */}
       <CardSection borderbottom="true" vertical gap={8}>
         <Text strong>Backup wallet</Text>
@@ -91,8 +91,7 @@ const SettingsMain = () => {
           <NoBackupWallet />
         )}
       </CardSection>
-      {/* Staking contract section */}
-      <SettingsStakingContractSection />
+
       {/* Debug info */}
       <DebugInfoSection />
     </Card>