refactor: magic moment popup and few other components (#491)

* refactor: update StakingProgramProvider to use service ID for fetching active staking program * refactor: clean up imports and enhance staking program handling in MainPage components
valory-xyz · Nov 22, 2024 · 9141cf7 · 9141cf7
1 parent 8af742d
commit 9141cf7
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 59 deletions.
diff --git a/frontend/components/MainPage/index.tsx b/frontend/components/MainPage/index.tsx
@@ -2,10 +2,17 @@ import { QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { Button, Card, Flex } from 'antd';
 
 import { Pages } from '@/enums/Pages';
+import { StakingProgramId } from '@/enums/StakingProgram';
 // import { StakingProgramId } from '@/enums/StakingProgram';
 // import { useMasterSafe } from '@/hooks/useMasterSafe';
 import { usePageState } from '@/hooks/usePageState';
+import {
+  useStakingContractContext,
+  useStakingContractDetails,
+} from '@/hooks/useStakingContractDetails';
+import { useStakingProgram } from '@/hooks/useStakingProgram';
 
+// import { useMasterWalletContext } from '@/hooks/useWallet';
 import { MainHeader } from './header';
 import { AddFundsSection } from './sections/AddFundsSection';
 import { AlertSections } from './sections/AlertSections';
@@ -18,22 +25,22 @@ import { StakingContractUpdate } from './sections/StakingContractUpdate';
 
 export const Main = () => {
   const { goto } = usePageState();
-  // const { backupSafeAddress } = useMasterSafe();
+  // const { backupSafeAddress } = useMasterWalletContext();
   // const { refetch: updateServicesState } = useServices();
   // const {
   //   updateBalances,
   //   isLoaded: isBalanceLoaded,
   //   setIsLoaded: setIsBalanceLoaded,
   // } = useBalanceContext();
-  // const { activeStakingProgramId } = useStakingProgram();
+  const { activeStakingProgramId } = useStakingProgram();
 
   // TODO: reintroduce later,  non critical
-  // const { isAllStakingContractDetailsRecordLoaded } =
-  //   useStakingContractContext();
+  const { isAllStakingContractDetailsRecordLoaded } =
+    useStakingContractContext();
 
-  // const { hasEnoughServiceSlots } = useStakingContractDetails(
-  //   activeStakingProgramId,
-  // );
+  const { hasEnoughServiceSlots } = useStakingContractDetails(
+    activeStakingProgramId,
+  );
 
   // TODO: reintroduce later,  non critical
 
@@ -51,11 +58,11 @@ export const Main = () => {
 
   // TODO: reintroduce later,  non critical
 
-  // const hideMainOlasBalanceTopBorder = [
-  //   !backupSafeAddress, // TODO: update this condition to check backup safe relative to selectedService
-  //   activeStakingProgramId === StakingProgramId.Alpha,
-  //   isAllStakingContractDetailsRecordLoaded && !hasEnoughServiceSlots,
-  // ].some((condition) => !!condition);
+  const hideMainOlasBalanceTopBorder = [
+    // !backupSafeAddress, // TODO: update this condition to check backup safe relative to selectedService
+    activeStakingProgramId === StakingProgramId.PearlAlpha,
+    isAllStakingContractDetailsRecordLoaded && !hasEnoughServiceSlots,
+  ].some((condition) => !!condition);
 
   return (
     <Card
@@ -86,8 +93,7 @@ export const Main = () => {
     >
       <Flex vertical>
         <AlertSections />
-        <MainOlasBalance isBorderTopVisible={false} />
-        {/* <MainOlasBalance isBorderTopVisible={!hideMainOlasBalanceTopBorder} /> */}
+        <MainOlasBalance isBorderTopVisible={!hideMainOlasBalanceTopBorder} />
         <RewardsSection />
         <KeepAgentRunningSection />
         <StakingContractUpdate />

diff --git a/frontend/components/MainPage/sections/OlasBalanceSection.tsx b/frontend/components/MainPage/sections/OlasBalanceSection.tsx
@@ -1,18 +1,18 @@
-// import { RightOutlined } from '@ant-design/icons';
+import { RightOutlined } from '@ant-design/icons';
 import { Flex, Skeleton, Typography } from 'antd';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { Pages } from '@/enums/Pages';
 import { TokenSymbol } from '@/enums/Token';
-// import { Pages } from '@/enums/PageState';
 import {
   useBalanceContext,
   useMasterBalances,
   useServiceBalances,
 } from '@/hooks/useBalanceContext';
+import { usePageState } from '@/hooks/usePageState';
 import { useServices } from '@/hooks/useServices';
-// import { usePageState } from '@/hooks/usePageState';
 import { balanceFormat } from '@/utils/numberFormatters';
 
 import { CardSection } from '../../styled/CardSection';
@@ -34,7 +34,7 @@ export const MainOlasBalance = ({
   const { serviceStakedBalances, serviceWalletBalances } = useServiceBalances(
     selectedService?.service_config_id,
   );
-  // const { goto } = usePageState();
+  const { goto } = usePageState();
 
   const displayedBalance = useMemo(() => {
     // olas across master wallets, safes and eoa
@@ -92,14 +92,14 @@ export const MainOlasBalance = ({
             <span className="balance-currency">OLAS</span>
           </Flex>
 
-          {/* <Text
+          <Text
             type="secondary"
             className="text-sm pointer hover-underline"
             onClick={() => goto(Pages.YourWalletBreakdown)}
           >
             See breakdown
             <RightOutlined style={{ fontSize: 12, paddingLeft: 6 }} />
-          </Text> */}
+          </Text>
         </Flex>
       ) : (
         <Skeleton.Input active size="large" style={{ margin: '4px 0' }} />

diff --git a/frontend/components/MainPage/sections/RewardsSection/index.tsx b/frontend/components/MainPage/sections/RewardsSection/index.tsx
@@ -1,12 +1,13 @@
 import { Flex, Skeleton, Tag, Typography } from 'antd';
 
+import { NA } from '@/constants/symbols';
 import { useBalanceContext } from '@/hooks/useBalanceContext';
 import { useReward } from '@/hooks/useReward';
 import { balanceFormat } from '@/utils/numberFormatters';
 
 import { CardSection } from '../../../styled/CardSection';
-// import { RewardsStreak } from './RewardsStreak';
-// import { NotifyRewardsModal } from './NotifyRewardsModal';
+import { NotifyRewardsModal } from './NotifyRewardsModal';
+import { RewardsStreak } from './RewardsStreak';
 import { StakingRewardsThisEpoch } from './StakingRewardsThisEpoch';
 
 const { Text } = Typography;
@@ -19,12 +20,11 @@ const Loader = () => (
 );
 
 const getFormattedReward = (reward: number | undefined) =>
-  reward === undefined ? '--' : `~${balanceFormat(reward, 2)}`;
+  reward === undefined ? NA : `~${balanceFormat(reward, 2)}`;
 
 const DisplayRewards = () => {
   const { availableRewardsForEpochEth, isEligibleForRewards } = useReward();
   const { isLoaded } = useBalanceContext();
-
   const reward = getFormattedReward(availableRewardsForEpochEth);
 
   return (
@@ -55,7 +55,7 @@ const DisplayRewards = () => {
 export const RewardsSection = () => (
   <>
     <DisplayRewards />
-    {/* <RewardsStreak /> */}
-    {/* <NotifyRewardsModal /> */}
+    <RewardsStreak />
+    <NotifyRewardsModal />
   </>
 );
diff --git a/frontend/components/MainPage/sections/StakingContractUpdate.tsx b/frontend/components/MainPage/sections/StakingContractUpdate.tsx
@@ -2,9 +2,9 @@ import { RightOutlined } from '@ant-design/icons';
 import { Button, Flex, Skeleton, Typography } from 'antd';
 import { useMemo } from 'react';
 
-import { DeploymentStatus } from '@/client';
-import { STAKING_PROGRAM_META } from '@/constants/stakingProgramMeta';
-import { Pages } from '@/enums/PageState';
+import { MiddlewareDeploymentStatus } from '@/client';
+import { NA } from '@/constants/symbols';
+import { Pages } from '@/enums/Pages';
 import { usePageState } from '@/hooks/usePageState';
 import { useServices } from '@/hooks/useServices';
 import { useStakingContractContext } from '@/hooks/useStakingContractDetails';
@@ -16,28 +16,21 @@ const { Text } = Typography;
 
 export const StakingContractUpdate = () => {
   const { goto } = usePageState();
-  const {
-    isActiveStakingProgramLoaded,
-    activeStakingProgramMeta,
-    defaultStakingProgramId,
-  } = useStakingProgram();
+  const { isActiveStakingProgramLoaded, activeStakingProgramMeta } =
+    useStakingProgram();
 
   const { isAllStakingContractDetailsRecordLoaded } =
     useStakingContractContext();
-  const { serviceStatus } = useServices();
+  const { selectedService } = useServices();
+  const serviceStatus = selectedService?.deploymentStatus;
 
   const serviceIsTransitioning = useMemo(
     () =>
-      serviceStatus === DeploymentStatus.DEPLOYING ||
-      serviceStatus === DeploymentStatus.STOPPING,
+      serviceStatus === MiddlewareDeploymentStatus.DEPLOYING ||
+      serviceStatus === MiddlewareDeploymentStatus.STOPPING,
     [serviceStatus],
   );
 
-  const stakingContractName = useMemo(() => {
-    if (activeStakingProgramMeta) return activeStakingProgramMeta.name;
-    return STAKING_PROGRAM_META[DEFAULT_STAKING_PROGRAM_ID].name;
-  }, [activeStakingProgramMeta]);
-
   const gotoManageStakingButton = useMemo(() => {
     if (!isActiveStakingProgramLoaded) return <Skeleton.Input />;
     return (
@@ -49,7 +42,7 @@ export const StakingContractUpdate = () => {
           !isAllStakingContractDetailsRecordLoaded || serviceIsTransitioning
         }
       >
-        {stakingContractName}
+        {activeStakingProgramMeta?.name || NA}
         <RightOutlined />
       </Button>
     );
@@ -58,7 +51,7 @@ export const StakingContractUpdate = () => {
     isActiveStakingProgramLoaded,
     isAllStakingContractDetailsRecordLoaded,
     serviceIsTransitioning,
-    stakingContractName,
+    activeStakingProgramMeta?.name,
   ]);
 
   return (

diff --git a/frontend/context/RewardProvider.tsx b/frontend/context/RewardProvider.tsx
@@ -50,9 +50,8 @@ const useStakingRewardsDetails = () => {
   const { isOnline } = useContext(OnlineStatusContext);
   const { activeStakingProgramId } = useContext(StakingProgramContext);
 
-  const { selectedService, isFetched: isLoaded } = useServices();
-  const serviceConfigId =
-    isLoaded && selectedService ? selectedService?.service_config_id : '';
+  const { selectedService } = useServices();
+  const serviceConfigId = selectedService?.service_config_id;
   const { service } = useService({ serviceConfigId });
 
   // fetch chain data from the selected service
@@ -63,7 +62,7 @@ const useStakingRewardsDetails = () => {
   return useQuery({
     queryKey: REACT_QUERY_KEYS.REWARDS_KEY(
       currentChainId,
-      serviceConfigId,
+      serviceConfigId!,
       activeStakingProgramId!,
       multisig!,
       token!,
@@ -79,7 +78,12 @@ const useStakingRewardsDetails = () => {
       );
       return StakingRewardsInfoSchema.parse(response);
     },
-    enabled: !!isOnline && !!activeStakingProgramId && !!multisig && !!token,
+    enabled:
+      !!isOnline &&
+      !!serviceConfigId &&
+      !!activeStakingProgramId &&
+      !!multisig &&
+      !!token,
     refetchInterval: isOnline ? FIVE_SECONDS_INTERVAL : false,
     refetchOnWindowFocus: false,
   });

diff --git a/frontend/context/StakingProgramProvider.tsx b/frontend/context/StakingProgramProvider.tsx
@@ -78,9 +78,11 @@ export const StakingProgramProvider = ({ children }: PropsWithChildren) => {
 
   // fetch chain data from the selected service
   const chainId = selectedService?.home_chain_id;
-  const chainData = chainId ? service?.chain_configs[chainId].chain_data : null;
+  const serviceId = chainId
+    ? service?.chain_configs[chainId].chain_data?.token
+    : null;
   const { isLoading: isStakingProgramsLoading, data: activeStakingProgramId } =
-    useGetActiveStakingProgramId(chainData?.token);
+    useGetActiveStakingProgramId(serviceId);
 
   return (
     <StakingProgramContext.Provider

diff --git a/frontend/hooks/useRewardsHistory.ts b/frontend/hooks/useRewardsHistory.ts
@@ -233,14 +233,9 @@ const useContractCheckpoints = (chainId: ChainId, serviceId: Maybe<number>) => {
 };
 
 export const useRewardsHistory = () => {
-  const {
-    selectedService,
-    selectedAgentConfig,
-    isFetched: isLoaded,
-  } = useServices();
+  const { selectedService, selectedAgentConfig } = useServices();
   const { homeChainId } = selectedAgentConfig;
-  const serviceConfigId =
-    selectedService?.service_config_id;
+  const serviceConfigId = selectedService?.service_config_id;
   const { service } = useService({ serviceConfigId });
   const serviceId = service?.chain_configs[homeChainId].chain_data?.token;
 

diff --git a/frontend/hooks/useStakingContractDetails.ts b/frontend/hooks/useStakingContractDetails.ts
@@ -31,7 +31,7 @@ export const useStakingContractContext = () => {
 
 /**
  * Returns ACTIVE staking contract details
- * Has staked service speficic information that `useStakingContractDetails` does not have
+ * Has staked service specific information that `useStakingContractDetails` does not have
 
  * @note requires serviceConfigId once multiple instances are supported
  */