feat: countdown to first cycle

jbx-protocol · Nov 27, 2024 · 8f12477 · 8f12477
1 parent 9071739
commit 8f12477
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 11 deletions.
diff --git a/src/components/Project/ProjectTabs/CyclesPayoutsTab/CountdownCallout.tsx b/src/components/Project/ProjectTabs/CyclesPayoutsTab/CountdownCallout.tsx
@@ -0,0 +1,24 @@
+import { ClockIcon } from '@heroicons/react/24/outline'
+import { Trans } from '@lingui/macro'
+import { useCountdownClock } from 'components/Project/hooks/useCountdownClock'
+import { twMerge } from 'tailwind-merge'
+
+export function CountdownCallout({
+  cycleStart,
+}: {
+  cycleStart: number | undefined
+}) {
+  const { remainingTimeText } = useCountdownClock(cycleStart)
+
+  return (
+    <div
+      className={twMerge(
+        'flex items-center gap-2 rounded-lg py-2 px-3.5 text-sm font-medium shadow-sm',
+        'border-bluebs-100 bg-bluebs-25 text-bluebs-700 dark:border-bluebs-800 dark:bg-bluebs-950 dark:text-bluebs-400',
+      )}
+    >
+      <ClockIcon className="h-5 w-5" />
+      <Trans>Starts in {remainingTimeText}</Trans>
+    </div>
+  )
+}
diff --git a/src/locales/messages.pot b/src/locales/messages.pot
@@ -3989,6 +3989,9 @@ msgstr ""
 msgid "tokens per ETH paid"
 msgstr ""
 
+msgid "Starts in {remainingTimeText}"
+msgstr ""
+
 msgid "Congratulations!"
 msgstr ""
 

diff --git a/...ponents/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/CyclesPayoutsPanel.tsx b/...ponents/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/CyclesPayoutsPanel.tsx
@@ -1,7 +1,7 @@
 import { Tab } from '@headlessui/react'
 import { t } from '@lingui/macro'
 import { CyclesTab } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CyclesTab'
-import { useMemo } from 'react'
+import { useProjectContext } from '../../hooks/useProjectContext'
 import { CurrentUpcomingSubPanel } from './components/CurrentUpcomingSubPanel'
 import { HistorySubPanel } from './components/HistorySubPanel'
 
@@ -11,14 +11,15 @@ type CyclesSubPanel = {
 }
 
 export const CyclesPayoutsPanel = () => {
-  const tabs: CyclesSubPanel[] = useMemo(
-    () => [
-      { id: 'current', name: t`Current` },
-      { id: 'upcoming', name: t`Upcoming` },
-      { id: 'history', name: t`History` },
-    ],
-    [],
-  )
+  const { fundingCycle } = useProjectContext()
+
+  const tabs: CyclesSubPanel[] = [
+    // Don't show the current tab if there is no current cycle
+    fundingCycle?.number.gt(0) && { id: 'current', name: t`Current` },
+    { id: 'upcoming', name: t`Upcoming` },
+    { id: 'history', name: t`History` },
+  ].filter(Boolean) as CyclesSubPanel[]
+
   return (
     <Tab.Group as="div" className="mx-auto flex w-full flex-col gap-5">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">

diff --git a/...ect/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx b/...ect/ProjectDashboard/components/CyclesPayoutsPanel/components/CurrentUpcomingSubPanel.tsx
@@ -1,5 +1,6 @@
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { Trans, t } from '@lingui/macro'
+import { CountdownCallout } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CountdownCallout'
 import { currentCycleRemainingLengthTooltip } from 'components/Project/ProjectTabs/CyclesPayoutsTab/CyclesPanelTooltips'
 import { UpcomingCycleChangesCallout } from 'components/Project/ProjectTabs/CyclesPayoutsTab/UpcomingCycleChangesCallout'
 import { TitleDescriptionDisplayCard } from 'components/Project/ProjectTabs/TitleDescriptionDisplayCard'
@@ -104,8 +105,13 @@ export const CurrentUpcomingSubPanel = ({
   return (
     <div>
       <div className="flex flex-col gap-4">
-        {id === 'upcoming' && (
-          <UpcomingCycleChangesCallout 
+        {/* If the upcoming tab is selected and its the first cycle, it means they're
+        currently in Cycle 0 (i.e. the project hasn't 'started' yet.) */}
+        {id === 'upcoming' && info.cycleNumber === 1 && (
+          <CountdownCallout cycleStart={info.start?.toNumber()} />
+        )}
+        {id === 'upcoming' && info.cycleNumber && info.cycleNumber > 1 && (
+          <UpcomingCycleChangesCallout
             text={upcomingCycleChangesCalloutText}
             hasChanges={hasChanges}
             loading={loading}

diff --git a/...roject/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.ts b/...roject/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.ts
@@ -40,6 +40,9 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     return upcomingFundingCycle?.duration?.isZero() ?? true
   }, [fundingCycle?.duration, type, upcomingFundingCycle?.duration])
 
+  const start =
+    type === 'current' ? fundingCycle?.start : upcomingFundingCycle?.start
+
   const upcomingCycleLength = useMemo(() => {
     if (!upcomingFundingCycle) return
     if (cycleUnlocked) return '-'
@@ -82,6 +85,7 @@ export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
     cycleLength: upcomingCycleLength,
     cycleUnlocked,
     currentCycleUnlocked,
+    start,
     hasPendingConfiguration:
       /**
        * If a cycle is unlocked, it may have a pending change.