fix: data flow and architecture

package.json

@@ -15,8 +15,10 @@
 		"@react-three/postprocessing": "^2.16.2",
 		"@readyplayerme/visage": "^5.2.1",
 		"@tanstack/react-query": "^5.51.23",
+		"@tanstack/react-query-devtools": "^5.51.23",
 		"@wagmi/core": "^2.11.5",
 		"@web3modal/wagmi": "^5.0.11",
+		"axios": "^1.7.4",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"ethers": "^6.13.1",

src/app/[id]/page.tsx

@@ -6,91 +6,78 @@ import { useAccount } from 'wagmi'
 import { ConnectWallet } from '@/components/connect-wallet'
 import { useEffect, useState } from 'react'
 import { ConnectWalletModal } from '@/components/connect-wallet-modal'
-import { NfcMintPopUp } from '@/components/nfc-mint-popup'
+import { MintedModal } from '@/components/minted-modal'
 import { ClaimNft } from '@/components/claim-nft'
+import { toast } from 'react-toastify'
 
-import { CreateWallet } from '@/components/create-wallet'
 import { VoiceAssistant } from '@/components/voice-assistant'
+import { useQueries, useQuery } from '@tanstack/react-query'
+import { getAvatars, getPhygital, getWebXR } from '@/utils/queries'
+import { AvatarType } from '@/types/types'
 
 export default function Home({ params }: { params: { id: string } }) {
 	const { id } = params
-
 	const [unlockModal, setUnlockModal] = useState(false)
-	const [unlocked, setUnlocked] = useState(true)
 	const [unlockClaimed, setUnlockClaimed] = useState(false)
-	const [loading, setLoading] = useState(false)
-	const [phygitalData, setPhygitalData] = useState<any>([])
-	const [webXrData, setWebXrData] = useState<any>([])
-	const [avatar, setAvatar] = useState<any>([])
-	const [productInfo, setProductInfo] = useState<any>('')
 
 	const account = useAccount()
 
-	const closeCongratulations = () => {
-		setUnlockModal(false)
-	}
-
-	const closeClaimed = () => {
-		setUnlockClaimed(false)
-	}
-
-	const fetchPhygitalData = async () => {
-		setLoading(true)
-		try {
-			const res = await fetch(`${process.env.NEXT_PUBLIC_URI}/phygitals/${id}`)
-
-			const webxr = await fetch(
-				`${process.env.NEXT_PUBLIC_URI}/webxr/phygital/${id}`
-			)
-
-			const avatarRes = await fetch(
-				`${process.env.NEXT_PUBLIC_URI}/avatars/phygital/${id}`
-			)
-
-			const data = await res.json()
-			const webdata = await webxr.json()
-			const avatardata = await avatarRes.json()
-
-			// console.log(data)
-			// console.log(avatardata)
-
-			setProductInfo(data.product_info)
-			setPhygitalData(data)
-			setWebXrData(webdata)
-			setAvatar(avatardata)
-			setLoading(false)
-		} catch (error) {
-			console.log(error)
-		}
-	}
+	const results = useQueries({
+		queries: [
+			{
+				queryKey: ['phygital'],
+				queryFn: () => getPhygital(id),
+			},
+			{
+				queryKey: ['webxr'],
+				queryFn: () => getWebXR(id),
+			},
+			{
+				queryKey: ['avatar'],
+				queryFn: async () => {
+					const avatars = await getAvatars()
+					return avatars.filter(
+						(avatar: AvatarType) => avatar.phygital_id === id
+					)
+				},
+			},
+		],
+	})
+
+	const [phygitalResult, webxrResult, avatarResult] = results
 
 	useEffect(() => {
-		fetchPhygitalData()
-
 		setTimeout(() => {
-			setUnlockModal(true)
-		}, 3000)
+			setUnlockClaimed(true)
+		}, 60000)
 	}, [])
 
-	// useEffect(() => {
-	// 	if (account.address) {
-	// 		setTimeout(() => {
-	// 			setUnlockClaimed(true)
-	// 		}, 3000)
-	// 	}
-	// }, [])
+	const closeClaimed = () => {
+		setUnlockClaimed(false)
+	}
 
 	const removePrefix = (uri: any) => {
 		return uri?.substring(7, uri.length)
 	}
 
-	if (loading)
+	if (
+		phygitalResult.isLoading ||
+		webxrResult.isLoading ||
+		avatarResult.isLoading
+	)
 		return (
 			<div className='h-screen flex flex-col justify-center items-center'>
-				<Image src={'/spinner.svg'} alt='loading' height={300} width={300} />
+				<Image src={'/spinner.svg'} alt='loading' height={120} width={120} />
 			</div>
 		)
 
+	if (phygitalResult.isError || webxrResult.isError || avatarResult.isError)
+		return toast.error('Error fetching data')
+
+	const phygital = phygitalResult.data
+	const webxr = webxrResult.data
+	const avatar = avatarResult.data
+
 	return (
 		<main className='flex h-screen flex-col items-center justify-between p-24 relative'>
 			<header className='absolute top-0 p-4 w-full flex justify-between z-10'>
@@ -101,58 +88,58 @@ export default function Home({ params }: { params: { id: string } }) {
 			<a-scene className='h-48'>
 				<a-sky
 					src={
-						webXrData.image360 !== 'undefined' &&
-						`${'https://nftstorage.link/ipfs'}/${removePrefix(
-							webXrData.image360
-						)}`
+						webxr.image360 !== 'undefined' &&
+						`${'https://nftstorage.link/ipfs'}/${removePrefix(webxr.image360)}`
 					}
 					rotation='0 -130 0'
 				></a-sky>
 			</a-scene>
 			<section>
 				<div className='absolute right-2 bottom-2'>
-					<InfoCard phygital={phygitalData} />
+					<InfoCard phygital={phygital} />
 				</div>
 
 				<div className='absolute transform -translate-x-1/2 text-white bottom-2'>
 					<VoiceAssistant
-						productInfo={productInfo}
-						brandName={phygitalData.brand_name}
-						voice={avatar.avatar_voice}
+						productInfo={phygital}
+						brandName={phygital.brand_name}
+						voice={avatar[0].avatar_voice}
 					/>
 				</div>
 				<div className='absolute h-3/4 left-4 bottom-16'>
-					<Avatar modelSrc={avatar && avatar.url} cameraInitialDistance={3.5} />
+					<Avatar
+						modelSrc={avatar && avatar[0].url}
+						cameraInitialDistance={3.5}
+					/>
 					<button className='border-2 border-white text-white bg-black mx-auto flex item-center gap-4 justify-center bg-opacity-40 backdrop-filter backdrop-blur-sm rounded-full px-8 py-2'>
 						{account.address ? 'Customize' : 'Unlock'}
 					</button>
 				</div>
-				{!account.address && (
-					<div className='absolute inset-0'>
+				{/* {!account.address && (
+					<div className='modal w-2/6'>
 						<ConnectWalletModal />
 					</div>
 				)}
-				{account.address && unlockModal && (
-					<div className='absolute inset-0'>
-						<NfcMintPopUp
-							onClose={closeCongratulations}
-							phygitalName={phygitalData.name}
-						/>
-					</div>
-				)}
+			 */}
+				{/* <div className='modal'>
+					<MintedModal
+						onClose={closeCongratulations}
+						phygitalName={phygital.name}
+					/>
+				</div> */}
+
 				{unlockClaimed && (
-					<div className='absolute inset-0'>
+					<div className='modal w-3/6'>
 						<ClaimNft
 							onClose={closeClaimed}
-							freeNft={webXrData.free_nft_image}
-							brandName={phygitalData.brand_name}
-							phygitalName={phygitalData.name}
-							contractAddress={phygitalData.contract_address}
-							chainTypeId={phygitalData.chaintype_id}
-							collectionId={phygitalData.collection_id}
-							phygitalId={phygitalData.id}
+							freeNft={webxr.free_nft_image}
+							brandName={phygital.brand_name}
+							phygitalName={phygital.name}
+							contractAddress={phygital.contract_address}
+							chainTypeId={phygital.chaintype_id}
+							collectionId={phygital.collection_id}
+							phygitalId={phygital.id}
 						/>
-						-
 					</div>
 				)}
 			</section>

src/app/globals.css

@@ -75,6 +75,12 @@
 	}
 }
 
+@layer components {
+	.modal {
+		@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+	}
+}
+
 .a-enter-vr-button {
 	display: none;
 }

src/app/layout.tsx

@@ -4,10 +4,11 @@ import './globals.css'
 import 'react-toastify/dist/ReactToastify.css'
 import { cn } from '@/lib/utils'
 import Providers from '@/lib/providers'
-import { config } from '@/lib/wagmi'
-import Web3ModalProvider from '@/lib/providers'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
 import Script from 'next/script'
 import AppKitProvider from '@/lib/providers'
+import { ToastContainer } from 'react-toastify'
 
 const fontSans = FontSans({
 	subsets: ['latin'],
@@ -72,7 +73,9 @@ export default function RootLayout({
 						fontSans.variable
 					)}
 				>
+					<ToastContainer />
 					<AppKitProvider>{children}</AppKitProvider>
+					<ReactQueryDevtools />
 				</body>
 			</Providers>
 		</html>

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client'
 import Link from 'next/link'
 import LeaderBoard from '@/components/leaderboard'
 import AvatarLeaderboard from '@/components/avatar-leaderboard'
@@ -9,16 +9,7 @@ import { ConnectWallet } from '@/components/connect-wallet'
 export default function Home() {
 	return (
 		<div className='bg-black'>
-			<div
-				className='px-10'
-				style={{
-					display: 'flex',
-					justifyContent: 'space-between',
-					background:
-						'linear-gradient(90deg, #FDF4F5, #00A9FF, #604CC3, #FF55BB)',
-					paddingBottom: '10px',
-				}}
-			>
+			<div className='px-10 flex justify-between pb-[10px] bg-gradient-to-r from-pink-100 via-blue-500 to-purple-500'>
 				<div className='mt-4'>
 					<Link href='/'>
 						<img src='/logo.png' style={{ width: '200px' }} alt='Logo' />
@@ -50,25 +41,31 @@ export default function Home() {
 					<ConnectWallet />
 				</div>
 			</div>
-			<div className="flex h-screen bg-[#121212] text-white relative">
-
-			<div className='absolute right-0 bottom-[0px] md:right-[35%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-20' />
-			<div className='absolute right-0 top-0 md:right-[10%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#DF1FDD] rounded-full blur-3xl opacity-20' />
-
-				<div className="w-1/2 h-full px-16 flex flex-col justify-center">
-					<div className="text-7xl font-bold text-[#DF1FDD]">WebXR</div>
-					<div className="text-6xl font-semibold mt-6 text-[#DF1FDD]">Experience & Interact</div>
-					<div className="text-2xl mt-10">
-						Interact with unique AI-powered avatars and brand ambassadors. Buy a phygital and own the avatar. Customize and rise to the Leaderboard.
+			<div className='flex h-screen bg-[#121212] text-white relative'>
+				<div className='absolute right-0 bottom-[0px] md:left-[25%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#11D9C5] rounded-full blur-3xl opacity-20' />
+				<div className='absolute right-0 top-0 md:right-[10%] w-[140px] lg:w-[337px] h-[125px] lg:h-[316px] bg-[#DF1FDD] rounded-full blur-3xl opacity-20' />
+
+				<div className='w-1/2 h-full px-16 flex flex-col justify-center'>
+					<div className='text-7xl font-bold text-[#DF1FDD]'>WebXR</div>
+					<div className='text-6xl font-semibold mt-6 text-[#DF1FDD]'>
+						Experience & Interact
+					</div>
+					<div className='text-2xl mt-10'>
+						Interact with unique AI-powered avatars and brand ambassadors. Buy a
+						phygital and own the avatar. Customize and rise to the Leaderboard.
 					</div>
-					<div className="mt-10">
+					<div className='mt-10'>
 						<ConnectWallet />
 					</div>
 				</div>
-				<div className="w-1/2 h-full flex items-center justify-center">
-					<div className="relative w-80 h-80 rounded-full overflow-hidden">
+				<div className='w-1/2 h-full flex items-center justify-center'>
+					<div className='relative w-80 h-80 rounded-full overflow-hidden'>
 						{/* <img src="MFsquarebackgroun1.png" alt="Background" className="absolute inset-0 w-full h-full object-cover opacity-50" /> */}
-						<img src="heroframe.png" alt="AI Avatar" className="absolute inset-0" />
+						<img
+							src='heroframe.png'
+							alt='AI Avatar'
+							className='absolute inset-0'
+						/>
 					</div>
 				</div>
 			</div>
@@ -78,7 +75,7 @@ export default function Home() {
 			</div>
 
 			<div className='bg-gradient-to-r from-black via-gray-900 to-purple-900 pt-20'>
-				<AvatarLeaderboard/>
+				<AvatarLeaderboard />
 			</div>
 
 			<div className='bg-gradient-to-r from-black via-gray-900 to-purple-900 pt-20'>

src/components/avatar-card.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { Avatar } from '@readyplayerme/visage'
+import { AvatarType } from '@/types/types'
+
+const AvatarCard = ({
+	phygitalId,
+	url,
+}: {
+	phygitalId: string
+	url: string
+}) => {
+	return (
+		<div className='relative inline-block'>
+			<Link href={`https://webxr.myriadflow.com/${phygitalId}`}>
+				<div className='w-330 rounded-full shadow-md overflow-hidden cursor-pointer relative'>
+					<div className='absolute top-0 left-0 right-0 bottom-0 rounded-full bg-white opacity-30 pointer-events-none z-1' />
+					<div className='relative z-2'>
+						<Avatar modelSrc={url} cameraInitialDistance={0.5} />
+					</div>
+				</div>
+			</Link>
+		</div>
+	)
+}
+
+export default AvatarCard