feat: recovery info modals + widgets

src/components/common/PageLayout/index.tsx

@@ -11,6 +11,7 @@ import useDebounce from '@/hooks/useDebounce'
 import { useRouter } from 'next/router'
 import { TxModalContext } from '@/components/tx-flow'
 import BatchSidebar from '@/components/batch/BatchSidebar'
+import { RecoveryModal } from '@/components/recovery/RecoveryModal'
 
 const isNoSidebarRoute = (pathname: string): boolean => {
   return [
@@ -60,7 +61,9 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
         })}
       >
         <div className={css.content}>
-          <SafeLoadingError>{children}</SafeLoadingError>
+          <SafeLoadingError>
+            <RecoveryModal>{children}</RecoveryModal>
+          </SafeLoadingError>
         </div>
 
         <BatchSidebar isOpen={isBatchOpen} onToggle={setBatchOpen} />

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

@@ -0,0 +1,58 @@
+import { BigNumber } from 'ethers'
+
+import { _RecoveryHeader } from '.'
+import { render } from '@/tests/test-utils'
+import type { RecoveryQueueItem } from '@/store/recoverySlice'
+
+describe('RecoveryHeader', () => {
+  it('should not render a widget if the chain does not support recovery', () => {
+    const { container } = render(
+      <_RecoveryHeader
+        isOwner
+        isGuardian
+        queue={[{ validFrom: BigNumber.from(0) } as RecoveryQueueItem]}
+        supportsRecovery={false}
+      />,
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render the in-progress widget if there is a queue for guardians', () => {
+    const { queryByText } = render(
+      <_RecoveryHeader
+        isOwner={false}
+        isGuardian
+        queue={[{ validFrom: BigNumber.from(0) } as RecoveryQueueItem]}
+        supportsRecovery
+      />,
+    )
+
+    expect(queryByText('Account recovery in progress')).toBeTruthy()
+  })
+
+  it('should render the in-progress widget if there is a queue for owners', () => {
+    const { queryByText } = render(
+      <_RecoveryHeader
+        isOwner
+        isGuardian={false}
+        queue={[{ validFrom: BigNumber.from(0) } as RecoveryQueueItem]}
+        supportsRecovery
+      />,
+    )
+
+    expect(queryByText('Account recovery in progress')).toBeTruthy()
+  })
+
+  it('should render the proposal widget when there is no queue for guardians', () => {
+    const { queryByText } = render(<_RecoveryHeader isOwner={false} isGuardian queue={[]} supportsRecovery />)
+
+    expect(queryByText('Recover this Account')).toBeTruthy()
+  })
+
+  it('should not render the proposal widget when there is no queue for owners', () => {
+    const { container } = render(<_RecoveryHeader isOwner isGuardian={false} queue={[]} supportsRecovery />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})

src/components/dashboard/RecoveryHeader/index.tsx

@@ -0,0 +1,55 @@
+import { Grid } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import { useRecoveryQueue } from '@/hooks/useRecoveryQueue'
+import { useIsGuardian } from '@/hooks/useIsGuardian'
+import madProps from '@/utils/mad-props'
+import { FEATURES } from '@/utils/chains'
+import { useHasFeature } from '@/hooks/useChains'
+import { RecoveryProposal } from '@/components/recovery/RecoveryModal/RecoveryProposal'
+import { RecoveryInProgress } from '@/components/recovery/RecoveryModal/RecoveryInProgress'
+import { WidgetContainer, WidgetBody } from '../styled'
+import type { RecoveryQueueItem } from '@/store/recoverySlice'
+
+export function _RecoveryHeader({
+  isGuardian,
+  supportsRecovery,
+  queue,
+}: {
+  isOwner: boolean
+  isGuardian: boolean
+  supportsRecovery: boolean
+  queue: Array<RecoveryQueueItem>
+}): ReactElement | null {
+  const next = queue[0]
+
+  if (!supportsRecovery) {
+    return null
+  }
+
+  const modal = next ? (
+    <RecoveryInProgress variant="widget" recovery={next} />
+  ) : isGuardian ? (
+    <RecoveryProposal variant="widget" />
+  ) : null
+
+  if (modal) {
+    return (
+      <Grid item xs={12}>
+        <WidgetContainer>
+          <WidgetBody>{modal}</WidgetBody>
+        </WidgetContainer>
+      </Grid>
+    )
+  }
+  return null
+}
+
+// Appease TypeScript
+const _useSupportedRecovery = () => useHasFeature(FEATURES.RECOVERY)
+
+export const RecoveryHeader = madProps(_RecoveryHeader, {
+  isGuardian: useIsGuardian,
+  supportsRecovery: _useSupportedRecovery,
+  queue: useRecoveryQueue,
+})