[FIL-837] Add countdown and change default allocation type

src/components/Countdown.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+
+interface TimeLeft {
+  days?: string
+  hours?: string
+  minutes?: string
+  seconds?: string
+}
+
+const Countdown: React.FC = () => {
+  const calculateTimeLeft = (): TimeLeft => {
+    const targetDate = new Date(new Date().getFullYear(), 5, 1) // June 1st
+    const now = new Date()
+    const difference = targetDate.getTime() - now.getTime()
+
+    let timeLeft: TimeLeft = {}
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24))
+          .toString()
+          .padStart(2, '0'),
+        hours: Math.floor(
+          (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+        )
+          .toString()
+          .padStart(2, '0'),
+        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)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [])
+
+  if (!isMounted) {
+    return null
+  }
+
+  if (timeLeft.seconds === undefined) {
+    return null
+  }
+
+  return (
+    <div className="px-6 pb-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.
+      </p>
+    </div>
+  )
+}
+
+export default Countdown

src/components/DatacapAmountModel.tsx

@@ -21,7 +21,7 @@ import { AllocationUnit, type Allocation, type Application } from '@/type'
 import { type ReactNode, useState } from 'react'
 import { bytesToiB } from '@/lib/utils'
 
-type AllocationType = 'contract' | 'directly'
+type AllocationType = 'directly' | 'contract'
 
 interface AllocationConfig {
   isDialogOpen: boolean
@@ -123,14 +123,14 @@ const DatacapAmountModal = ({
                     }}
                   >
                     <FormControlLabel
-                      value="directly"
+                      value={'contract'}
                       control={<Radio />}
-                      label="Directly"
+                      label={'Contract'}
                     />
                     <FormControlLabel
-                      value={'contract'}
+                      value="directly"
                       control={<Radio />}
-                      label={'Contract'}
+                      label="Directly"
                     />
                   </RadioGroup>
                 </FormControl>

src/components/cards/AppInfoCard.tsx

@@ -52,6 +52,7 @@ import {
   DialogTitle as DialogTitlePrimitive,
   DialogTrigger,
 } from '@/components/ui/Dialog'
+import Countdown from '../Countdown'
 interface ComponentProps {
   initialApplication: Application
   repo: string
@@ -148,7 +149,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
     isDialogOpen: boolean
   }>({
     amount: '',
-    allocationType: 'directly',
+    allocationType: 'contract',
     unit: AllocationUnit.GIB,
     isDialogOpen: false,
   })
@@ -613,7 +614,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
         isDialogOpen: false,
         amount: prev.amount || '0',
         unit: prev.unit || AllocationUnit.GIB,
-        allocationType: 'directly',
+        allocationType: 'contract',
       }))
       return
     }
@@ -723,7 +724,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
       )
 
       setAllocationAmountConfig(() => ({
-        allocationType: 'directly',
+        allocationType: 'contract',
         amount,
         isDialogOpen: false,
         unit: unit as AllocationUnit,
@@ -1036,7 +1037,6 @@ const AppInfoCard: React.FC<ComponentProps> = ({
             </CardContent>
           </div>
         ) : null}
-
         <CardContent>
           {isProgressBarVisible && (
             <ProgressBar
@@ -1046,6 +1046,7 @@ 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">