From d683916c16af9d962209263a94c76a8bc6d7fcc7 Mon Sep 17 00:00:00 2001 From: ayomaska18 Date: Sat, 26 Oct 2024 22:53:26 +0100 Subject: [PATCH 1/7] fixed wallet button connection and disconnection --- components/scripts/MetaMask.tsx | 164 +++++++++++++++++--------------- lib/buyHandler.ts | 1 - package-lock.json | 2 - 3 files changed, 88 insertions(+), 79 deletions(-) diff --git a/components/scripts/MetaMask.tsx b/components/scripts/MetaMask.tsx index 4794a02..c3dab32 100644 --- a/components/scripts/MetaMask.tsx +++ b/components/scripts/MetaMask.tsx @@ -1,102 +1,114 @@ 'use client'; import React, { useEffect, useState } from 'react'; -import { useSDK, MetaMaskProvider } from '@metamask/sdk-react'; -import { Button } from '@/components/ui/button'; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from '@/components/ui/popover'; -function WalletIcon(props: React.SVGProps) { - return ( - - - - - - ); -} - -function formatAddress(address: string | undefined): string { - if (!address) return ''; - return `${address.slice(0, 6)}...${address.slice(-4)}`; +declare global { + interface Window { + ethereum?: { + isMetaMask?: boolean; + request: (request: { + method: string; + params?: Array; // Use `unknown` instead of `any` + }) => Promise; // Specify a more accurate return type if possible + }; + } } function MetaMaskConnect() { - const { sdk, connected, connecting, account } = useSDK(); - const [isConnected, setIsConnected] = useState(false); + const [isConnected, setIsConnected] = useState(false); + const [account, setAccount] = useState(null); + // Initial check on load useEffect(() => { - setIsConnected(connected); - }, [connected]); + const checkConnection = async () => { + if (typeof window !== 'undefined' && window.ethereum) { + try { + // Check if there are any accounts already connected + const accounts = (await window.ethereum.request({ + method: 'eth_accounts', + })) as string[]; + if (accounts && accounts.length > 0) { + setIsConnected(true); + setAccount(accounts[0]); + localStorage.setItem('isConnected', JSON.stringify(true)); + localStorage.setItem('account', accounts[0]); + } else { + // No connected accounts found; check `localStorage` + const storedIsConnected = JSON.parse( + localStorage.getItem('isConnected') || 'false' + ); + const storedAccount = localStorage.getItem('account') || null; + setIsConnected(storedIsConnected); + setAccount(storedAccount); + } + } catch (error) { + console.error('Error checking MetaMask connection:', error); + } + } + }; + + checkConnection(); + }, []); + + // Update localStorage whenever connection state changes + useEffect(() => { + if (typeof window !== 'undefined') { + localStorage.setItem('isConnected', JSON.stringify(isConnected)); + localStorage.setItem('account', account || ''); + } + }, [isConnected, account]); const connect = async () => { try { - await sdk?.connect(); - setIsConnected(true); - } catch (err) { - console.warn(`No accounts found`, err); + const accounts = (await window.ethereum?.request({ + method: 'eth_requestAccounts', + })) as string[]; + if (accounts && accounts.length > 0) { + setIsConnected(true); + setAccount(accounts[0]); + localStorage.setItem('isConnected', JSON.stringify(true)); + localStorage.setItem('account', accounts[0]); + } + } catch (error) { + console.error('MetaMask connection failed:', error); } }; - const disconnect = () => { - if (sdk) { - sdk.terminate(); - setIsConnected(false); - } + const disconnect = async () => { + setIsConnected(false); + setAccount(null); + localStorage.setItem('isConnected', JSON.stringify(false)); + localStorage.removeItem('account'); + await window.ethereum?.request({ + method: 'wallet_revokePermissions', + params: [{ eth_accounts: {} }], + }); }; return (
{isConnected ? ( - - - - - - - - +
+ + + {account && `${account.slice(0, 6)}...${account.slice(-4)}`} + +
) : ( - + )}
); } -export default function MetaMaskConnectWrapper() { - return ( - - - - ); -} +export default MetaMaskConnect; diff --git a/lib/buyHandler.ts b/lib/buyHandler.ts index 0f8530d..401123d 100644 --- a/lib/buyHandler.ts +++ b/lib/buyHandler.ts @@ -33,7 +33,6 @@ export const buyHandler = async ( return; } - // @ts-expect-error: window.ethereum might not match ExternalProvider exactly const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); const contract = getContract().connect(signer); diff --git a/package-lock.json b/package-lock.json index 64643f4..0ab47cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13050,7 +13050,6 @@ "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz", "integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==", "dev": true, - "hasInstallScript": true, "optional": true, "dependencies": { "node-gyp-build": "^4.3.0" @@ -13413,7 +13412,6 @@ "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz", "integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==", "dev": true, - "hasInstallScript": true, "optional": true, "dependencies": { "node-gyp-build": "^4.3.0" From 8c4753e8bca0eff8809dff8a5add9f9b9936a335 Mon Sep 17 00:00:00 2001 From: Shay Patel Date: Sat, 26 Oct 2024 23:29:12 +0100 Subject: [PATCH 2/7] Update site metadata title to TicketChain --- app/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index b0f9839..f626e95 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -20,8 +20,8 @@ const inter = Inter({ subsets: ['latin'] }); // }); export const metadata: Metadata = { - title: 'Ticket Chain', - description: 'A blockchain-based ticketing system.', + title: 'TicketChain', + description: 'A verifiable and immutable ticketing platform.', }; export default function RootLayout({ From b97e274904260e7a31c1e957cd39bfaf175d8b31 Mon Sep 17 00:00:00 2001 From: sid <35936587+siddharth-shringarpure@users.noreply.github.com> Date: Sat, 26 Oct 2024 23:30:59 +0100 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=90=9B=20FINALLY=20fixed=20the=20Meta?= =?UTF-8?q?mask=20connection=20button!!!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/scripts/MetaMask.tsx | 42 +++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/components/scripts/MetaMask.tsx b/components/scripts/MetaMask.tsx index c3dab32..5eb61d9 100644 --- a/components/scripts/MetaMask.tsx +++ b/components/scripts/MetaMask.tsx @@ -1,6 +1,13 @@ 'use client'; import React, { useEffect, useState } from 'react'; +import { WalletIcon } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from '@/components/ui/popover'; declare global { interface Window { @@ -88,24 +95,29 @@ function MetaMaskConnect() { return (
{isConnected ? ( -
- - - {account && `${account.slice(0, 6)}...${account.slice(-4)}`} - -
+ + + + + + + + ) : ( - + Connect Wallet + )}
); From 83156d541fc62082f2b14166d12bd9561f2e0e40 Mon Sep 17 00:00:00 2001 From: Adwit Mukherji <66975870+4dw1tz@users.noreply.github.com> Date: Sat, 26 Oct 2024 23:32:21 +0100 Subject: [PATCH 4/7] Buy ticket interface works --- .eslintrc.json | 3 +- app/events/[...eventId]/page.tsx | 73 +++++++++++++++----------- app/events/page.tsx | 3 +- components/custom/EventDescription.tsx | 52 ++++++++++++------ components/custom/ImageCarousel.tsx | 21 +++++--- package-lock.json | 2 + 6 files changed, 98 insertions(+), 56 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 1a1ad7a..c9fcf13 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,7 @@ { "extends": ["next/core-web-vitals", "next/typescript"], "rules": { - "@next/next/no-img-element": "off" + "@next/next/no-img-element": "off", + "@typescript-eslint/no-explicit-any": "off" } } diff --git a/app/events/[...eventId]/page.tsx b/app/events/[...eventId]/page.tsx index 60ad8d6..644e4bb 100644 --- a/app/events/[...eventId]/page.tsx +++ b/app/events/[...eventId]/page.tsx @@ -1,46 +1,55 @@ 'use client'; -import React from 'react'; -import { useSearchParams } from 'next/navigation'; +import React, { useEffect, useState } from 'react'; +import { useParams } from 'next/navigation'; import Header from '../../../components/custom/header'; import Footer from '../../../components/custom/footer'; import EventDescription from '../../../components/custom/EventDescription'; -// Dummy function to simulate a GET request -const fetchEventDetails = (eventID: number) => { - alert(`Fetching details for event ID: ${eventID}`); - // Simulated JSON response for the event - return { - EventID: eventID, - name: 'Example Event Name', - date: '2023-12-01', - location: 'Example Location', - ticketPrice: 100, - description: 'Detailed description of the event.', - capacity: 300, - ticketsSold: 150, - imageUrl: [ - 'https://via.placeholder.com/150', - 'https://via.placeholder.com/150', - ], - host: 'Example Host', - tickets: [1, 2, 3, 4], - }; -}; - const ListingPage: React.FC = () => { - const searchParams = useSearchParams(); - const eventID = searchParams.get('eventID'); + const { eventId } = useParams(); + const [eventDetails, setEventDetails] = useState(null); - // Simulate fetching data from backend - if (eventID) { - const eventDetails = fetchEventDetails(Number(eventID)); - console.log('Event Details:', eventDetails); - } + useEffect(() => { + const fetchEventDetails = async (id: number) => { + alert(`Fetching details for event ID: ${id}`); + // Dummy Response + const details = { + EventID: id, + name: 'Example Event Name', + date: '2023-12-01', + location: 'Example Location', + ticketPrice: 100, + description: 'Detailed description of the event.', + capacity: 300, + ticketsSold: 295, + imageUrl: [ + 'https://via.placeholder.com/150', + 'https://via.placeholder.com/150', + ], + host: 'Example Host', + tickets: [1, 2, 3, 4], + }; + return details; + }; + + const getEventDetails = async () => { + if (eventId) { + const details = await fetchEventDetails(Number(eventId)); + setEventDetails(details); + } + }; + + getEventDetails(); + }, [eventId]); return ( <>
- + {eventDetails ? ( + + ) : ( +

Loading...

+ )}