Changes according to CR

Author: Filip-L

src/components/Countdown.tsx

@@ -28,20 +28,15 @@ const Countdown: React.FC = () => {
         minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
           .toString()
           .padStart(2, '0'),
-        seconds: Math.floor((difference % (1000 * 60)) / 1000)
-          .toString()
-          .padStart(2, '0'),
       }
     }
 
     return timeLeft
   }
 
   const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft())
-  const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {
-    setIsMounted(true)
     const timer = setInterval(() => {
       setTimeLeft(calculateTimeLeft())
     }, 1000)
@@ -51,25 +46,21 @@ const Countdown: React.FC = () => {
     }
   }, [])
 
-  if (!isMounted) {
-    return null
-  }
-
-  if (timeLeft.seconds === undefined) {
+  if (timeLeft.minutes === undefined) {
     return null
   }
 
   return (
-    <div className="px-6 pb-6">
+    <div className="px-6">
       <p
         className="cursor-default"
         title="Using Client smart contract is available only for new applications. Select Contract as allocation type to start using it"
       >
-        Direct client allocation will be deprecated in{' '}
-        <span className="inline-block text-center" style={{ width: '90px' }}>
-          {timeLeft.days}:{timeLeft.hours}:{timeLeft.minutes}:{timeLeft.seconds}
-        </span>
-        . Start using the Client smart contract today.
+        Direct allocation of DataCap will be deprecated in{' '}
+        <span className="whitespace-nowrap">
+          {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m
+        </span>{' '}
+        (June 1). Start using the Client smart contract today.
       </p>
     </div>
   )

src/components/DatacapAmountModel.tsx

@@ -20,6 +20,7 @@ import { Button } from '@/components/ui/button'
 import { AllocationUnit, type Allocation, type Application } from '@/type'
 import { type ReactNode, useState } from 'react'
 import { bytesToiB } from '@/lib/utils'
+import Countdown from './Countdown'
 
 type AllocationType = 'directly' | 'contract'
 
@@ -78,6 +79,7 @@ const DatacapAmountModal = ({
   return (
     <Dialog open={allocationConfig.isDialogOpen} onClose={onClose} fullWidth>
       <DialogTitle>{title}</DialogTitle>
+      <Countdown />
       <DialogContent>
         {(isApiCalling || isWalletConnecting) && (
           <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">

src/components/cards/AppInfoCard.tsx

@@ -52,7 +52,6 @@ import {
   DialogTitle as DialogTitlePrimitive,
   DialogTrigger,
 } from '@/components/ui/Dialog'
-import Countdown from '../Countdown'
 interface ComponentProps {
   initialApplication: Application
   repo: string
@@ -1046,7 +1045,6 @@ const AppInfoCard: React.FC<ComponentProps> = ({
             />
           )}
         </CardContent>
-        <Countdown />
         <div>
           <CardFooter className="flex flex-row items-center border-t pt-4 pb-2 mt-4 justify-between gap-3">
             <div className="flex gap-2 pb-4">