diff --git a/src/components/common/EnhancedTable/index.tsx b/src/components/common/EnhancedTable/index.tsx index 240dfc662f..33e6258a36 100644 --- a/src/components/common/EnhancedTable/index.tsx +++ b/src/components/common/EnhancedTable/index.tsx @@ -32,7 +32,7 @@ type EnhancedRow = { type EnhancedHeadCell = { id: string - label: string + label: ReactNode width?: string sticky?: boolean } diff --git a/src/components/settings/Recovery/index.tsx b/src/components/settings/Recovery/index.tsx index d10952d251..5aa56a805b 100644 --- a/src/components/settings/Recovery/index.tsx +++ b/src/components/settings/Recovery/index.tsx @@ -1,5 +1,5 @@ -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 { EnableRecoveryFlow } from '@/components/tx-flow/flows/EnableRecovery' @@ -7,14 +7,141 @@ import { TxModalContext } from '@/components/tx-flow' import { Chip } from '@/components/common/Chip' import ExternalLink from '@/components/common/ExternalLink' import { RecoverAccountFlow } from '@/components/tx-flow/flows/RecoverAccount' -import useWallet from '@/hooks/wallets/useWallet' +import useIsSafeOwner from '@/hooks/useIsSafeOwner' import { useAppSelector } from '@/store' -import { selectDelayModifierByGuardian } from '@/store/recoverySlice' +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 }, +] export function Recovery(): ReactElement { const { setTxFlow } = useContext(TxModalContext) - const wallet = useWallet() - const recovery = useAppSelector((state) => selectDelayModifierByGuardian(state, wallet?.address ?? '')) + 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 ( @@ -35,25 +162,27 @@ export function Recovery(): ReactElement { Enabling the Account recovery module will require a transactions. - - Unhappy with the provided option? {/* TODO: Add link */} - - Give us feedback - - - - - {recovery ? ( - // TODO: Move to correct location when widget is ready + {recovery.length === 0 ? ( + <> + + Unhappy with the provided option? {/* TODO: Add link */} + + Give us feedback + + + + + ) : ( + <> + + {/* TODO: Move to correct location when widget is ready */} - ) : ( - - )} - + + )}