@@ -39,9 +52,15 @@ export function Recovery(): ReactElement {
Ensure that you never lose access to your funds by choosing a guardian to recover your account.
-
+ {recovery.length === 0 ? (
+
+ ) : (
+
+ )}
diff --git a/src/components/settings/Recovery/index.tsx b/src/components/settings/Recovery/index.tsx
index 18cce31a70..d5e1c9ae97 100644
--- a/src/components/settings/Recovery/index.tsx
+++ b/src/components/settings/Recovery/index.tsx
@@ -1,18 +1,147 @@
-import { Alert, Box, Button, Grid, Paper, Typography } from '@mui/material'
-import { useContext } from 'react'
+import { Alert, Box, Button, Grid, IconButton, Paper, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { useContext, useMemo } from 'react'
import type { ReactElement } from 'react'
import { UpsertRecoveryFlow } from '@/components/tx-flow/flows/UpsertRecovery'
import { TxModalContext } from '@/components/tx-flow'
import { Chip } from '@/components/common/Chip'
import ExternalLink from '@/components/common/ExternalLink'
+import useIsSafeOwner from '@/hooks/useIsSafeOwner'
import { useAppSelector } from '@/store'
import { selectRecovery } from '@/store/recoverySlice'
+import EthHashInfo from '@/components/common/EthHashInfo'
+import DeleteIcon from '@/public/images/common/delete.svg'
+import EditIcon from '@/public/images/common/edit.svg'
+import EnhancedTable from '@/components/common/EnhancedTable'
+import CheckWallet from '@/components/common/CheckWallet'
+import InfoIcon from '@/public/images/notifications/info.svg'
+
+import tableCss from '@/components/common/EnhancedTable/styles.module.css'
+
+enum HeadCells {
+ Guardian = 'guardian',
+ TxCooldown = 'txCooldown',
+ TxExpiration = 'txExpiration',
+ Actions = 'actions',
+}
+
+const headCells = [
+ { id: HeadCells.Guardian, label: 'Guardian' },
+ {
+ id: HeadCells.TxCooldown,
+ label: (
+ <>
+ Recovery delay{' '}
+
+
+
+
+
+
+ ),
+ },
+ {
+ id: HeadCells.TxExpiration,
+ label: (
+ <>
+ Expiry{' '}
+
+
+
+
+
+
+ ),
+ },
+ { id: HeadCells.Actions, label: '', sticky: true },
+]
// TODO: Migrate section
export function Recovery(): ReactElement {
const { setTxFlow } = useContext(TxModalContext)
const recovery = useAppSelector(selectRecovery)
+ const isOwner = useIsSafeOwner()
+
+ const rows = useMemo(() => {
+ return recovery.flatMap(({ guardians, txCooldown, txExpiration }) => {
+ return guardians.map((guardian) => {
+ const DAY_IN_SECONDS = 60 * 60 * 24
+
+ const txCooldownDays = txCooldown.div(DAY_IN_SECONDS).toNumber()
+ const txExpirationDays = txExpiration.div(DAY_IN_SECONDS).toNumber()
+
+ return {
+ cells: {
+ [HeadCells.Guardian]: {
+ rawValue: guardian,
+ content: ,
+ },
+ [HeadCells.TxCooldown]: {
+ rawValue: txCooldownDays,
+ content: (
+
+ {txCooldownDays} day{txCooldownDays > 1 ? 's' : ''}
+
+ ),
+ },
+ [HeadCells.TxExpiration]: {
+ rawValue: txExpirationDays,
+ content: (
+
+ {txExpirationDays === 0 ? 'never' : `${txExpirationDays} day${txExpirationDays > 1 ? 's' : ''}`}
+
+ ),
+ },
+ [HeadCells.Actions]: {
+ rawValue: '',
+ sticky: true,
+ content: (
+
+ {isOwner && (
+
+ {(isOk) => (
+ <>
+
+
+ {/* TODO: Display flow */}
+ setTxFlow(undefined)} size="small" disabled={!isOk}>
+
+
+
+
+
+
+
+ {/* TODO: Display flow */}
+ setTxFlow(undefined)} size="small" disabled={!isOk}>
+
+
+
+
+
+ )}
+
+ )}
+
+ ),
+ },
+ },
+ }
+ })
+ })
+ }, [recovery, isOwner, setTxFlow])
return (
@@ -33,36 +162,21 @@ export function Recovery(): ReactElement {
Enabling the Account recovery module will require a transactions.
-