From 81157199b41f1bbad04cf0c3858432be8483afb9 Mon Sep 17 00:00:00 2001
From: Filip-L <lelekfilip@gmail.com>
Date: Wed, 7 May 2025 13:27:41 +0200
Subject: [PATCH 1/2] Add countdown and set contract allocation type as default

---
 src/components/Countdown.tsx          | 78 +++++++++++++++++++++++++++
 src/components/DatacapAmountModel.tsx | 10 ++--
 src/components/cards/AppInfoCard.tsx  |  9 ++--
 3 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Countdown.tsx

diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
new file mode 100644
index 0000000..5bd0765
--- /dev/null
+++ b/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
diff --git a/src/components/DatacapAmountModel.tsx b/src/components/DatacapAmountModel.tsx
index 47688be..8572d51 100644
--- a/src/components/DatacapAmountModel.tsx
+++ b/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>
diff --git a/src/components/cards/AppInfoCard.tsx b/src/components/cards/AppInfoCard.tsx
index e5dc651..b83ec96 100644
--- a/src/components/cards/AppInfoCard.tsx
+++ b/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">

From 96b3569e5343691dff596d20610e3df71c1ccc83 Mon Sep 17 00:00:00 2001
From: Filip-L <lelekfilip@gmail.com>
Date: Thu, 8 May 2025 11:23:14 +0200
Subject: [PATCH 2/2] Changes according to CR

---
 src/components/Countdown.tsx          | 23 +++++++----------------
 src/components/DatacapAmountModel.tsx |  2 ++
 src/components/cards/AppInfoCard.tsx  |  2 --
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
index 5bd0765..29004e3 100644
--- a/src/components/Countdown.tsx
+++ b/src/components/Countdown.tsx
@@ -28,9 +28,6 @@ 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'),
       }
     }
 
@@ -38,10 +35,8 @@ const Countdown: React.FC = () => {
   }
 
   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>
   )
diff --git a/src/components/DatacapAmountModel.tsx b/src/components/DatacapAmountModel.tsx
index 8572d51..3ebe009 100644
--- a/src/components/DatacapAmountModel.tsx
+++ b/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">
diff --git a/src/components/cards/AppInfoCard.tsx b/src/components/cards/AppInfoCard.tsx
index b83ec96..dd9c513 100644
--- a/src/components/cards/AppInfoCard.tsx
+++ b/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">