[FIL-837] Add countdown and change default allocation type (#195)

* Add countdown and set contract allocation type as default

Author: Filip-L

src/components/Countdown.tsx

@@ -0,0 +1,69 @@
+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'),
+      }
+    }
+
+    return timeLeft
+  }
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft())
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft())
+    }, 1000)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [])
+
+  if (timeLeft.minutes === undefined) {
+    return null
+  }
+
+  return (
+    <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 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>
+  )
+}
+
+export default Countdown

src/components/DatacapAmountModel.tsx

@@ -20,8 +20,9 @@ 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 = 'contract' | 'directly'
+type AllocationType = 'directly' | 'contract'
 
 interface AllocationConfig {
   isDialogOpen: boolean
@@ -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">
@@ -123,14 +125,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

@@ -148,7 +148,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
     isDialogOpen: boolean
   }>({
     amount: '',
-    allocationType: 'directly',
+    allocationType: 'contract',
     unit: AllocationUnit.GIB,
     isDialogOpen: false,
   })
@@ -613,7 +613,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
         isDialogOpen: false,
         amount: prev.amount || '0',
         unit: prev.unit || AllocationUnit.GIB,
-        allocationType: 'directly',
+        allocationType: 'contract',
       }))
       return
     }
@@ -723,7 +723,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
       )
 
       setAllocationAmountConfig(() => ({
-        allocationType: 'directly',
+        allocationType: 'contract',
         amount,
         isDialogOpen: false,
         unit: unit as AllocationUnit,
@@ -1036,7 +1036,6 @@ const AppInfoCard: React.FC<ComponentProps> = ({
             </CardContent>
           </div>
         ) : null}
-
         <CardContent>
           {isProgressBarVisible && (
             <ProgressBar