Refactor: all dialogs now use <Dialog> headlessui component (and more).

components/admins/components/__tests__/validatorList.test.tsx

@@ -65,7 +65,7 @@ describe('ValidatorList', () => {
 
   test('remove button works and shows the warning modal', async () => {
     renderWithProps();
-    const allRemoveButtons = screen.getAllByText('Remove');
+    const allRemoveButtons = screen.getAllByTestId('remove-validator');
     fireEvent.click(allRemoveButtons[0]);
     await waitFor(() =>
       expect(screen.getByText('Are you sure you want to remove the validator')).toBeInTheDocument()

components/admins/components/validatorList.tsx

@@ -236,10 +236,9 @@ export default function ValidatorList({
                         onClick={e => e.stopPropagation()}
                       >
                         <button
-                          onClick={e => {
-                            handleRemove(validator);
-                          }}
-                          className="btn btn-error btn-sm text-white "
+                          onClick={() => handleRemove(validator)}
+                          className="btn btn-error btn-sm text-white"
+                          data-testid="remove-validator"
                           aria-label={`Remove validator ${validator.description.moniker}`}
                         >
                           <TrashIcon className="w-5 h-5" />

components/admins/modals/__tests__/descriptionModal.test.tsx

@@ -13,13 +13,13 @@ describe('DescriptionModal Component', () => {
   afterEach(cleanup);
 
   test('renders modal with correct details', () => {
-    render(<DescriptionModal modalId={modalId} details={details} />);
+    render(<DescriptionModal open details={details} />);
     expect(screen.getByText('Group Description')).toBeInTheDocument();
     expect(screen.getByText(details)).toBeInTheDocument();
   });
 
   test('displays correct title for validator type', () => {
-    render(<DescriptionModal modalId={modalId} details={details} type="validator" />);
+    render(<DescriptionModal open details={details} type="validator" />);
     expect(screen.getByText('Validator Description')).toBeInTheDocument();
   });
 

components/admins/modals/__tests__/validatorModal.test.tsx

@@ -1,11 +1,18 @@
-import { describe, test, afterEach, expect } from 'bun:test';
+import { describe, test, afterEach, expect, mock, jest } from 'bun:test';
 import React from 'react';
 import { screen, fireEvent, cleanup, within, waitFor } from '@testing-library/react';
 import { ValidatorDetailsModal } from '@/components/admins/modals/validatorModal';
 import matchers from '@testing-library/jest-dom/matchers';
 import { mockActiveValidators } from '@/tests/mock';
 import { renderWithChainProvider } from '@/tests/render';
 
+mock.module('next/router', () => ({
+  useRouter: jest.fn().mockReturnValue({
+    query: {},
+    push: jest.fn(),
+  }),
+}));
+
 expect.extend(matchers);
 
 const validator = mockActiveValidators[0];
@@ -17,6 +24,8 @@ const validatorVPArray = [{ vp: BigInt(1000), moniker: 'Validator One' }];
 function renderWithProps(props = {}) {
   return renderWithChainProvider(
     <ValidatorDetailsModal
+      openValidatorModal={true}
+      setOpenValidatorModal={() => {}}
       validator={validator}
       modalId={modalId}
       admin={admin}

components/admins/modals/__tests__/warningModal.test.tsx

@@ -1,10 +1,17 @@
-import { describe, test, afterEach, expect } from 'bun:test';
+import { describe, test, afterEach, expect, mock, jest } from 'bun:test';
 import React from 'react';
 import { screen, cleanup } from '@testing-library/react';
 import { WarningModal } from '@/components/admins/modals/warningModal';
 import matchers from '@testing-library/jest-dom/matchers';
 import { renderWithChainProvider } from '@/tests/render';
 
+mock.module('next/router', () => ({
+  useRouter: jest.fn().mockReturnValue({
+    query: {},
+    push: jest.fn(),
+  }),
+}));
+
 expect.extend(matchers);
 
 const admin = 'manifest1adminaddress';
@@ -15,6 +22,8 @@ const modalId = 'test-modal';
 function renderWithProps(props = {}) {
   return renderWithChainProvider(
     <WarningModal
+      openWarningModal={true}
+      setOpenWarningModal={() => {}}
       admin={admin}
       address={address}
       moniker={moniker}

components/admins/modals/cancelUpgradeModal.tsx

@@ -6,6 +6,8 @@
 import { MsgCancelUpgrade } from '@liftedinit/manifestjs/dist/codegen/cosmos/upgrade/v1beta1/tx';
 import { PlanSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/upgrade/v1beta1/upgrade';
 import env from '@/config/env';
+import { Dialog } from '@headlessui/react';
+import { SignModal } from '@/components/react';
 
 interface BaseModalProps {
   isOpen: boolean;
@@ -40,17 +42,6 @@
   const { tx, isSigning, setIsSigning } = useTx(env.chain);
   const { estimateFee } = useFeeEstimation(env.chain);
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
   const handleCancelUpgrade = async () => {
     setIsSigning(true);
     try {
@@ -89,27 +80,23 @@
     }
   };
 
-  const modalContent = (
-    <dialog
-      className={`modal ${isOpen ? 'modal-open' : ''}`}
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className={`modal ${isOpen ? 'modal-open' : ''} flex fixed p-0 m-0`}
       style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
         zIndex: 9999,
         backgroundColor: 'transparent',
-        padding: 0,
-        margin: 0,
         height: '100vh',
         width: '100vw',
-        display: isOpen ? 'flex' : 'none',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <div className="modal-box bg-secondary rounded-[24px] max-w-[542px] p-6">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+      <Dialog.Panel className="modal-box bg-secondary rounded-[24px] max-w-[542px] p-6">
         <div className="flex items-center justify-between mb-6">
           <h3 className="font-bold text-lg">Cancel Upgrade</h3>
           <form method="dialog">
@@ -158,29 +145,9 @@
             {isSigning ? <span className="loading loading-dots"></span> : 'Cancel Upgrade'}
           </button>
         </div>
-      </div>
-      <form
-        method="dialog"
-        className="modal-backdrop"
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: -1,
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        }}
-        onClick={onClose}
-      >
-        <button>close</button>
-      </form>
-    </dialog>
-  );
 
-  if (typeof document !== 'undefined') {
-    return createPortal(modalContent, document.body);
-  }
-
-  return null;
+        <SignModal />
+      </Dialog.Panel>
+    </Dialog>
+  );
 }

components/admins/modals/descriptionModal.tsx

@@ -1,33 +1,56 @@
 import React from 'react';
-import { PiWarning } from 'react-icons/pi';
+import { Dialog } from '@headlessui/react';
 
 interface DescriptionModalProps {
-  modalId: string;
+  open?: boolean;
+  onClose?: () => void;
   details: string;
   type?: 'group' | 'validator';
 }
 
-export function DescriptionModal({ modalId, details, type }: Readonly<DescriptionModalProps>) {
+export function DescriptionModal({
+  open,
+  onClose,
+  details,
+  type,
+}: Readonly<DescriptionModalProps>) {
+  if (!open) return null;
+
+  function handleClose() {
+    onClose && onClose();
+  }
+
   return (
-    <dialog id={modalId} className="modal max-w-md mx-auto">
-      <form method="dialog" className="modal-box ">
-        <button
-          className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-          aria-label="x-close"
-        >
-          ✕
-        </button>
-        <h3 className="font-bold text-lg">
-          {type === 'validator' ? 'Validator' : 'Group'}&nbsp;Description
-        </h3>
-        <div className="divider divider-horizon -mt-0 -mb-2"></div>
-        <div className="py-4 flex flex-col gap-4">
-          <p className="">{details}</p>
-        </div>
-      </form>
-      <form method="dialog" className="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      className="modal modal-open mx-auto fixed flex p-0 m-0 top-0 z-[9999]"
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+      <Dialog.Panel>
+        <form method="dialog" className="modal-box ">
+          <button
+            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+            aria-label="x-close"
+            onClick={handleClose}
+          >
+            ✕
+          </button>
+          <h3 className="font-bold text-lg">
+            {type === 'validator' ? 'Validator' : 'Group'}&nbsp;Description
+          </h3>
+
+          <div className="divider divider-horizon -mt-0 -mb-2"></div>
+          <div className="py-4 flex flex-col gap-4">
+            <p className="">{details}</p>
+          </div>
+        </form>
+      </Dialog.Panel>
+    </Dialog>
   );
 }

components/admins/modals/multiMfxBurnModal.tsx

@@ -15,6 +15,8 @@
 import { MetadataSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/bank';
 import { TailwindModal } from '@/components/react';
 import env from '@/config/env';
+import { SignModal } from '@/components/react';
+import { Dialog } from '@headlessui/react';
 
 interface BurnPair {
   address: string;
@@ -55,17 +57,6 @@
   const [isContactsOpen, setIsContactsOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
   const updateBurnPair = (index: number, field: 'address' | 'amount', value: string) => {
     const newPairs = [...burnPairs];
     newPairs[index] = { ...newPairs[index], [field]: value };
@@ -126,28 +117,23 @@
     }
   };
 
-  const modalContent = (
-    <dialog
-      id="multi_burn_modal"
-      className={`modal ${isOpen ? 'modal-open' : ''}`}
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      className="modal modal-open fixed flex p-0 m-0 top-0"
       style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 9999,
-        backgroundColor: 'transparent',
-        padding: 0,
-        margin: 0,
         height: '100vh',
         width: '100vw',
-        display: isOpen ? 'flex' : 'none',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <div className="modal-box max-w-4xl mx-auto min-h-[30vh] max-h-[70vh] rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg overflow-y-auto">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+      <Dialog.Panel className="modal-box max-w-4xl mx-auto min-h-[30vh] max-h-[70vh] rounded-[24px] bg-[#F4F4FF] dark:bg-[#1D192D] shadow-lg overflow-y-auto">
         <form method="dialog" onSubmit={onClose}>
           <button
             aria-label="Close modal"
@@ -285,30 +271,9 @@
             )}
           </Formik>
         </div>
-      </div>
-      <form
-        method="dialog"
-        className="modal-backdrop"
-        style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: -1,
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        }}
-        onSubmit={onClose}
-      >
-        <button>close</button>
-      </form>
-    </dialog>
-  );
-
-  // Only render if we're in the browser
-  if (typeof document !== 'undefined') {
-    return createPortal(modalContent, document.body);
-  }
 
-  return null;
+        <SignModal />
+      </Dialog.Panel>
+    </Dialog>
+  );
 }