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">
-            <EventDescription eventDetails={eventDetails} />
+            Event not found
-          ) : (
+          </p>
-            <p>Loading...</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">
-      <div className="relative min-h-screen overflow-hidden bg-black">
+      <Header />
-        <Header />
+      <div className="relative z-20 container mx-auto p-4 pt-16">
-        <div className="relative z-20 container mx-auto p-4 pt-16">
+        <div className="relative min-h-screen overflow-hidden">
-          <div className="relative min-h-screen overflow-hidden">
+          {isClient && (
-            {/* Video Background */}
+            <video
-            {isClient && (
+              autoPlay
-              <video
+              loop
-                autoPlay
+              muted
-                loop
+              className="absolute inset-0 w-full h-full object-cover z-0"
-                muted
+              src="/BGVid2.mp4"
-                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
+              Your browser does not support the video tag.
-              >
+            </video>
-                Your browser does not support the video tag.
+          )}
-              </video>
+
+          <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+
+          <div className="relative z-20 text-white">
+            <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>
+
+            {error && (
+              <div className="bg-red-500 text-white p-2 rounded mb-4">
+                {error}
+              </div>
             )}
 
-            {/* Dark Overlay for Enhanced Readability */}
+            <Card className="bg-gray-800 text-white">
-            <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+              <CardHeader>
+                <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>
 
-            <div className="relative flex flex-col space-y-10 mt-20 z-20 ml-10">
+            <Button className="mt-4" onClick={connectWallet} disabled={loading}>
-              <Profile profileKey="38902kj2-8hf082gb0f20g02h082" />
+              {loading
-
+                ? 'Connecting...'
-              {/* Render PreviousTickets component with appropriate props */}
+                : userAddress
-              <PreviousTickets
+                  ? 'Refresh Tickets'
-                name="Sample Event"
+                  : 'Connect Wallet'}
-                status={true}
+            </Button>
-                description="Description of the event"
-                capacity={100}
-                ticketPrice={50}
-                eventStartDate={new Date('2024-11-01T10:00:00')}
-                eventHost="Host Name"
-              />
-            </div>
           </div>
         </div>
-        <Footer />
       </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,53 +1,53 @@
-import { ethers } from "ethers";
+import { ethers } from 'ethers';
-import { getContract } from "./ethers";
+import { getContract } from './ethers';
 
 interface Event {
-    eventId: number;
+  eventId: number;
-    name: string;
+  name: string;
-    description: string;
+  description: string;
-    location: string;
+  location: string;
-    capacity: number;
+  capacity: number;
-    ticketsSold: number;
+  ticketsSold: number;
-    ticketPrice: number;
+  ticketPrice: number;
-    eventStartDate: number;
+  eventStartDate: number;
-    eventEndDate: number;
+  eventEndDate: number;
-    images: string[];
+  images: string[];
-    eventHost: string;
+  eventHost: string;
 }
 
 export const fetchEvents: () => Promise<Event[] | undefined> = async () => {
-    try {
+  try {
-        console.log('Starting events call');
+    console.log('Starting events call');
-        if (typeof window.ethereum === 'undefined') {
+    if (typeof window.ethereum === 'undefined') {
-            console.error('Ethereum provider not found');
+      console.error('Ethereum provider not found');
-            return;
+      return;
-        }
-
-        console.log('Connecting to contract');
-        const contract = getContract();
-        const eventCount = await contract.eventCounter();
-        const eventsData: Event[] = [];
-
-        for (let i = 0; i < eventCount; i++) {
-            const event = await contract.events(i);
-            const images = await contract.getEventImages(i);
-            eventsData.push({
-                eventId: i,
-                name: event.name,
-                description: event.description,
-                location: event.location,
-                capacity: event.capacity.toNumber(),
-                ticketsSold: event.ticketsSold.toNumber(),
-                ticketPrice: event.ticketPrice.toNumber() / 100,
-                eventStartDate: event.eventStartDate.toNumber(),
-                eventEndDate: event.eventEndDate.toNumber(),
-                images: images,
-                eventHost: event.eventHost,
-            });
-        }
-
-        return eventsData;
-    } catch (error) {
-      console.error('Failed to fetch events:', error);
     }
-}
+
+    console.log('Connecting to contract');
+    const contract = getContract();
+    const eventCount = await contract.eventCounter();
+    const eventsData: Event[] = [];
+
+    for (let i = 0; i < eventCount; i++) {
+      const event = await contract.events(i);
+      const images = await contract.getEventImages(i);
+      eventsData.push({
+        eventId: i,
+        name: event.name,
+        description: event.description,
+        location: event.location,
+        capacity: event.capacity.toNumber(),
+        ticketsSold: event.ticketsSold.toNumber(),
+        ticketPrice: event.ticketPrice.toNumber() / 100,
+        eventStartDate: event.eventStartDate.toNumber(),
+        eventEndDate: event.eventEndDate.toNumber(),
+        images: images,
+        eventHost: event.eventHost,
+      });
+    }
+
+    return eventsData;
+  } catch (error) {
+    console.error('Failed to fetch events:', error);
+  }
+};