Ask users to install PWA

attestate · Aug 23, 2023 · 555eb61 · 555eb61
1 parent 15e5028
commit 555eb61
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/web/src/Navigation.jsx b/src/web/src/Navigation.jsx
@@ -4,6 +4,11 @@ import { useEffect, useState } from "react";
 
 import { client, chains } from "./client.mjs";
 import Bell from "./Bell.jsx";
+import {
+  isSafariOnIOS,
+  isChromeOnAndroid,
+  isRunningPWA,
+} from "./OnboardingModal.jsx";
 
 const shorten = (address) =>
   address.slice(0, 6) +
@@ -14,10 +19,32 @@ const LearnMore = () => {
   const { isConnected } = useAccount();
   const [display, setDisplay] = useState(false);
 
+  const openModal = () => {
+    window.dispatchEvent(new CustomEvent("openModal"));
+  };
+
   useEffect(() => {
     setDisplay(!isConnected);
   }, [isConnected]);
 
+  if (!display && !isRunningPWA() && (isChromeOnAndroid() || isSafariOnIOS())) {
+    return (
+      <div style={{ textAlign: "center", paddingRight: "4px" }}>
+        <span
+          onClick={openModal}
+          style={{
+            cursor: "pointer",
+            textDecoration: "underline",
+            color: "black",
+          }}
+        >
+          Install our <br />
+          app 📲
+        </span>
+      </div>
+    );
+  }
+
   return display ? (
     <div style={{ textAlign: "center", paddingRight: "4px" }}>
       <a

diff --git a/src/web/src/OnboardingModal.jsx b/src/web/src/OnboardingModal.jsx
@@ -99,7 +99,7 @@ const ShareSVG = () => (
   </svg>
 );
 
-function isSafariOnIOS() {
+export function isSafariOnIOS() {
   const ua = navigator.userAgent;
   const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
   const webkit = !!ua.match(/WebKit/i);
@@ -108,14 +108,14 @@ function isSafariOnIOS() {
   return iOS && webkit && notChrome && notEdge;
 }
 
-function isChromeOnAndroid() {
+export function isChromeOnAndroid() {
   const ua = navigator.userAgent;
   const android = !!ua.match(/Android/i);
   const chrome = !!ua.match(/Chrome/i);
   return android && chrome;
 }
 
-function isRunningPWA() {
+export function isRunningPWA() {
   return (
     window.matchMedia("(display-mode: standalone)").matches ||
     window.navigator.standalone ||
@@ -131,12 +131,20 @@ class SimpleModal extends Component {
       hasCheckedAccount: false,
     };
     this.checkAccountDebounced = debounce(this.checkAccount, 1000); // Debounce for 1000ms = 1s
+    this.openModal = this.openModal.bind(this);
+  }
+  openModal() {
+    this.setState({ showModal: true });
   }
 
   componentDidMount() {
     this.checkAccountDebounced();
+    window.addEventListener("openModal", this.openModal);
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("openModal", this.openModal);
+  }
   checkAccount = () => {
     const account = getAccount();
     const hasVisited =
@@ -153,7 +161,7 @@ class SimpleModal extends Component {
 
   render() {
     if (!this.state.hasCheckedAccount) {
-      return null; // or replace with a loading spinner or similar
+      return null;
     }
 
     const customStyles = {