pwa prompt on iOS

package-lock.json

@@ -65,6 +65,7 @@
         "react-countdown": "^2.3.5",
         "react-datepicker": "^4.20.0",
         "react-dom": "^18.2.0",
+        "react-ios-pwa-prompt": "^1.8.4",
         "react-longpressable": "^1.1.1",
         "react-markdown": "^9.0.1",
         "react-string-replace": "^1.1.1",
@@ -13028,6 +13029,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-ios-pwa-prompt": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-ios-pwa-prompt/-/react-ios-pwa-prompt-1.8.4.tgz",
+      "integrity": "sha512-y2dMzPZWWcdCClb1JItMJkyEfapnJe/Nz2bC8HIMaXTRA4hQfL1nwxsjiENwKESYKQdm6wrrS4b8qD2Mx/bwtw==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -25685,6 +25695,11 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-ios-pwa-prompt": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-ios-pwa-prompt/-/react-ios-pwa-prompt-1.8.4.tgz",
+      "integrity": "sha512-y2dMzPZWWcdCClb1JItMJkyEfapnJe/Nz2bC8HIMaXTRA4hQfL1nwxsjiENwKESYKQdm6wrrS4b8qD2Mx/bwtw=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -68,6 +68,7 @@
     "react-countdown": "^2.3.5",
     "react-datepicker": "^4.20.0",
     "react-dom": "^18.2.0",
+    "react-ios-pwa-prompt": "^1.8.4",
     "react-longpressable": "^1.1.1",
     "react-markdown": "^9.0.1",
     "react-string-replace": "^1.1.1",

pages/_app.js

@@ -18,6 +18,9 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { LoggerProvider } from '../components/logger'
 import { ChainFeeProvider } from '../components/chain-fee.js'
+import dynamic from 'next/dynamic'
+
+const PWAPrompt = dynamic(() => import('react-ios-pwa-prompt'), { ssr: false })
 
 NProgress.configure({
   showSpinner: false
@@ -100,6 +103,7 @@ export default function MyApp ({ Component, pageProps: { ...props } }) {
                             <ChainFeeProvider chainFee={chainFee}>
                               <ErrorBoundary>
                                 <Component ssrData={ssrData} {...otherProps} />
+                                <PWAPrompt copyBody='This website has app functionality. Add it to your home screen to use it in fullscreen and receive notifications.' promptOnVisit={2} />
                               </ErrorBoundary>
                             </ChainFeeProvider>
                           </BlockHeightProvider>

svgs/death-skull.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><path d="M0 0h512v512H0z" fill="none"/><path d="M255.997 16.004c-120 0-239.997 60-239.997 149.998C16 226.002 61 256 61 316c0 45-15 45-15 75 0 14.998 48.01 32.002 89.998 44.998v60h239.997v-60s90.567-27.957 90-45c-.933-27.947-15-30-15-74.998 0-30 45.642-91.42 44.998-149.998 0-90-119.998-149.998-239.996-149.998zm-90 179.997c33.137 0 60 26.864 60 60 0 33.136-26.863 60-60 60C132.863 316 106 289.136 106 256c0-33.136 26.862-60 59.998-60zm179.998 0c33.136 0 60 26.864 60 60 0 33.136-26.864 60-60 60-33.136 0-60-26.864-60-60 0-33.136 26.864-60 60-60zm-89.998 105c15 0 45 60 45 75 0 29.998 0 29.998-15 29.998h-60c-15 0-15 0-15-30 0-15 30-74.998 45-74.998z"/></svg>