🍻 Added toasts to transaction flux

src/assets/i18n/en.json

@@ -108,6 +108,9 @@
     "error-code": "Error code",
     "home": "Go back home"
   },
+  "event": {
+    "title": ""
+  },
   "toasts": {
     "ticket-bought": {
       "title": "Ticket was bought!",
@@ -116,6 +119,18 @@
     "failed": {
       "title": "Transaction failed.",
       "description": "The transaction failed. Try again."
+    },
+    "install-metamask": {
+      "title": "Install MetaMask",
+      "description": "MetaMask is not installed in your computer"
+    },
+    "connect-metamask": {
+      "title": "Connect your accout",
+      "description": "MetaMask account is  not connected."
+    },
+    "change-network": {
+      "title": "Not valid network",
+      "description": "Set your network to mumbai to get your ticket"
     }
   }
 }

src/assets/i18n/es.json

@@ -114,8 +114,20 @@
       "description": "El tiquete fue comprado exitosamente."
     },
     "failed": {
-      "title": "Transaction failed.",
-      "description": "La transacción falló. Intenta de nuevo"
+      "title": "Transacción fallida",
+      "description": "La transacción falló. Intenta de nuevo."
+    },
+    "install-metamask": {
+      "title": "Instala MetaMask",
+      "description": "MetaMask no está instalado en este navegador."
+    },
+    "connect-metamask": {
+      "title": "Cuenta desconectada",
+      "description": "Conecta tu cuenta de MetaMask para comprar un tiquete."
+    },
+    "change-network": {
+      "title": "Red no válida",
+      "description": "Cambia a la red Mumbai para comprar un tiquete."
     }
   }
 }

src/components/events/Attendees.tsx

@@ -14,13 +14,13 @@ const Attendees = () => {
 			p={{ base: 5, md: 7 }}
 		>
 			<Text
-				fontSize='1.953rem'
+				fontSize={{ base: '2xl', lg: '3xl' }}
 				fontFamily={'space'}
 				fontWeight='semibold'
 				color={'#00001C'}
 				textAlign={{ base: 'start', md: 'start' }}
 			>
-				X Asistentes
+				Asistentes
 			</Text>
 
 			<SimpleGrid columns={{ sm: 2, md: 3 }} spacing='8'>

src/components/events/EventDetails.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Text, VStack } from '@chakra-ui/react'
+import { Flex, List, ListItem, Text, VStack } from '@chakra-ui/react'
 
 const EventDetails = () => {
 	return (
@@ -13,34 +13,51 @@ const EventDetails = () => {
 		>
 			<VStack align='start' spacing={5}>
 				<Text
-					fontSize='1.953rem'
+					fontSize={{ base: '2xl', lg: '3xl' }}
 					fontFamily={'space'}
 					fontWeight='semibold'
 					color={'#00001C'}
 				>
 					Detalles del Evento
 				</Text>
 				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
-					🌐 Web3 en Acción: Sé voluntari@ de impacto 🌐 ¡Únete a nosotros el
-					Jueves 14 de septiembre a las 6pm en el restaurante Bitácora (Cra. 19
-					# 134-69) para una experiencia única que te conectará con el poder de
-					ser un voluntario web3! ¿Quieres ser parte del cambio y hacer un
-					impacto significativo en la comunidad? ¿Te interesa conocer más sobre
-					la tecnología web3 y cómo puedes usarla para el bien común? ¡Este
-					evento es para ti! Tendremos un preámbulo a la Blockchain Summit Latam
-					donde conocerás más detalles de los beneficios que recibirás al
-					registrarte como voluntario, igualmente encontrarás: 🗣️ Charlas
-					Inspiradoras: Escucha a expertos de la industria compartir su visión y
-					experiencias en el mundo web3 y cómo el voluntariado puede impulsar un
-					cambio real. 🍽️ Comida deliciosa: Disfruta de la sazón del restaurante
-					Bitácora mientras conectas con otros apasionados por la tecnología y
-					el voluntariado web3. 🤝 Networking enriquecedor: Amplía tu red de
-					contactos, conoce a personas afines y crea conexiones valiosas que
-					pueden marcar la diferencia. Este evento es una oportunidad única para
-					inspirarte, aprender y tomar acción. ¡Juntos podemos construir un
-					futuro mejor a través de la tecnología y el voluntariado!¡Regístrate
-					ahora y sé parte de este movimiento de cambio!#Web3EnAccion
-					#VoluntariadoWeb3 #ImpactoPositivo
+					🌐 Web3 en Acción: Sé voluntari@ de impacto 🌐
+				</Text>
+				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
+					¿Quieres ser parte del cambio y hacer un impacto significativo en la
+					comunidad? ¿Te interesa conocer más sobre la tecnología web3 y cómo
+					puedes usarla para el bien común? ¡Este evento es para ti!
+				</Text>
+				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
+					¡Únete a nosotros el Jueves 14 de septiembre a las 6pm en el
+					restaurante Bitácora (Cra. 19 # 134-69) para una experiencia única que
+					te conectará con el poder de ser un voluntario web3! Tendremos un
+					preámbulo a la Blockchain Summit Latam donde conocerás más detalles de
+					los beneficios que recibirás al registrarte como voluntario,
+					igualmente encontrarás:
+				</Text>
+				<List spacing={3}>
+					<ListItem ml={10}>
+						🗣️ Charlas Inspiradoras: Escucha a expertos de la industria
+						compartir su visión y experiencias en el mundo web3 y cómo el
+						voluntariado puede impulsar un cambio real.
+					</ListItem>
+					<ListItem ml={10}>
+						🍽️ Comida deliciosa: Disfruta de la sazón del restaurante Bitácora
+						mientras conectas con otros apasionados por la tecnología y el
+						voluntariado web3.
+					</ListItem>
+					<ListItem ml={10}>
+						🤝 Networking enriquecedor: Amplía tu red de contactos, conoce a
+						personas afines y crea conexiones valiosas que pueden marcar la
+						diferencia.
+					</ListItem>
+				</List>
+				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
+					Este evento es una oportunidad única para inspirarte, aprender y tomar
+					acción. ¡Juntos podemos construir un futuro mejor a través de la
+					tecnología y el voluntariado!¡Regístrate ahora y sé parte de este
+					movimiento de cambio!#Web3EnAccion #VoluntariadoWeb3 #ImpactoPositivo
 				</Text>
 			</VStack>
 		</Flex>

src/components/events/EventLocation.tsx

@@ -54,11 +54,11 @@ const EventLocation = () => {
 					Restaurante Bitácora, Calle 85 # 12-51, Bogotá, Colombia
 				</Text>
 			</HStack>
-			<Box flex='1' w='100%' h='full' bg='gray.300' borderRadius='md' mt={4}>
+			{/* <Box flex='1' w='100%' h='full' bg='gray.300' borderRadius='md' mt={4}>
 				<Text textAlign='center' verticalAlign='middle' m='auto'>
 					Map Placeholder
 				</Text>
-			</Box>
+			</Box> */}
 		</Flex>
 	)
 }

src/components/events/GetTicketCard.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
-import { Flex, Button, Text } from '@chakra-ui/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
 			h={'fit-content'}
@@ -32,15 +34,16 @@ const GetTicketCard = (props: Props) => {
 				direction={{ base: 'row', lg: 'column' }}
 				gap={3}
 				justifyContent={'center'}
+				alignItems={'center'}
 			>
 				<Text
-					fontSize='lg'
+					fontSize={{ base: 'md', lg: 'lg' }}
 					fontFamily={'space'}
 					fontWeight='semibold'
 					color={'#00001C'}
 					textAlign={'center'}
 				>
-					GRATIS • Quedan 7 cupos
+					¡GRATIS! • Quedan {event.remainingTickets} cupos
 				</Text>
 				{hasTicket ? (
 					<Button
@@ -52,7 +55,7 @@ const GetTicketCard = (props: Props) => {
 						bg={'teal'}
 						color={'#FFF'}
 						fontFamily={'neue'}
-						fontSize={['18px', '22px']}
+						fontSize={{ base: 'md', lg: 'lg' }}
 						fontWeight={400}
 						_active={{
 							transform: 'scale(0.98)'

src/components/events/PreviousEvents.tsx

@@ -17,7 +17,7 @@ export default function PreviousEvents() {
 			>
 				<VStack align='start' justifyContent={'flex-start'} spacing={0}>
 					<Text
-						fontSize='1.953rem'
+						fontSize={{ base: '2xl', lg: '3xl' }}
 						fontFamily={'space'}
 						fontWeight='semibold'
 						color={'#00001C'}

src/components/events/TagsSection.tsx

@@ -15,7 +15,7 @@ const TagsSection = () => {
 		>
 			<VStack align='start' spacing={5}>
 				<Text
-					fontSize='1.953rem'
+					fontSize={{ base: '2xl', lg: '3xl' }}
 					fontFamily={'space'}
 					fontWeight='semibold'
 					color={'#00001C'}

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
+}