Merge pull request #2 from Dhruv1238/step-parts

feat: add step components and stuff
Dhruv1238 · Dec 7, 2024 · e26aea3 · e26aea3
2 parents e20b010 + 4bf67b8
commit e26aea3
Show file tree

Hide file tree

Showing 12 changed files with 586 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "@graphprotocol/graph-cli": "^0.91.1",
     "ethereum-blockies": "^0.1.1",
     "framer-motion": "^11.13.1",
-    "graphql": "^16.9.0"
+    "graphql": "^16.9.0",
+    "next-auth": "beta"
   }
 }
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,24 +1,99 @@
+"use client";
+
+import { useEffect } from "react";
+import axios from "axios";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import { ApolloProvider } from "~~/context/ApolloProvider";
+import { FitnessProvider, useFitness } from "~~/context/FitnessContext";
 import "~~/styles/globals.css";
-import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
-export const metadata = getMetadata({ title: "Scaffold-ETH 2 App", description: "Built with 🏗 Scaffold-ETH 2" });
+const TokenHandler = ({ children }: { children: React.ReactNode }) => {
+  const { setFitnessData, setAccessToken } = useFitness();
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const accessToken = urlParams.get('access_token');
+    const idToken = urlParams.get('id_token');
+    const refreshToken = urlParams.get('refresh_token');
+
+    if (accessToken || idToken || refreshToken) {
+      console.log('Access Token:', accessToken);
+      console.log('ID Token:', idToken);
+      console.log('Refresh Token:', refreshToken);
+
+      localStorage.setItem('access_token', accessToken || '');
+      localStorage.setItem('id_token', idToken || '');
+      localStorage.setItem('refresh_token', refreshToken || '');
+
+      if (accessToken) {
+        setAccessToken(accessToken);
+      }
+
+      // Fetch fitness data
+      const fetchFitnessData = async () => {
+        // Get today's start and end timestamps
+        const now = new Date();
+        const startOfDay = new Date(now.setHours(0, 0, 0, 0)).getTime();
+        const endOfDay = new Date(now.setHours(23, 59, 59, 999)).getTime();
+
+        const data = {
+          aggregateBy: [
+            {
+              dataTypeName: "com.google.step_count.delta"
+            }
+          ],
+          startTimeMillis: startOfDay,
+          endTimeMillis: endOfDay,
+          bucketByTime: {
+            durationMillis: 86400000 // 24 hours in milliseconds
+          }
+        };
+
+        try {
+          const response = await axios.post(
+            'https://www.googleapis.com/fitness/v1/users/me/dataset:aggregate',
+            data,
+            {
+              headers: {
+                'Authorization': `Bearer ${accessToken}`,
+                'Content-Type': 'application/json'
+              }
+            }
+          );
+          console.log('Fitness Data:', JSON.stringify(response.data));
+          setFitnessData(response.data);
+        } catch (error) {
+          console.error('Fitness API Error:', error);
+        }
+      };
+
+      fetchFitnessData();
+    }
+  }, [setFitnessData, setAccessToken]);
+
+  return <>{children}</>;
+};
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
       <body>
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>
-            <ApolloProvider>{children}</ApolloProvider>
+            <ApolloProvider>
+              <FitnessProvider>
+                <TokenHandler>
+                  {children}
+                </TokenHandler>
+              </FitnessProvider>
+            </ApolloProvider>
           </ScaffoldEthAppWithProviders>
         </ThemeProvider>
       </body>
     </html>
   );
 };
 
-export default ScaffoldEthApp;
+export default ScaffoldEthApp;
diff --git a/packages/nextjs/app/login/page.tsx b/packages/nextjs/app/login/page.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+
+const LoginPage = () => {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignUp = () => {
+    setIsLoading(true);
+    window.location.href = "https://small-mouse-2759.arnabbhowmik019.workers.dev/google/auth?redirect_url=http%3A%2F%2Flocalhost%3A3000/";    
+  };
+
+  const handleDemoLogin = () => {
+    setIsLoading(true);
+    // Simulate loading
+    setTimeout(() => {
+      router.push("/");
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] to-[#000001] flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-md"
+      >
+        {/* Logo and Title */}
+        <div className="text-center mb-8">
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          >
+            <Image
+              src="/logo.png"
+              alt="StakeFIT Logo"
+              width={150}
+              height={150}
+              className="mx-auto mb-4"
+            />
+          </motion.div>
+          <h1 className="text-4xl font-bold text-[#fbf8fe] mb-2">Welcome to StakeFIT</h1>
+          <p className="text-[#a3a2a7]">Stake your health, earn rewards</p>
+        </div>
+
+        {/* Login Card */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.3 }}
+          className="bg-[#2d2c2e] rounded-2xl p-8 shadow-xl border border-[#000001]"
+        >
+          <div className="space-y-6">
+            {/* Demo Account Button */}
+            <button
+              onClick={handleSignUp}
+              disabled={isLoading}
+              className="w-full bg-[#11ce6f] text-[#000001] 
+                       py-4 px-6 rounded-xl font-semibold text-lg
+                       transition-all transform hover:scale-[1.02] active:scale-[0.98]"
+            >
+              {isLoading ? "Loading..." : "Sign Up"}
+            </button>
+          </div>
+
+          {/* Terms */}
+          <p className="mt-8 text-center text-sm text-[#a3a2a7]">
+            By continuing, you agree to our{" "}
+            <a href="/terms" className="text-[#11ce6f] hover:underline">
+              Terms of Service
+            </a>{" "}
+            and{" "}
+            <a href="/privacy" className="text-[#11ce6f] hover:underline">
+              Privacy Policy
+            </a>
+          </p>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/packages/nextjs/app/metadata.ts b/packages/nextjs/app/metadata.ts
@@ -0,0 +1,3 @@
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({ title: "Momentum", description: "Built with 🏗 Scaffold-ETH 2" });
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -19,9 +19,9 @@ const Home: NextPage = () => {
   return (
     <>
       {/* Floating Stake Button - Always visible */}
-      <div className="fixed right-0 bottom-8 z-50 flex items-center">
+      {/* <div className="fixed right-0 bottom-8 z-50 flex items-center">
         <StakeButton contractAddress={contractAddress} contractABI={contractABI} />
-      </div>
+      </div> */}
 
       <div className="flex items-center flex-col flex-grow pt-10">
         <div className="px-5">
@@ -37,11 +37,11 @@ const Home: NextPage = () => {
           </h1>
 
           <div className="flex justify-center my-4">
-            <StatsComponent steps={2259} minutes={23} calories={68} stepsGoal={6000} />
+            <StatsComponent stepsGoal={8000} />
           </div>
 
           <div className="flex justify-center my-4">
-            <StepComponent currentSteps={2000} totalSteps={6000} />
+            <StepComponent totalSteps={8000} />
           </div>
 
           {/* Stake Card with CTA Arrow */}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";

		export const metadata = getMetadata({ title: "Momentum", description: "Built with 🏗 Scaffold-ETH 2" });