Merge pull request #287 from valory-xyz/feat/add-funding-section-to-s…

…taking-manage Add funding section to Staking Management page
valory-xyz · Aug 28, 2024 · 6286fd0 · 6286fd0
2 parents 31ac520 + b3d4356
commit 6286fd0
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 100 deletions.
diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/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 />
     </>
   );
 };

diff --git a/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx b/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx
@@ -24,12 +24,11 @@ export const AlertInsufficientMigrationFunds = ({
       message={
         <Flex vertical gap={4}>
           <Text className="font-weight-600">
-            Additional {requiredOlasDeposit} OLAS are required to switch
+            An additional {requiredOlasDeposit} OLAS is required to switch
           </Text>
-
           <Text>
             Add <strong>{requiredOlasDeposit} OLAS</strong> to your account to
-            meet the contract requirements and be able to switch.
+            meet the contract requirements and switch.
           </Text>
         </Flex>
       }

diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/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,8 +60,12 @@ 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 } =
@@ -69,6 +74,7 @@ export const StakingContractSection = ({
   const { safeBalance, totalOlasStakedBalance, isBalanceLoaded } = useBalance();
   const { isServiceStakedForMinimumDuration, stakingContractInfoRecord } =
     useStakingContractInfo();
+  const [isFundingSectionOpen, setIsFundingSectionOpen] = useState(false);
 
   const stakingContractInfoForStakingProgram =
     stakingContractInfoRecord?.[stakingProgram];
@@ -229,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"
@@ -277,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>
+    </>
   );
 };