From e1227c936880c98f65f062989852e11a4ffa4e80 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Thu, 22 Jun 2023 14:52:49 +0200 Subject: [PATCH] [TX flow] feat: replace owner (#2151) * feat: redesign replace owner * rm unnecessary files. move css to module * fix: add titles * Update src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx Co-authored-by: Aaron Cook --------- Co-authored-by: Aaron Cook --- public/images/common/minus.svg | 3 + public/images/common/plus.svg | 5 ++ src/components/common/NameInput/index.tsx | 6 +- .../common/NameInput/styles.module.css | 7 ++ .../tx-flow/common/styles.module.css | 2 +- .../tx-flow/flows/AddOwner/ChooseOwner.tsx | 31 +++++---- .../tx-flow/flows/AddOwner/ReviewOwner.tsx | 56 +++++++++++++--- .../tx-flow/flows/AddOwner/SetThreshold.tsx | 65 ------------------- .../tx-flow/flows/AddOwner/index.tsx | 6 +- .../tx-flow/flows/AddOwner/styles.module.css | 15 ----- .../tx-flow/flows/ReplaceOwner/index.tsx | 11 +++- 11 files changed, 97 insertions(+), 110 deletions(-) create mode 100644 public/images/common/minus.svg create mode 100644 public/images/common/plus.svg create mode 100644 src/components/common/NameInput/styles.module.css delete mode 100644 src/components/tx-flow/flows/AddOwner/SetThreshold.tsx delete mode 100644 src/components/tx-flow/flows/AddOwner/styles.module.css diff --git a/public/images/common/minus.svg b/public/images/common/minus.svg new file mode 100644 index 0000000000..1e1a5f29f6 --- /dev/null +++ b/public/images/common/minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/common/plus.svg b/public/images/common/plus.svg new file mode 100644 index 0000000000..c8023ca6ad --- /dev/null +++ b/public/images/common/plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/common/NameInput/index.tsx b/src/components/common/NameInput/index.tsx index 0d1d35c040..d3cb99b4a5 100644 --- a/src/components/common/NameInput/index.tsx +++ b/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 })} /> ) diff --git a/src/components/common/NameInput/styles.module.css b/src/components/common/NameInput/styles.module.css new file mode 100644 index 0000000000..b8f9ed84ce --- /dev/null +++ b/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); +} diff --git a/src/components/tx-flow/common/styles.module.css b/src/components/tx-flow/common/styles.module.css index be6c33ebc4..ed96768f02 100644 --- a/src/components/tx-flow/common/styles.module.css +++ b/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); } diff --git a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx b/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx index d9e996264e..9b70441950 100644 --- a/src/components/tx-flow/flows/AddOwner/ChooseOwner.tsx +++ b/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 (
- - {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:'} - - {params.removedOwner && ( - - Current owner - - + <> + + {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:'} + + + + Current owner + + + + )} @@ -135,9 +138,11 @@ export const ChooseOwner = ({ {idx + 1} ))} - - {newNumberOfOwners} - + {!params.removedOwner && ( + + {newNumberOfOwners} + + )} )} /> diff --git a/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx b/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx index 1ba5a58161..b07a93da2e 100644 --- a/src/components/tx-flow/flows/AddOwner/ReviewOwner.tsx +++ b/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 ( - palette.background.main, p: '12px' }}> - - +
+ + Selected Safe Account + + palette.background.main, p: '12px' }}> + + +
+ {params.removedOwner && ( + <> + + + Remove owner + + +
+ + Previous owner + + palette.warning.background, p: '12px' }}> + + +
+ + )} - + Add new owner - palette.info.background, p: '12px' }}> - - +
+ + New owner + + palette.info.background, p: '12px' }}> + + +
Any transaction requires the confirmation of: diff --git a/src/components/tx-flow/flows/AddOwner/SetThreshold.tsx b/src/components/tx-flow/flows/AddOwner/SetThreshold.tsx deleted file mode 100644 index 59c1a56bd5..0000000000 --- a/src/components/tx-flow/flows/AddOwner/SetThreshold.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useState } from 'react' -import { Typography, Grid, Select, MenuItem, Button, CardActions } from '@mui/material' -import type { SyntheticEvent } from 'react' -import type { SelectChangeEvent } from '@mui/material' - -import useSafeInfo from '@/hooks/useSafeInfo' -import type { AddOwnerFlowProps } from '.' -import type { ReplaceOwnerFlowProps } from '../ReplaceOwner' -import TxCard from '../../common/TxCard' - -export const SetThreshold = ({ - params, - onSubmit, -}: { - params: AddOwnerFlowProps | ReplaceOwnerFlowProps - onSubmit: (data: Pick) => void -}) => { - const { safe } = useSafeInfo() - const [selectedThreshold, setSelectedThreshold] = useState(params.threshold || 1) - - const handleChange = (event: SelectChangeEvent) => { - setSelectedThreshold(parseInt(event.target.value.toString())) - } - - const onSubmitHandler = (e: SyntheticEvent) => { - e.preventDefault() - onSubmit({ threshold: selectedThreshold }) - } - - const newNumberOfOwners = safe.owners.length + 1 - - return ( - - - Set the required owner confirmations: - - Any transaction requires the confirmation of: - - - - - - - out of {newNumberOfOwners} owner(s) - - - - - - - - - ) -} diff --git a/src/components/tx-flow/flows/AddOwner/index.tsx b/src/components/tx-flow/flows/AddOwner/index.tsx index e56ca5f630..e1cbad6ff0 100644 --- a/src/components/tx-flow/flows/AddOwner/index.tsx +++ b/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' diff --git a/src/components/tx-flow/flows/AddOwner/styles.module.css b/src/components/tx-flow/flows/AddOwner/styles.module.css deleted file mode 100644 index 7ec06ea4e1..0000000000 --- a/src/components/tx-flow/flows/AddOwner/styles.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.info { - background-color: var(--color-background-main); - align-items: center; - display: flex; - flex-direction: column; - padding: var(--space-1); -} - -.overline { - font-size: 11px; - line-height: 14px; - letter-spacing: 1px; - align-self: center; - text-transform: uppercase; -} diff --git a/src/components/tx-flow/flows/ReplaceOwner/index.tsx b/src/components/tx-flow/flows/ReplaceOwner/index.tsx index c3355cd79c..6e9c6d6b01 100644 --- a/src/components/tx-flow/flows/ReplaceOwner/index.tsx +++ b/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 ( - + {steps} )