Added modal to inform the lack of optimization for mobile

apps/abclaunch/src/pages/Home.tsx

@@ -1,11 +1,13 @@
 import { Divider, HStack, Text, VStack, Image } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
 import ChooseOption from '../components/ChooseOption';
+import NotOptimizedModal from 'commons-ui/src/components/MobileOptimizationWarningModal';
 
 export default function Launchpad() {
     const navigate = useNavigate();
     return (
         <VStack bg="brand.100" pb="100px">
+            <NotOptimizedModal />
             <VStack spacing={0}>
                 <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Launch</Text>
                 <Text color="brand.900" fontSize="24px" pt="32px">Build a regenerative economy with an</Text>
@@ -35,20 +37,20 @@ export default function Launchpad() {
                 </HStack>
             </HStack>
             <HStack spacing={16} pt="46px">
-                <ChooseOption 
+                <ChooseOption
                     title="New DAO"
                     description={[
-                      "I want to create a new",
-                      "DAO and launch an ABC." 
+                        "I want to create a new",
+                        "DAO and launch an ABC."
                     ]}
                     onButtonClick={() => navigate('/new-dao')}
                     buttonText="Launch on a new DAO"
                 />
-                <ChooseOption 
+                <ChooseOption
                     title="Existing DAO"
                     description={[
-                      "I have a DAO and want to",
-                      "attach an ABC to it." 
+                        "I have a DAO and want to",
+                        "attach an ABC to it."
                     ]}
                     onButtonClick={() => navigate('/existing-dao')}
                     buttonText="Launch on an existing DAO"

apps/abcswap/src/pages/Home.tsx

@@ -3,6 +3,7 @@ import { Button, Divider, HStack, Image, Stack, Text, VStack } from '@chakra-ui/
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { DaoNameInput, useIsRegisteredDaoWithApp } from 'dao-utils';
+import NotOptimizedModal from 'commons-ui/src/components/MobileOptimizationWarningModal';
 
 export default function Home() {
 
@@ -20,6 +21,7 @@ export default function Home() {
 
     return (
         <VStack bg="brand.100" pb="100px0" textAlign="center">
+            <NotOptimizedModal />
             <VStack spacing={0}>
                 <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Swap</Text>
                 <Text color="brand.900" fontSize="24px" pt="32px">Find and swap ABC tokens.</Text>

pkg/commons-ui/src/components/Layout.tsx

@@ -9,7 +9,7 @@ type LayoutProps = {
 
 export default function Layout({ children, variant }: LayoutProps) {
     return (
-        <Box width="100%" height="100vh" bgColor="brand.100">
+        <Box width="100%" height="100vh" overflowX="hidden" overflowY="scroll" bgColor="brand.100">
             <Header variant={variant} />
                 {children}
             <Footer />

pkg/commons-ui/src/components/MobileOptimizationWarningModal.tsx

@@ -0,0 +1,47 @@
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+    Text,
+    Button,
+    useDisclosure,
+    useBreakpointValue,
+    VStack
+} from "@chakra-ui/react"
+import { useEffect } from "react"
+
+
+export default function MobileOptimizationWarningModal() {
+
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const isMobile = useBreakpointValue({ base: true, md: false })
+
+    useEffect(() => {
+        if (isMobile) {
+            onOpen();
+        }
+    }, [isMobile, onOpen])
+
+    if (!isMobile) return (<></>)
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} isCentered>
+                <ModalOverlay />
+                <ModalContent border="1px solid black" borderRadius="16px">
+                    <ModalHeader>Attention!</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody textAlign="center" m="2.5%">
+                        <VStack>
+                            <Text>This MVP is not yet optimized for mobile. It is best experienced on a desktop.</Text>
+                            <Button onClick={onClose}>Ok</Button>
+                        </VStack>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}