diff --git a/public/images/common/recovery.svg b/public/images/common/recovery.svg
new file mode 100644
index 0000000000..70e4d13a9e
--- /dev/null
+++ b/public/images/common/recovery.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/components/dashboard/Recovery/index.tsx b/src/components/dashboard/Recovery/index.tsx
new file mode 100644
index 0000000000..ec5e5faa8d
--- /dev/null
+++ b/src/components/dashboard/Recovery/index.tsx
@@ -0,0 +1,48 @@
+import { Box, Button, Card, Chip, Grid, Typography } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import RecoveryLogo from '@/public/images/common/recovery.svg'
+import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
+import { useDarkMode } from '@/hooks/useDarkMode'
+
+import css from './styles.module.css'
+
+export function Recovery(): ReactElement {
+ const isDarkMode = useDarkMode()
+
+ const onClick = () => {
+ // TODO: Open enable recovery flow
+ }
+
+ return (
+
+
+ New in {'Safe{Wallet}'}
+
+
+
+
+
+
+
+
+
+
+
+ Introducing account recovery{' '}
+
+
+
+
+ Ensure that you never lose access to your funds by choosing a guardian to recover your account.
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/dashboard/Recovery/styles.module.css b/src/components/dashboard/Recovery/styles.module.css
new file mode 100644
index 0000000000..df21b43216
--- /dev/null
+++ b/src/components/dashboard/Recovery/styles.module.css
@@ -0,0 +1,32 @@
+.label {
+ font-weight: 700;
+ margin-bottom: var(--space-2);
+}
+
+.card {
+ padding: var(--space-4);
+ height: inherit;
+}
+
+.grid {
+ display: flex;
+ align-items: center;
+ height: inherit;
+ gap: var(--space-3);
+}
+
+.wrapper {
+ display: flex;
+ align-items: center;
+ gap: var(--space-1);
+}
+
+.title {
+ font-weight: 700;
+ display: inline;
+}
+
+.chip {
+ border-radius: 4px;
+ font-size: 12px;
+}
diff --git a/src/components/dashboard/Relaying/index.tsx b/src/components/dashboard/Relaying/index.tsx
deleted file mode 100644
index 345b42b651..0000000000
--- a/src/components/dashboard/Relaying/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled'
-import { Box, Card, Divider, Skeleton, Stack, SvgIcon, Typography } from '@mui/material'
-import { MAX_HOUR_RELAYS, useRelaysBySafe } from '@/hooks/useRemainingRelays'
-import { OVERVIEW_EVENTS } from '@/services/analytics'
-import Track from '@/components/common/Track'
-import InfoIcon from '@/public/images/notifications/info.svg'
-import GasStationIcon from '@/public/images/common/gas-station.svg'
-import ExternalLink from '@/components/common/ExternalLink'
-import classnames from 'classnames'
-import css from './styles.module.css'
-import { HelpCenterArticle } from '@/config/constants'
-import { useCurrentChain } from '@/hooks/useChains'
-import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy'
-
-const Relaying = () => {
- const chain = useCurrentChain()
- const [relays, relaysError] = useRelaysBySafe()
-
- const limit = relays?.limit || MAX_HOUR_RELAYS
-
- return (
-
-
- New in {'Safe{Wallet}'}
-
-
-
-
-
-
-
-
-
-
- Gas fees sponsored by
-
- 
-
- {chain?.chainName}
-
-
-
- Benefit from a gasless experience powered by Gelato and Safe. Experience gasless UX for the next
- month!
-
-
-
-
-
-
- Transactions per hour
-
- {relays !== undefined ? (
-
-
- {relaysError ? (
- {limit} per hour
- ) : (
-
- {relays.remaining} of {limit}
-
- )}
-
- ) : (
-
- )}
-
-
-
-
- )
-}
-
-export default Relaying
diff --git a/src/components/dashboard/Relaying/styles.module.css b/src/components/dashboard/Relaying/styles.module.css
deleted file mode 100644
index cc02616d25..0000000000
--- a/src/components/dashboard/Relaying/styles.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.relayingChip {
- padding: var(--space-1);
- border-radius: 6px;
- height: 30px;
- background-color: var(--color-secondary-light);
- color: var(--color-static-main);
- display: flex;
- align-items: center;
- gap: var(--space-1);
-}
-
-.relayingChip.unavailable {
- background-color: var(--color-error-light);
-}
-
-.chipSkeleton {
- height: 30px;
- width: 80px;
-}
-
-.icon {
- padding: 4px;
- border-radius: 6px;
- border: 1.3px solid var(--color-text-primary);
- width: 34px;
- height: 34px;
- margin-right: 12px;
-}
-
-.gcLogo {
- width: 16px;
- height: 16px;
-}
diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx
index 497aed2b7e..6d30bb0bac 100644
--- a/src/components/dashboard/index.tsx
+++ b/src/components/dashboard/index.tsx
@@ -7,14 +7,14 @@ import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSe
import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
import CreationDialog from '@/components/dashboard/CreationDialog'
import { useRouter } from 'next/router'
-import Relaying from '@/components/dashboard/Relaying'
+import { Recovery } from './Recovery'
import { FEATURES } from '@/utils/chains'
import { useHasFeature } from '@/hooks/useChains'
import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic'
const Dashboard = (): ReactElement => {
const router = useRouter()
- const supportsRelaying = useHasFeature(FEATURES.RELAYING)
+ const supportsRecovery = useHasFeature(FEATURES.RECOVERY)
const { [CREATION_MODAL_QUERY_PARM]: showCreationModal = '' } = router.query
return (
@@ -28,13 +28,13 @@ const Dashboard = (): ReactElement => {
-
-
+
+
- {supportsRelaying ? (
+ {supportsRecovery ? (
-
+
) : null}
diff --git a/src/hooks/__tests__/useLoadRecovery.test.ts b/src/hooks/__tests__/useLoadRecovery.test.ts
index fb77e655c7..f4b693b873 100644
--- a/src/hooks/__tests__/useLoadRecovery.test.ts
+++ b/src/hooks/__tests__/useLoadRecovery.test.ts
@@ -127,6 +127,12 @@ describe('useLoadRecovery', () => {
txNonce,
queueNonce,
queue: [
+ {
+ ...transactionsAdded[0],
+ timestamp: 69,
+ validFrom: BigNumber.from(69).add(txCooldown),
+ expiresAt: null,
+ },
{
...transactionsAdded[1],
timestamp: 420,