Add mobile landing page (zkp2p#116)

asoong · Oct 18, 2023 · 60ca082 · 60ca082
1 parent e803c54
commit 60ca082
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 24 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -12,6 +12,8 @@ import { Swap } from "./pages/Swap";
 import { Deposit } from "./pages/Deposit";
 import { TopNav } from "@components/layouts/TopNav";
 import { BottomNav } from "@components/layouts/BottomNav";
+import { MobileLandingPage } from "@components/MobileLandingPage";
+import { useDevice } from "@hooks/useDevice";
 
 import AccountProvider from "./contexts/Account/AccountProvider";
 import SmartContractsProvider from './contexts/SmartContracts/SmartContractsProvider';
@@ -39,30 +41,36 @@ const RedirectToSwap = () => {
 };
 
 const App = () => {
-  return (
-    <Router>
-      <Providers>
-        <div className="app-container">
-          <TopNav />
-
-          <div className="app-content">
-            <Routes>
-              <Route path="/" element={<RedirectToSwap />} />
-              <Route path="/swap" element={<Swap />} />
-              <Route path="/deposit" element={<Deposit />} />
-              <Route path="/register" element={<Registration />} />
-              <Route path="/permissions" element={<Permissions />} />
-              <Route element={<>Not found</>} />
-            </Routes>
-          </div>
+  const { isMobile } = useDevice();
 
-          <div className="app-footer">
-            <BottomNav />
+  if (isMobile()) {
+    return <MobileLandingPage />;
+  } else {
+    return (
+      <Router>
+        <Providers>
+          <div className="app-container">
+            <TopNav />
+
+            <div className="app-content">
+              <Routes>
+                <Route path="/" element={<RedirectToSwap />} />
+                <Route path="/swap" element={<Swap />} />
+                <Route path="/deposit" element={<Deposit />} />
+                <Route path="/register" element={<Registration />} />
+                <Route path="/permissions" element={<Permissions />} />
+                <Route element={<>Not found</>} />
+              </Routes>
+            </div>
+
+            <div className="app-footer">
+              <BottomNav />
+            </div>
           </div>
-        </div>
-      </Providers>
-    </Router>
-  );
+        </Providers>
+      </Router>
+    );
+  }
 };
 
 interface ProvidersProps {

diff --git a/client/src/components/MobileLandingPage.tsx b/client/src/components/MobileLandingPage.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from "styled-components";
+
+import { ThemedText } from '../theme/text';
+import { Button } from '@components/Button';
+
+
+export const MobileLandingPage: React.FC = () => {
+  /*
+   * Helpers
+   */
+
+  const handleJoinTelegramClicked = () => {
+    window.open('https://t.me/+XDj9FNnW-xs5ODNl', '_blank');
+  };
+
+  /*
+   * Component
+   */
+
+  return (
+    <Container>
+      <Logo>
+        <img src={`${process.env.PUBLIC_URL}/favicon.ico`} alt="logo" />
+      </Logo>
+
+      <ModalContainer>
+        <ThemedText.HeadlineMedium style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
+          Sorry!
+        </ThemedText.HeadlineMedium>
+
+        <ThemedText.SubHeader style={{ flex: '1', margin: 'auto', textAlign: 'center' }}>
+          ZKP2P is not yet optimized for mobile devices. Please use a desktop for the best experience and join our Telegram for updates on mobile support.
+        </ThemedText.SubHeader>
+
+        <Button
+          onClick={handleJoinTelegramClicked}
+          fullWidth={true}
+        >
+          Join our Telegram
+        </Button>
+      </ModalContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  height: calc(100vh - 76px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 32px;
+`;
+
+const ModalContainer = styled.div`
+  width: 50%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 2rem;
+  background: #0D111C;
+  align-items: center;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: auto;
+  margin-bottom: auto;
+`;
+
+const Logo = styled.div`
+  img {
+    width: 44px;
+    height: 44px;
+    object-fit: cover;
+  }
+`;
+
diff --git a/client/src/components/modals/Modal.tsx b/client/src/components/modals/Modal.tsx
@@ -4,8 +4,8 @@ import { ArrowLeft } from 'react-feather';
 
 import { ThemedText } from '../../theme/text'
 import { LabeledSwitch } from "../common/LabeledSwitch";
-import { Overlay } from '@components/modals/Overlay'
-import { TitleCenteredRow } from '@components/layouts/Row'
+import { Overlay } from '@components/modals/Overlay';
+import { TitleCenteredRow } from '@components/layouts/Row';
 import { PROOF_TOOLTIP } from "@helpers/tooltips";
 import useProofGenSettings from "@hooks/useProofGenSettings";
 import { ProofGenerationStatus } from  "../ProofGen/types";

diff --git a/client/src/hooks/useDevice.ts b/client/src/hooks/useDevice.ts
@@ -0,0 +1,10 @@
+export const useDevice = () => {
+  const isMobile = () => {
+    const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent;
+    return /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(userAgent);
+  };
+
+  return {
+    isMobile,
+  };
+}