⚡ Was added dynamic routing

src/components/home/Events.tsx

@@ -19,6 +19,8 @@ export default function Events(props: Props): React.ReactNode {
 	const { isLoading } = props
 	const { t } = useTranslation()
 
+	const eventId: string = 'mC8cCmWH5Ws8IZQy'
+
 	return (
 		<>
 			<Flex
@@ -47,7 +49,7 @@ export default function Events(props: Props): React.ReactNode {
 					>
 						<Link
 							href={{
-								pathname: `/events/${first_event.id}`
+								pathname: `/events/${eventId}`
 							}}
 						>
 							<GridItem

src/functions/dto/index.ts

@@ -1,4 +1,5 @@
 import { Event, EventDTO } from '@/models/event.model'
+import { BigNumber } from 'ethers'
 
 export function mapDTOtoEvent(eventDTO: EventDTO): Event {
 	return {
@@ -15,3 +16,19 @@ export function mapDTOtoEvent(eventDTO: EventDTO): Event {
 		nftAddress: eventDTO.nftAddress
 	}
 }
+
+export function mapEventToDTO(event: Event): EventDTO {
+	return {
+		id: event.id,
+		name: event.name,
+		description: event.description,
+		location: event.location,
+		totalTickets: BigNumber.from(event.totalTickets),
+		remainingTickets: BigNumber.from(event.remainingTickets),
+		startTime: BigNumber.from(event.startTime),
+		endTime: BigNumber.from(event.endTime),
+		reedemableTime: BigNumber.from(event.reedemableTime),
+		ownerAddress: event.ownerAddress,
+		nftAddress: event.nftAddress
+	}
+}

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

@@ -40,16 +40,17 @@ const initialEvent: Event = {
 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)
+	const [hasTicket, setHasTicket] = useState<boolean>(false)
 	const [meetdAppEventContract, setMeetdAppEventContract] =
 		useState<MeetdAppEvent | null>(null)
 	const [owner, setOwner] = useState<string | undefined>(undefined)
 
 	const router = useRouter()
 
 	// TODO: generate nanoId
-	const slug: string | string[] | undefined = router.query?.id
+	const splitedPath: string[] = router.asPath.split('/')
+	const id = splitedPath[splitedPath.length - 1]
 
 	const { address } = useAccount()
 	const { chain } = useNetwork()
@@ -124,7 +125,7 @@ function Event(): JSX.Element {
 	}
 
 	const fetchEventInformation = async () => {
-		setTimeout(async () => {
+		try {
 			const rpcProvider: ethers.providers.JsonRpcProvider =
 				new ethers.providers.JsonRpcProvider(PROVIDER)
 
@@ -134,8 +135,7 @@ function Event(): JSX.Element {
 				rpcProvider
 			) as MeetdAppFactory
 
-			const eventId: string = 'mC8cCmWH5Ws8IZQy'
-			const bytesEventId = ethers.utils.toUtf8Bytes(eventId)
+			const bytesEventId = ethers.utils.toUtf8Bytes(id as string)
 			const hashBytes32EventId = ethers.utils.keccak256(bytesEventId)
 
 			const eventContractAdress: string =
@@ -172,7 +172,9 @@ function Event(): JSX.Element {
 
 			setMeetdAppEventContract(eventContract)
 			setIsLoading(false)
-		}, 1000)
+		} catch (error) {
+			router.push('/404')
+		}
 	}
 
 	useEffect(() => {

src/pages/index.tsx

@@ -32,18 +32,6 @@ export default function Home() {
 
 	useEffect(() => {
 		fetchActiveEvents()
-		// const ethereum = (window as any).ethereum
-
-		// if (
-		// 	typeof ethereum !== 'undefined' &&
-		// 	typeof ethereum === 'object' &&
-		// 	typeof ethereum.web3 !== 'undefined'
-		// ) {
-		// 	// MetaMask is installed and web3 is available
-		// } else {
-		// 	// MetaMask is not installed or web3 is not available
-		// 	console.log('MetaMask no está instalado en este navegador.')
-		// }
 	}, [])
 
 	return (