[TX flow] feat: replace owner

src/components/common/NameInput/index.tsx

@@ -1,8 +1,8 @@
 import type { TextFieldProps } from '@mui/material'
 import { TextField } from '@mui/material'
 import get from 'lodash/get'
-import type { FieldError, Validate } from 'react-hook-form'
-import { useFormContext } from 'react-hook-form'
+import { type FieldError, type Validate, useFormContext } from 'react-hook-form'
+import css from './styles.module.css'
 
 const NameInput = ({
   name,
@@ -26,7 +26,7 @@ const NameInput = ({
       error={Boolean(fieldError)}
       fullWidth
       required={required}
-      sx={{ '& .MuiInputBase-input': { p: 3, px: 2 } }}
+      className={css.textField}
       {...register(name, { maxLength: 50, required })}
     />
   )

src/components/common/NameInput/styles.module.css

@@ -0,0 +1,7 @@
+.textField {
+  margin-top: var(--space-1);
+}
+
+.textField :global .MuiInputBase-input {
+  padding: 22px var(--space-2);
+}

src/components/tx-flow/common/styles.module.css

@@ -1,7 +1,7 @@
 .cardContent {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
   padding: var(--space-3);
 }
 

src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx

@@ -66,22 +66,25 @@ export const ChooseOwner = ({
     })
   })
 
-  const newNumberOfOwners = safe.owners.length + 1
+  const newNumberOfOwners = safe.owners.length + (!params.removedOwner ? 1 : 0)
 
   return (
     <TxCard>
       <FormProvider {...formMethods}>
         <form onSubmit={onFormSubmit} className={commonCss.form}>
-          <Box mb={1}>
-            {params.removedOwner &&
-              'Review the owner you want to replace in the active Safe Account, then specify the new owner you want to replace it with:'}
-          </Box>
-
           {params.removedOwner && (
-            <Box my={2}>
-              <Typography mb={1}>Current owner</Typography>
-              <EthHashInfo address={params.removedOwner.address} showCopyButton shortAddress={false} hasExplorer />
-            </Box>
+            <>
+              <Typography variant="body2" mb={1}>
+                {params.removedOwner &&
+                  'Review the owner you want to replace in the active Safe Account, then specify the new owner you want to replace it with:'}
+              </Typography>
+              <Box my={2}>
+                <Typography variant="body2" color="text.secondary" mb={1}>
+                  Current owner
+                </Typography>
+                <EthHashInfo address={params.removedOwner.address} showCopyButton shortAddress={false} hasExplorer />
+              </Box>
+            </>
           )}
 
           <FormControl fullWidth>
@@ -135,9 +138,11 @@ export const ChooseOwner = ({
                           {idx + 1}
                         </MenuItem>
                       ))}
-                      <MenuItem key={newNumberOfOwners} value={newNumberOfOwners}>
-                        {newNumberOfOwners}
-                      </MenuItem>
+                      {!params.removedOwner && (
+                        <MenuItem key={newNumberOfOwners} value={newNumberOfOwners}>
+                          {newNumberOfOwners}
+                        </MenuItem>
+                      )}
                     </TextField>
                   )}
                 />

src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx

@@ -11,7 +11,8 @@ import { upsertAddressBookEntry } from '@/store/addressBookSlice'
 import { SafeTxContext } from '../../SafeTxProvider'
 import type { AddOwnerFlowProps } from '.'
 import type { ReplaceOwnerFlowProps } from '../ReplaceOwner'
-import AddIcon from '@/public/images/common/add.svg'
+import PlusIcon from '@/public/images/common/plus.svg'
+import MinusIcon from '@/public/images/common/minus.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 
@@ -54,16 +55,55 @@ export const ReviewOwner = ({ params }: { params: AddOwnerFlowProps | ReplaceOwn
 
   return (
     <SignOrExecuteForm onSubmit={addAddressBookEntryAndSubmit}>
-      <Paper sx={{ backgroundColor: ({ palette }) => palette.background.main, p: '12px' }}>
-        <EthHashInfo name={addressBook[safeAddress]} address={safeAddress} shortAddress={false} />
-      </Paper>
+      <div>
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
+          Selected Safe Account
+        </Typography>
+        <Paper sx={{ backgroundColor: ({ palette }) => palette.background.main, p: '12px' }}>
+          <EthHashInfo name={addressBook[safeAddress]} address={safeAddress} shortAddress={false} />
+        </Paper>
+      </div>
+      {params.removedOwner && (
+        <>
+          <Box display="flex" alignItems="center" gap={2} mx="auto">
+            <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" />
+            Remove owner
+          </Box>
+
+          <div>
+            <Typography variant="body2" color="text.secondary" mb={0.5}>
+              Previous owner
+            </Typography>
+            <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: '12px' }}>
+              <EthHashInfo
+                name={params.removedOwner.name}
+                address={params.removedOwner.address}
+                shortAddress={false}
+                showCopyButton
+                hasExplorer
+              />
+            </Paper>
+          </div>
+        </>
+      )}
       <Box display="flex" alignItems="center" gap={2} mx="auto">
-        <SvgIcon component={AddIcon} inheritViewBox fontSize="small" />
+        <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" />
         Add new owner
       </Box>
-      <Paper sx={{ backgroundColor: ({ palette }) => palette.info.background, p: '12px' }}>
-        <EthHashInfo name={newOwner.name} address={newOwner.address} shortAddress={false} showCopyButton hasExplorer />
-      </Paper>
+      <div>
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
+          New owner
+        </Typography>
+        <Paper sx={{ backgroundColor: ({ palette }) => palette.info.background, p: '12px' }}>
+          <EthHashInfo
+            name={newOwner.name}
+            address={newOwner.address}
+            shortAddress={false}
+            showCopyButton
+            hasExplorer
+          />
+        </Paper>
+      </div>
       <Divider className={commonCss.nestedDivider} />
       <Box>
         <Typography variant="body2">Any transaction requires the confirmation of:</Typography>

src/components/tx-flow/flows/AddOwner/index.tsx

@@ -1,7 +1,7 @@
 import TxLayout from '@/components/tx-flow/common/TxLayout'
-import useTxStepper from '../../useTxStepper'
-import { ChooseOwner } from './ChooseOwner'
-import { ReviewOwner } from './ReviewOwner'
+import useTxStepper from '@/components/tx-flow/useTxStepper'
+import { ChooseOwner } from '@/components/tx-flow/flows/AddOwner/ChooseOwner'
+import { ReviewOwner } from '@/components/tx-flow/flows/AddOwner/ReviewOwner'
 import SaveAddressIcon from '@/public/images/common/save-address.svg'
 import useSafeInfo from '@/hooks/useSafeInfo'
 

src/components/tx-flow/flows/ReplaceOwner/index.tsx

@@ -1,8 +1,9 @@
 import TxLayout from '@/components/tx-flow/common/TxLayout'
-import useTxStepper from '../../useTxStepper'
+import useTxStepper from '@/components/tx-flow/useTxStepper'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { ReviewOwner } from '../AddOwner/ReviewOwner'
 import { ChooseOwner } from '../AddOwner/ChooseOwner'
+import SaveAddressIcon from '@/public/images/common/save-address.svg'
 
 type Owner = {
   address: string
@@ -32,7 +33,13 @@ const ReplaceOwnerFlow = ({ address }: { address: string }) => {
   ]
 
   return (
-    <TxLayout title="Replace owner" step={step} onBack={prevStep}>
+    <TxLayout
+      title={step === 0 ? 'New transaction' : 'Confirm transaction'}
+      subtitle="Replace owner"
+      icon={SaveAddressIcon}
+      step={step}
+      onBack={prevStep}
+    >
       {steps}
     </TxLayout>
   )