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 */} - +