fix: countdown

src/components/dashboard/RecoveryInProgress/index.test.tsx

@@ -1,31 +1,9 @@
 import { render } from '@testing-library/react'
 import { BigNumber } from 'ethers'
 
-import { _getCountdown, _RecoveryInProgress } from '.'
+import { _RecoveryInProgress } from '.'
 import type { RecoveryQueueItem, RecoveryState } from '@/store/recoverySlice'
 
-describe('getCountdown', () => {
-  it('should convert 0 seconds to 0 days, 0 hours, and 0 minutes', () => {
-    const result = _getCountdown(0)
-    expect(result).toEqual({ days: 0, hours: 0, minutes: 0 })
-  })
-
-  it('should convert 3600 seconds to 0 days, 1 hour, and 0 minutes', () => {
-    const result = _getCountdown(3600)
-    expect(result).toEqual({ days: 0, hours: 1, minutes: 0 })
-  })
-
-  it('should convert 86400 seconds to 1 day, 0 hours, and 0 minutes', () => {
-    const result = _getCountdown(86400)
-    expect(result).toEqual({ days: 1, hours: 0, minutes: 0 })
-  })
-
-  it('should convert 123456 seconds to 1 day, 10 hours, and 17 minutes', () => {
-    const result = _getCountdown(123456)
-    expect(result).toEqual({ days: 1, hours: 10, minutes: 17 })
-  })
-})
-
 describe('RecoveryInProgress', () => {
   beforeEach(() => {
     jest.resetAllMocks()

src/components/dashboard/RecoveryInProgress/index.tsx

@@ -12,6 +12,7 @@ import { FEATURES } from '@/utils/chains'
 import { selectRecovery } from '@/store/recoverySlice'
 import type { RecoveryState } from '@/store/recoverySlice'
 import madProps from '@/utils/mad-props'
+import { getCountdown } from '@/utils/date'
 
 export function _RecoveryInProgress({
   blockTimestamp,
@@ -80,26 +81,12 @@ export function _RecoveryInProgress({
   )
 }
 
-export function _getCountdown(seconds: number): { days: number; hours: number; minutes: number } {
-  const MINUTE_IN_SECONDS = 60
-  const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS
-  const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS
-
-  const days = Math.floor(seconds / DAY_IN_SECONDS)
-
-  const remainingSeconds = seconds % DAY_IN_SECONDS
-  const hours = Math.floor(remainingSeconds / HOUR_IN_SECONDS)
-  const minutes = Math.floor((remainingSeconds % HOUR_IN_SECONDS) / MINUTE_IN_SECONDS)
-
-  return { days, hours, minutes }
-}
-
 function Countdown({ seconds }: { seconds: number }): ReactElement | null {
   if (seconds <= 0) {
     return null
   }
 
-  const { days, hours, minutes } = _getCountdown(seconds)
+  const { days, hours, minutes } = getCountdown(seconds)
 
   return (
     <Box display="flex" gap={1}>

src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx

@@ -24,6 +24,7 @@ import useOnboard from '@/hooks/wallets/useOnboard'
 import { TxModalContext } from '../..'
 import { asError } from '@/services/exceptions/utils'
 import { trackError, Errors } from '@/services/exceptions'
+import { getCountdown } from '@/utils/date'
 import type { RecoverAccountFlowProps } from '.'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
@@ -44,6 +45,7 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
   // Proposal
   const txCooldown = recovery?.txCooldown?.toNumber()
+  const txCooldownCountdown = txCooldown ? getCountdown(txCooldown) : undefined
   const newThreshold = Number(params[RecoverAccountFlowFields.threshold])
   const newOwners = params[RecoverAccountFlowFields.owners]
 
@@ -136,9 +138,11 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
         <WrongChainWarning />
 
         <ErrorMessage level="info">
-          {/* // TODO: Convert txCooldown to days, minutes, seconds when https://github.com/safe-global/safe-wallet-web/pull/2772 is merged */}
-          Recovery will be {txCooldown === 0 ? 'immediately possible' : `possible ${txCooldown}`} after this transaction
-          is executed.
+          Recovery will be{' '}
+          {txCooldown === 0
+            ? 'immediately possible'
+            : `possible ${txCooldownCountdown?.days} day${txCooldownCountdown?.days === 1 ? '' : 's'}`}{' '}
+          after this transaction is executed.
         </ErrorMessage>
 
         <Divider className={commonCss.nestedDivider} />

src/utils/__tests__/date.test.ts

@@ -0,0 +1,23 @@
+import { getCountdown } from '../date'
+
+describe('getCountdown', () => {
+  it('should convert 0 seconds to 0 days, 0 hours, and 0 minutes', () => {
+    const result = getCountdown(0)
+    expect(result).toEqual({ days: 0, hours: 0, minutes: 0 })
+  })
+
+  it('should convert 3600 seconds to 0 days, 1 hour, and 0 minutes', () => {
+    const result = getCountdown(3600)
+    expect(result).toEqual({ days: 0, hours: 1, minutes: 0 })
+  })
+
+  it('should convert 86400 seconds to 1 day, 0 hours, and 0 minutes', () => {
+    const result = getCountdown(86400)
+    expect(result).toEqual({ days: 1, hours: 0, minutes: 0 })
+  })
+
+  it('should convert 123456 seconds to 1 day, 10 hours, and 17 minutes', () => {
+    const result = getCountdown(123456)
+    expect(result).toEqual({ days: 1, hours: 10, minutes: 17 })
+  })
+})

src/utils/date.ts

@@ -21,3 +21,17 @@ export const formatTime = (timestamp: number): string => formatWithSchema(timest
 export const formatDateTime = (timestamp: number): string => formatWithSchema(timestamp, 'MMM d, yyyy - h:mm:ss a')
 
 export const formatTimeInWords = (timestamp: number): string => formatDistanceToNow(timestamp, { addSuffix: true })
+
+export function getCountdown(seconds: number): { days: number; hours: number; minutes: number } {
+  const MINUTE_IN_SECONDS = 60
+  const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS
+  const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS
+
+  const days = Math.floor(seconds / DAY_IN_SECONDS)
+
+  const remainingSeconds = seconds % DAY_IN_SECONDS
+  const hours = Math.floor(remainingSeconds / HOUR_IN_SECONDS)
+  const minutes = Math.floor((remainingSeconds % HOUR_IN_SECONDS) / MINUTE_IN_SECONDS)
+
+  return { days, hours, minutes }
+}