improved Modals tarnsitions

src/Components/Login/LoginSuccessCard.tsx

@@ -1,25 +1,24 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
 import { useAppDispatch } from '../../utils/hooks';
 import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
-import { IoLockClosed, } from 'react-icons/io5'
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 export default function LoginSuccessCard({ onClose, direction, ...props }: ModalCard) {
 
     const dispatch = useAppDispatch();
 
-    const handleNext = () => {
-        dispatch(replaceModal({
-            modalId: ModalId.LoginScanWallet,
-            direction: Direction.NEXT
-        }))
-    }
+    const handleNext = useCallback(() => {
+        // dispatch(replaceModal({
+        //     modalId: ModalId.LoginScanWallet,
+        //     direction: Direction.NEXT
+        // })) 
+        onClose && onClose()
+    }, [dispatch, onClose])
 
 
     useEffect(() => {
-        // const timeout = setTimeout(handleNext, 3000)
-        // return () => clearTimeout(timeout)
+        const timeout = setTimeout(handleNext, 3000)
+        return () => clearTimeout(timeout)
     }, [handleNext])
 
     return (

src/Components/Login/ScanningWalletCard.tsx

@@ -32,7 +32,6 @@ export default function ScanningWalletCard({ onClose, direction, ...props }: Mod
             animate="animate"
             exit='exit'
             className="modal-card max-w-[343px] p-24 rounded-xl relative"
-
         >
             <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
             <h2 className='text-h5 font-bold'>Log in with Lightning  <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></h2>

src/Components/Shared/Modal/Modal.tsx

@@ -1,20 +1,29 @@
+import { motion } from "framer-motion";
 import { ReactElement } from "react";
 
 
 interface Props {
     onClose: () => void;
+
     children: ReactElement
+    [key: string]: any;
 }
 
 
-export default function Modal(props: Props) {
+export default function Modal({ onClose, children, ...props }: Props) {
     return (
-        <div className='w-screen h-full fixed inset-0 py-32 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'>
+        <motion.div
+            initial={false}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className='w-screen h-full fixed inset-0 py-32 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'
+            {...props}
+        >
             <div
                 className="w-screen h-full bg-gray-300 bg-opacity-50 absolute inset-0"
-                onClick={props.onClose}
+                onClick={onClose}
             ></div>
-            {props.children}
-        </div>
+            {children}
+        </motion.div>
     )
 }

src/Components/Shared/ModalsContainer/ModalsContainer.tsx

@@ -59,7 +59,11 @@ const ModalsMap = (modalId: ModalId) => {
 
 export default function ModalsContainer() {
 
-    const { isOpen, openModals, direction } = useAppSelector(state => ({ isOpen: state.modals.isOpen, openModals: state.modals.openModals, direction: state.modals.direction }))
+    const { isOpen, openModals, direction } = useAppSelector(state => ({
+        isOpen: state.modals.isOpen,
+        openModals: state.modals.openModals,
+        direction: state.modals.direction
+    }))
 
     const dispatch = useAppDispatch();
     const onClose = () => dispatch(closeModal());
@@ -69,9 +73,9 @@ export default function ModalsContainer() {
         else document.body.style.overflowY = "initial";
     }, [isOpen]);
 
-
     return (
         <Portal>
+
             <AnimatePresence exitBeforeEnter>
                 {isOpen &&
                     <motion.div
@@ -83,14 +87,15 @@ export default function ModalsContainer() {
                             transition: { ease: "easeInOut" },
                         }}
                     >
-
-                        {openModals.map(modal => {
-                            const Child = ModalsMap(modal.modalId);
-                            return (
-                                <Modal key={modal.modalId} onClose={onClose}>
-                                    <Child onClose={onClose} direction={direction} {...modal.propsToPass} />
-                                </Modal>)
-                        })}
+                        <AnimatePresence>
+                            {openModals.map(modal => {
+                                const Child = ModalsMap(modal.modalId);
+                                return (
+                                    <Modal key={modal.modalId} onClose={onClose} direction={direction}>
+                                        <Child onClose={onClose} direction={direction} {...modal.propsToPass} />
+                                    </Modal>)
+                            })}
+                        </AnimatePresence>
                     </motion.div>}
             </AnimatePresence>
         </Portal>

src/redux/features/modals.slice.ts

@@ -32,7 +32,9 @@ const initialState = {
   isOpen: true,
   isLoading: false,
   direction: Direction.START,
-  openModals: [{ modalId: ModalId.LoginSuccess }] as OpenModal[],
+  openModals: [
+    // { modalId: ModalId.LoginSuccess }
+  ] as OpenModal[],
 } as StoreState;
 
 export const modalSlice = createSlice({