Fix: UI nits in multisig creation (#2551)

* fix: comments * Apply suggestions from code review --------- Co-authored-by: Pavel <[email protected]>
novasamatech · Nov 1, 2024 · afa3f96 · afa3f96
1 parent 82c98dc
commit afa3f96
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 28 deletions.
diff --git a/src/renderer/shared/i18n/locales/en.json b/src/renderer/shared/i18n/locales/en.json
@@ -154,9 +154,9 @@
     "multisigStep": "Step { step }.",
     "nameDescription": "Give a name to your multisig account",
     "nameLabel": "Account",
-    "nameNetworkDescription": "Select the network and name for your multisig wallet",
+    "nameNetworkDescription": "Select the network and the name of your multisig",
     "namePlaceholder": "Enter name",
-    "networkDescription": "This new multisig will only work on this network. To carry out operations on a different network you will need to create a new flexible multisig.",
+    "networkDescription": "This new multisig will only work on this network. To carry out operations on a different network you will need to create a new multisig.",
     "networkFee": "Network fee:",
     "newMultisigTitle": "New multisig",
     "noOwnSignatory": "You need at least 1 owned account as part of the signatories",
@@ -177,7 +177,7 @@
     "signatoryAddress": "Signatory address",
     "signatoryNameLabel": "Signatory name",
     "signatorySelection": "Choose or enter address",
-    "signatoryThresholdDescription": "Set the signatory wallet of your flexible multisig and how many need to confirm to execute a valid transaction",
+    "signatoryThresholdDescription": "Assign the signatories and set the signatory threshold for your multisig.",
     "signatoryTitle": "Select signatories",
     "signingWallet": "Signing wallet",
     "signingWith": "Signing with",

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/MultisigWallet.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/MultisigWallet.tsx
@@ -73,7 +73,7 @@ export const MultisigWallet = ({ isOpen, onComplete }: Props) => {
     <Modal size={modalSize} height="fit" isOpen={isModalOpen} onToggle={handleClose}>
       <Modal.Title close>{modalTitle}</Modal.Title>
       <Modal.Content>
-        {isStep(activeStep, Step.NAME_NETWORK) && <NameNetworkSelection />}
+        {isStep(activeStep, Step.NAME_NETWORK) && <NameNetworkSelection onGoBack={() => handleClose(false)} />}
         {isStep(activeStep, Step.SIGNATORIES_THRESHOLD) && <SelectSignatoriesThreshold />}
         {isStep(activeStep, Step.SIGNER_SELECTION) && <SignerSelection />}
         {isStep(activeStep, Step.CONFIRM) && <ConfirmationStep />}

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/NameNetworkSelection.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/NameNetworkSelection.tsx
@@ -22,7 +22,11 @@ const getChainOptions = (chains: Chain[]): DropdownOption<Chain>[] => {
     }));
 };
 
-export const NameNetworkSelection = () => {
+interface Props {
+  onGoBack: () => void;
+}
+
+export const NameNetworkSelection = ({ onGoBack }: Props) => {
   const { t } = useI18n();
 
   const api = useUnit(flowModel.$api);
@@ -69,20 +73,25 @@ export const NameNetworkSelection = () => {
             {t('createMultisigAccount.networkDescription')}
           </FootnoteText>
         </div>
-        <div className="mt-auto flex items-center justify-end">
-          <MultisigCreationFees
-            api={api}
-            asset={chain.value.assets[0]}
-            threshold={threshold.value}
-            transaction={fakeTx}
-          />
-          <Button
-            key="create"
-            disabled={isNameError || !name.isTouched}
-            onClick={() => flowModel.events.stepChanged(Step.SIGNATORIES_THRESHOLD)}
-          >
-            {t('createMultisigAccount.continueButton')}
+        <div className="mt-auto flex items-center justify-between">
+          <Button variant="text" onClick={onGoBack}>
+            {t('createMultisigAccount.backButton')}
           </Button>
+          <div className="mt-auto flex items-center justify-end">
+            <MultisigCreationFees
+              api={api}
+              asset={chain.value.assets[0]}
+              threshold={threshold.value}
+              transaction={fakeTx}
+            />
+            <Button
+              key="create"
+              disabled={isNameError || !name.isTouched}
+              onClick={() => flowModel.events.stepChanged(Step.SIGNATORIES_THRESHOLD)}
+            >
+              {t('createMultisigAccount.continueButton')}
+            </Button>
+          </div>
         </div>
       </form>
     </section>

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx
@@ -111,18 +111,18 @@ export const SelectSignatoriesThreshold = () => {
             <Alert.Item withDot={false}>{t('createMultisigAccount.notEmptySignatory')}</Alert.Item>
           </Alert>
         </div>
-        <div className="flex items-end gap-x-4">
+        <div className="flex items-center gap-x-4">
           <Select
             placeholder={t('createMultisigAccount.thresholdPlaceholder')}
             label={t('createMultisigAccount.thresholdName')}
-            className="w-[368px]"
+            className="w-[300px]"
             selectedId={threshold.value.toString()}
             options={thresholdOptions}
             invalid={threshold.hasError()}
             position={thresholdOptions.length > 2 ? 'up' : 'down'}
             onChange={({ value }) => threshold.onChange(value)}
           />
-          <InputHint className="flex-1" active>
+          <InputHint className="flex-1 pt-5" active>
             {t('createMultisigAccount.thresholdHint')}
           </InputHint>
         </div>

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx
@@ -62,8 +62,15 @@ export const Signatory = ({
 
   const contactAccountName =
     contacts.filter((contact) => toAccountId(contact.address) === toAccountId(address))?.[0]?.name || '';
-  const displayName = isOwnAccount ? ownAccountName : contactAccountName;
-  const nameValue = !!ownAccountName || !!contactAccountName ? displayName : name;
+  const displayName = useMemo(() => {
+    const hasDuplicateName = !!ownAccountName && !!contactAccountName;
+    const shouldForceOwnAccountName = hasDuplicateName && isOwnAccount;
+    if (shouldForceOwnAccountName) return ownAccountName;
+
+    if (hasDuplicateName && !isOwnAccount) return contactAccountName;
+
+    return ownAccountName || contactAccountName || name;
+  }, [isOwnAccount, ownAccountName, contactAccountName, name]);
 
   useEffect(() => {
     if (!isOwnAccount || wallets.length === 0) return;
@@ -153,10 +160,10 @@ export const Signatory = ({
   };
 
   useEffect(() => {
-    if (nameValue !== name) {
-      onNameChange(nameValue);
+    if (displayName !== name) {
+      onNameChange(displayName);
     }
-  }, [nameValue]);
+  }, [displayName]);
 
   const onAddressChange = (newAddress: string) => {
     if (!validateAddress(newAddress)) {
@@ -193,15 +200,15 @@ export const Signatory = ({
 
   return (
     <div className="flex gap-x-2">
-      <div className="flex-1">
+      <div className="w-[300px]">
         <Input
           name={t('createMultisigAccount.signatoryNameLabel')}
           className=""
           wrapperClass="h-[36px]"
           label={t('createMultisigAccount.signatoryNameLabel')}
           placeholder={t('addressBook.createContact.namePlaceholder')}
           invalid={false}
-          value={nameValue}
+          value={displayName}
           disabled={!!ownAccountName || !!contactAccountName}
           onChange={onNameChange}
         />