diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx new file mode 100644 index 0000000..29004e3 --- /dev/null +++ b/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(calculateTimeLeft()) + + useEffect(() => { + const timer = setInterval(() => { + setTimeLeft(calculateTimeLeft()) + }, 1000) + + return () => { + clearInterval(timer) + } + }, []) + + if (timeLeft.minutes === undefined) { + return null + } + + return ( +
+

+ Direct allocation of DataCap will be deprecated in{' '} + + {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m + {' '} + (June 1). Start using the Client smart contract today. +

+
+ ) +} + +export default Countdown diff --git a/src/components/DatacapAmountModel.tsx b/src/components/DatacapAmountModel.tsx index 47688be..3ebe009 100644 --- a/src/components/DatacapAmountModel.tsx +++ b/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 ( {title} + {(isApiCalling || isWalletConnecting) && (
@@ -123,14 +125,14 @@ const DatacapAmountModal = ({ }} > } - label="Directly" + label={'Contract'} /> } - label={'Contract'} + label="Directly" /> diff --git a/src/components/cards/AppInfoCard.tsx b/src/components/cards/AppInfoCard.tsx index e5dc651..dd9c513 100644 --- a/src/components/cards/AppInfoCard.tsx +++ b/src/components/cards/AppInfoCard.tsx @@ -148,7 +148,7 @@ const AppInfoCard: React.FC = ({ isDialogOpen: boolean }>({ amount: '', - allocationType: 'directly', + allocationType: 'contract', unit: AllocationUnit.GIB, isDialogOpen: false, }) @@ -613,7 +613,7 @@ const AppInfoCard: React.FC = ({ isDialogOpen: false, amount: prev.amount || '0', unit: prev.unit || AllocationUnit.GIB, - allocationType: 'directly', + allocationType: 'contract', })) return } @@ -723,7 +723,7 @@ const AppInfoCard: React.FC = ({ ) setAllocationAmountConfig(() => ({ - allocationType: 'directly', + allocationType: 'contract', amount, isDialogOpen: false, unit: unit as AllocationUnit, @@ -1036,7 +1036,6 @@ const AppInfoCard: React.FC = ({
) : null} - {isProgressBarVisible && (