add dashboard clock (#4225)

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   },
   "scss.lint.unknownAtRules": "ignore",
   "files.exclude": {

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

@@ -11,6 +11,7 @@ import { NftRewardsCard } from './components/NftRewardsCard/NftRewardsCard'
 import { PayProjectCard } from './components/PayProjectCard/PayProjectCard'
 import { ProjectCartProvider } from './components/ProjectCartProvider/ProjectCartProvider'
 import { ProjectHeader } from './components/ProjectHeader/ProjectHeader'
+import { ProjectHeaderCountdown } from './components/ProjectHeaderCountdown'
 import { ProjectTabs } from './components/ProjectTabs/ProjectTabs'
 import { ProjectUpdatesProvider } from './components/ProjectUpdatesProvider/ProjectUpdatesProvider'
 import { SuccessPayView } from './components/SuccessPayView/SuccessPayView'
@@ -33,7 +34,10 @@ export const ProjectDashboard = () => {
                 <SuccessPayView />
               ) : (
                 <>
-                  <CoverPhoto />
+                  <div className="relative w-full">
+                    <CoverPhoto />
+                    <ProjectHeaderCountdown />
+                  </div>
                   <div className="flex w-full justify-center md:px-6">
                     <div className="flex w-full max-w-6xl flex-col">
                       <ProjectHeader className="mt-12 px-4 md:mt-4 md:px-0" />

src/components/v2v3/V2V3Project/ProjectDashboard/components/CoverPhoto/CoverPhoto.tsx

@@ -35,7 +35,7 @@ export const CoverPhoto = () => {
             alt={coverImageAltText}
           />
           {applyDarkerCoverPhoto && (
-            <div className="absolute h-70 w-full bg-black opacity-30" />
+            <div className="absolute h-70 w-full bg-black opacity-30 drop-shadow" />
           )}
         </>
       )}

src/components/v2v3/V2V3Project/ProjectDashboard/components/FundingCycleCountdown/FundingCycleCountdownProvider.tsx

@@ -4,11 +4,15 @@ import { createContext } from 'react'
 
 type FundingCycleCountdownContextType = {
   timeRemainingText: string
+  endEpochSeconds: number
+  secondsRemaining: number
 }
 
 export const FundingCycleCountdownContext =
   createContext<FundingCycleCountdownContextType>({
     timeRemainingText: '0d 0h 0m 0s',
+    endEpochSeconds: 0,
+    secondsRemaining: 0,
   })
 
 export const FundingCycleCountdownProvider = ({
@@ -20,13 +24,16 @@ export const FundingCycleCountdownProvider = ({
 
   const endEpochSeconds = fundingCycle
     ? fundingCycle.start.add(fundingCycle.duration).toNumber()
-    : undefined
+    : 0
 
-  const remainingTimeText = useCountdownClock(endEpochSeconds)
+  const { remainingTimeText, secondsRemaining } =
+    useCountdownClock(endEpochSeconds)
   return (
     <FundingCycleCountdownContext.Provider
       value={{
         timeRemainingText: remainingTimeText,
+        endEpochSeconds,
+        secondsRemaining,
       }}
     >
       {children}

src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx

@@ -0,0 +1,61 @@
+import { ReactNode, useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { useFundingCycleCountdown } from '../hooks/useFundingCycleCountdown'
+import { useProjectMetadata } from '../hooks/useProjectMetadata'
+
+const RS_PROJECT_ID = 618
+
+export type ProjectHeaderCountdownProps = {
+  className?: string
+}
+
+export const ProjectHeaderCountdown: React.FC<ProjectHeaderCountdownProps> = ({
+  className,
+}) => {
+  const { projectId } = useProjectMetadata()
+  const { secondsRemaining } = useFundingCycleCountdown()
+
+  const { days, hours, minutes, seconds } = useMemo(() => {
+    const days = Math.floor(secondsRemaining / (3600 * 24))
+    const hours = Math.floor((secondsRemaining % (3600 * 24)) / 3600)
+    const minutes = Math.floor((secondsRemaining % 3600) / 60)
+    const seconds = Math.floor(secondsRemaining % 60)
+    return { days, hours, minutes, seconds }
+  }, [secondsRemaining])
+
+  if (projectId !== RS_PROJECT_ID) return null
+
+  if (secondsRemaining === 0) return null
+
+  return (
+    <div
+      className={twMerge(
+        'absolute bottom-5 left-1/2 mx-auto flex w-full max-w-6xl -translate-x-1/2 items-center justify-end pr-4 md:pr-5 xl:pr-0',
+        className,
+      )}
+    >
+      <div className="mr-3 text-lg text-white">Closing in</div>
+      <div className="flex gap-3">
+        <CountdownCard label="DAYS" unit={days} />
+        <CountdownCard label="HRS" unit={hours} />
+        <CountdownCard label="MINS" unit={minutes} />
+        <CountdownCard label="SECS" unit={seconds} />
+      </div>
+    </div>
+  )
+}
+
+export const CountdownCard = ({
+  label,
+  unit,
+}: {
+  label: ReactNode
+  unit: number
+}) => (
+  <div className="flex w-11 flex-1 flex-col items-center rounded-lg border border-smoke-75 bg-smoke-50 py-1 px-1.5 text-black drop-shadow dark:border-slate-400 dark:bg-slate-700 dark:text-white">
+    <div className="text-xl">{unit}</div>
+    <div className="text-xs font-medium text-grey-500 dark:text-slate-200">
+      {label}
+    </div>
+  </div>
+)

src/components/v2v3/V2V3Project/ProjectDashboard/hooks/useCountdownClock.ts

@@ -6,16 +6,18 @@ import { timeSecondsToDateString } from '../utils/timeSecondsToDateString'
  */
 export const useCountdownClock = (endSeconds: number | undefined) => {
   const [remainingTime, setRemainingTime] = useState<string>('')
+  const [secondsRemaining, setSecondsRemaining] = useState<number>(0)
   useEffect(() => {
     if (!endSeconds) return
     const fn = () => {
       const now = Date.now() / 1000
       const remaining = endSeconds - now > 0 ? endSeconds - now : 0
+      setSecondsRemaining(remaining)
       setRemainingTime(timeSecondsToDateString(remaining))
     }
     fn()
     const timer = setInterval(fn, 1000)
     return () => clearInterval(timer)
   }, [endSeconds])
-  return remainingTime
+  return { remainingTimeText: remainingTime, secondsRemaining }
 }