add mobile guard view

terra-money · Oct 31, 2023 · 1fa1466 · 1fa1466
1 parent 8896115
commit 1fa1466
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 14 deletions.
diff --git a/apps/warp-protocol/public/images/BackgroundBigBall.png b/apps/warp-protocol/public/images/BackgroundBigBall.png
diff --git a/apps/warp-protocol/src/components/layout/Layout.module.sass b/apps/warp-protocol/src/components/layout/Layout.module.sass
@@ -74,3 +74,34 @@
   height: 20px !important
   path
     fill: rgba(215, 224, 223, 1) !important
+
+.mobile_background_warp
+  height: 320px
+
+.mobile_warning
+  position: relative
+  padding: 20px
+  height: 100%
+  width: 100%
+  display: flex
+  justify-content: space-between
+  align-items: center
+  flex-direction: column
+
+.logo
+  align-self: flex-start
+  font-size: 24px
+  color: #DFE2E1
+  font-weight: 600
+  text-transform: lowercase
+
+.center
+  position: absolute
+  top: calc(50% - 100px)
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+.warning_label
+  margin-top: 10px
diff --git a/apps/warp-protocol/src/components/layout/Layout.tsx b/apps/warp-protocol/src/components/layout/Layout.tsx
@@ -6,30 +6,53 @@ import { Text } from 'components/primitives';
 import { useChainSelector } from '@terra-money/apps/hooks';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { useChainSelectorDialog } from 'components/dialog/chain-selector/ChainSelectorDialog';
+import { useMediaQuery } from 'usehooks-ts';
 
 interface LayoutProps extends PropsWithChildren {}
 
+const MobileWarning = () => (
+  <div className={styles.mobile_warning}>
+    <div className={styles.logo}>warp.</div>
+    <div className={styles.center}>
+      <Text variant="text" className={styles.warning_text}>
+        Mobile Layout Not Supported
+      </Text>
+      <Text variant="label" className={styles.warning_label}>
+        Please visit from a desktop to access the app.
+      </Text>
+    </div>
+
+    <img alt="" src="images/BackgroundBigBall.png" className={styles.mobile_background_warp} />
+  </div>
+);
+
 export const Layout = ({ children }: LayoutProps) => {
   const { selectedChain } = useChainSelector();
   const openChainSelectorDialog = useChainSelectorDialog();
 
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
   return (
     <div className={styles.root}>
-      <>
-        <BackgroundWrap className={styles.background_wrap} />
-        <Text variant="label" className={styles.protocol_name}>
-          Warp protocol
-        </Text>
-        <div className={styles.chain_selector} onClick={() => openChainSelectorDialog({})}>
-          <div className={styles.chain_icon}>{selectedChain.icon}</div>
-          <Text variant="text" className={styles.chain_text}>
-            {selectedChain.name}
+      {isMobile ? (
+        <MobileWarning />
+      ) : (
+        <>
+          <BackgroundWrap className={styles.background_wrap} />
+          <Text variant="label" className={styles.protocol_name}>
+            Warp protocol
           </Text>
-          <KeyboardArrowDownIcon className={styles.chevron} />
-        </div>
-      </>
-      <Sidebar className={styles.sidebar} />
-      <div className={styles.content}>{children}</div>
+          <div className={styles.chain_selector} onClick={() => openChainSelectorDialog({})}>
+            <div className={styles.chain_icon}>{selectedChain.icon}</div>
+            <Text variant="text" className={styles.chain_text}>
+              {selectedChain.name}
+            </Text>
+            <KeyboardArrowDownIcon className={styles.chevron} />
+          </div>
+          <Sidebar className={styles.sidebar} />
+          <div className={styles.content}>{children}</div>
+        </>
+      )}
     </div>
   );
 };