Merge pull request #13 from majin-land/feature/update-events

Update events

apps/haus/src/app/page.tsx

@@ -7,7 +7,7 @@ import Hero from '@/components/hero'
 import Event from '@/components/event'
 import Footer from '@/components/footer'
 
-import { EVENTS } from '@/config'
+import { EVENTS } from '@/config/events'
 
 export default function Home() {
   return (

apps/haus/src/components/complate-ticket/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import Link from 'next/link'
-import { Box, Typography, Grid } from '@mui/material'
-import EmailIcon from '@mui/icons-material/Email'
-import PhoneIcon from '@mui/icons-material/Phone'
+import { Box, Link, Typography } from '@mui/material'
+import Image from 'next/image'
 
 const ComplateTicket: React.FC = () => {
   return (
@@ -32,9 +30,11 @@ const ComplateTicket: React.FC = () => {
         </Typography>
       </Box>
 
-      <img
+      <Image
         src="/success.png"
-        alt="Completed Illustration"
+        alt="Successful Ticket"
+        width={400}
+        height={400}
         style={{ marginBottom: '24px' }}
       />
 
@@ -43,53 +43,8 @@ const ComplateTicket: React.FC = () => {
         component="p"
         gutterBottom
       >
-        Check your ticket <Link href="#">here</Link>
+        Check your ticket <Link href="/ticket">here</Link>
       </Typography>
-
-      <Typography
-        variant="body1"
-        component="p"
-        gutterBottom
-      >
-        Having trouble receiving the tickets?
-      </Typography>
-
-      <Grid
-        container
-        spacing={2}
-        justifyContent="center"
-      >
-        <Grid item>
-          <Box
-            display="flex"
-            alignItems="center"
-          >
-            <PhoneIcon color="primary" />
-            <Typography
-              variant="body1"
-              component="span"
-              marginLeft="8px"
-            >
-              +62 21 1234 9876
-            </Typography>
-          </Box>
-        </Grid>
-        <Grid item>
-          <Box
-            display="flex"
-            alignItems="center"
-          >
-            <EmailIcon color="primary" />
-            <Typography
-              variant="body1"
-              component="span"
-              marginLeft="8px"
-            >
-              [email protected]
-            </Typography>
-          </Box>
-        </Grid>
-      </Grid>
     </Box>
   )
 }

apps/haus/src/components/confirm-ticket/index.tsx

@@ -7,6 +7,7 @@ import LocationOnIcon from '@mui/icons-material/LocationOn'
 import EventIcon from '@mui/icons-material/Event'
 import { getEventById } from '@/utils/helper'
 import { TicketContext } from '@/store/ticket'
+import Image from 'next/image'
 
 function ConfirmTicket({ setStep }: { setStep: (step: number) => void }) {
   const { id } = useParams<{ id: string }>()
@@ -35,35 +36,51 @@ function ConfirmTicket({ setStep }: { setStep: (step: number) => void }) {
           <Typography variant="h6">Event Details</Typography>
           <Stack gap={2}>
             <Stack
-              direction="column"
-              gap={1}
+              direction="row"
+              gap={2}
             >
-              <Typography variant="body1">{event?.name}</Typography>
+              <Image
+                src={event?.image || ''}
+                alt={event?.name || ''}
+                width={163}
+                height={85}
+              />
               <Stack
-                direction="row"
+                direction="column"
                 gap={1}
-                alignItems="center"
               >
-                <LocationOnIcon fontSize="small" />
                 <Typography
+                  fontWeight="bold"
                   variant="body1"
-                  component="span"
                 >
-                  {event?.location}
+                  {event?.name}
                 </Typography>
-              </Stack>
-              <Stack
-                direction="row"
-                gap={1}
-                alignItems="center"
-              >
-                <EventIcon fontSize="small" />
-                <Typography
-                  variant="body1"
-                  component="span"
+                <Stack
+                  direction="row"
+                  gap={1}
+                  alignItems="center"
                 >
-                  {event?.date} &middot; {event?.time}
-                </Typography>
+                  <LocationOnIcon fontSize="small" />
+                  <Typography
+                    variant="body1"
+                    component="span"
+                  >
+                    {event?.location}
+                  </Typography>
+                </Stack>
+                <Stack
+                  direction="row"
+                  gap={1}
+                  alignItems="center"
+                >
+                  <EventIcon fontSize="small" />
+                  <Typography
+                    variant="body1"
+                    component="span"
+                  >
+                    {event?.date} &middot; {event?.time}
+                  </Typography>
+                </Stack>
               </Stack>
             </Stack>
             <Divider />

apps/haus/src/components/event/index.tsx

@@ -8,22 +8,33 @@ import CardContent from '@mui/material/CardContent'
 import Button from '@mui/material/Button'
 import CardActions from '@mui/material/CardActions'
 import { useRouter } from 'next/navigation'
-import { Stack } from '@mui/material'
+import { CardMedia, Stack, Tooltip } from '@mui/material'
+import { useAccount, useConnect } from 'wagmi'
 
 import LocationOnIcon from '@mui/icons-material/LocationOn'
 import EventIcon from '@mui/icons-material/Event'
+import PaymentIcon from '@mui/icons-material/Payment'
 import { IEvent, formatPriceRange } from '@/utils/helper'
 
+import { connectorCoinBaseWallet } from '../provider/wagmi'
+
 interface EventProps {
   event: IEvent
 }
 
 export default function Event(props: EventProps) {
   const router = useRouter()
+  const { address } = useAccount()
+  const { connect } = useConnect()
   const { event } = props
 
   const handleClick = () => {
-    router.push(`/event/${event.id}`)
+    if (address) {
+      router.push(`/event/${event.id}`)
+      return
+    }
+
+    connect({ connector: connectorCoinBaseWallet })
   }
 
   return (
@@ -32,28 +43,60 @@ export default function Event(props: EventProps) {
       md={3}
     >
       <Card sx={{ minWidth: 285 }}>
+        <CardMedia
+          component="img"
+          alt={event.image}
+          sx={{ height: 184 }}
+          image={event.image}
+        />
         <CardContent>
           <Stack spacing={1}>
-            <Typography variant="h6">{event.name}</Typography>
-            <Typography
-              variant="body2"
-              component="span"
-            >
-              {formatPriceRange(event.tickets)} ETH
-            </Typography>
+            <Tooltip title={event.name}>
+              <Typography
+                fontWeight="bold"
+                variant="body1"
+                sx={{
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {event.name}
+              </Typography>
+            </Tooltip>
             <Stack
               direction="row"
               gap={1}
               alignItems="center"
             >
-              <LocationOnIcon fontSize="small" />
+              <PaymentIcon fontSize="small" />
               <Typography
                 variant="body2"
                 component="span"
               >
-                {event.location}
+                {formatPriceRange(event.tickets)} ETH
               </Typography>
             </Stack>
+            <Tooltip title={event.location}>
+              <Stack
+                direction="row"
+                gap={1}
+                alignItems="center"
+              >
+                <LocationOnIcon fontSize="small" />
+                <Typography
+                  variant="body2"
+                  component="span"
+                  sx={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {event.location}
+                </Typography>
+              </Stack>
+            </Tooltip>
             <Stack
               direction="row"
               gap={1}
@@ -72,7 +115,8 @@ export default function Event(props: EventProps) {
         <CardActions>
           <Button
             fullWidth
-            size="small"
+            size="medium"
+            variant="outlined"
             onClick={handleClick}
           >
             Get Ticket

apps/haus/src/components/hero/index.tsx

@@ -24,7 +24,7 @@ export default function Hero() {
         textAlign="center"
         pt={15}
       >
-        Exclusive events, priceless moments
+        Crypto & Blockchain Events
       </Typography>
     </Paper>
   )

apps/haus/src/components/provider/wagmi.ts

@@ -2,16 +2,16 @@ import { http, createConfig } from 'wagmi'
 import { optimismSepolia } from 'wagmi/chains'
 import { coinbaseWallet } from 'wagmi/connectors'
 
+export const connectorCoinBaseWallet = coinbaseWallet({
+  appName: 'Haus',
+  preference: 'smartWalletOnly', // set this to `all` to use EOAs as well
+  version: '4',
+})
+
 export const wagmiConfig = createConfig({
   chains: [optimismSepolia],
   multiInjectedProviderDiscovery: false,
-  connectors: [
-    coinbaseWallet({
-      appName: 'Haus',
-      preference: 'smartWalletOnly', // set this to `all` to use EOAs as well
-      version: '4',
-    }),
-  ],
+  connectors: [connectorCoinBaseWallet],
   ssr: true,
   transports: {
     [optimismSepolia.id]: http(),

apps/haus/src/components/ticket-options/index.tsx

@@ -22,6 +22,7 @@ import {
 import { useParams, useRouter } from 'next/navigation'
 import { getEventById, IEvent, Ticket } from '@/utils/helper'
 import { TicketContext } from '@/store/ticket'
+import Image from 'next/image'
 
 const EventDetails = ({ event }: { event: IEvent | undefined }) => {
   const router = useRouter()
@@ -39,7 +40,17 @@ const EventDetails = ({ event }: { event: IEvent | undefined }) => {
         </IconButton>
         <Typography variant="h5">Ticket Options</Typography>
       </Stack>
-      <Stack spacing={1}>
+      <Stack
+        gap={4}
+        direction="row"
+        alignItems="start"
+      >
+        <Image
+          src={event?.image || ''}
+          alt={event?.name || ''}
+          width={400}
+          height={200}
+        />
         <Stack spacing={1}>
           <Typography variant="h6">{event?.name}</Typography>
           <Stack
@@ -135,8 +146,9 @@ const Footer = ({
   return (
     <Box
       component="footer"
-      sx={{ backgroundColor: '#7F7DF3', p: '10px', mt: 'auto' }}
+      sx={{ p: '10px', mt: 'auto' }}
     >
+      <Divider sx={{ mb: '1rem' }} />
       <Container maxWidth="lg">
         <Stack
           direction="row"
@@ -146,17 +158,13 @@ const Footer = ({
           <Stack
             direction="row"
             alignItems="center"
-            gap={6}
+            gap={4}
           >
-            <Typography
-              variant="subtitle1"
-              color="white"
-            >
-              Total Price :
-            </Typography>
+            <Typography variant="subtitle1">Total Price :</Typography>
             <Typography
               variant="h6"
-              color="white"
+              color="primary"
+              fontWeight="bold"
             >
               {totalPrice} ETH
             </Typography>

apps/haus/src/components/wallet/index.tsx

@@ -16,7 +16,7 @@ const WalletComponents = () => {
   return (
     <Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
       <Wallet>
-        <ConnectWallet>
+        <ConnectWallet className="rounded">
           <Avatar />
           <Name />
         </ConnectWallet>