fix: rename context + create helper hook

src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx

@@ -9,7 +9,7 @@ import { RecoveryInfo } from '@/components/recovery/RecoveryInfo'
 import { RecoveryStatus } from '@/components/recovery/RecoveryStatus'
 import { RecoveryType } from '@/components/recovery/RecoveryType'
 import { AppRoutes } from '@/config/routes'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 import css from './styles.module.css'
 

src/components/dashboard/PendingTxs/PendingTxList.test.ts

@@ -5,7 +5,7 @@ import type { MultisigExecutionInfo, Transaction } from '@safe-global/safe-gatew
 
 import { safeInfoBuilder } from '@/tests/builders/safe'
 import { _getTransactionsToDisplay } from './PendingTxsList'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 describe('_getTransactionsToDisplay', () => {
   it('should return the recovery queue if it has more than or equal to MAX_TXS items', () => {

src/components/dashboard/PendingTxs/PendingTxsList.tsx

@@ -15,7 +15,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import { useRecoveryQueue } from '@/hooks/useRecoveryQueue'
 import { PendingRecoveryListItem } from './PendingRecoveryListItem'
 import type { SafeInfo, Transaction } from '@safe-global/safe-gateway-typescript-sdk'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 const MAX_TXS = 4
 

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

@@ -2,7 +2,7 @@ import { BigNumber } from 'ethers'
 
 import { _RecoveryHeader } from '.'
 import { render } from '@/tests/test-utils'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 describe('RecoveryHeader', () => {
   it('should not render a widget if the chain does not support recovery', () => {

src/components/dashboard/RecoveryHeader/index.tsx

@@ -10,7 +10,7 @@ import { RecoveryProposalCard } from '@/components/recovery/RecoveryCards/Recove
 import { RecoveryInProgressCard } from '@/components/recovery/RecoveryCards/RecoveryInProgressCard'
 import { WidgetContainer, WidgetBody } from '../styled'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function _RecoveryHeader({
   isGuardian,

src/components/recovery/CancelRecoveryButton/index.tsx

@@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton'
 import CheckWallet from '@/components/common/CheckWallet'
 import { TxModalContext } from '@/components/tx-flow'
 import { CancelRecoveryFlow } from '@/components/tx-flow/flows/CancelRecovery'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function CancelRecoveryButton({
   recovery,

src/components/recovery/ExecuteRecoveryButton/index.tsx

@@ -10,8 +10,8 @@ import useOnboard from '@/hooks/wallets/useOnboard'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
 import { Errors, logError } from '@/services/exceptions'
-import { RecoveryLoaderContext } from '../RecoveryLoaderContext'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import { RecoveryContext } from '../RecoveryContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function ExecuteRecoveryButton({
   recovery,
@@ -23,7 +23,7 @@ export function ExecuteRecoveryButton({
   const { isExecutable } = useRecoveryTxState(recovery)
   const onboard = useOnboard()
   const { safe } = useSafeInfo()
-  const { refetch } = useContext(RecoveryLoaderContext)
+  const { refetch } = useContext(RecoveryContext)
 
   const onClick = async (e: SyntheticEvent) => {
     e.stopPropagation()

src/components/recovery/RecoveryCards/RecoveryInProgressCard.tsx

@@ -7,7 +7,7 @@ import { Countdown } from '@/components/common/Countdown'
 import RecoveryPending from '@/public/images/common/recovery-pending.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { AppRoutes } from '@/config/routes'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 import css from './styles.module.css'
 

src/components/recovery/RecoveryCards/__tests__/RecoveryInProgressCard.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import { render } from '@/tests/test-utils'
 import { RecoveryInProgressCard } from '../RecoveryInProgressCard'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 jest.mock('@/hooks/useRecoveryTxState')
 

src/components/recovery/RecoveryLoaderContext/__tests__/index.test.tsx → src/components/recovery/RecoveryContext/__tests__/index.test.tsx

@@ -10,7 +10,7 @@ import { txDispatch, TxEvent } from '@/services/tx/txEvents'
 import { chainBuilder } from '@/tests/builders/chains'
 import { addressExBuilder, safeInfoBuilder } from '@/tests/builders/safe'
 import { act, fireEvent, render, waitFor } from '@/tests/test-utils'
-import { RecoveryLoaderContext, RecoveryLoaderProvider } from '..'
+import { RecoveryContext, RecoveryProvider } from '..'
 import { getTxDetails } from '@/services/tx/txDetails'
 
 jest.mock('@/services/recovery/delay-modifier')
@@ -30,7 +30,7 @@ const mockUseCurrentChain = useCurrentChain as jest.MockedFunction<typeof useCur
 const mockUseHasFeature = useHasFeature as jest.MockedFunction<typeof useHasFeature>
 const mockGetTxDetails = getTxDetails as jest.MockedFunction<typeof getTxDetails>
 
-describe('RecoveryLoaderContext', () => {
+describe('RecoveryContext', () => {
   beforeEach(() => {
     jest.clearAllMocks()
 
@@ -54,15 +54,15 @@ describe('RecoveryLoaderContext', () => {
     mockGetDelayModifiers.mockResolvedValue(delayModifiers as any)
 
     function Test() {
-      const { refetch } = useContext(RecoveryLoaderContext)
+      const { refetch } = useContext(RecoveryContext)
 
       return <button onClick={refetch}>Refetch</button>
     }
 
     const { queryByText } = render(
-      <RecoveryLoaderProvider>
+      <RecoveryProvider>
         <Test />
-      </RecoveryLoaderProvider>,
+      </RecoveryProvider>,
     )
 
     await waitFor(() => {
@@ -98,9 +98,9 @@ describe('RecoveryLoaderContext', () => {
     mockGetTxDetails.mockResolvedValue({ txData: { to: { value: delayModifierAddress } } } as any)
 
     render(
-      <RecoveryLoaderProvider>
+      <RecoveryProvider>
         <></>
-      </RecoveryLoaderProvider>,
+      </RecoveryProvider>,
     )
 
     await waitFor(() => {

src/components/recovery/RecoveryLoaderContext/index.tsx → src/components/recovery/RecoveryContext/index.tsx

@@ -1,7 +1,8 @@
-import { createContext, useEffect } from 'react'
+import { createContext, useContext, useEffect } from 'react'
 import type { ReactElement, ReactNode } from 'react'
 import type { TransactionAddedEvent } from '@gnosis.pm/zodiac/dist/cjs/types/Delay'
 import type { BigNumber } from 'ethers'
+
 import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
 import { sameAddress } from '@/utils/addresses'
 import { getTxDetails } from '@/services/tx/txDetails'
@@ -31,15 +32,15 @@ export type RecoveryStateItem = {
 export type RecoveryState = Array<RecoveryStateItem>
 
 // State of current Safe, populated on load
-export const RecoveryLoaderContext = createContext<{
+export const RecoveryContext = createContext<{
   state: AsyncResult<RecoveryState>
   refetch: () => void
 }>({
   state: [undefined, undefined, false],
   refetch: () => {},
 })
 
-export function RecoveryLoaderProvider({ children }: { children: ReactNode }): ReactElement {
+export function RecoveryProvider({ children }: { children: ReactNode }): ReactElement {
   const { safe } = useSafeInfo()
 
   const [delayModifiers, delayModifiersError, delayModifiersLoading] = useDelayModifiers()
@@ -80,8 +81,10 @@ export function RecoveryLoaderProvider({ children }: { children: ReactNode }): R
   const loading = delayModifiersLoading || recoveryStateLoading
 
   return (
-    <RecoveryLoaderContext.Provider value={{ state: [data, error, loading], refetch }}>
-      {children}
-    </RecoveryLoaderContext.Provider>
+    <RecoveryContext.Provider value={{ state: [data, error, loading], refetch }}>{children}</RecoveryContext.Provider>
   )
 }
+
+export function useRecovery(): AsyncResult<RecoveryState> {
+  return useContext(RecoveryContext).state
+}

src/components/recovery/RecoveryDetails/index.tsx

@@ -12,7 +12,7 @@ import useSafeInfo from '@/hooks/useSafeInfo'
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import { RecoverySigners } from '../RecoverySigners'
 import { Errors, logError } from '@/services/exceptions'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 import txDetailsCss from '@/components/transactions/TxDetails/styles.module.css'
 import summaryCss from '@/components/transactions/TxDetails/Summary/styles.module.css'

src/components/recovery/RecoveryListItem/index.tsx

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react'
 import txListItemCss from '@/components/transactions/TxListItem/styles.module.css'
 import { RecoverySummary } from '../RecoverySummary'
 import { RecoveryDetails } from '../RecoveryDetails'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function RecoveryListItem({ item }: { item: RecoveryQueueItem }): ReactElement {
   return (

src/components/recovery/RecoveryModal/index.test.tsx

@@ -8,7 +8,7 @@ import { safeInfoBuilder } from '@/tests/builders/safe'
 import { connectedWalletBuilder } from '@/tests/builders/wallet'
 import * as safeInfo from '@/hooks/useSafeInfo'
 import { _useDidDismissProposal } from './index'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 describe('RecoveryModal', () => {
   describe('component', () => {

src/components/recovery/RecoveryModal/index.tsx

@@ -13,7 +13,7 @@ import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import useWallet from '@/hooks/wallets/useWallet'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { sameAddress } from '@/utils/addresses'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function _RecoveryModal({
   children,

src/components/recovery/RecoverySigners/index.tsx

@@ -8,7 +8,7 @@ import { Countdown } from '@/components/common/Countdown'
 import { ExecuteRecoveryButton } from '../ExecuteRecoveryButton'
 import { CancelRecoveryButton } from '../CancelRecoveryButton'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 import txSignersCss from '@/components/transactions/TxSigners/styles.module.css'
 import { formatDate } from '@/utils/date'

src/components/recovery/RecoveryStatus/index.tsx

@@ -3,7 +3,7 @@ import type { ReactElement } from 'react'
 
 import ClockIcon from '@/public/images/common/clock.svg'
 import { useRecoveryTxState } from '@/hooks/useRecoveryTxState'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export const RecoveryStatus = ({ recovery }: { recovery: RecoveryQueueItem }): ReactElement => {
   const { isExecutable, isExpired } = useRecoveryTxState(recovery)

src/components/recovery/RecoverySummary/index.tsx

@@ -8,7 +8,7 @@ import { RecoveryStatus } from '../RecoveryStatus'
 import { ExecuteRecoveryButton } from '../ExecuteRecoveryButton'
 import { CancelRecoveryButton } from '../CancelRecoveryButton'
 import useWallet from '@/hooks/wallets/useWallet'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 import txSummaryCss from '@/components/transactions/TxSummary/styles.module.css'
 

src/components/settings/Recovery/ConfirmRemoveRecoveryModal.tsx

@@ -15,7 +15,7 @@ import type { ReactElement } from 'react'
 import AlertIcon from '@/public/images/notifications/alert.svg'
 import { TxModalContext } from '@/components/tx-flow'
 import { RemoveRecoveryFlow } from '@/components/tx-flow/flows/RemoveRecovery'
-import type { RecoveryStateItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryStateItem } from '@/components/recovery/RecoveryContext'
 
 export function ConfirmRemoveRecoveryModal({
   open,

src/components/settings/Recovery/DelayModifierRow.tsx

@@ -8,7 +8,7 @@ import DeleteIcon from '@/public/images/common/delete.svg'
 import EditIcon from '@/public/images/common/edit.svg'
 import CheckWallet from '@/components/common/CheckWallet'
 import { ConfirmRemoveRecoveryModal } from './ConfirmRemoveRecoveryModal'
-import type { RecoveryStateItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryStateItem } from '@/components/recovery/RecoveryContext'
 
 export function DelayModifierRow({ delayModifier }: { delayModifier: RecoveryStateItem }): ReactElement | null {
   const { setTxFlow } = useContext(TxModalContext)

src/components/settings/Recovery/index.tsx

@@ -7,8 +7,7 @@ import { TxModalContext } from '@/components/tx-flow'
 import { Chip } from '@/components/common/Chip'
 import ExternalLink from '@/components/common/ExternalLink'
 import { DelayModifierRow } from './DelayModifierRow'
-import useIsSafeOwner from '@/hooks/useIsSafeOwner'
-import { RecoveryLoaderContext } from '@/components/recovery/RecoveryLoaderContext'
+import { useRecovery } from '@/components/recovery/RecoveryContext'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import EnhancedTable from '@/components/common/EnhancedTable'
 import InfoIcon from '@/public/images/notifications/info.svg'
@@ -68,8 +67,7 @@ const headCells = [
 
 export function Recovery(): ReactElement {
   const { setTxFlow } = useContext(TxModalContext)
-  const [recovery] = useContext(RecoveryLoaderContext).state
-  const isOwner = useIsSafeOwner()
+  const [recovery] = useRecovery()
 
   const rows = useMemo(() => {
     return recovery?.flatMap((delayModifier) => {

src/components/settings/SafeModules/index.tsx

@@ -8,7 +8,7 @@ import DeleteIcon from '@/public/images/common/delete.svg'
 import CheckWallet from '@/components/common/CheckWallet'
 import { useContext, useState } from 'react'
 import { TxModalContext } from '@/components/tx-flow'
-import { RecoveryLoaderContext } from '@/components/recovery/RecoveryLoaderContext'
+import { useRecovery } from '@/components/recovery/RecoveryContext'
 import { selectDelayModifierByAddress } from '@/services/recovery/selectors'
 import { ConfirmRemoveRecoveryModal } from '../Recovery/ConfirmRemoveRecoveryModal'
 
@@ -25,8 +25,8 @@ const NoModules = () => {
 const ModuleDisplay = ({ moduleAddress, chainId, name }: { moduleAddress: string; chainId: string; name?: string }) => {
   const { setTxFlow } = useContext(TxModalContext)
   const [confirmRemoveRecovery, setConfirmRemoveRecovery] = useState(false)
-  const [data] = useContext(RecoveryLoaderContext).state
-  const delayModifier = data && selectDelayModifierByAddress(data, moduleAddress)
+  const [recovery] = useRecovery()
+  const delayModifier = recovery && selectDelayModifierByAddress(recovery, moduleAddress)
 
   const onRemove = () => {
     if (delayModifier) {

src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx

@@ -8,7 +8,7 @@ import { useWeb3ReadOnly } from '@/hooks/wallets/web3'
 import { getRecoverySkipTransaction } from '@/services/recovery/transaction'
 import { createTx } from '@/services/tx/tx-sender'
 import ErrorMessage from '@/components/tx/ErrorMessage'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function CancelRecoveryFlowReview({ recovery }: { recovery: RecoveryQueueItem }): ReactElement {
   const web3ReadOnly = useWeb3ReadOnly()

src/components/tx-flow/flows/CancelRecovery/index.tsx

@@ -4,7 +4,7 @@ import TxLayout from '../../common/TxLayout'
 import { CancelRecoveryFlowReview } from './CancelRecoveryFlowReview'
 import { CancelRecoveryOverview } from './CancelRecoveryOverview'
 import useTxStepper from '../../useTxStepper'
-import type { RecoveryQueueItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryQueueItem } from '@/components/recovery/RecoveryContext'
 
 export function CancelRecoveryFlow({ recovery }: { recovery: RecoveryQueueItem }): ReactElement {
   const { step, nextStep, prevStep } = useTxStepper<undefined>(undefined)

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

@@ -24,7 +24,7 @@ import { TxModalContext } from '../..'
 import { asError } from '@/services/exceptions/utils'
 import { trackError, Errors } from '@/services/exceptions'
 import { getCountdown } from '@/utils/date'
-import { RecoveryLoaderContext } from '@/components/recovery/RecoveryLoaderContext'
+import { RecoveryContext } from '@/components/recovery/RecoveryContext'
 import type { RecoverAccountFlowProps } from '.'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
@@ -41,9 +41,11 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
   const { safe } = useSafeInfo()
   const wallet = useWallet()
   const onboard = useOnboard()
-  const [data] = useContext(RecoveryLoaderContext).state
+  const {
+    refetch,
+    state: [data],
+  } = useContext(RecoveryContext)
   const recovery = data && selectDelayModifierByGuardian(data, wallet?.address ?? '')
-  const { refetch } = useContext(RecoveryLoaderContext)
 
   // Proposal
   const txCooldown = recovery?.txCooldown?.toNumber()

src/components/tx-flow/flows/RemoveRecovery/index.tsx

@@ -5,7 +5,7 @@ import RecoveryPlus from '@/public/images/common/recovery-plus.svg'
 import useTxStepper from '../../useTxStepper'
 import { RemoveRecoveryFlowOverview } from './RemoveRecoveryFlowOverview'
 import { RemoveRecoveryFlowReview } from './RemoveRecoveryFlowReview'
-import type { RecoveryStateItem } from '@/components/recovery/RecoveryLoaderContext'
+import type { RecoveryStateItem } from '@/components/recovery/RecoveryContext'
 
 export type RecoveryFlowProps = {
   delayModifier: RecoveryStateItem