refactor: reuse common ui dialogs and message for mobile and LayerUI (#5611)

* refactor: Move common UI dialogs to component

* refactor

* fix

src/components/LayerUI.tsx

@@ -381,7 +381,7 @@ const LayerUI = ({
     );
   };
 
-  const dialogs = (
+  return (
     <>
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
@@ -409,12 +409,7 @@ const LayerUI = ({
           }
         />
       )}
-    </>
-  );
-
-  return device.isMobile ? (
-    <>
-      {dialogs}
+      {device.isMobile && (
         <MobileMenu
           appState={appState}
           elements={elements}
@@ -434,9 +429,9 @@ const LayerUI = ({
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
         />
-    </>
-  ) : (
-    <>
+      )}
+
+      {!device.isMobile && (
         <div
           className={clsx("layer-ui__wrapper", {
             "disable-pointerEvents":
@@ -453,7 +448,6 @@ const LayerUI = ({
               : {}
           }
         >
-        {dialogs}
           {renderFixedSideContainer()}
           <Footer
             appState={appState}
@@ -485,6 +479,7 @@ const LayerUI = ({
             </button>
           )}
         </div>
+      )}
       {appState.isLibraryOpen && (
         <div className="layer-ui__sidebar">{libraryMenu}</div>
       )}