fix: cache modal dismissals

safe-global · Nov 22, 2023 · da2a2c0 · da2a2c0
1 parent 7740037
commit da2a2c0
Show file tree

Hide file tree

Showing 9 changed files with 408 additions and 158 deletions.
diff --git a/src/components/dashboard/RecoveryHeader/index.tsx b/src/components/dashboard/RecoveryHeader/index.tsx
@@ -6,8 +6,8 @@ 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 { RecoveryProposalCard } from '@/components/recovery/RecoveryCards/RecoveryProposalCard'
+import { RecoveryInProgressCard } from '@/components/recovery/RecoveryCards/RecoveryInProgressCard'
 import { WidgetContainer, WidgetBody } from '../styled'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
@@ -28,9 +28,9 @@ export function _RecoveryHeader({
   }
 
   const modal = next ? (
-    <RecoveryInProgress variant="widget" recovery={next} />
+    <RecoveryInProgressCard orientation="widget" recovery={next} />
   ) : isGuardian ? (
-    <RecoveryProposal variant="widget" />
+    <RecoveryProposalCard variant="widget" />
   ) : null
 
   if (modal) {

diff --git a/...very/RecoveryModal/RecoveryInProgress.tsx → .../RecoveryCards/RecoveryInProgressCard.tsx b/...very/RecoveryModal/RecoveryInProgress.tsx → .../RecoveryCards/RecoveryInProgressCard.tsx
@@ -13,17 +13,17 @@ import css from './styles.module.css'
 
 type Props =
   | {
-      variant?: 'modal'
+      orientation?: 'vertical'
       onClose: () => void
       recovery: RecoveryQueueItem
     }
   | {
-      variant: 'widget'
+      orientation: 'horizontal'
       onClose?: never
       recovery: RecoveryQueueItem
     }
 
-export function RecoveryInProgress({ variant = 'modal', onClose, recovery }: Props): ReactElement {
+export function RecoveryInProgressCard({ orientation = 'vertical', onClose, recovery }: Props): ReactElement {
   const { isExecutable, remainingSeconds } = useRecoveryTxState(recovery)
   const router = useRouter()
 
@@ -50,7 +50,7 @@ export function RecoveryInProgress({ variant = 'modal', onClose, recovery }: Pro
     </ExternalLink>
   )
 
-  if (variant === 'widget') {
+  if (orientation === 'horizontal') {
     return (
       <Card sx={{ py: 3, px: 4 }}>
         <Grid container display="flex" alignItems="center" gap={3}>

diff --git a/...covery/RecoveryModal/RecoveryProposal.tsx → ...ry/RecoveryCards/RecoveryProposalCard.tsx b/...covery/RecoveryModal/RecoveryProposal.tsx → ...ry/RecoveryCards/RecoveryProposalCard.tsx
@@ -15,19 +15,19 @@ import css from './styles.module.css'
 
 type Props =
   | {
-      variant?: 'modal'
+      orientation?: 'vertical'
       onClose: () => void
       safe: SafeInfo
       setTxFlow: TxModalContextType['setTxFlow']
     }
   | {
-      variant: 'widget'
+      orientation: 'horizontal'
       onClose?: never
       safe: SafeInfo
       setTxFlow: TxModalContextType['setTxFlow']
     }
 
-export function _RecoveryProposal({ variant = 'modal', onClose, safe, setTxFlow }: Props): ReactElement {
+export function _RecoveryProposalCard({ orientation = 'vertical', onClose, safe, setTxFlow }: Props): ReactElement {
   const onRecover = async () => {
     onClose?.()
     setTxFlow(<RecoverAccountFlow />)
@@ -49,19 +49,19 @@ export function _RecoveryProposal({ variant = 'modal', onClose, safe, setTxFlow
   )
 
   const recoveryButton = (
-    <Button variant="contained" onClick={onRecover}>
+    <Button orientation="contained" onClick={onRecover}>
       Start recovery
     </Button>
   )
 
-  if (variant === 'widget') {
+  if (orientation === 'horizontal') {
     return (
       <Card sx={{ py: 3, px: 4 }}>
         <Grid container display="flex" alignItems="center" gap={3}>
           <Grid item>{icon}</Grid>
 
           <Grid item xs>
-            <Typography variant="h6" fontWeight={700} mb={1}>
+            <Typography orientation="h6" fontWeight={700} mb={1}>
               {title}
             </Typography>
 
@@ -88,7 +88,7 @@ export function _RecoveryProposal({ variant = 'modal', onClose, safe, setTxFlow
         </Grid>
 
         <Grid item xs={12}>
-          <Typography variant="h6" fontWeight={700} mb={2}>
+          <Typography orientation="h6" fontWeight={700} mb={2}>
             {title}
           </Typography>
 
@@ -112,7 +112,7 @@ export function _RecoveryProposal({ variant = 'modal', onClose, safe, setTxFlow
 const _useSafe = () => useSafeInfo().safe
 const _useSetTxFlow = () => useContext(TxModalContext).setTxFlow
 
-export const RecoveryProposal = madProps(_RecoveryProposal, {
+export const RecoveryProposalCard = madProps(_RecoveryProposalCard, {
   safe: _useSafe,
   setTxFlow: _useSetTxFlow,
 })
diff --git a/...dal/__tests__/RecoveryInProgress.test.tsx → ...__tests__/RecoveryInProgressCard.test.tsx b/...dal/__tests__/RecoveryInProgress.test.tsx → ...__tests__/RecoveryInProgressCard.test.tsx
@@ -2,20 +2,20 @@ import { BigNumber } from 'ethers'
 import { fireEvent, waitFor } from '@testing-library/react'
 
 import { render } from '@/tests/test-utils'
-import { RecoveryInProgress } from '../RecoveryInProgress'
+import { RecoveryInProgressCard } from '../RecoveryInProgressCard'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
 import type { RecoveryQueueItem } from '@/store/recoverySlice'
 
 jest.mock('@/hooks/useRecoveryTxState')
 
 const mockUseRecoveryTxState = useRecoveryTxState as jest.MockedFunction<typeof useRecoveryTxState>
 
-describe('RecoveryInProgress', () => {
+describe('RecoveryInProgressCard', () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
 
-  describe('modal', () => {
+  describe('vertical', () => {
     it('should render executable recovery state correctly', async () => {
       mockUseRecoveryTxState.mockReturnValue({
         isExecutable: true,
@@ -25,8 +25,8 @@ describe('RecoveryInProgress', () => {
       const mockClose = jest.fn()
 
       const { queryByText } = render(
-        <RecoveryInProgress
-          variant="modal"
+        <RecoveryInProgressCard
+          orientation="vertical"
           onClose={mockClose}
           recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem}
         />,
@@ -58,8 +58,8 @@ describe('RecoveryInProgress', () => {
       const mockClose = jest.fn()
 
       const { queryByText } = render(
-        <RecoveryInProgress
-          variant="modal"
+        <RecoveryInProgressCard
+          orientation="vertical"
           onClose={mockClose}
           recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem}
         />,
@@ -82,15 +82,18 @@ describe('RecoveryInProgress', () => {
       })
     })
   })
-  describe('widget', () => {
+  describe('horizontal', () => {
     it('should render executable recovery state correctly', () => {
       mockUseRecoveryTxState.mockReturnValue({
         isExecutable: true,
         remainingSeconds: 0,
       } as any)
 
       const { queryByText } = render(
-        <RecoveryInProgress variant="widget" recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem} />,
+        <RecoveryInProgressCard
+          orientation="horizontal"
+          recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem}
+        />,
       )
 
       ;['days', 'hrs', 'mins'].forEach((unit) => {
@@ -109,7 +112,10 @@ describe('RecoveryInProgress', () => {
       } as any)
 
       const { queryByText } = render(
-        <RecoveryInProgress variant="widget" recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem} />,
+        <RecoveryInProgressCard
+          orientation="horizontal"
+          recovery={{ validFrom: BigNumber.from(0) } as RecoveryQueueItem}
+        />,
       )
 
       expect(queryByText('Go to dashboard')).toBeFalsy()

diff --git a/...Modal/__tests__/RecoveryProposal.test.tsx → ...s/__tests__/RecoveryProposalCard.test.tsx b/...Modal/__tests__/RecoveryProposal.test.tsx → ...s/__tests__/RecoveryProposalCard.test.tsx
@@ -2,17 +2,17 @@ import { faker } from '@faker-js/faker'
 import type { SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { fireEvent, render } from '@/tests/test-utils'
-import { _RecoveryProposal } from '../RecoveryProposal'
+import { _RecoveryProposalCard } from '../RecoveryProposalCard'
 
-describe('RecoveryProposal', () => {
-  describe('modal', () => {
+describe('RecoveryProposalCard', () => {
+  describe('vertical', () => {
     it('should render correctly', () => {
       const mockClose = jest.fn()
       const mockSetTxFlow = jest.fn()
 
       const { queryByText } = render(
-        <_RecoveryProposal
-          variant="modal"
+        <_RecoveryProposalCard
+          orientation="vertical"
           onClose={mockClose}
           safe={{ owners: [{ value: faker.finance.ethereumAddress() }] } as SafeInfo}
           setTxFlow={mockSetTxFlow}
@@ -36,13 +36,13 @@ describe('RecoveryProposal', () => {
       expect(mockSetTxFlow).toHaveBeenCalled()
     })
   })
-  describe('widget', () => {})
+  describe('horizontal', () => {})
   it('should render correctly', () => {
     const mockSetTxFlow = jest.fn()
 
     const { queryByText } = render(
-      <_RecoveryProposal
-        variant="widget"
+      <_RecoveryProposalCard
+        orientation="horizontal"
         safe={{ owners: [{ value: faker.finance.ethereumAddress() }] } as SafeInfo}
         setTxFlow={mockSetTxFlow}
       />,

diff --git a/.../recovery/RecoveryModal/styles.module.css → .../recovery/RecoveryCards/styles.module.css b/.../recovery/RecoveryModal/styles.module.css → .../recovery/RecoveryCards/styles.module.css
@@ -1,8 +1,3 @@
-.backdrop {
-  z-index: 3;
-  background-color: var(--color-background-main);
-}
-
 .card {
   max-width: 576px;
   padding: var(--space-4);

diff --git a/src/components/recovery/RecoveryModal/__tests__/index.test.tsx b/src/components/recovery/RecoveryModal/__tests__/index.test.tsx