fix: improve settings style (#2839)

safe-global · Nov 21, 2023 · b06d1e4 · b06d1e4
1 parent 404aa9c
commit b06d1e4
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 23 deletions.
diff --git 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
@@ -1,20 +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 { EnableRecoveryFlow } from '@/components/tx-flow/flows/EnableRecovery'
 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{' '}
+        <Tooltip title="You can cancel any recovery attempt when it is not needed or wanted within the delay period.">
+          <span>
+            <SvgIcon
+              component={InfoIcon}
+              inheritViewBox
+              color="border"
+              fontSize="small"
+              sx={{ verticalAlign: 'middle', ml: 0.5 }}
+            />
+          </span>
+        </Tooltip>
+      </>
+    ),
+  },
+  {
+    id: HeadCells.TxExpiration,
+    label: (
+      <>
+        Expiry{' '}
+        <Tooltip title="A period of time after which the recovery attempt will expire and can no longer be executed.">
+          <span>
+            <SvgIcon
+              component={InfoIcon}
+              inheritViewBox
+              color="border"
+              fontSize="small"
+              sx={{ verticalAlign: 'middle', ml: 0.5 }}
+            />
+          </span>
+        </Tooltip>
+      </>
+    ),
+  },
+  { 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: <EthHashInfo address={guardian} showCopyButton hasExplorer />,
+            },
+            [HeadCells.TxCooldown]: {
+              rawValue: txCooldownDays,
+              content: (
+                <Typography>
+                  {txCooldownDays} day{txCooldownDays > 1 ? 's' : ''}
+                </Typography>
+              ),
+            },
+            [HeadCells.TxExpiration]: {
+              rawValue: txExpirationDays,
+              content: (
+                <Typography>
+                  {txExpirationDays === 0 ? 'never' : `${txExpirationDays} day${txExpirationDays > 1 ? 's' : ''}`}
+                </Typography>
+              ),
+            },
+            [HeadCells.Actions]: {
+              rawValue: '',
+              sticky: true,
+              content: (
+                <div className={tableCss.actions}>
+                  {isOwner && (
+                    <CheckWallet>
+                      {(isOk) => (
+                        <>
+                          <Tooltip title={isOk ? 'Edit recovery setup' : undefined}>
+                            <span>
+                              {/* TODO: Display flow */}
+                              <IconButton onClick={() => setTxFlow(undefined)} size="small" disabled={!isOk}>
+                                <SvgIcon component={EditIcon} inheritViewBox color="border" fontSize="small" />
+                              </IconButton>
+                            </span>
+                          </Tooltip>
+
+                          <Tooltip title={isOk ? 'Disable recovery' : undefined}>
+                            <span>
+                              {/* TODO: Display flow */}
+                              <IconButton onClick={() => setTxFlow(undefined)} size="small" disabled={!isOk}>
+                                <SvgIcon component={DeleteIcon} inheritViewBox color="error" fontSize="small" />
+                              </IconButton>
+                            </span>
+                          </Tooltip>
+                        </>
+                      )}
+                    </CheckWallet>
+                  )}
+                </div>
+              ),
+            },
+          },
+        }
+      })
+    })
+  }, [recovery, isOwner, setTxFlow])
 
   return (
     <Paper sx={{ p: 4 }}>
@@ -35,25 +162,27 @@ export function Recovery(): ReactElement {
             Enabling the Account recovery module will require a transactions.
           </Typography>
 
-          <Alert severity="info">
-            Unhappy with the provided option? {/* TODO: Add link */}
-            <ExternalLink noIcon href="#">
-              Give us feedback
-            </ExternalLink>
-          </Alert>
-
-          <Box mt={2}>
-            {recovery ? (
-              // TODO: Move to correct location when widget is ready
+          {recovery.length === 0 ? (
+            <>
+              <Alert severity="info">
+                Unhappy with the provided option? {/* TODO: Add link */}
+                <ExternalLink noIcon href="#">
+                  Give us feedback
+                </ExternalLink>
+              </Alert>
+              <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)} sx={{ mt: 2 }}>
+                Set up recovery
+              </Button>
+            </>
+          ) : (
+            <>
+              <EnhancedTable rows={rows} headCells={headCells} />
+              {/* TODO: Move to correct location when widget is ready */}
               <Button variant="contained" onClick={() => setTxFlow(<RecoverAccountFlow />)}>
                 Propose recovery
               </Button>
-            ) : (
-              <Button variant="contained" onClick={() => setTxFlow(<EnableRecoveryFlow />)}>
-                Set up recovery
-              </Button>
-            )}
-          </Box>
+            </>
+          )}
         </Grid>
       </Grid>
     </Paper>