✨ Was added DTO and Event interface

src/components/events/GetTicketCard.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import { Flex, Button, Text, VStack } from '@chakra-ui/react'
+import { Event } from '@/models/event.model'
 
 type Props = {
+	event: Event
 	getTicket: () => Promise<void>
 	isBuyTicketLoading: boolean
 	hasTicket: boolean
 }
 
 const GetTicketCard = (props: Props) => {
-	const { getTicket, isBuyTicketLoading, hasTicket } = props
+	const { event, getTicket, isBuyTicketLoading, hasTicket } = props
 	return (
 		<Flex
 			position={'sticky'}
@@ -30,7 +32,7 @@ const GetTicketCard = (props: Props) => {
 					fontWeight='semibold'
 					color={'#00001C'}
 				>
-					¡GRATIS!
+					¡GRATIS! {event.totalTickets - event.remainingTickets}
 				</Text>
 				{hasTicket ? (
 					<Button

src/functions/dto/index.ts

@@ -0,0 +1,17 @@
+import { Event, EventDTO } from '@/models/event.model'
+
+export function mapDTOtoEvent(eventDTO: EventDTO): Event {
+	return {
+		id: eventDTO.id,
+		name: eventDTO.name,
+		description: eventDTO.description,
+		location: eventDTO.location,
+		totalTickets: eventDTO.totalTickets.toNumber(),
+		remainingTickets: eventDTO.remainingTickets.toNumber(),
+		startTime: eventDTO.startTime.toNumber(),
+		endTime: eventDTO.endTime.toNumber(),
+		reedemableTime: eventDTO.reedemableTime.toNumber(),
+		ownerAddress: eventDTO.ownerAddress,
+		nftAddress: eventDTO.nftAddress
+	}
+}

src/models/event.model.ts

@@ -0,0 +1,29 @@
+import { BigNumber } from 'ethers'
+
+export interface Event {
+	id: string
+	name: string
+	description: string
+	location: string
+	totalTickets: number
+	remainingTickets: number
+	startTime: number
+	endTime: number
+	reedemableTime: number
+	ownerAddress: string
+	nftAddress: string
+}
+
+export interface EventDTO {
+	id: string
+	name: string
+	description: string
+	location: string
+	totalTickets: BigNumber
+	remainingTickets: BigNumber
+	startTime: BigNumber
+	endTime: BigNumber
+	reedemableTime: BigNumber
+	ownerAddress: string
+	nftAddress: string
+}

src/pages/events/[id]/index.tsx

@@ -20,22 +20,25 @@ import Footer from '@/components/shared/Footer'
 import '../../../config/i18n'
 import { CHAINID, PROVIDER } from '@/constants/constants'
 import { useAccount, useNetwork } from 'wagmi'
-import { time } from 'console'
-import { TimeIcon } from '@chakra-ui/icons'
-import { t } from 'i18next'
-
-interface Event {
-	id: string
-	title: string
-	description: string
+import { Event, EventDTO } from '@/models/event.model'
+import { mapDTOtoEvent } from '@/functions/dto'
+
+const initialEvent: Event = {
+	id: '',
+	name: '',
+	description: '',
+	location: '',
+	totalTickets: 0,
+	remainingTickets: 0,
+	startTime: 0,
+	endTime: 0,
+	reedemableTime: 0,
+	ownerAddress: '',
+	nftAddress: ''
 }
 
-type Props = {
-	event: Event
-}
-
-function Event(props: Props): JSX.Element {
-	const { event } = props
+function Event(): JSX.Element {
+	const [event, setEvent] = useState<Event>(initialEvent)
 	const [isBuyTicketLoading, setIsBuyTicketLoading] = useState<boolean>(false)
 	const [hasTicket, setHasTicket] = useState<boolean>(false)
 	const [isLoading, setIsLoading] = useState<boolean>(true)
@@ -144,6 +147,22 @@ function Event(props: Props): JSX.Element {
 				rpcProvider
 			) as MeetdAppEvent
 
+			const eventDTO: EventDTO = {
+				id: await eventContract.eventId(),
+				name: await eventContract.eventName(),
+				description: await eventContract.eventDescription(),
+				location: await eventContract.eventLocation(),
+				totalTickets: await eventContract.eventTotalTickets(),
+				remainingTickets: await eventContract.eventRemainingTickets(),
+				startTime: await eventContract.eventStartTime(),
+				endTime: await eventContract.eventRemainingTickets(),
+				reedemableTime: await eventContract.eventReedemableTime(),
+				ownerAddress: await eventContract.eventOwner(),
+				nftAddress: await eventContract.eventNfts()
+			}
+
+			setEvent(mapDTOtoEvent(eventDTO))
+
 			if (address) {
 				const ticket: boolean = await eventContract.eventAttendees(address)
 				setHasTicket(ticket)
@@ -153,7 +172,7 @@ function Event(props: Props): JSX.Element {
 
 			setMeetdAppEventContract(eventContract)
 			setIsLoading(false)
-		}, 3000)
+		}, 1000)
 	}
 
 	useEffect(() => {
@@ -229,6 +248,7 @@ function Event(props: Props): JSX.Element {
 						>
 							<EventDetails />
 							<GetTicketCard
+								event={event}
 								getTicket={onBuyTicket}
 								isBuyTicketLoading={isBuyTicketLoading}
 								hasTicket={hasTicket}