diff --git a/src/components/dashboard/RecoveryInProgress/index.test.tsx b/src/components/dashboard/RecoveryInProgress/index.test.tsx index bd48c980bd..dd7c7d2584 100644 --- a/src/components/dashboard/RecoveryInProgress/index.test.tsx +++ b/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() diff --git a/src/components/dashboard/RecoveryInProgress/index.tsx b/src/components/dashboard/RecoveryInProgress/index.tsx index 342503768a..9409a84f1d 100644 --- a/src/components/dashboard/RecoveryInProgress/index.tsx +++ b/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 ( diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx index a7689a09eb..e1b7c96976 100644 --- a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx +++ b/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 - {/* // 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. diff --git a/src/utils/__tests__/date.test.ts b/src/utils/__tests__/date.test.ts new file mode 100644 index 0000000000..71213cfee9 --- /dev/null +++ b/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 }) + }) +}) diff --git a/src/utils/date.ts b/src/utils/date.ts index d54cffbb85..0c66c1065d 100644 --- a/src/utils/date.ts +++ b/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 } +}