Merge commit '6286fd024cc4e09e08e90a5a124349a98bde625b' into fix/onch…

…ain_update_flow

frontend/components/MainPage/sections/AddFundsSection.tsx

@@ -18,7 +18,6 @@ import styled from 'styled-components';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls';
 import { useWallet } from '@/hooks/useWallet';
-import { Address } from '@/types/Address';
 import { copyToClipboard } from '@/utils/copyToClipboard';
 import { truncateAddress } from '@/utils/truncate';
 
@@ -35,23 +34,6 @@ const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
 
 export const AddFundsSection = () => {
   const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
-  const { masterSafeAddress } = useWallet();
-
-  const fundingAddress: Address | undefined = masterSafeAddress;
-
-  const truncatedFundingAddress: string | undefined = useMemo(
-    () => fundingAddress && truncateAddress(fundingAddress),
-    [fundingAddress],
-  );
-
-  const handleCopyAddress = useCallback(
-    () =>
-      fundingAddress &&
-      copyToClipboard(fundingAddress).then(() =>
-        message.success('Copied successfully!'),
-      ),
-    [fundingAddress],
-  );
 
   return (
     <>
@@ -75,17 +57,36 @@ export const AddFundsSection = () => {
         </Popover>
       </CustomizedCardSection>
 
-      {isAddFundsVisible && (
-        <>
-          <AddFundsWarningAlertSection />
-          <AddFundsAddressSection
-            truncatedFundingAddress={truncatedFundingAddress}
-            fundingAddress={fundingAddress}
-            handleCopy={handleCopyAddress}
-          />
-          <AddFundsGetTokensSection />
-        </>
-      )}
+      {isAddFundsVisible && <OpenAddFundsSection />}
+    </>
+  );
+};
+
+export const OpenAddFundsSection = () => {
+  const { masterSafeAddress } = useWallet();
+
+  const truncatedFundingAddress: string | undefined = useMemo(
+    () => masterSafeAddress && truncateAddress(masterSafeAddress),
+    [masterSafeAddress],
+  );
+
+  const handleCopyAddress = useCallback(
+    () =>
+      masterSafeAddress &&
+      copyToClipboard(masterSafeAddress).then(() =>
+        message.success('Copied successfully!'),
+      ),
+    [masterSafeAddress],
+  );
+  return (
+    <>
+      <AddFundsWarningAlertSection />
+      <AddFundsAddressSection
+        truncatedFundingAddress={truncatedFundingAddress}
+        fundingAddress={masterSafeAddress}
+        handleCopy={handleCopyAddress}
+      />
+      <AddFundsGetTokensSection />
     </>
   );
 };

frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx

@@ -6,28 +6,35 @@ import { UNICODE_SYMBOLS } from '@/constants/symbols';
 const { Text } = Typography;
 
 export const AlertInsufficientMigrationFunds = ({
-  totalOlasBalance,
+  masterSafeOlasBalance,
+  stakedOlasBalance,
+  totalOlasRequiredForStaking,
 }: {
-  totalOlasBalance: number;
-}) => (
-  <CustomAlert
-    type="warning"
-    showIcon
-    message={
-      <Flex vertical gap={4}>
-        <Text className="font-weight-600">
-          Insufficient amount of funds to switch
-        </Text>
+  masterSafeOlasBalance: number;
+  stakedOlasBalance: number;
+  totalOlasRequiredForStaking: number;
+}) => {
+  const requiredOlasDeposit =
+    totalOlasRequiredForStaking - (stakedOlasBalance + masterSafeOlasBalance);
 
-        <Text>Add funds to your account to meet the program requirements.</Text>
-        <Text>
-          Your current OLAS balance:{' '}
-          <span className="font-weight-600">{totalOlasBalance} OLAS</span>
-        </Text>
-      </Flex>
-    }
-  />
-);
+  return (
+    <CustomAlert
+      type="warning"
+      showIcon
+      message={
+        <Flex vertical gap={4}>
+          <Text className="font-weight-600">
+            An additional {requiredOlasDeposit} OLAS is required to switch
+          </Text>
+          <Text>
+            Add <strong>{requiredOlasDeposit} OLAS</strong> to your account to
+            meet the contract requirements and switch.
+          </Text>
+        </Flex>
+      }
+    />
+  );
+};
 
 export const AlertNoSlots = () => (
   <CustomAlert

frontend/components/ManageStakingPage/StakingContractSection/index.tsx

@@ -1,7 +1,8 @@
 import { Button, Flex, Popover, theme, Typography } from 'antd';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { DeploymentStatus } from '@/client';
+import { OpenAddFundsSection } from '@/components/MainPage/sections/AddFundsSection';
 import { CardSection } from '@/components/styled/CardSection';
 import { STAKING_PROGRAM_META } from '@/constants/stakingProgramMeta';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
@@ -59,16 +60,21 @@ export const StakingContractSection = ({
   contractAddress: Address;
 }) => {
   const { goto } = usePageState();
-  const { setServiceStatus, serviceStatus, setIsServicePollingPaused } =
-    useServices();
+  const {
+    setServiceStatus,
+    serviceStatus,
+    setIsServicePollingPaused,
+    updateServiceStatus,
+  } = useServices();
   const { serviceTemplate } = useServiceTemplates();
   const { setMigrationModalOpen } = useModals();
   const { activeStakingProgram, defaultStakingProgram, updateStakingProgram } =
     useStakingProgram();
-  const { stakingContractInfoRecord } = useStakingContractInfo();
   const { token } = useToken();
-  const { totalOlasBalance, isBalanceLoaded } = useBalance();
-  const { isServiceStakedForMinimumDuration } = useStakingContractInfo();
+  const { safeBalance, totalOlasStakedBalance, isBalanceLoaded } = useBalance();
+  const { isServiceStakedForMinimumDuration, stakingContractInfoRecord } =
+    useStakingContractInfo();
+  const [isFundingSectionOpen, setIsFundingSectionOpen] = useState(false);
 
   const stakingContractInfoForStakingProgram =
     stakingContractInfoRecord?.[stakingProgram];
@@ -87,10 +93,15 @@ export const StakingContractSection = ({
   );
 
   const hasEnoughOlasToMigrate = useMemo(() => {
-    if (totalOlasBalance === undefined) return false;
-    if (!minimumOlasRequiredToMigrate) return false;
-    return totalOlasBalance >= minimumOlasRequiredToMigrate;
-  }, [minimumOlasRequiredToMigrate, totalOlasBalance]);
+    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 &&
@@ -167,6 +178,7 @@ export const StakingContractSection = ({
     isBalanceLoaded,
     isSelected,
     isServiceStakedForMinimumDuration,
+    minimumOlasRequiredToMigrate,
     serviceStatus,
   ]);
 
@@ -179,9 +191,17 @@ export const StakingContractSection = ({
       return <AlertNoSlots />;
     }
 
-    if (!hasEnoughOlasToMigrate) {
+    if (
+      !hasEnoughOlasToMigrate &&
+      safeBalance?.OLAS !== undefined &&
+      totalOlasStakedBalance !== undefined
+    ) {
       return (
-        <AlertInsufficientMigrationFunds totalOlasBalance={totalOlasBalance!} />
+        <AlertInsufficientMigrationFunds
+          masterSafeOlasBalance={safeBalance.OLAS}
+          stakedOlasBalance={totalOlasStakedBalance}
+          totalOlasRequiredForStaking={minimumOlasRequiredToMigrate}
+        />
       );
     }
 
@@ -191,10 +211,12 @@ export const StakingContractSection = ({
   }, [
     isSelected,
     isBalanceLoaded,
-    totalOlasBalance,
     hasEnoughSlots,
     hasEnoughOlasToMigrate,
     isAppVersionCompatible,
+    safeBalance?.OLAS,
+    totalOlasStakedBalance,
+    minimumOlasRequiredToMigrate,
   ]);
 
   const contractTagStatus = useMemo(() => {
@@ -213,40 +235,41 @@ export const StakingContractSection = ({
   }, [activeStakingProgram, defaultStakingProgram, stakingProgram]);
 
   return (
-    <CardSection
-      style={
-        isSelected || !activeStakingProgram
-          ? { background: token.colorBgContainerDisabled }
-          : {}
-      }
-      borderbottom="true"
-      vertical
-      gap={16}
-    >
-      {/* Title */}
-      <Flex gap={12}>
-        <Typography.Title
-          level={5}
-          className="m-0"
-        >{`${activeStakingProgramMeta.name} contract`}</Typography.Title>
-        {/* TODO: pass `status` attribute */}
-        <StakingContractTag status={contractTagStatus} />
-        {!isSelected && (
-          // here instead of isSelected we should check that the contract is not the old staking contract
-          // but the one from staking factory (if we want to open govern)
-          <a
-            href={`https://gnosisscan.io/address/${contractAddress}`}
-            target="_blank"
-            className="ml-auto"
-          >
-            Contract details {UNICODE_SYMBOLS.EXTERNAL_LINK}
-          </a>
-        )}
-      </Flex>
-
-      {/* TODO: fix */}
-
-      {/* Contract details
+    <>
+      <CardSection
+        style={
+          isSelected || !activeStakingProgram
+            ? { background: token.colorBgContainerDisabled }
+            : {}
+        }
+        bordertop="true"
+        borderbottom="true"
+        vertical
+        gap={16}
+      >
+        {/* Title */}
+        <Flex gap={12}>
+          <Typography.Title
+            level={5}
+            className="m-0"
+          >{`${activeStakingProgramMeta.name} contract`}</Typography.Title>
+          <StakingContractTag status={contractTagStatus} />
+          {!isSelected && (
+            // here instead of isSelected we should check that the contract is not the old staking contract
+            // but the one from staking factory (if we want to open govern)
+            <a
+              href={`https://gnosisscan.io/address/${contractAddress}`}
+              target="_blank"
+              className="ml-auto"
+            >
+              Contract details {UNICODE_SYMBOLS.EXTERNAL_LINK}
+            </a>
+          )}
+        </Flex>
+
+        {/* TODO: redisplay once bugs resolved */}
+
+        {/* Contract details
       {stakingContractInfo?.availableRewards && (
         <ContractParameter
           label="Rewards per work period"
@@ -261,41 +284,55 @@ export const StakingContractSection = ({
         />
       )} */}
 
-      {cantMigrateAlert}
-      {/* Switch to program button */}
-      {!isSelected && (
-        <Popover content={!isMigratable && cantMigrateReason}>
+        {cantMigrateAlert}
+        {/* Switch to program button */}
+        {
+          <Popover content={!isMigratable && cantMigrateReason}>
+            <Button
+              type="primary"
+              size="large"
+              disabled={!isMigratable}
+              onClick={async () => {
+                setIsServicePollingPaused(true);
+                try {
+                  setServiceStatus(DeploymentStatus.DEPLOYING);
+                  goto(Pages.Main);
+                  // TODO: cleanup and call via hook
+
+                  await ServicesService.createService({
+                    stakingProgram,
+                    serviceTemplate,
+                    deploy: true,
+                  });
+
+                  await updateStakingProgram();
+
+                  setMigrationModalOpen(true);
+                } catch (error) {
+                  console.error(error);
+                } finally {
+                  setIsServicePollingPaused(false);
+                  updateServiceStatus();
+                }
+              }}
+            >
+              Switch to {activeStakingProgramMeta?.name} contract
+            </Button>
+          </Popover>
+        }
+        {stakingProgram === StakingProgram.Beta && (
           <Button
-            type="primary"
+            type="default"
             size="large"
-            disabled={!isMigratable}
-            onClick={async () => {
-              setIsServicePollingPaused(true);
-              try {
-                setServiceStatus(DeploymentStatus.DEPLOYING);
-                goto(Pages.Main);
-                // TODO: cleanup and call via hook
-
-                await ServicesService.createService({
-                  stakingProgram,
-                  serviceTemplate,
-                  deploy: true,
-                }).then(() => {
-                  updateStakingProgram().then(() =>
-                    setMigrationModalOpen(true),
-                  );
-                });
-              } catch (error) {
-                console.error(error);
-              } finally {
-                setIsServicePollingPaused(false);
-              }
-            }}
+            onClick={() => setIsFundingSectionOpen((prev) => !prev)}
           >
-            Switch to {activeStakingProgramMeta?.name} contract
+            {isFundingSectionOpen ? 'Hide' : 'Show'} address to fund
           </Button>
-        </Popover>
+        )}
+      </CardSection>
+      {stakingProgram === StakingProgram.Beta && isFundingSectionOpen && (
+        <OpenAddFundsSection />
       )}
-    </CardSection>
+    </>
   );
 };