Merge pull request #2517 from novasamatech/fix/tbaut-new-modal

fix: use new modal
novasamatech · Oct 21, 2024 · 144f43a · 144f43a
2 parents 54a52f2 + 30dd6c4
commit 144f43a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 49 deletions.
diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/MultisigWallet.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/MultisigWallet.tsx
@@ -1,11 +1,11 @@
 import { useForm } from 'effector-forms';
 import { useUnit } from 'effector-react';
-import { useEffect } from 'react';
 
 import { useI18n } from '@/shared/i18n';
 import { useModalClose } from '@/shared/lib/hooks';
 import { DEFAULT_TRANSITION, isStep } from '@/shared/lib/utils';
-import { BaseModal, HeaderTitleText } from '@/shared/ui';
+import { HeaderTitleText } from '@/shared/ui';
+import { Modal } from '@/shared/ui-kit';
 import { ChainTitle } from '@/entities/chain';
 import { OperationSign, OperationSubmit } from '@/features/operations';
 import { createMultisigUtils } from '../../lib/create-multisig-utils';
@@ -24,7 +24,7 @@ type Props = {
   onComplete: () => void;
 };
 
-export const MultisigWallet = ({ isOpen, onClose, onComplete }: Props) => {
+export const MultisigWallet = ({ isOpen, onComplete }: Props) => {
   const { t } = useI18n();
 
   const [isModalOpen, closeModal] = useModalClose(isOpen, flowModel.output.flowFinished);
@@ -33,19 +33,15 @@ export const MultisigWallet = ({ isOpen, onClose, onComplete }: Props) => {
   } = useForm(formModel.$createMultisigForm);
   const activeStep = useUnit(flowModel.$step);
 
-  useEffect(() => {
-    if (!isOpen && isModalOpen) {
+  const handleClose = (open: boolean) => {
+    if (!open) {
+      setTimeout(onComplete, DEFAULT_TRANSITION);
       closeModal();
     }
-  }, [isOpen]);
-
-  const handleClose = (params?: { complete: boolean }) => {
-    closeModal();
-    setTimeout(params?.complete ? onComplete : onClose, DEFAULT_TRANSITION);
   };
 
   if (isStep(activeStep, Step.SUBMIT)) {
-    return <OperationSubmit isOpen={isModalOpen} onClose={() => handleClose({ complete: true })} />;
+    return <OperationSubmit isOpen={isModalOpen} onClose={() => handleClose(false)} />;
   }
 
   const modalTitle = (
@@ -68,24 +64,21 @@ export const MultisigWallet = ({ isOpen, onClose, onComplete }: Props) => {
     </div>
   );
 
+  const modalSize =
+    isStep(activeStep, Step.SIGN) || isStep(activeStep, Step.CONFIRM) || isStep(activeStep, Step.SIGNER_SELECTION)
+      ? 'md'
+      : 'lg';
+
   return (
-    <BaseModal
-      closeButton
-      title={modalTitle}
-      isOpen={isModalOpen}
-      contentClass="flex"
-      panelClass={
-        isStep(activeStep, Step.SIGN) || isStep(activeStep, Step.CONFIRM) || isStep(activeStep, Step.SIGNER_SELECTION)
-          ? 'w-[440px]'
-          : 'w-[784px]'
-      }
-      onClose={handleClose}
-    >
-      {isStep(activeStep, Step.NAME_NETWORK) && <NameNetworkSelection />}
-      {isStep(activeStep, Step.SIGNATORIES_THRESHOLD) && <SelectSignatoriesThreshold />}
-      {isStep(activeStep, Step.SIGNER_SELECTION) && <SignerSelection />}
-      {isStep(activeStep, Step.CONFIRM) && <ConfirmationStep />}
-      {isStep(activeStep, Step.SIGN) && <OperationSign onGoBack={() => flowModel.events.stepChanged(Step.CONFIRM)} />}
-    </BaseModal>
+    <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.SIGNATORIES_THRESHOLD) && <SelectSignatoriesThreshold />}
+        {isStep(activeStep, Step.SIGNER_SELECTION) && <SignerSelection />}
+        {isStep(activeStep, Step.CONFIRM) && <ConfirmationStep />}
+        {isStep(activeStep, Step.SIGN) && <OperationSign onGoBack={() => flowModel.events.stepChanged(Step.CONFIRM)} />}
+      </Modal.Content>
+    </Modal>
   );
 };
diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/SelectSignatoriesThreshold.tsx
@@ -112,7 +112,7 @@ export const SelectSignatoriesThreshold = () => {
             selectedId={threshold.value.toString()}
             options={thresholdOptions}
             invalid={threshold.hasError()}
-            position={thresholdOptions.length > 3 ? 'up' : 'down'}
+            position={thresholdOptions.length > 2 ? 'up' : 'down'}
             onChange={({ value }) => threshold.onChange(value)}
           />
           <InputHint className="flex-1" active>

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/SelectSignatories.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/SelectSignatories.tsx
@@ -21,7 +21,7 @@ export const SelectSignatories = () => {
 
   return (
     <div className="flex flex-1 flex-col">
-      <div className="flex max-h-96 flex-col gap-2 overflow-y-auto overflow-x-hidden">
+      <div className="flex flex-col gap-2">
         {Array.from(signatories.entries()).map(([key, value]) => (
           <Signatory
             key={key}

diff --git a/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx b/src/renderer/widgets/CreateWallet/ui/MultisigWallet/components/Signatory.tsx
@@ -182,24 +182,22 @@ export const Signatory = ({
           onChange={onNameChange}
         />
       </div>
-      <div className="flex max-h-full overflow-hidden">
-        <Combobox
-          className="flex-1"
-          label={accountInputLabel}
-          placeholder={t('createMultisigAccount.signatorySelection')}
-          options={options}
-          query={query}
-          value={address}
-          prefixElement={prefixElement}
-          onChange={({ value }) => {
-            onAddressChange(value);
-          }}
-          onInput={handleQueryChange}
-        />
-        {!isOwnAccount && onDelete && (
-          <IconButton className="ml-2 mt-4" name="delete" size={20} onClick={() => onDelete(signtoryIndex)} />
-        )}
-      </div>
+      <Combobox
+        className="flex-1"
+        label={accountInputLabel}
+        placeholder={t('createMultisigAccount.signatorySelection')}
+        options={options}
+        query={query}
+        value={address}
+        prefixElement={prefixElement}
+        onChange={({ value }) => {
+          onAddressChange(value);
+        }}
+        onInput={handleQueryChange}
+      />
+      {!isOwnAccount && onDelete && (
+        <IconButton className="ml-2 mt-4" name="delete" size={20} onClick={() => onDelete(signtoryIndex)} />
+      )}
     </div>
   );
 };