Merge pull request #51 from Ayush272002/profile

fix profile

.husky/pre-commit

@@ -1 +1,2 @@
-npm test
+#!/usr/bin/env sh
+npx lint-staged && npm run build

app/events/[...eventId]/page.tsx

@@ -16,15 +16,17 @@ const ListingPage: React.FC = () => {
       if (eventId) {
         const details = await fetchEventDetails({
           eventID: Number(eventId),
-          toast: ({ title, variant }: any) => {alert(title);}});
+          toast: ({ title, variant }: any) => {
-        console.log(details)
+            alert(title);
+          },
+        });
+        console.log(details);
         setEventDetails(details);
       }
     };
 
     getEventDetails().catch((err) => {
       setEventNotFound(true);
-      console.log(eventNotFound);
     });
   }, [eventId]);
 
@@ -50,13 +52,15 @@ const ListingPage: React.FC = () => {
       </div>
 
       <div className="relative z-10">
-        {eventNotFound ? <p className="text-2xl text-white pt-20 text-center">Event not found</p> :
+        {eventNotFound ? (
-          (eventDetails ? (
+          <p className="text-2xl text-white pt-20 text-center">
+            Event not found
+          </p>
+        ) : eventDetails ? (
           <EventDescription eventDetails={eventDetails} />
         ) : (
           <p>Loading...</p>
-          ))
+        )}
-        }
       </div>
 
       <div className="relative z-20">

app/profile/page.tsx

@@ -1,63 +1,179 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+
+import React, { useState, useEffect } from 'react';
+import { ethers } from 'ethers';
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
-import Profile from '@/components/custom/Profile';
+import { Button } from '@/components/ui/button';
-import PreviousTickets from '@/components/PreviousTickets';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import EventManagerABI from '../../contracts/EventManagerABI.json';
 
-const ProfilePage: React.FC = () => {
+const RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
+const CONTRACT_ADDRESS = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS;
+
+if (!RPC_URL || !CONTRACT_ADDRESS) {
+  console.error(
+    'Missing environment variables. Please check your .env.local file.'
+  );
+}
+
+export default function ProfilePage() {
   const [isClient, setIsClient] = useState(false);
-  const [isAuth, setAuth] = useState(false);
+  const [userTickets, setUserTickets] = useState<number[]>([]);
+  const [userAddress, setUserAddress] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [networkName, setNetworkName] = useState('');
 
   useEffect(() => {
-    // This ensures the component renders only on the client side
     setIsClient(true);
+    checkNetwork();
   }, []);
 
-  useEffect(() => {});
+  const checkNetwork = async () => {
+    if (typeof window.ethereum !== 'undefined') {
+      try {
+        const provider = new ethers.providers.Web3Provider(window.ethereum);
+        const network = await provider.getNetwork();
+        console.log('Network:', network);
+        setNetworkName(network.name);
+      } catch (error) {
+        console.error('Failed to get network:', error);
+      }
+    }
+  };
+
+  const connectWallet = async () => {
+    setLoading(true);
+    setError('');
+    if (typeof window.ethereum !== 'undefined') {
+      try {
+        await window.ethereum.request({ method: 'eth_requestAccounts' });
+        const provider = new ethers.providers.Web3Provider(window.ethereum);
+        const signer = provider.getSigner();
+        const address = await signer.getAddress();
+        setUserAddress(address);
+        await fetchUserTickets(address);
+      } catch (error) {
+        console.error('Failed to connect wallet:', error);
+        setError('Failed to connect wallet. Please try again.');
+      }
+    } else {
+      setError('Please install MetaMask!');
+    }
+    setLoading(false);
+  };
+
+  const fetchUserTickets = async (address: string) => {
+    if (!RPC_URL || !CONTRACT_ADDRESS) {
+      setError('Missing configuration. Please contact support.');
+      return;
+    }
+
+    try {
+      const provider = new ethers.providers.JsonRpcProvider(RPC_URL);
+      const contract = new ethers.Contract(
+        CONTRACT_ADDRESS,
+        EventManagerABI,
+        provider
+      );
+
+      console.log('Fetching tickets for address:', address);
+
+      const tickets = await contract.getUserTickets(address);
+      console.log('Raw tickets data:', tickets);
+
+      if (Array.isArray(tickets)) {
+        const ticketNumbers = tickets.map((ticket: ethers.BigNumber) =>
+          ticket.toNumber()
+        );
+        console.log('Processed ticket numbers:', ticketNumbers);
+        setUserTickets(ticketNumbers);
+      } else {
+        console.error('Unexpected response from getUserTickets:', tickets);
+        setError('Unexpected response from contract. Please try again.');
+      }
+    } catch (error) {
+      console.error('Failed to fetch user tickets:', error);
+      setError(`Failed to fetch user tickets: ${(error as Error).message}`);
+    }
+  };
 
   return (
-    <>
     <div className="relative min-h-screen overflow-hidden bg-black">
       <Header />
       <div className="relative z-20 container mx-auto p-4 pt-16">
         <div className="relative min-h-screen overflow-hidden">
-            {/* Video Background */}
           {isClient && (
             <video
               autoPlay
               loop
               muted
               className="absolute inset-0 w-full h-full object-cover z-0"
-                src="/BGVid2.mp4" // Ensure the video file is placed in the public folder
+              src="/BGVid2.mp4"
             >
               Your browser does not support the video tag.
             </video>
           )}
 
-            {/* Dark Overlay for Enhanced Readability */}
           <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
 
-            <div className="relative flex flex-col space-y-10 mt-20 z-20 ml-10">
+          <div className="relative z-20 text-white">
-              <Profile profileKey="38902kj2-8hf082gb0f20g02h082" />
+            <h1 className="text-4xl font-bold mb-4">Your Profile</h1>
+            {userAddress ? (
+              <p className="mb-4">Connected Address: {userAddress}</p>
+            ) : (
+              <p className="mb-4">Not connected</p>
+            )}
+            <p className="mb-4">Current Network: {networkName}</p>
 
-              {/* Render PreviousTickets component with appropriate props */}
+            {error && (
-              <PreviousTickets
+              <div className="bg-red-500 text-white p-2 rounded mb-4">
-                name="Sample Event"
+                {error}
-                status={true}
+              </div>
-                description="Description of the event"
+            )}
-                capacity={100}
+
-                ticketPrice={50}
+            <Card className="bg-gray-800 text-white">
-                eventStartDate={new Date('2024-11-01T10:00:00')}
+              <CardHeader>
-                eventHost="Host Name"
+                <CardTitle>Your Tickets</CardTitle>
-              />
+                <CardDescription>
+                  Here are the tickets associated with your wallet
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {loading ? (
+                  <p>Loading...</p>
+                ) : userTickets.length > 0 ? (
+                  <ul>
+                    {userTickets.map((ticketId) => (
+                      <li key={ticketId} className="mb-2">
+                        Ticket ID: {ticketId}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p>You don&apos;t have any tickets yet.</p>
+                )}
+              </CardContent>
+            </Card>
+
+            <Button className="mt-4" onClick={connectWallet} disabled={loading}>
+              {loading
+                ? 'Connecting...'
+                : userAddress
+                  ? 'Refresh Tickets'
+                  : 'Connect Wallet'}
+            </Button>
           </div>
         </div>
       </div>
       <Footer />
     </div>
-    </>
   );
-};
+}
-
-export default ProfilePage;

env

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_RPC_URL=https://coston2.enosys.global/ext/C/rpc
-NEXT_PUBLIC_CONTRACT_ADDRESS=0xe84032D41216B21153f4Ab0d98EA396f777fc957

lib/fetchEventDetails.ts

@@ -58,8 +58,8 @@ export const fetchEventDetails = async ({
       capacity: eventData.capacity.toNumber(),
       ticketsSold: eventData.ticketsSold.toNumber(),
       imageUrl: eventImages,
-      host: eventData.eventHost
+      host: eventData.eventHost,
-    }
+    };
   } catch (error) {
     console.error('Error in createEvent:', error);
     // if (error instanceof Error) {

lib/fetchEvents.ts

@@ -1,5 +1,5 @@
-import { ethers } from "ethers";
+import { ethers } from 'ethers';
-import { getContract } from "./ethers";
+import { getContract } from './ethers';
 
 interface Event {
   eventId: number;
@@ -50,4 +50,4 @@ export const fetchEvents: () => Promise<Event[] | undefined> = async () => {
   } catch (error) {
     console.error('Failed to fetch events:', error);
   }
-}
+};