Fix: tx modal with collapsed sidebar

src/components/common/PageLayout/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactElement } from 'react'
+import { useContext, useEffect, useState, type ReactElement } from 'react'
 import classnames from 'classnames'
 
 import Header from '@/components/common/Header'
@@ -9,6 +9,7 @@ import SideDrawer from './SideDrawer'
 import { AppRoutes } from '@/config/routes'
 import useDebounce from '@/hooks/useDebounce'
 import { useRouter } from 'next/router'
+import { TxModalContext } from '@/components/tx-flow'
 
 const isNoSidebarRoute = (pathname: string): boolean => {
   return [
@@ -29,6 +30,8 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
   const router = useRouter()
   const [noSidebar, setNoSidebar] = useState<boolean>(isNoSidebarRoute(pathname))
   const [isSidebarOpen, setSidebarOpen] = useState<boolean>(true)
+  const hideSidebar = noSidebar || !isSidebarOpen
+  const { setFullWidth } = useContext(TxModalContext)
   let isAnimated = useDebounce(!noSidebar, 300)
   if (noSidebar) isAnimated = false
 
@@ -37,6 +40,10 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
     setNoSidebar(isNoSidebarRoute(pathname) || noSafeAddress)
   }, [pathname, router])
 
+  useEffect(() => {
+    setFullWidth(hideSidebar)
+  }, [hideSidebar, setFullWidth])
+
   return (
     <>
       <header className={css.header}>
@@ -47,7 +54,7 @@ const PageLayout = ({ pathname, children }: { pathname: string; children: ReactE
 
       <div
         className={classnames(css.main, {
-          [css.mainNoSidebar]: noSidebar || !isSidebarOpen,
+          [css.mainNoSidebar]: hideSidebar,
           [css.mainAnimated]: isAnimated,
         })}
       >

src/components/common/TxModalDialog/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment, type ReactElement } from 'react'
-import { IconButton } from '@mui/material'
-import { Dialog, DialogTitle, type DialogProps } from '@mui/material'
+import { IconButton, Dialog, DialogTitle, type DialogProps } from '@mui/material'
+import classnames from 'classnames'
 import CloseIcon from '@mui/icons-material/Close'
 import css from './styles.module.css'
 
@@ -15,14 +15,15 @@ const TxModalDialog = ({
   children,
   onClose,
   fullScreen = false,
+  fullWidth = false,
   ...restProps
 }: ModalDialogProps): ReactElement => {
   return (
     <Dialog
       {...restProps}
       fullScreen={true}
       scroll={fullScreen ? 'paper' : 'body'}
-      className={css.dialog}
+      className={classnames(css.dialog, { [css.fullWidth]: fullWidth })}
       onClick={(e) => e.stopPropagation()}
       TransitionComponent={Fragment}
       slots={{ backdrop: Fragment }}

src/components/common/TxModalDialog/styles.module.css

@@ -1,7 +1,12 @@
 .dialog {
   top: 52px;
   left: 230px;
-  z-index: 1200;
+  z-index: 1;
+  transition: left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+}
+
+.dialog.fullWidth {
+  left: 0;
 }
 
 .dialog :global .MuiDialogActions-root {

src/components/tx-flow/index.tsx

@@ -8,17 +8,20 @@ type TxModalContextType = {
   txFlow: ReactNode | undefined
   setTxFlow: (txFlow: TxModalContextType['txFlow'], onClose?: () => void) => void
   onClose: () => void
+  setFullWidth: (fullWidth: boolean) => void
 }
 
 export const TxModalContext = createContext<TxModalContextType>({
   txFlow: undefined,
   setTxFlow: noop,
   onClose: noop,
+  setFullWidth: noop,
 })
 
 export const TxModalProvider = ({ children }: { children: ReactNode }): ReactElement => {
   const [txFlow, setFlow] = useState<TxModalContextType['txFlow']>(undefined)
   const [onClose, setOnClose] = useState<TxModalContextType['onClose']>(noop)
+  const [fullWidth, setFullWidth] = useState<boolean>(false)
   const router = useRouter()
 
   const handleModalClose = useCallback(() => {
@@ -44,10 +47,10 @@ export const TxModalProvider = ({ children }: { children: ReactNode }): ReactEle
   }, [router, handleModalClose])
 
   return (
-    <TxModalContext.Provider value={{ txFlow, setTxFlow, onClose }}>
+    <TxModalContext.Provider value={{ txFlow, setTxFlow, onClose, setFullWidth }}>
       {children}
 
-      <TxModalDialog open={!!txFlow} onClose={handleModalClose}>
+      <TxModalDialog open={!!txFlow} onClose={handleModalClose} fullWidth={fullWidth}>
         {txFlow}
       </TxModalDialog>
     </TxModalContext.Provider>