fix: tests, logo + add Skeleton

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

@@ -1,9 +1,8 @@
-import { useBlockTimestamp } from '@/hooks/useBlockTimestamp'
-import { useHasFeature } from '@/hooks/useChains'
-import { useAppSelector } from '@/store'
 import { render } from '@testing-library/react'
 import { BigNumber } from 'ethers'
-import { RecoveryInProgress, _getCountdown } from '.'
+
+import { _getCountdown, _RecoveryInProgress } from '.'
+import type { RecoveryQueueItem, RecoveryState } from '@/store/recoverySlice'
 
 describe('getCountdown', () => {
   it('should convert 0 seconds to 0 days, 0 hours, and 0 minutes', () => {
@@ -27,89 +26,99 @@ describe('getCountdown', () => {
   })
 })
 
-jest.mock('@/hooks/useBlockTimestamp')
-jest.mock('@/store')
-jest.mock('@/hooks/useChains')
-
-const mockUseBlockTimestamp = useBlockTimestamp as jest.MockedFunction<typeof useBlockTimestamp>
-const mockUseAppSelector = useAppSelector as jest.MockedFunction<typeof useAppSelector>
-const mockUseHasFeature = useHasFeature as jest.MockedFunction<typeof useHasFeature>
-
 describe('RecoveryInProgress', () => {
-  it('should return null if the chain does not support recovery', () => {
-    mockUseHasFeature.mockReturnValue(false)
-    mockUseBlockTimestamp.mockReturnValue(0)
-    mockUseAppSelector.mockReturnValue([{ queue: [{ timestamp: 0 }] }])
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
 
-    const result = render(<RecoveryInProgress />)
+  it('should return null if the chain does not support recovery', () => {
+    const result = render(
+      <_RecoveryInProgress
+        supportsRecovery={false}
+        blockTimestamp={0}
+        recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState}
+      />,
+    )
 
     expect(result.container).toBeEmptyDOMElement()
   })
 
-  it('should return null if there is no block timestamp', () => {
-    mockUseHasFeature.mockReturnValue(true)
-    mockUseBlockTimestamp.mockReturnValue(undefined)
-    mockUseAppSelector.mockReturnValue([{ queue: [{ timestamp: 0 }] }])
-
-    const result = render(<RecoveryInProgress />)
+  it('should return a loader if there is no block timestamp', () => {
+    const result = render(
+      <_RecoveryInProgress
+        supportsRecovery={true}
+        blockTimestamp={undefined}
+        recovery={[{ queue: [{ timestamp: 0 } as RecoveryQueueItem] }] as RecoveryState}
+      />,
+    )
 
     expect(result.container).toBeEmptyDOMElement()
   })
 
   it('should return null if there are no delayed transactions', () => {
-    mockUseHasFeature.mockReturnValue(true)
-    mockUseBlockTimestamp.mockReturnValue(undefined)
-    mockUseAppSelector.mockReturnValue([{ queue: [] }])
-
-    const result = render(<RecoveryInProgress />)
+    const result = render(
+      <_RecoveryInProgress
+        supportsRecovery={true}
+        blockTimestamp={69420}
+        recovery={[{ queue: [] as Array<RecoveryQueueItem> }] as RecoveryState}
+      />,
+    )
 
     expect(result.container).toBeEmptyDOMElement()
   })
 
   it('should return null if all the delayed transactions are expired and invalid', () => {
-    mockUseHasFeature.mockReturnValue(true)
-    mockUseBlockTimestamp.mockReturnValue(69420)
-    mockUseAppSelector.mockReturnValue([
-      {
-        queue: [
-          {
-            timestamp: 0,
-            validFrom: BigNumber.from(69),
-            expiresAt: BigNumber.from(420),
-          },
-        ],
-      },
-    ])
-
-    const result = render(<RecoveryInProgress />)
+    const result = render(
+      <_RecoveryInProgress
+        supportsRecovery={true}
+        blockTimestamp={69420}
+        recovery={
+          [
+            {
+              queue: [
+                {
+                  timestamp: 0,
+                  validFrom: BigNumber.from(69),
+                  expiresAt: BigNumber.from(420),
+                } as RecoveryQueueItem,
+              ],
+            },
+          ] as RecoveryState
+        }
+      />,
+    )
 
     expect(result.container).toBeEmptyDOMElement()
   })
 
   it('should return the countdown of the latest non-expired/invalid transactions if none are non-expired/valid', () => {
     const mockBlockTimestamp = 69420
 
-    mockUseHasFeature.mockReturnValue(true)
-    mockUseBlockTimestamp.mockReturnValue(mockBlockTimestamp)
-    mockUseAppSelector.mockReturnValue([
-      {
-        queue: [
-          {
-            timestamp: mockBlockTimestamp + 1,
-            validFrom: BigNumber.from(mockBlockTimestamp + 1), // Invalid
-            expiresAt: BigNumber.from(mockBlockTimestamp + 1), // Non-expired
-          },
-          {
-            // Older - should render this
-            timestamp: mockBlockTimestamp,
-            validFrom: BigNumber.from(mockBlockTimestamp * 4), // Invalid
-            expiresAt: null, // Non-expired
-          },
-        ],
-      },
-    ])
-
-    const { queryByText } = render(<RecoveryInProgress />)
+    const { queryByText } = render(
+      <_RecoveryInProgress
+        supportsRecovery={true}
+        blockTimestamp={mockBlockTimestamp}
+        recovery={
+          [
+            {
+              queue: [
+                {
+                  timestamp: mockBlockTimestamp + 1,
+                  validFrom: BigNumber.from(mockBlockTimestamp + 1), // Invalid
+                  expiresAt: BigNumber.from(mockBlockTimestamp + 1), // Non-expired
+                } as RecoveryQueueItem,
+                {
+                  // Older - should render this
+                  timestamp: mockBlockTimestamp,
+                  validFrom: BigNumber.from(mockBlockTimestamp * 4), // Invalid
+                  expiresAt: null, // Non-expired
+                } as RecoveryQueueItem,
+              ],
+            },
+          ] as RecoveryState
+        }
+      />,
+    )
 
     expect(queryByText('Account recovery in progress')).toBeInTheDocument()
     expect(
@@ -130,27 +139,31 @@ describe('RecoveryInProgress', () => {
   it('should return the info of the latest non-expired/valid transactions', () => {
     const mockBlockTimestamp = 69420
 
-    mockUseHasFeature.mockReturnValue(true)
-    mockUseBlockTimestamp.mockReturnValue(mockBlockTimestamp)
-    mockUseAppSelector.mockReturnValue([
-      {
-        queue: [
-          {
-            timestamp: mockBlockTimestamp - 1,
-            validFrom: BigNumber.from(mockBlockTimestamp - 1), // Invalid
-            expiresAt: BigNumber.from(mockBlockTimestamp - 1), // Non-expired
-          },
-          {
-            // Older - should render this
-            timestamp: mockBlockTimestamp - 2,
-            validFrom: BigNumber.from(mockBlockTimestamp - 1), // Invalid
-            expiresAt: null, // Non-expired
-          },
-        ],
-      },
-    ])
-
-    const { queryByText } = render(<RecoveryInProgress />)
+    const { queryByText } = render(
+      <_RecoveryInProgress
+        supportsRecovery={true}
+        blockTimestamp={mockBlockTimestamp}
+        recovery={
+          [
+            {
+              queue: [
+                {
+                  timestamp: mockBlockTimestamp - 1,
+                  validFrom: BigNumber.from(mockBlockTimestamp - 1), // Invalid
+                  expiresAt: BigNumber.from(mockBlockTimestamp - 1), // Non-expired
+                } as RecoveryQueueItem,
+                {
+                  // Older - should render this
+                  timestamp: mockBlockTimestamp - 2,
+                  validFrom: BigNumber.from(mockBlockTimestamp - 1), // Invalid
+                  expiresAt: null, // Non-expired
+                } as RecoveryQueueItem,
+              ],
+            },
+          ] as RecoveryState
+        }
+      />,
+    )
 
     expect(queryByText('Account recovery possible')).toBeInTheDocument()
     expect(queryByText('The recovery process is possible. This Account can be recovered.')).toBeInTheDocument()

src/components/dashboard/RecoveryInProgress/index.tsx

@@ -1,30 +1,47 @@
-import { Box, Card, Grid, Typography } from '@mui/material'
+import { Box, Card, Grid, Skeleton, Typography } from '@mui/material'
+import { useMemo } from 'react'
 import type { ReactElement } from 'react'
 
 import { useAppSelector } from '@/store'
-import { selectRecovery } from '@/store/recoverySlice'
 import { useBlockTimestamp } from '@/hooks/useBlockTimestamp'
 import { WidgetContainer, WidgetBody } from '../styled'
 import RecoveryPending from '@/public/images/common/recovery-pending.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
-
-export function RecoveryInProgress(): ReactElement | null {
-  const blockTimestamp = useBlockTimestamp()
-  const supportsRecovery = useHasFeature(FEATURES.RECOVERY)
-  const recovery = useAppSelector(selectRecovery)
-
-  if (!blockTimestamp || !supportsRecovery) {
+import { selectRecovery, selectRecoverySlice } from '@/store/recoverySlice'
+import type { RecoveryState } from '@/store/recoverySlice'
+import madProps from '@/utils/mad-props'
+
+export function _RecoveryInProgress({
+  blockTimestamp,
+  supportsRecovery,
+  recovery,
+}: {
+  blockTimestamp?: number
+  supportsRecovery: boolean
+  recovery: RecoveryState
+}): ReactElement | null {
+  const recoverySlice = useAppSelector(selectRecoverySlice)
+  const allRecoveryTxs = useMemo(() => {
+    return recoverySlice.data.flatMap(({ queue }) => queue).sort((a, b) => a.timestamp - b.timestamp)
+  }, [recoverySlice.data])
+
+  if (!supportsRecovery) {
     return null
   }
 
-  const nonExpiredTxs = recovery
-    .flatMap(({ queue }) => queue)
-    .sort((a, b) => a.timestamp - b.timestamp)
-    .filter((delayedTx) => {
-      return delayedTx.expiresAt ? delayedTx.expiresAt.gt(blockTimestamp) : true
-    })
+  if (!blockTimestamp || recoverySlice.loading) {
+    return (
+      <Grid item xs={12}>
+        <Skeleton variant="rounded" height="137px" width="100%" />
+      </Grid>
+    )
+  }
+
+  const nonExpiredTxs = allRecoveryTxs.filter((delayedTx) => {
+    return delayedTx.expiresAt ? delayedTx.expiresAt.gt(blockTimestamp) : true
+  })
 
   if (nonExpiredTxs.length === 0) {
     return null
@@ -54,7 +71,7 @@ export function RecoveryInProgress(): ReactElement | null {
                     ? 'The recovery process is possible. This Account can be recovered.'
                     : 'The recovery process has started. This Account will be ready to recover in:'}
                 </Typography>
-                {isValid ? null : <Countdown seconds={secondsUntilValid} />}
+                <Countdown seconds={secondsUntilValid} />
               </Grid>
               <Grid item>
                 <ExternalLink
@@ -73,20 +90,24 @@ export function RecoveryInProgress(): ReactElement | null {
 }
 
 export function _getCountdown(seconds: number): { days: number; hours: number; minutes: number } {
-  const minute = 60
-  const hour = 60 * minute
-  const day = 24 * hour
+  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)
+  const days = Math.floor(seconds / DAY_IN_SECONDS)
 
-  const remainingSeconds = seconds % day
-  const hours = Math.floor(remainingSeconds / hour)
-  const minutes = Math.floor((remainingSeconds % hour) / minute)
+  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)
 
   return (
@@ -114,3 +135,13 @@ function TimeLeft({ value, unit }: { value: number; unit: string }): ReactElemen
     </div>
   )
 }
+
+// Appease React TypeScript warnings
+const _useSupportsRecovery = () => useHasFeature(FEATURES.RECOVERY)
+const _useRecovery = () => useAppSelector(selectRecovery)
+
+export const RecoveryInProgress = madProps(_RecoveryInProgress, {
+  blockTimestamp: useBlockTimestamp,
+  supportsRecovery: _useSupportsRecovery,
+  recovery: _useRecovery,
+})

src/store/recoverySlice.ts

@@ -26,4 +26,6 @@ const { slice, selector } = makeLoadableSlice('recovery', initialState)
 
 export const recoverySlice = slice
 
+export const selectRecoverySlice = selector
+
 export const selectRecovery = createSelector(selector, (recovery) => recovery.data)

src/styles/globals.css

@@ -61,6 +61,10 @@ input[type='number'] {
   fill: var(--color-logo-background);
 }
 
+.illustration-background-warning-fill {
+  fill: var(--color-warning-background);
+}
+
 /* Note: a fallback `stroke` property must be on the svg to work */
 .illustration-main-stroke {
   stroke: var(--color-primary-main);