refactor: extract Chip component

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 (
+    <MuiChip
+      label="New"
+      color={isDarkMode ? 'primary' : 'secondary'}
+      size="small"
+      sx={{ borderRadius: '4px', fontSize: '12px' }}
+      {...props}
+    />
+  )
+}

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(<EnableRecoveryFlow />)
   }
 
   return (
@@ -31,7 +34,7 @@ export function Recovery(): ReactElement {
                 <Typography variant="h4" className={css.title}>
                   Introducing account recovery{' '}
                 </Typography>
-                <Chip label="New" color={isDarkMode ? 'primary' : 'secondary'} size="small" className={css.chip} />
+                <Chip label="New" />
               </Box>
               <Typography mt={1} mb={3}>
                 Ensure that you never lose access to your funds by choosing a guardian to recover your account.

src/components/dashboard/Recovery/styles.module.css

@@ -25,8 +25,3 @@
   font-weight: 700;
   display: inline;
 }
-
-.chip {
-  border-radius: 4px;
-  font-size: 12px;
-}

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 (
     <Paper sx={{ p: 4 }}>
@@ -20,13 +19,7 @@ export function Recovery(): ReactElement {
               Account recovery
             </Typography>
 
-            {/* TODO: Extract when widget is merged https://github.com/safe-global/safe-wallet-web/pull/2768  */}
-            <Chip
-              label="New"
-              color={isDarkMode ? 'primary' : 'secondary'}
-              size="small"
-              sx={{ borderRadius: '4px', fontSize: '12px' }}
-            />
+            <Chip label="New" />
           </Box>
         </Grid>