fix: unlocked cycle upcoming state (#4193)

Author: tomquirk

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx

@@ -63,16 +63,18 @@ export const CurrentUpcomingSubPanel = ({
     </Trans>
   )
 
-  if (
+  const hasNoUpcomingCycle =
     info.type === 'upcoming' &&
     info.currentCycleUnlocked &&
     /**
      * Always show 'upcoming' tab if it's FC 1
      * (which happens when Scheduled Launch is used,
      * mustStartAtOrAfter is in the future)
      */
-    info.cycleNumber !== 1
-  ) {
+    info.cycleNumber !== 1 &&
+    !info.hasPendingConfiguration
+
+  if (hasNoUpcomingCycle) {
     return (
       <div>
         <div

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.ts

@@ -4,6 +4,7 @@ import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/
 import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
 import { timeSecondsToDateString } from 'components/v2v3/V2V3Project/ProjectDashboard/utils/timeSecondsToDateString'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
+import { BallotState } from 'models/v2v3/fundingCycle'
 import { useMemo } from 'react'
 
 export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
@@ -15,8 +16,14 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
   const {
     data: upcomingFundingCycleData,
     loading: upcomingFundingCycleLoading,
-  } = useProjectUpcomingFundingCycle({ projectId })
-  const [upcomingFundingCycle] = upcomingFundingCycleData ?? []
+  } = useProjectUpcomingFundingCycle({
+    projectId,
+    /**
+     * if the current cycle is unlocked, force the use of latestConfiguredFundingCycleOf.
+     */
+    useLatestConfigured: fundingCycle?.duration?.isZero() ?? false,
+  })
+  const [upcomingFundingCycle, , ballotState] = upcomingFundingCycleData ?? []
   const { timeRemainingText } = useFundingCycleCountdown()
 
   const cycleNumber = useMemo(() => {
@@ -33,12 +40,6 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     return upcomingFundingCycle?.duration?.isZero() ?? true
   }, [fundingCycle?.duration, type, upcomingFundingCycle?.duration])
 
-  /** Determines if the CURRENT cycle is unlocked.
-   * This is used to check if the upcoming cycle can start at any time. */
-  const currentCycleUnlocked = useMemo(() => {
-    return fundingCycle?.duration?.isZero() ?? true
-  }, [fundingCycle?.duration])
-
   const upcomingCycleLength = useMemo(() => {
     if (!upcomingFundingCycle) return
     if (cycleUnlocked) return '-'
@@ -48,15 +49,12 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     )
   }, [cycleUnlocked, upcomingFundingCycle])
 
-  const status = useMemo(() => {
-    if (cycleUnlocked) return t`Unlocked`
-    return t`Locked`
-  }, [cycleUnlocked])
+  /** Determines if the CURRENT cycle is unlocked.
+   * This is used to check if the upcoming cycle can start at any time. */
+  const currentCycleUnlocked = fundingCycle?.duration?.isZero() ?? true
 
-  const remainingTime = useMemo(() => {
-    if (cycleUnlocked) return '-'
-    return timeRemainingText
-  }, [cycleUnlocked, timeRemainingText])
+  const status = cycleUnlocked ? t`Unlocked` : t`Locked`
+  const remainingTime = cycleUnlocked ? '-' : timeRemainingText
 
   // Short circuit current for faster loading
   if (type === 'current') {
@@ -84,5 +82,14 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     cycleLength: upcomingCycleLength,
     cycleUnlocked,
     currentCycleUnlocked,
+    hasPendingConfiguration:
+      /**
+       * If a cycle is unlocked, it may have a pending change.
+       * The only way it would, is if the ballot state of the latestConfiguredFC is `approved`.
+       */
+      cycleUnlocked &&
+      typeof ballotState !== 'undefined' &&
+      ballotState !== null &&
+      ballotState === BallotState.approved,
   }
 }

src/hooks/v2v3/contractReader/useProjectUpcomingFundingCycle.ts

@@ -19,8 +19,10 @@ type UpcomingFundingCycleDataType = [
  */
 export function useProjectUpcomingFundingCycle({
   projectId,
+  useLatestConfigured, // force latestConfiguredFundingCycleOf to be returned.
 }: {
   projectId: number | undefined
+  useLatestConfigured?: boolean
 }): ContractReadResult<UpcomingFundingCycleDataType> {
   /**
    * Get Latest Configured Funding Cycle.
@@ -38,8 +40,9 @@ export function useProjectUpcomingFundingCycle({
     latestConfiguredFundingCycleBallotState,
   ] = latestConfiguredFundingCycleResponse ?? []
   const isLatestConfiguredActive =
-    latestConfiguredFundingCycle &&
-    latestConfiguredFundingCycleBallotState === BallotState.active
+    (latestConfiguredFundingCycle &&
+      latestConfiguredFundingCycleBallotState === BallotState.active) ||
+    useLatestConfigured
 
   /**
    * Get Queued Configured Funding Cycle, *only if* latestConfiguredFundingCycle isn't active.