added pwa prompt for ios

Stephen-Gordon · Mar 19, 2024 · 3367306 · 3367306
1 parent a911369
commit 3367306
Show file tree

Hide file tree

Showing 18 changed files with 1,115 additions and 3,479 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@headlessui/react": "^1.7.18",
     "@next/font": "^14.1.0",
     "@privy-io/react-auth": "^1.59.2",
-    "@pushprotocol/restapi": "^1.6.8",
+    "@pushprotocol/restapi": "^0.0.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-progress": "^1.0.3",
@@ -49,34 +49,27 @@
     "date-fns": "^3.3.1",
     "ethers": "5.7",
     "framer-motion": "^11.0.8",
-    "html5-qrcode": "^2.3.8",
     "lucide-react": "^0.297.0",
-    "moralis": "^2.24.2",
     "next": "^14.1.3",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "permissionless": "^0.0.30",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.1",
-    "react-camera-pro": "^1.3.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
-    "react-icons": "^4.12.0",
-    "react-loader-spinner": "^6.1.6",
+    "react-ios-pwa-prompt": "^1.8.4",
     "react-modal-sheet": "^2.2.0",
     "react-pull-to-refresh": "^2.0.1",
     "react-qr-code": "^2.0.12",
-    "react-qr-reader": "^3.0.0-beta-1",
     "react-qrcode-logo": "^2.9.0",
     "react-redux": "^9.1.0",
     "react-secure-storage": "^1.3.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
     "reverse-mirage": "^1.0.3",
-    "socket.io": "^4.7.4",
-    "socket.io-client": "^4.7.4",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "truncate-eth-address": "^1.0.2",
@@ -87,7 +80,7 @@
     "web3": "^4.4.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.3.0",
+    "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^16.2.4",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",

diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx
@@ -153,7 +153,7 @@ export default function Page() {
                     {month.monthName}
                   </p>
                 </div>
-                <div className='grid grid-flow-row auto-rows-max grid-cols-1 gap-2 text-xl text-white'>
+                <div className='grid grid-flow-row auto-rows-max overflow-scroll h-[calc(100vh-80px)] grid-cols-1 gap-2 text-xl text-white'>
                   {month.transactions.map((transaction, j) => (
                     <div key={j}>
                       {transaction.to !== payeeAddress ? (
@@ -187,31 +187,30 @@ export default function Page() {
           <div className='overflow-auto p-4'>
             <div ref={end}></div>
           </div>
-
-          <DrawerFooter className='fixed bottom-20  '>
-            <div className=''>
-              <Link
-                href={{
-                  pathname: '/send',
-                  query: { payee: payeeAddress },
-                }}
-              >
-                <Button className='text-xl' size={'lg'} variant={'default'}>
-                  <div className='flex grid-cols-3 content-center items-center'>
-                    <div className='text-xl'>
-                      <div>Send</div>
-                    </div>
-                    <div className='px-2'></div>
-                    <div>
-                      <Send size={20} />
-                    </div>
-                  </div>
-                </Button>
-              </Link>
-            </div>
-          </DrawerFooter>
         </>
       )}
+      <DrawerFooter style={{zIndex: 3000}} className='fixed w-full bottom-4  '>
+        <div className='w-full'>
+          <Link
+            href={{
+              pathname: '/send',
+              query: { payee: payeeAddress },
+            }}
+          >
+            <Button className='text-xl' size={'lg'} variant={'default'}>
+              <div className='flex grid-cols-3 content-center items-center'>
+                <div className='text-xl'>
+                  <div>Send</div>
+                </div>
+                <div className='px-2'></div>
+                <div>
+                  <Send size={20} />
+                </div>
+              </div>
+            </Button>
+          </Link>
+        </div>
+      </DrawerFooter>
     </>
   );
 }
diff --git a/src/app/components/BottomNav/BottomNav.tsx b/src/app/components/BottomNav/BottomNav.tsx
@@ -12,8 +12,8 @@ const BottomNavbar = () => {
 
   return (
     <nav
-      style={{ zIndex: 2000 }}
-      className='bg-background/50 fixed bottom-0 flex w-full justify-between overflow-hidden bg-opacity-10 bg-clip-padding p-4 px-8 pb-8 saturate-200 backdrop-blur-xl backdrop-filter'
+
+      className='bg-background/50 fixed z-40 bottom-0 flex w-full justify-between overflow-hidden bg-opacity-10 bg-clip-padding p-4 px-8 pb-8 saturate-200 backdrop-blur-xl backdrop-filter'
     >
       <Link href='/home'>
         <Home

diff --git a/src/app/components/SendUsdc/SendUsdc copy.tsx b/src/app/components/SendUsdc/SendUsdc copy.tsx
@@ -8,9 +8,6 @@ import { useDispatch, useSelector } from 'react-redux';
 // Next
 import { useSearchParams } from 'next/navigation';
 
-// Loading
-import { RotatingLines } from 'react-loader-spinner';
-
 // React
 import { useEffect, useState } from 'react';
 import truncateEthAddress from 'truncate-eth-address';

diff --git a/src/app/components/ui/drawer.tsx b/src/app/components/ui/drawer.tsx
@@ -49,7 +49,7 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className='bg-muted mx-auto mt-4 h-2 w-[100px] overflow-y-scroll rounded-full bg-opacity-10 bg-clip-padding backdrop-blur-sm backdrop-filter' />
+      <div className='bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full bg-opacity-10 bg-clip-padding backdrop-blur-sm backdrop-filter' />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

diff --git a/src/app/error.tsx b/src/app/error.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { Metadata } from 'next';
-import * as React from 'react';
+import React from 'react';
 
 import { useEffect } from 'react';
 import '@radix-ui/themes/styles.css';
@@ -11,20 +10,15 @@ import { Providers } from '../GlobalRedux/provider';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
 import config from '@/app/config';
-import Head from 'next/head';
 import '@/styles/globals.css';
-// !STARTERCONF This is for demo purposes, remove @/styles/colors.css import immediately
 import '@/styles/colors.css';
 
-import { siteConfig } from '@/constant/config';
 
 // Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState, persistor } from '@/GlobalRedux/store';
+import {  persistor } from '@/GlobalRedux/store';
 
 import { PersistGate } from 'redux-persist/integration/react';
-import { usePathname, useRouter } from 'next/navigation';
-import ReactPullToRefresh from 'react-pull-to-refresh';
+import { useRouter } from 'next/navigation';
 
 import { ThemeProvider } from '@/app/components/theme-provider';
 
@@ -33,11 +27,12 @@ import { ZeroDevProvider } from '@zerodev/privy';
 // privy
 import { PrivyProvider } from '@privy-io/react-auth';
 
-import bgimage from '../../public/images/Rectangle.png';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { sepolia } from 'viem/chains';
 import BottomNavbar from './components/BottomNav/BottomNav';
-import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
+// pwa
+import PWAPrompt from 'react-ios-pwa-prompt';
+
 
 export default function RootLayout({
   auth,
@@ -54,6 +49,8 @@ export default function RootLayout({
   const router = useRouter();
 
 
+
+
   return (
     <html className='h-full overflow-auto font-sans'>
       <head>
@@ -127,7 +124,7 @@ export default function RootLayout({
           <ZeroDevProvider projectId={'f6375b6f-2205-4fc7-bc87-f03218789b86'}>
             <PrivyProvider
               onSuccess={() => router.push('/home')}
-              appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID as string}
+              appId={'cltk97hyk016h7afh32g4363z'}
               config={{
                 defaultChain: sepolia,
                 loginMethods: ['sms', 'apple', 'google'],
@@ -143,6 +140,13 @@ export default function RootLayout({
                     <QueryClientProvider client={queryClient}>
                       <AnimatePresence mode='wait' initial={false}>
                         <LayoutGroup>
+                          <PWAPrompt
+                            promptOnVisit={1}
+                            timesToShow={3}
+                            copyClosePrompt='Close'
+                            permanentlyHideOnDismiss={false}
+                          />
+
                           <div>{auth}</div>
                           <div>{drawer}</div>
 

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,6 +1,5 @@
 import { Metadata } from 'next';
 import * as React from 'react';
-import { RiAlarmWarningFill } from 'react-icons/ri';
 
 export const metadata: Metadata = {
   title: 'Not Found',
@@ -11,10 +10,7 @@ export default function NotFound() {
     <main>
       <section className='bg-white'>
         <div className='layout flex min-h-screen flex-col items-center justify-center text-center text-black'>
-          <RiAlarmWarningFill
-            size={60}
-            className='drop-shadow-glow animate-flicker text-red-500'
-          />
+
           <h1 className='mt-8 text-4xl md:text-6xl'>Page Not Found</h1>
           <a href='/'>Back to home</a>
         </div>