fix: disable AI on mobile

Author: Holybasil

src/app/layout.tsx

@@ -9,7 +9,6 @@ import React, { Suspense } from "react"
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
 import InitColorSchemeScript from "@mui/material/InitColorSchemeScript"
 
-import AIModal from "@/components/AIModal"
 import GlobalComponents from "@/components/GlobalComponents"
 import ScrollToTop from "@/components/ScrollToTop"
 import WebVitals from "@/components/WebVitals"
@@ -74,7 +73,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <BridgeContextProvider>
                   {children}
                   <GlobalComponents></GlobalComponents>
-                  <AIModal></AIModal>
                 </BridgeContextProvider>
               </RainbowProvider>
             </VersionChecker>

src/components/AIModal/Operation.tsx

@@ -88,7 +88,7 @@ const Operation = props => {
                           lineHeight: "1.6rem",
                           padding: "0.4rem 0.8rem",
                           backgroundColor: "text.primary",
-                          marginTop: "0.8rem",
+                          marginTop: "0.8rem !important",
                           "& .MuiTooltip-arrow": {
                             color: "#101010",
                           },

src/components/AIModal/index.tsx

@@ -56,6 +56,28 @@ const AIModal = () => {
     }
   }, [aiModalVisible])
 
+  // useLayoutEffect(() => {
+  //   function adjustLayout() {
+  //     const viewportHeight = window.visualViewport!.height || "100vh"
+  //     modalRef.current!.style.height = `${viewportHeight}px`
+  //   }
+  //   function preventTouchScroll(e) {
+  //     e.preventDefault()
+  //   }
+
+  //   if (isMobile) {
+  //     document.body.addEventListener("touchmove", preventTouchScroll)
+  //     window.visualViewport!.addEventListener("resize", adjustLayout)
+  //   }
+
+  //   return () => {
+  //     if (isMobile) {
+  //       window.visualViewport!.removeEventListener("resize", adjustLayout)
+  //       document.body.removeEventListener("touchmove", preventTouchScroll)
+  //     }
+  //   }
+  // }, [isMobile])
+
   const handleChangeSearchText = e => {
     setSearchText(e.target.value)
   }
@@ -185,7 +207,6 @@ const AIModal = () => {
       })
     })
   }
-
   return (
     <AnimatePresence>
       {aiModalVisible ? (
@@ -194,10 +215,11 @@ const AIModal = () => {
             position: "fixed",
             zIndex: "var(--mui-zIndex-modal)",
             right: [0, "2.5rem"],
-            top: [0, "7.5rem"],
+            top: ["unset", "7.5rem"],
+            bottom: [0, "unset"],
 
             width: ["100%", "46.8rem"],
-            height: ["100%", "calc(100svh - 7.5rem - 10rem)"],
+            height: ["100vh", "calc(100svh - 7.5rem - 10rem)"],
             borderRadius: [0, "1.6rem"],
 
             display: "flex",

src/components/GlobalComponents/index.tsx

@@ -1,9 +1,14 @@
+import { isDesktop } from "react-device-detect"
+
 import TxHistoryDialog from "@/app/bridge/TxHistoryDialog"
 
+import AIModal from "../AIModal"
+
 const GlobalComponents = () => {
   return (
     <>
       <TxHistoryDialog></TxHistoryDialog>
+      {isDesktop && <AIModal></AIModal>}
     </>
   )
 }

src/components/Header/mobile_header.tsx

@@ -181,7 +181,7 @@ const MobileHeader = ({ currentMenu }) => {
           <Box sx={{ margin: "-0.8rem 2rem 0" }}>
             {renderList()}
             {!isSepolia && <MobileGasPriceViewer dark={dark}></MobileGasPriceViewer>}
-            {!isSepolia && <AskAI isMobile></AskAI>}
+            {/* {!isSepolia && <AskAI isMobile></AskAI>} */}
           </Box>
         </Box>
       )}