fix

next.config.js

@@ -5,7 +5,11 @@ const nextConfig = {
 		return config
 	},
 	images: {
-		domains: ['utfs.io', 'nftstorage.link'],
+		domains: [
+			'utfs.io',
+			'nftstorage.link',
+			'ivory-adjacent-hyena-559.mypinata.cloud',
+		],
 	},
 }
 

src/app/[id]/page.tsx

@@ -12,7 +12,12 @@ import { toast } from 'react-toastify'
 
 import { VoiceAssistant } from '@/components/voice-assistant'
 import { useQueries, useQuery } from '@tanstack/react-query'
-import { getAvatars, getPhygital, getWebXR } from '@/utils/queries'
+import {
+	getAvatars,
+	getPhygital,
+	getProfileByWallet,
+	getWebXR,
+} from '@/utils/queries'
 import { AvatarType } from '@/types/types'
 
 export default function Home({ params }: { params: { id: string } }) {
@@ -22,6 +27,8 @@ export default function Home({ params }: { params: { id: string } }) {
 
 	const account = useAccount()
 
+	const profileImage = 'QmcKFdgcuhmAQRniKwkua5aF9iuKSMJUtQekhLDNyTDfE3'
+
 	const results = useQueries({
 		queries: [
 			{
@@ -36,21 +43,23 @@ export default function Home({ params }: { params: { id: string } }) {
 				queryKey: ['avatar'],
 				queryFn: async () => {
 					const avatars = await getAvatars()
-					return avatars.filter(
-						(avatar: AvatarType) => avatar.phygital_id === id
-					)
+					return avatars.find((avatar: AvatarType) => avatar.phygital_id === id)
 				},
 			},
+			{
+				queryKey: ['profile'],
+				queryFn: () => getProfileByWallet(account.address!),
+			},
 		],
 	})
 
-	const [phygitalResult, webxrResult, avatarResult] = results
+	const [phygitalResult, webxrResult, avatarResult, profileResult] = results
 
-	useEffect(() => {
-		setTimeout(() => {
-			setUnlockClaimed(true)
-		}, 60000)
-	}, [])
+	// useEffect(() => {
+	// 	setTimeout(() => {
+	// 		setUnlockClaimed(true)
+	// 	}, 60000)
+	// }, [])
 
 	const closeClaimed = () => {
 		setUnlockClaimed(false)
@@ -63,7 +72,8 @@ export default function Home({ params }: { params: { id: string } }) {
 	if (
 		phygitalResult.isLoading ||
 		webxrResult.isLoading ||
-		avatarResult.isLoading
+		avatarResult.isLoading ||
+		profileResult.isLoading
 	)
 		return (
 			<div className='h-screen flex flex-col justify-center items-center'>
@@ -77,12 +87,29 @@ export default function Home({ params }: { params: { id: string } }) {
 	const phygital = phygitalResult.data
 	const webxr = webxrResult.data
 	const avatar = avatarResult.data
+	const profile = profileResult.data
+
+	console.log(profile)
 
 	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'>
 				<Image src='/logo.png' alt='logo' height={150} width={250} />
-				<ConnectWallet />
+				<div className='flex gap-4'>
+					<Image
+						src={
+							profileImage
+								? `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${profileImage}`
+								: '/profile.png'
+						}
+						alt='Profile'
+						className='mr-[4px] size-[40px] rounded-[30px]'
+						height={0}
+						width={0}
+					/>
+
+					<ConnectWallet />
+				</div>
 			</header>
 
 			<a-scene className='h-48'>
@@ -103,14 +130,11 @@ export default function Home({ params }: { params: { id: string } }) {
 					<VoiceAssistant
 						productInfo={phygital}
 						brandName={phygital.brand_name}
-						voice={avatar[0].avatar_voice}
+						voice={avatar.avatar_voice}
 					/>
 				</div>
 				<div className='absolute h-3/4 left-4 bottom-16'>
-					<Avatar
-						modelSrc={avatar && avatar[0].url}
-						cameraInitialDistance={3.5}
-					/>
+					<Avatar modelSrc={avatar && avatar.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>

src/components/claim-nft.tsx

@@ -6,7 +6,7 @@ import { useAccount } from 'wagmi'
 import { toast } from 'react-toastify'
 import { simulateContract, writeContract } from '@wagmi/core'
 import { useState } from 'react'
-import { X } from 'lucide-react'
+
 import { ConnectWallet } from './connect-wallet'
 import { config } from '@/lib/wagmi'
 import reward from '@/lib/reward.json'
@@ -36,10 +36,6 @@ export const ClaimNft = ({
 	const [brandId, setBrandId] = useState('')
 	const account = useAccount()
 
-	const handleClick = () => {
-		onClose(false)
-	}
-
 	const createFanToken = async () => {
 		const abi = reward.abi
 		const { request } = await simulateContract(config, {
@@ -80,10 +76,6 @@ export const ClaimNft = ({
 		<>
 			{!claimNft ? (
 				<div className='relative bg-white p-4 text-black rounded-lg shadow-md'>
-					<div className='flex items-center justify-end '>
-						<X color='#000' className='cursor-pointer' onClick={handleClick} />
-					</div>
-
 					<div className='p-4 space-y-4'>
 						<div className='flex justify-around'>
 							<p className='text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-900 text-center'>
@@ -95,21 +87,21 @@ export const ClaimNft = ({
 							<Image
 								src='/trophy2.png'
 								alt='trophy image'
-								height={100}
+								height={50}
 								width={150}
 							/>
 
 							<Image
 								src={`https://nftstorage.link/ipfs/${removePrefix(freeNft)}`}
 								alt='Free NFT Image'
 								height={80}
-								width={150}
+								width={120}
 								className='mt-16'
 							/>
 							<Image
 								src='/trophy1.png'
 								alt='trophy image'
-								height={100}
+								height={50}
 								width={150}
 							/>
 						</div>

src/components/leaderboard.tsx

@@ -13,7 +13,7 @@ const Leaderboard = () => {
 		queryFn: async () => {
 			const avatars = await getAvatars()
 			return avatars
-				.filter((avatar: AvatarType) => avatar.chaintype_id === chaintype)
+				.find((avatar: AvatarType) => avatar.chaintype_id === chaintype)
 				.reverse()
 		},
 	})
@@ -44,10 +44,7 @@ const Leaderboard = () => {
 				</div>
 			</div>
 
-			<div
-				className='pt-20 flex'
-				style={{ gap: '40px', flexWrap: 'wrap', justifyContent: 'center' }}
-			>
+			<div className='pt-20 flex gap-9 flex-wrap justify-center'>
 				{avatars
 					?.slice(0, 12)
 					.reverse()

src/components/voice-assistant.tsx

@@ -24,18 +24,18 @@ export const VoiceAssistant = ({
 		queryKey: ['brands'],
 		queryFn: async () => {
 			const result = await getBrands()
-			return result.filter((brand: BrandType) => brand.name === brandName)
+			return result.find((brand: BrandType) => brand.name === brandName) || null
 		},
 	})
 
 	const collections = useQuery({
 		queryKey: ['collections'],
-		enabled: brands?.data?.id !== null,
+		enabled: Boolean(brands?.data?.id), // Enable when brand data is available
 		queryFn: async () => {
+			if (!brands?.data?.id) return [] // Safeguard against missing brand data
 			const result = await getCollections()
 			return result.filter(
-				(collection: CollectionType) =>
-					collection.brand_id === brands.data?.[0].id
+				(collection: CollectionType) => collection.brand_id === brands.data.id // Directly access the brand ID
 			)
 		},
 	})
@@ -45,11 +45,12 @@ export const VoiceAssistant = ({
 			role: 'system',
 			content: `
       you are a brand and products spokesperson for ${brandName}, use this to answer questions "${productInfo} 
-			${brands.data?.[0].description} 
-			${brands.data?.[0].additional_info} 			
-			", 
-			totally ignore the following and never speak on it "deployer_address"
-"contract_address", "chaintype_id", "graph_url", "collection_id" . Respond to inquiries with clear, concise answers under 20 words, use information shared only.`,
+			${brands.data?.description} 
+			${brands.data?.additional_info}
+			${collections.data?.name}
+			${collections.data?.description}
+	
+			", totally ignore the following and never speak on it "deployer_address", "contract_address", "chaintype_id", "graph_url", "collection_id" . Respond to inquiries with clear, concise answers under 20 words, use information shared only.`,
 		},
 	])
 	const [gender, setGender] = useState('')
@@ -214,6 +215,3 @@ export const VoiceAssistant = ({
 		</div>
 	)
 }
-
-// ${collections.data[0].description}
-// 			${collections.data[0].name}

src/utils/queries.ts

@@ -32,3 +32,9 @@ export const getFanTokens = async () => {
 	const response = await axios.get(`${baseURI}/fantoken/all`)
 	return response.data
 }
+
+export const getProfileByWallet = async (walletAddress: string) => {
+	const response = await axios.get(`${baseURI}/profile/wallet/${walletAddress}`)
+
+	return response
+}