added more content and dummy page

najamuslim · Aug 9, 2024 · 0d11801 · 0d11801
1 parent fb28290
commit 0d11801
Show file tree

Hide file tree

Showing 18 changed files with 481 additions and 33 deletions.
diff --git a/apps/web/public/images/domore.png b/apps/web/public/images/domore.png
diff --git a/apps/web/public/images/earn.png b/apps/web/public/images/earn.png
diff --git a/apps/web/public/images/hoodies.png b/apps/web/public/images/hoodies.png
diff --git a/apps/web/public/images/marchandise-a.jpg b/apps/web/public/images/marchandise-a.jpg
diff --git a/apps/web/public/images/notebook.png b/apps/web/public/images/notebook.png
diff --git a/apps/web/public/images/scan.png b/apps/web/public/images/scan.png
diff --git a/apps/web/public/images/shirt.png b/apps/web/public/images/shirt.png
diff --git a/apps/web/public/images/throw.png b/apps/web/public/images/throw.png
diff --git a/apps/web/public/images/totbag.png b/apps/web/public/images/totbag.png
diff --git a/apps/web/src/app/challenges/page.tsx b/apps/web/src/app/challenges/page.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+const Challenges = () => {
+  return (
+    <div style={{ marginTop: 20 }} className="bg-blue-800 min-h-screen py-16">
+      <div className="container mx-auto px-4">
+        <div
+          style={{
+            gap: 20,
+          }}
+          className="grid grid-cols-1 md:grid-cols-2 gap-8"
+        >
+          <div
+            style={{
+              padding: 20,
+            }}
+            className="bg-yellow-400 p-8 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300"
+          >
+            <h2 className="text-4xl text-blue-900 font-bold mb-6">
+              Weekly Bottle Challenge
+            </h2>
+            <p className="text-lg text-blue-900 mb-6">
+              Participate in the weekly challenge and earn extra $XOTL tokens by
+              recycling more bottles!
+            </p>
+            <button className="px-6 py-3 bg-blue-900 text-white font-bold rounded-lg hover:bg-blue-700 transition-colors duration-300">
+              Join Challenge
+            </button>
+          </div>
+
+          <div
+            style={{
+              padding: 20,
+            }}
+            className="bg-yellow-400 p-8 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300"
+          >
+            <h2 className="text-4xl text-blue-900 font-bold mb-6">
+              Monthly Recycling Marathon
+            </h2>
+            <p className="text-lg text-blue-900 mb-6">
+              Collect and submit as many bottles as you can this month to win
+              big rewards!
+            </p>
+            <button className="px-6 py-3 bg-blue-900 text-white font-bold rounded-lg hover:bg-blue-700 transition-colors duration-300">
+              Join Challenge
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Challenges;
diff --git a/apps/web/src/app/context/WalletContext.tsx b/apps/web/src/app/context/WalletContext.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useState } from "react";
 import { ethers } from "ethers";
 

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,6 +1,8 @@
-
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+
+import Top_Bar from "./pages/topbar";
+import Footers from "./pages/footer";
 import "./assets/css/globals.css";
 import "./assets/css/topcontent.css";
 
@@ -13,15 +15,13 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{children: React.ReactNode;}>
-) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en">
       <head>
-        <link rel="icon" type="image/x-icon" href="/icon.ico" sizes="any"/>
+        <link rel="icon" type="image/x-icon" href="/icon.ico" sizes="any" />
       </head>
       <body className={inter.className}>{children}</body>
     </html>
   );
 }
-
diff --git a/apps/web/src/app/leaderboard/page.tsx b/apps/web/src/app/leaderboard/page.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const leaderboardData = [
+  { rank: 1, name: "Alice", bottles: 150 },
+  { rank: 2, name: "Bob", bottles: 140 },
+  { rank: 3, name: "Charlie", bottles: 130 },
+  { rank: 4, name: "David", bottles: 120 },
+  { rank: 5, name: "Eve", bottles: 110 },
+];
+
+const Leaderboard = () => {
+  return (
+    <div className="bg-blue-800 min-h-screen py-16">
+      <div className="container mx-auto px-4">
+        <div
+          style={{
+            padding: 20,
+          }}
+          className="bg-yellow-400 p-8 rounded-lg shadow-lg"
+        >
+          <table className="w-full text-center text-blue-900">
+            <thead>
+              <tr>
+                <th className="text-2xl font-bold py-4">Rank</th>
+                <th className="text-2xl font-bold py-4">Name</th>
+                <th className="text-2xl font-bold py-4">Bottles Collected</th>
+              </tr>
+            </thead>
+            <tbody>
+              {leaderboardData.map((entry) => (
+                <tr key={entry.rank} className="border-t border-blue-900">
+                  <td className="py-4 text-xl">{entry.rank}</td>
+                  <td className="py-4 text-xl">{entry.name}</td>
+                  <td className="py-4 text-xl">{entry.bottles}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Leaderboard;
diff --git a/apps/web/src/app/nft/page.tsx b/apps/web/src/app/nft/page.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, Button } from "flowbite-react";
+import { ethers } from "ethers";
+
+const nftTargets = [
+  {
+    id: 1,
+    name: "Xottle-Warrior Badge",
+    target: 10,
+    image: "/images/earn.png",
+  },
+  {
+    id: 2,
+    name: "Xottle-Champion Badge",
+    target: 100,
+    image: "/images/earn.png",
+  },
+];
+
+const NftBadge = () => {
+  const [userAddress, setUserAddress] = useState<string | null>(null);
+  const [totalBottles, setTotalBottles] = useState(0);
+
+  useEffect(() => {
+    const fetchUserAddress = async () => {
+      if (window.ethereum) {
+        const accounts = await window.ethereum.request({
+          method: "eth_accounts",
+        });
+        if (accounts.length > 0) {
+          setUserAddress(accounts[0]);
+        }
+      }
+    };
+    fetchUserAddress();
+  }, []);
+
+  useEffect(() => {
+    const fetchTotalBottles = async () => {
+      if (userAddress) {
+        try {
+          // const response = await axios.get(
+          //   `/api/get-total-bottles/${userAddress}`
+          // );
+          // setTotalBottles(response.data.totalBottles);
+        } catch (error) {
+          console.error("Error fetching total bottles:", error);
+        }
+      }
+    };
+    fetchTotalBottles();
+  }, [userAddress]);
+
+  const handleClaimNft = async (nft: {
+    id: number;
+    name: string;
+    target: number;
+  }) => {
+    if (totalBottles < nft.target) {
+      alert(
+        `You need to submit at least ${nft.target} bottles to claim this NFT.`
+      );
+      return;
+    }
+
+    try {
+      const provider = new ethers.providers.Web3Provider(
+        (window as any).ethereum
+      );
+      const signer = provider.getSigner();
+      const contractAddress = "YOUR_CONTRACT_ADDRESS"; // Replace with your contract address
+      const abi: ethers.ContractInterface = [
+        // ABI for your contract's mint function
+      ];
+
+      const contract = new ethers.Contract(contractAddress, abi, signer);
+      const tokenURI = `https://example.com/nft/${nft.id}`; // Replace with actual token URI
+      const tx = await contract.mintNFT(userAddress, tokenURI);
+      await tx.wait();
+
+      alert("NFT claimed successfully!");
+    } catch (error) {
+      console.error("Error claiming NFT:", error);
+      alert("NFT claim failed");
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4">
+      {/* <p className="text-2xl text-center text-white mb-6">
+        Total Bottles Submitted:{" "}
+        <span className="font-bold">{totalBottles}</span>
+      </p> */}
+      <div className="flex flex-wrap justify-center gap-4 mb-24">
+        {nftTargets.map((nft) => (
+          <Card key={nft.id} className="p-4 mb-4">
+            <img
+              src={nft.image}
+              alt={nft.name}
+              className="mb-4 w-full h-32 object-cover rounded-lg"
+            />
+            <h2 className="text-xl font-semibold mb-2">{nft.name}</h2>
+            <p className="mb-4">Target: {nft.target} bottles</p>
+            <Button
+              className="w-full"
+              onClick={() => handleClaimNft(nft)}
+              disabled={totalBottles < nft.target}
+            >
+              {totalBottles >= nft.target
+                ? "Claim NFT"
+                : `Need ${nft.target - totalBottles} more bottles`}
+            </Button>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default NftBadge;
diff --git a/apps/web/src/app/pages/footer.tsx b/apps/web/src/app/pages/footer.tsx
@@ -1,34 +1,37 @@
-import React from 'react';
+import React from "react";
 
 const Footers: React.FC = () => {
   return (
     <footer style={footerStyle}>
       <div style={containerStyle}>
-        <p style={textStyle}>© {new Date().getFullYear()} Xottle. All rights reserved.</p>
+        <p style={textStyle}>
+          © {new Date().getFullYear()} Xottle. All rights reserved.
+        </p>
       </div>
     </footer>
   );
 };
 
 const footerStyle: React.CSSProperties = {
-  backgroundColor: '#F5CC00',
-  color: '#003566',
-  padding: '1rem 0',
-  position: 'fixed',
+  backgroundColor: "#F5CC00",
+  color: "#003566",
+  padding: "1rem 0",
+  position: "fixed",
   bottom: 0,
-  width: '100%',
-  textAlign: 'center',
+  width: "100%",
+  textAlign: "center",
+  marginTop: 100,
 };
 
 const containerStyle: React.CSSProperties = {
-  maxWidth: '1200px',
-  margin: '0 auto',
-  padding: '0 1rem',
+  maxWidth: "1200px",
+  margin: "0 auto",
+  padding: "0 1rem",
 };
 
 const textStyle: React.CSSProperties = {
   margin: 0,
-  fontSize: '1rem',
+  fontSize: "1rem",
 };
 
-export default Footers;
+export default Footers;
diff --git a/apps/web/src/app/pages/topbar.tsx b/apps/web/src/app/pages/topbar.tsx
@@ -4,6 +4,8 @@ import React, { useState, useEffect } from "react";
 import { ethers } from "ethers";
 import { Modal, Sidebar } from "flowbite-react";
 import Image from "next/image";
+import Link from "next/link";
+
 import { useWallet } from "../context/WalletContext";
 
 //Import Assets SVG Icon
@@ -84,8 +86,11 @@ const Top_Bar = () => {
             </a>
             {/* Desktop navigation links */}
             <div className="Menu-nav">
-              <a href="#">Dashboard</a>
-              <a href="#">Store</a>
+              <Link href="/">Scan</Link>
+              <Link href="/store">Store</Link>
+              <Link href="/nft">NFT</Link>
+              <Link href="/challenges">Challenges</Link>
+              <Link href="/leaderboard">Leaderboard</Link>
             </div>
             <div className="con-btn">
               <button