added pull to refresh to the card

Stephen-Gordon · Mar 31, 2024 · 143473d · 143473d
1 parent 9a53446
commit 143473d
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
+    "@types/pulltorefreshjs": "^0.1.7",
     "@types/react": "^18.2.45",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@types/web-push": "^3.6.3",

diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx
@@ -74,7 +74,10 @@ export default function CreditCard() {
             duration: 0.3,
           }}
         >
-          <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg overflow'>
+          <HoverBorderGradient
+            id='card'
+            className='overflow relative grid h-52 w-full rounded-xl shadow-lg'
+          >
             <div className='via-background absolute -z-10 h-full  w-full rounded-xl bg-gradient-to-br  from-slate-50/10 to-[#E45368]/40  backdrop-blur-2xl'>
               <></>
             </div>

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -36,8 +36,14 @@ import { motion, useScroll, useTransform } from 'framer-motion';
 import useGetTokenBalance from '../hooks/useGetTokenBalance';
 import AuthPage from '../components/AuthPage/AuthPage';
 import CreditCard from '../components/CreditCard/CreditCard';
+import PullToRefresh from 'pulltorefreshjs';
+
 
 export default function Page() {
+
+
+
+
   // privy
   const { user, zeroDevReady, sendTransaction } = usePrivySmartAccount();
 
@@ -51,6 +57,17 @@ export default function Page() {
 
   useEffect(() => {
     console.log('user', user);
+    console.log('zeroDevReady', zeroDevReady);
+
+    if(zeroDevReady) {
+      PullToRefresh.init({
+        mainElement: '#card',
+        triggerElement: '#card',
+        onRefresh() {
+          window.location.reload();
+        },
+      });
+    }
   }, [zeroDevReady]);
 
   // next
@@ -98,7 +115,7 @@ export default function Page() {
   console.log('usdcBalance', usdcBalance);
   return (
     <AuthPage>
-      <div id='render' className='relative bg-background'>
+      <main className='relative bg-background'>
 
         <div>
          {/*  <div className='absolute -z-50 '>
@@ -171,7 +188,7 @@ export default function Page() {
             <Activity />
           </div>
         </div>
-      </div>
+      </main>
     </AuthPage>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,7 +32,6 @@ import { sepolia } from 'viem/chains';
 import BottomNavbar from './components/BottomNav/BottomNav';
 import AuthPage from './components/AuthPage/AuthPage';
 
-import PullToRefresh from 'pulltorefreshjs';
 
 
 
@@ -50,11 +49,7 @@ export default function RootLayout({
   const queryClient = new QueryClient();
   const router = useRouter();
 
-  PullToRefresh.init({
-    onRefresh() {
-      window.location.reload();
-    },
-  });
+
 
 
 
@@ -109,10 +104,41 @@ export default function RootLayout({
         <meta name='msapplication-TileColor' content='#020817' />
         <meta name='msapplication-tap-highlight' content='no' />
         <meta name='theme-color' content='#020817' />
-
-
+        <link rel='apple-touch-icon' href='/icons/touch-icon-iphone.png' />
+        <link
+          rel='apple-touch-icon'
+          sizes='152x152'
+          href='/icons/touch-icon-ipad.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='180x180'
+          href='/icons/touch-icon-iphone-retina.png'
+        />
+        <link
+          rel='apple-touch-icon'
+          sizes='167x167'
+          href='/icons/touch-icon-ipad-retina.png'
+        />
+        <link
+          rel='icon'
+          type='image/png'
+          sizes='32x32'
+          href='/icons/favicon-32x32.png'
+        />
+        <link
+          rel='icon'
+          type='image/png'
+          sizes='16x16'
+          href='/icons/favicon-16x16.png'
+        />
         <link rel='manifest' href='/manifest.json' />
-
+        <link
+          rel='mask-icon'
+          href='/icons/safari-pinned-tab.svg'
+          color='#020817'
+        />
+        <link rel='shortcut icon' href='/favicon.ico' />
         <link rel='preconnect' href='https://fonts.googleapis.com'></link>
         <link rel='preconnect' href='https://fonts.gstatic.com'></link>
         <link
@@ -126,7 +152,7 @@ export default function RootLayout({
         />
       </head>
 
-      <body className='overflow-hidden'>
+      <body id='main' className='overflow-hidden'>
         <ThemeProvider
           attribute='class'
           defaultTheme='dark'

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -57,7 +57,7 @@ const Page = () => {
 
   return (
     <>
-      <main className='relative'>
+      <div className='relative'>
         <div className='absolute -z-50 '> 
           <BackgroundGradientAnimation/>
         </div>
@@ -78,7 +78,7 @@ const Page = () => {
 
 
         </div>
-      </main>
+      </div>
     </>
   );
 };

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -43,12 +43,12 @@ export default function HomePage() {
   }, [isMobile]);
 
   return (
-    <main className='flex min-h-screen flex-col items-center gap-10 px-4 py-20'>
+    <div className='flex min-h-screen flex-col items-center gap-10 px-4 py-20'>
       <p className=''>{welcomeMessage}</p>
       <AddToHomeScreen />
 
       <Link href='/home'>Home</Link>
       <Link href='/home'>login</Link>
-    </main>
+    </div>
   );
 }