feat: add funding section to beta contract section

valory-xyz · Aug 21, 2024 · c585d59 · c585d59
1 parent 1d32bb9
commit c585d59
Showing 1 changed file with 91 additions and 68 deletions.
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 { token } = useToken();
   const { totalOlasBalance, isBalanceLoaded } = useBalance();
   const { isServiceStakedForMinimumDuration } = useStakingContractInfo();
+  const [isFundingSectionOpen, setIsFundingSectionOpen] = useState(false);
 
   const stakingContractInfoForStakingProgram =
     stakingContractInfoRecord?.[stakingProgram];
@@ -213,40 +219,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 +268,57 @@ 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>
+    </>
   );
 };