added new components for event counter and create events

components/sc/createEvent.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ethers } from 'ethers';
+import { getContract } from '@/lib/ethers';
+
+declare global {
+  interface Window {
+    ethereum: ethers.providers.ExternalProvider;
+  }
+}
+
+const CreateEvent = () => {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [capacity, setCapacity] = useState(0);
+  const [ticketPrice, setTicketPrice] = useState(0); // Price in FLR
+  const [eventDate, setEventDate] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+  const [transactionHash, setTransactionHash] = useState('');
+  const [isWalletConnected, setIsWalletConnected] = useState(false);
+
+  // Check if the wallet is connected on component mount
+  useEffect(() => {
+    const checkWalletConnection = async () => {
+      if (typeof window.ethereum !== 'undefined' && window.ethereum.request) {
+        const accounts = await window.ethereum.request({
+          method: 'eth_accounts',
+        });
+        if (accounts && accounts.length > 0) {
+          setIsWalletConnected(true); // Wallet is connected
+        } else {
+          setIsWalletConnected(false); // Wallet is not connected
+        }
+      } else {
+        alert('Please install MetaMask or another Ethereum wallet');
+      }
+    };
+
+    checkWalletConnection();
+  }, []);
+
+  const handleConnectWallet = async () => {
+    try {
+      if (typeof window.ethereum !== 'undefined' && window.ethereum.request) {
+        const accounts = await window.ethereum.request({
+          method: 'eth_requestAccounts',
+        });
+        if (accounts.length > 0) {
+          setIsWalletConnected(true);
+          console.log('Wallet connected:', accounts[0]);
+        }
+      }
+    } catch (error) {
+      console.error('Error connecting to wallet:', error);
+    }
+  };
+
+  const handleCreateEvent = async () => {
+    if (!window.ethereum) {
+      alert('Please install MetaMask!');
+      return;
+    }
+
+    try {
+      if (!isWalletConnected) {
+        await handleConnectWallet();
+      }
+
+      // Get the provider and signer
+      const provider = new ethers.providers.Web3Provider(window.ethereum);
+      const signer = provider.getSigner();
+
+      // Connect the contract with the signer
+      const contract = getContract().connect(signer);
+
+      const unixEventDate = Math.floor(new Date(eventDate).getTime() / 1000); // Convert to Unix timestamp
+      const weiTicketPrice = ethers.utils.parseEther(ticketPrice.toString()); // Convert FLR to Wei
+
+      const tx = await contract.createEvent(
+        name,
+        description,
+        capacity,
+        weiTicketPrice,
+        unixEventDate,
+        images
+      );
+      const receipt = await tx.wait();
+      setTransactionHash(receipt.transactionHash);
+      console.log('Event created successfully!');
+    } catch (error) {
+      console.error('Error creating event:', error);
+    }
+  };
+
+  return (
+    <div>
+      {!isWalletConnected ? (
+        <button onClick={handleConnectWallet}>Connect Wallet</button>
+      ) : (
+        <div>
+          <h2>Create Event</h2>
+          <input
+            type="text"
+            placeholder="Event Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder="Description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+          <input
+            type="number"
+            placeholder="Capacity"
+            value={capacity}
+            onChange={(e) => setCapacity(Number(e.target.value))}
+          />
+          <input
+            type="number"
+            placeholder="Ticket Price (FLR)"
+            value={ticketPrice}
+            onChange={(e) => setTicketPrice(Number(e.target.value))}
+          />
+          <input
+            type="date"
+            placeholder="Event Date"
+            value={eventDate}
+            onChange={(e) => setEventDate(e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder="Images (comma-separated URLs)"
+            value={images.join(',')}
+            onChange={(e) => setImages(e.target.value.split(','))}
+          />
+          <button onClick={handleCreateEvent}>Create Event</button>
+
+          {transactionHash && (
+            <p>Transaction successful! Hash: {transactionHash}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CreateEvent;

components/sc/eventCounter.tsx

@@ -0,0 +1,33 @@
+'use client'; // Add this at the top to make this a Client Component
+
+import { useEffect, useState } from 'react';
+import { getContract } from '@/lib/ethers';
+
+const EventCounter = () => {
+  const [eventCount, setEventCount] = useState<number>(0);
+
+  useEffect(() => {
+    console.log('EventCounter component mounted');
+
+    const fetchEventCounter = async () => {
+      const contract = getContract();
+      try {
+        const count = await contract.eventCounter(); // Fetch event counter value
+        setEventCount(Number(count)); // Convert to regular number if it's not a BigNumber
+        console.log('Event count:', Number(count)); // Log the count to ensure it's correct
+      } catch (error) {
+        console.error('Error fetching event counter:', error);
+      }
+    };
+
+    fetchEventCounter();
+  }, []);
+
+  return (
+    <div>
+      <h1>Event Counter: {eventCount}</h1>
+    </div>
+  );
+};
+
+export default EventCounter;