feat: add mobile modal for tip

packages/app/src/components/Header/utils.tsx

@@ -1,3 +1,4 @@
+import getIsMobile from '@/utils/get-is-mobile';
 // Inspire by https://stackoverflow.com/a/4900484/8415727
 const getChromeVersion = () => {
   const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
@@ -11,7 +12,10 @@ const getIsChrome = () => {
 const minimumChromeVersion = 102;
 
 export const shouldShowWarning = () => {
-  return !getIsChrome() || getChromeVersion() < minimumChromeVersion;
+  return (
+    !getIsMobile &&
+    (!getIsChrome() || getChromeVersion() < minimumChromeVersion)
+  );
 };
 
 export const getWarningMessage = () => {

packages/app/src/components/contact-modal/style.ts

@@ -1,6 +1,5 @@
 import { absoluteCenter, displayFlex, styled } from '@/styles';
 import bg from './bg.png';
-import CloseIcon from '@mui/icons-material/Close';
 
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {

packages/app/src/components/mobile-modal/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import Modal from '@/ui/modal';
+import getIsMobile from '@/utils/get-is-mobile';
+import {
+  ModalWrapper,
+  StyledButton,
+  StyledCloseButton,
+  StyledContent,
+  StyledTitle,
+} from './styles';
+import CloseIcon from '@mui/icons-material/Close';
+export const MobileModal = () => {
+  const [showModal, setShowModal] = useState(getIsMobile());
+  return (
+    <Modal
+      open={showModal}
+      onClose={() => {
+        setShowModal(false);
+      }}
+    >
+      <ModalWrapper>
+        <StyledCloseButton
+          onClick={() => {
+            setShowModal(false);
+          }}
+        >
+          <CloseIcon />
+        </StyledCloseButton>
+
+        <StyledTitle>Ooops!</StyledTitle>
+        <StyledContent>
+          <p>Looks like you are browsing on a mobile device.</p>
+          <p>
+            We are still working on mobile support and recommend you use a
+            desktop device.
+          </p>
+        </StyledContent>
+        <StyledButton
+          onClick={() => {
+            setShowModal(false);
+          }}
+        >
+          Got it
+        </StyledButton>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default MobileModal;

packages/app/src/components/mobile-modal/styles.ts

@@ -0,0 +1,70 @@
+import { displayFlex, styled } from '@/styles';
+import bg from './bg.png';
+
+export const ModalWrapper = styled.div(({ theme }) => {
+  return {
+    width: '348px',
+    height: '388px',
+    background: '#FFFFFF',
+    borderRadius: '28px',
+    position: 'relative',
+    backgroundImage: `url(${bg.src})`,
+  };
+});
+
+export const StyledCloseButton = styled.div(({ theme }) => {
+  return {
+    width: '66px',
+    height: '66px',
+    color: theme.colors.iconColor,
+    cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+    position: 'absolute',
+    right: '0',
+    top: '0',
+
+    svg: {
+      width: '15px',
+      height: '15px',
+      position: 'relative',
+      zIndex: 1,
+    },
+  };
+});
+
+export const StyledTitle = styled.div(({ theme }) => {
+  return {
+    ...displayFlex('center', 'center'),
+    fontSize: '20px',
+    fontWeight: 500,
+    marginTop: '60px',
+    lineHeight: 1,
+  };
+});
+
+export const StyledContent = styled.div(({ theme }) => {
+  return {
+    padding: '0 40px',
+    marginTop: '32px',
+    fontSize: '18px',
+    lineHeight: '25px',
+    'p:not(last-of-type)': {
+      marginBottom: '10px',
+    },
+  };
+});
+
+export const StyledButton = styled.div(({ theme }) => {
+  return {
+    width: '146px',
+    height: '42px',
+    background: theme.colors.primaryColor,
+    color: '#FFFFFF',
+    fontSize: '18px',
+    fontWeight: 500,
+    borderRadius: '21px',
+    margin: '52px auto 0',
+    cursor: 'pointer',
+    ...displayFlex('center', 'center'),
+  };
+});