add mobilescreen container

src/App.tsx

@@ -2,6 +2,7 @@ import './App.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
 import React from 'react';
+import { useMediaQuery } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import {
@@ -14,6 +15,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { baseSepolia } from 'viem/chains';
 import { useAccount } from 'wagmi';
 
+import MobileScreensContainer from './components/layouts/MobileScreensContainer';
 import { CustomSnackbar } from './components/shared/CustomSnackbar';
 import useSiweAuth from './hooks/useSiweAuth';
 import DefaultLayout from './layouts/DefaultLayout';
@@ -36,11 +38,17 @@ const queryClient = new QueryClient({
 });
 
 const App: React.FC = () => {
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+
   const { authStatus, authenticationAdapter } = useSiweAuth();
   const { chainId } = useAccount();
 
   globalThis.Buffer = Buffer;
 
+  if (isSmallScreen) {
+    return <MobileScreensContainer />;
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <RainbowKitAuthenticationProvider

src/components/layouts/MobileScreensContainer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+const MobileScreensContainer: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        color: 'white',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999,
+        textAlign: 'center',
+        padding: '20px',
+      }}
+    >
+      <Typography variant="subtitle1" color="primary">
+        We are currently not optimized for mobile devices. Please check back on
+        a desktop or larger screen.
+      </Typography>
+    </Box>
+  );
+};
+
+export default MobileScreensContainer;