Merge pull request #22 from EthereumBogota/develop

Develop

.env.example

@@ -1,3 +1,3 @@
 NEXT_PUBLIC_ALCHEMY_API_KEY=''
 NEXT_PUBLIC_ENABLE_TESTNETS=''
-NEXT_PUBLIC_EVM_EXPLORER=''
+

.gitignore

@@ -14,7 +14,7 @@
 
 # production
 /build
-
+/src/assets/contracts
 # misc
 .DS_Store
 *.pem

package.json

@@ -22,8 +22,10 @@
 		"eslint": "8.45.0",
 		"eslint-config-next": "13.4.10",
 		"ethers": "5.7.2",
+		"formik": "^2.4.5",
 		"framer-motion": "^10.16.2",
 		"i18next": "^23.5.1",
+		"moment": "^2.29.4",
 		"next": "13.4.10",
 		"postcss": "8.4.26",
 		"prettier": "^3.0.0",

src/assets/i18n/en.json

@@ -14,9 +14,15 @@
     },
     "top-events": {
       "title": "Top Events",
-      "card": {
+      "card1": {
         "title": "¡Web3 in action: Be an impactful volunteer in the BSL!",
-        "attendees": "attendees"
+        "attendees": "{{number}} attendees",
+        "cost": "Free"
+      },
+      "card2": {
+        "title": "ETHColombia Side Event in the BSL: Latin American Nodes Celebration",
+        "attendees": "{{number}} attendees",
+        "cost": "Free"
       }
     },
     "section1": {
@@ -51,65 +57,19 @@
   "footer": {
     "copyright": "Ethereum Bogota Community"
   },
-  "modal": {
-    "adapter-loader.message": "Verify your {{adapter}} account to continue",
-    "adapter-loader.message1": "Verify your {{adapter}}",
-    "adapter-loader.message2": "account to continue",
-    "errors-invalid-number-email": "Invalid Email or Phone Number",
-    "errors-required": "Required",
-    "external.back": "Back",
-    "external.connect": "Connect with Wallet",
-    "external.title": "External Wallet",
-    "external.walletconnect-connect": "Connect",
-    "external.walletconnect-copy": "Click on the QR Code to copy to clipboard",
-    "external.walletconnect-subtitle": "Scan the QR code with a WalletConnect-compatible wallet",
-    "footer.message": "Self-custodial login by",
-    "footer.message-new": "Self-custodial login by Web3Auth",
-    "footer.policy": "Privacy Policy",
-    "footer.terms": "Terms of Use",
-    "footer.terms-service": "Terms of Service",
-    "footer.version": "Version",
-    "header-subtitle": "Select one of the following options to continue",
-    "header-subtitle-name": "Your {{appName}} wallet with one click",
-    "header-subtitle-new": "Your blockchain wallet with one click",
-    "header-title": "Sign in into Meet dApp",
-    "header-tooltip-desc": "The wallet serves as an account to store and manage your digital assets on the blockchain.",
-    "header-tooltip-title": "Wallet",
-    "network.add-request": "This site is requesting to add a network",
-    "network.cancel": "Cancel",
-    "network.from": "From",
-    "network.proceed": "Proceed",
-    "network.switch-request": "This site is requesting to switch networks",
-    "network.to": "To",
-    "popup.phone-body": "Your country code will be detected automatically, but if you're using a phone number from a different country, you'll need to enter the correct country code manually.",
-    "popup.phone-header": "Phone number and country code",
-    "social.continue": "Continue with",
-    "social.continueCustom": "Continue with {{adapter}}",
-    "social.email": "Email",
-    "social.email-continue": "Continue with Email",
-    "social.email-new": "[email protected]",
-    "social.passwordless-cta": "Continue",
-    "social.passwordless-title": "Email or Phone",
-    "social.phone": "Phone",
-    "social.policy": "We do not store any data related to your social logins.",
-    "social.sms": "Mobile",
-    "social.sms-continue": "Continue with Mobile",
-    "social.sms-invalid-number": "Invalid phone number",
-    "social.sms-placeholder-text": "E.g.:",
-    "social.view-less": "View fewer options",
-    "social.view-less-new": "View fewer",
-    "social.view-more": "View more options",
-    "social.view-more-new": "View more",
-    "post-loading.connected": "You are connected with your account",
-    "post-loading.something-wrong": "Something went wrong!"
-  },
   "404": {
     "not-found": "This page was not found",
     "error-code": "Error code",
     "home": "Go back home"
   },
   "event": {
-    "title": ""
+    "event-details": "Event Details",
+    "hosted-by": "Hosted by",
+    "assistants": "Assistants",
+    "event-pictures": "Previous Event Pictures",
+    "labels": "Labels",
+    "get-ticket": "Get NFT Ticket",
+    "loading": "Loading..."
   },
   "toasts": {
     "ticket-bought": {

src/assets/i18n/es.json

@@ -14,9 +14,15 @@
     },
     "top-events": {
       "title": "Eventos populares",
-      "card": {
+      "card1": {
+        "title": "Side Event de ETHColombia en la BSL: Celebración de los Nodos Latinoamericanos",
+        "attendees": "{{number}} asistentes",
+        "cost": "Gratis"
+      },
+      "card2": {
         "title": "¡Web3 en acción: Sé un voluntari@ de impacto en la BSL!",
-        "attendees": "asistentes"
+        "attendees": "{{number}} asistentes",
+        "cost": "Gratis"
       }
     },
     "section1": {
@@ -51,63 +57,20 @@
   "footer": {
     "copyright": "Comunidad Ethereum Bogotá"
   },
-  "modal": {
-    "adapter-loader.message": "Verifica tu cuenta {{adapter}} para continuar",
-    "adapter-loader.message1": "Verifique su {{adapter}}",
-    "adapter-loader.message2": "cuenta para continuar",
-    "errors-invalid-number-email": "Correo electrónico o número de teléfono inválido",
-    "errors-required": "Campo obligatorio",
-    "external.back": "Atrás",
-    "external.connect": "Conectar con billetera",
-    "external.title": "Billetera Externa",
-    "external.walletconnect-connect": "Conectar",
-    "external.walletconnect-copy": "Haz clic en el código QR para copiarlo al portapapeles",
-    "external.walletconnect-subtitle": "Escanear el código QR con una billetera compatible con WalletConnect",
-    "footer.message": "Inicio de sesión con autogestión por",
-    "footer.message-new": "Inicio de sesión con autogestión por Web3Auth",
-    "footer.policy": "Política de privacidad",
-    "footer.terms": "Términos de Uso",
-    "footer.terms-service": "Términos de servicio",
-    "footer.version": "Versión",
-    "header-subtitle": "Seleccione una de las siguientes opciones para continuar",
-    "header-subtitle-name": "Su billetera {{appName}} con un solo clic",
-    "header-subtitle-new": "Su billetera blockchain con un solo clic",
-    "header-title": "Iniciar sesión en Meet dApp",
-    "header-tooltip-desc": "La billetera sirve como una cuenta para almacenar y administrar sus activos digitales en la cadena de bloques.",
-    "header-tooltip-title": "Billetera",
-    "network.add-request": "Este sitio está solicitando agregar una red",
-    "network.cancel": "Cancelar",
-    "network.from": "De",
-    "network.proceed": "Continuar",
-    "network.switch-request": "Este sitio está solicitando cambiar de red",
-    "network.to": "A",
-    "popup.phone-body": "Su código de país se detectará automáticamente, pero si está utilizando un número de teléfono de otro país, deberá ingresar manualmente el código de país correcto.",
-    "popup.phone-header": "Número de teléfono y código de país",
-    "social.continue": "Continuar con",
-    "social.continueCustom": "Continuar con {{adapter}}",
-    "social.email": "Correo electrónico",
-    "social.email-continue": "Continuar con correo electrónico",
-    "social.email-new": "[email protected]",
-    "social.passwordless-cta": "Continuar",
-    "social.passwordless-title": "Email o teléfono",
-    "social.phone": "Teléfono",
-    "social.policy": "No almacenamos ningún dato relacionado con sus inicios de sesión sociales.",
-    "social.sms": "Móvil",
-    "social.sms-continue": "Continuar con móvil",
-    "social.sms-invalid-number": "Número de teléfono inválido",
-    "social.sms-placeholder-text": "Por ej.:",
-    "social.view-less": "Ver menos opciones",
-    "social.view-less-new": "Ver menos",
-    "social.view-more": "Ver más opciones",
-    "social.view-more-new": "Ver más",
-    "post-loading.connected": "Estás conectado con tu cuenta",
-    "post-loading.something-wrong": "¡Algo salió mal!"
-  },
   "404": {
     "not-found": "Esta página no fue encontrada",
     "error-code": "Código de error",
     "home": "Volver al inicio"
   },
+  "event": {
+    "event-details": "Detalles del Evento",
+    "hosted-by": "Hosteado por",
+    "assistants": "Asistentes",
+    "event-pictures": "Fotos de Eventos Anteriores",
+    "labels": "Etiquetas",
+    "get-ticket": "Conseguir Entrada NFT",
+    "loading": "Cargando..."
+  },
   "toasts": {
     "ticket-bought": {
       "title": "Tiquete comprado!",

src/components/events/Attendees.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import { Flex, Text, VStack, SimpleGrid, Box } from '@chakra-ui/react'
 import { AssistantAvatar } from './AssistantAvatar'
+import { useTranslation } from 'react-i18next'
 type Props = {
 	attendees: string[]
 }
 const Attendees = (props: Props) => {
 	const { attendees } = props
+	const { t } = useTranslation()
 	return (
 		<Flex
 			borderRadius='3xl'
@@ -23,7 +25,7 @@ const Attendees = (props: Props) => {
 				color={'#00001C'}
 				textAlign={{ base: 'start', md: 'start' }}
 			>
-				Asistentes
+				{t('event.assistants')}{` (${attendees.length})`}
 			</Text>
 
 			<SimpleGrid columns={{ sm: 2, md: 3 }} spacing='8'>

src/components/events/EventDetails.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
-import { Flex, List, ListItem, Text, VStack } from '@chakra-ui/react'
+import { Flex, Text, VStack } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { Event } from '@/models/event.model'
+interface EventDetailsProps {
+	event: Event | null
+}
+const EventDetails = ({ event }: EventDetailsProps) => {
+	const { t } = useTranslation()
 
-const EventDetails = () => {
 	return (
 		<Flex
 			borderRadius='3xl'
@@ -18,48 +24,10 @@ const EventDetails = () => {
 					fontWeight='semibold'
 					color={'#00001C'}
 				>
-					Detalles del Evento
-				</Text>
-				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
-					🌐 Felicidades has sido pre-seleccionado como voluntario para el
-					Blockchain Summit Latam! 🌐
-				</Text>
-				<Text
-					fontSize='md'
-					color={'#00001C'}
-					fontFamily={'space'}
-					fontWeight={'bold'}
-				>
-					BENEFICIOS COMO VOLUNTARIADO
+					{t('event.event-details')}
 				</Text>
-				<List spacing={1}>
-					<ListItem ml={1}>
-						🚀 Formarás parte de un equipo exclusivo de gente que quiere
-						impactar en Web3
-					</ListItem>
-					<ListItem ml={1}>
-						🚀 Conocerás experiencias de líderes que comenzaron como voluntarios
-						en nuestro MeetUP con ETH Colombia.
-					</ListItem>
-					<ListItem ml={1}>🚀 Recibirás el swag oficial del evento.</ListItem>
-					<ListItem ml={1}>
-						🚀 Tendrás acceso a un día completo del evento.
-					</ListItem>
-					<ListItem ml={1}>
-						🚀 Serás invitado a nuestra exclusiva fiesta VIP, donde podrás hacer
-						valiosas conexiones.
-					</ListItem>
-					<ListItem ml={1}>
-						🚀 Consideración para programas en Colledge.
-					</ListItem>
-					<ListItem ml={1}>
-						🚀 Tendrás la oportunidad de participar activamente en el evento y
-						establecer conexiones con oradores y participantes.
-					</ListItem>
-					<ListItem ml={1}>🚀 Recibirás NFT y POAP de participación.</ListItem>
-				</List>
 				<Text fontSize='md' color={'#00001C'} fontFamily={'space'}>
-					¡Llegó tu oportunidad de marcar la diferencia!
+					{event?.description}
 				</Text>
 			</VStack>
 		</Flex>

src/components/events/EventImage.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { Flex, Text, Box } from '@chakra-ui/react'
+interface EventImageProps {
+	eventName: string
+	eventId: string
+}
+const EventImage = ({ eventName, eventId }: EventImageProps) => {
+	const firstEvent: boolean = eventId == "mC8cCmWH5Ws8IZQy"
 
-const EventImage = () => {
 	return (
 		<Box position='relative' width='full' mx='auto'>
 			<Box
@@ -20,17 +25,20 @@ const EventImage = () => {
 					fontWeight={'bold'}
 					fontSize={{ base: '16px', lg: '19px' }}
 				>
-					{'Eres Voluntari@ de Impacto en el BSL 2023  '}
+					{eventName}
 				</Text>
 			</Box>
 			<Flex
 				minH={{ base: '300px', md: '400px', lg: '500px' }}
 				mx='auto'
 				bg={'brand.newBlack'}
-				backgroundImage={'/images/voluntarioBSL.png'}
-				backgroundSize={'contain'}
+				backgroundImage={firstEvent ? '/images/voluntarioBSL.png' : '/images/side_event.jpg'}
+				backgroundSize={'cover'}
+				backgroundRepeat={'no-repeat'}
+				backgroundPosition={'center'}
 				align='center'
 				position='relative'
+				borderRadius={"3xl"}
 			/>
 		</Box>
 	)

src/components/events/EventLocation.tsx

@@ -8,8 +8,32 @@ import {
 	Avatar
 } from '@chakra-ui/react'
 import { CalendarIcon, InfoIcon } from '@chakra-ui/icons'
+import { useTranslation } from 'react-i18next'
+import { Event } from '@/models/event.model'
+import { useEffect, useState } from 'react'
+import moment from 'moment'
+import 'moment/locale/es';
+
+interface EventLocationProps {
+	event: Event | null
+}
+
+const EventLocation = ({ event }: EventLocationProps) => {
+	const [startDate, setStartDate] = useState<string>('');
+	const { t, i18n } = useTranslation()
+
+	useEffect(() => {
+		if (event) {
+			readDate()
+		}
+	}, [event, i18n.language])
+
+	const readDate = () => {
+		moment.locale(i18n.language as string)
+		const date = moment.unix(event?.startTime!).format('DD MMMM YYYY')
+		setStartDate(date)
+	}
 
-const EventLocation = () => {
 	return (
 		<Flex
 			borderRadius='3xl'
@@ -28,9 +52,10 @@ const EventLocation = () => {
 						fontWeight='semibold'
 						color={'gray.500'}
 					>
-						Hosted By
+						{t('event.hosted-by')}
 					</Text>
 					<Text fontSize='lg' fontFamily={'space'} color={'#00001C'}>
+						{/* TODO include in smart contract structure */}
 						{'Ethereum Bogotá'}
 					</Text>
 				</VStack>
@@ -43,16 +68,15 @@ const EventLocation = () => {
 					<CalendarIcon />
 				</Box>
 				<Text fontSize='md' color={'#00001C'}>
-					Octubre 4 - 6, 2023
+					{startDate}
 				</Text>
 			</HStack>
 			<HStack spacing={4} mb={4} align='center'>
 				<Box w='24px' h='24px' bg='gray.200'>
 					<InfoIcon />
 				</Box>
 				<Text fontSize='md' color={'#00001C'}>
-					Centro de Convenciones Ágora Bogotá&rsquo;, Ac. 24 #38-47, Bogotá,
-					Colombia
+					{event?.location}
 				</Text>
 			</HStack>
 			{/* <Box flex='1' w='100%' h='full' bg='gray.300' borderRadius='md' mt={4}>