diff --git a/src/components/common/Chip/index.tsx b/src/components/common/Chip/index.tsx
new file mode 100644
index 0000000000..56fb9c3137
--- /dev/null
+++ b/src/components/common/Chip/index.tsx
@@ -0,0 +1,18 @@
+import { Chip as MuiChip } from '@mui/material'
+import type { ChipProps } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import { useDarkMode } from '@/hooks/useDarkMode'
+
+export function Chip(props: ChipProps): ReactElement {
+ const isDarkMode = useDarkMode()
+ return (
+
+ )
+}
diff --git a/src/components/dashboard/Recovery/index.tsx b/src/components/dashboard/Recovery/index.tsx
index ec5e5faa8d..0227367f34 100644
--- a/src/components/dashboard/Recovery/index.tsx
+++ b/src/components/dashboard/Recovery/index.tsx
@@ -1,17 +1,20 @@
-import { Box, Button, Card, Chip, Grid, Typography } from '@mui/material'
+import { Box, Button, Card, Grid, Typography } from '@mui/material'
+import { useContext } from 'react'
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 { Chip } from '@/components/common/Chip'
+import { TxModalContext } from '@/components/tx-flow'
+import { EnableRecoveryFlow } from '@/components/tx-flow/flows/EnableRecovery'
import css from './styles.module.css'
export function Recovery(): ReactElement {
- const isDarkMode = useDarkMode()
+ const { setTxFlow } = useContext(TxModalContext)
const onClick = () => {
- // TODO: Open enable recovery flow
+ setTxFlow()
}
return (
@@ -31,7 +34,7 @@ export function Recovery(): ReactElement {
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
index df21b43216..352f6e4e6b 100644
--- a/src/components/dashboard/Recovery/styles.module.css
+++ b/src/components/dashboard/Recovery/styles.module.css
@@ -25,8 +25,3 @@
font-weight: 700;
display: inline;
}
-
-.chip {
- border-radius: 4px;
- font-size: 12px;
-}
diff --git a/src/components/settings/Recovery/index.tsx b/src/components/settings/Recovery/index.tsx
index d5a1704e37..fd355b49b7 100644
--- a/src/components/settings/Recovery/index.tsx
+++ b/src/components/settings/Recovery/index.tsx
@@ -1,15 +1,14 @@
-import { Alert, Box, Button, Chip, Grid, Paper, Typography } from '@mui/material'
+import { Alert, Box, Button, Grid, Paper, Typography } from '@mui/material'
import { useContext } from 'react'
import type { ReactElement } from 'react'
import { EnableRecoveryFlow } from '@/components/tx-flow/flows/EnableRecovery'
import { TxModalContext } from '@/components/tx-flow'
-import { useDarkMode } from '@/hooks/useDarkMode'
+import { Chip } from '@/components/common/Chip'
import ExternalLink from '@/components/common/ExternalLink'
export function Recovery(): ReactElement {
const { setTxFlow } = useContext(TxModalContext)
- const isDarkMode = useDarkMode()
return (
@@ -20,13 +19,7 @@ export function Recovery(): ReactElement {
Account recovery
- {/* TODO: Extract when widget is merged https://github.com/safe-global/safe-wallet-web/pull/2768 */}
-
+