fix: broken links

src/components/avatar-card.tsx

@@ -9,9 +9,12 @@ const AvatarCard = ({
 	phygitalId: string
 	url: string
 }) => {
+
+	const name = phygitalId.toLowerCase().replace(/\s+/g, '-')
+
 	return (
 		<div className='relative inline-block'>
-			<Link href={`https://webxr.myriadflow.com/${phygitalId}`} target='_blank'>
+			<Link href={`https://webxr.myriadflow.com/${name}`} target='_blank'>
 				<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'>

src/components/avatar-leaderboard.tsx

@@ -7,10 +7,9 @@ import Image from 'next/image'
 import { getFanMainTokens } from '../utils/queries'
 import { useState } from 'react'
 
-
 const AvatarLeaderboard = () => {
 	const [count, setCount] = useState<number[]>([])
-
+	
 	const results = useQuery({		
 				queryKey: ['mainFanTokens'],
 				queryFn: async () => {
@@ -31,48 +30,31 @@ const AvatarLeaderboard = () => {
 				 const topThreeAddresses = topThree.map((item: any) => item.address);
 				 const counts = topThree.map((item: any) => item.count);
 				 setCount(counts as number[]);
-
+			
 				 const allPhygitals = await getPhygitals();
 
-				// // Filter phygitals by top 3 addresses and extract the ids
-				// const filteredPhygitalIds = allPhygitals
-				// .filter((phygital: any) => {
-				// 	const match = topThreeAddresses.includes(phygital.contract_address);
-				// 	return match;
-				// })
-				// .map((phygital: any) => phygital.id);
-
-				// console.log(filteredPhygitalIds, 'phygital ids')
-
 				// Get the ids for each address in the order of topThreeAddresses
 				const orderedPhygitalIds = topThreeAddresses.map((address: string) => {
 					// Find phygitals that match the current address
 					const matchedPhygital = allPhygitals.find((phygital: any) => phygital.contract_address === address);
 					// Return the id if a match is found, otherwise return null
-					return matchedPhygital ? matchedPhygital.id : null;
+					return matchedPhygital ? {
+						id: matchedPhygital.id,
+						name: matchedPhygital.name
+					} : null;
 				});
 
-				// console.log(orderedPhygitalIds, 'ordered phygital ids');
-
-				// const allAvatars = await getAvatars();
-				// const matchedAvatars = allAvatars
-				// 		.filter((avatar: any) => {
-				// 				const match = filteredPhygitalIds.includes(avatar.phygital_id);
-				// 				return match;
-				// 		})
-				// 		.map((avatar: any) => avatar);
-
-				// 		console.log(matchedAvatars,'matched avatars')
-				// return matchedAvatars;
-
 				const allAvatars = await getAvatars();
 
 					// Get avatars in the order of filteredPhygitalIds
-					const orderedAvatars = orderedPhygitalIds.map((phygitalId: string) => {
+					const orderedAvatars = orderedPhygitalIds.map((phygital: any) => {
 							// Find the avatar that matches the current phygital_id
-							const matchedAvatar = allAvatars.find((avatar: any) => avatar.phygital_id === phygitalId);
+							const matchedAvatar = allAvatars.find((avatar: any) => avatar.phygital_id === phygital?.id);
 							// Return the avatar if a match is found, otherwise return null
-							return matchedAvatar || null;
+							return matchedAvatar ? {
+								...matchedAvatar,
+								phygitalName: phygital.name
+							} : null;
 					});
 
 					// console.log(orderedAvatars, 'ordered avatars');
@@ -133,7 +115,7 @@ const AvatarLeaderboard = () => {
 								</div>
 
 								<Link
-									href={`https://webxr.myriadflow.com/${topAvatars?.[1].phygital_id}`}
+									href={`https://webxr.myriadflow.com/${topAvatars?.[1].phygitalName.toLowerCase().replace(/\s+/g, '-')}`}
 									rel='noopener noreferrer'
 									target='_blank'
 								>
@@ -174,7 +156,7 @@ const AvatarLeaderboard = () => {
 									</p>
 								</div>
 								<Link
-									href={`https://webxr.myriadflow.com/${topAvatars?.[0].phygital_id}`}
+									href={`https://webxr.myriadflow.com/${topAvatars?.[0].phygitalName.toLowerCase().replace(/\s+/g, '-')}`}
 									rel='noopener noreferrer'
 									target='_blank'
 								>
@@ -214,7 +196,7 @@ const AvatarLeaderboard = () => {
 								</div>
 
 								<Link
-									href={`https://webxr.myriadflow.com/${topAvatars?.[2].phygital_id}`}
+									href={`https://webxr.myriadflow.com/${topAvatars?.[2].phygitalName.toLowerCase().replace(/\s+/g, '-')}`}
 									rel='noopener noreferrer'
 									target='_blank'
 								>

src/components/leaderboard.tsx

@@ -1,45 +1,26 @@
 'use client'
-import { useEffect, useState } from 'react'
+
 import { useQuery } from '@tanstack/react-query'
 import AvatarCard from './avatar-card'
-import { getAvatars } from '@/utils/queries'
+import { getAvatars, getPhygitals } from '@/utils/queries'
 import { AvatarType } from '@/types/types'
 
 const Leaderboard = () => {
-	const [avatar, setAvatar] = useState<AvatarType[]>([])
-
-	const getBrands = async () => {
-		const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'
-
-		const avatar = await fetch(`${baseUri}/avatars/all`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		})
-
-		const avatardata: AvatarType[] = await avatar.json()
-
-		setAvatar([...avatardata].reverse())
-	}
-
-	useEffect(() => {
-		getBrands()
-	}, [])
-
-	// const chaintype = process.env.NEXT_PUBLIC_BASECHAINTYPE
-
-	// const result = useQuery({
-	// 	queryKey: ['avatarsList'],
-	// 	queryFn: async () => {
-	// 		const avatars = await getAvatars()
-	// 		return avatars
-	// 			.find((avatar: AvatarType) => avatar.chaintype_id === chaintype)
-	// 			.reverse()
-	// 	},
-	// })
-
-	// const avatars = result.data
+	const result = useQuery({
+		queryKey: ['avatarsList'],
+		queryFn: async () => {
+			const avatars = await getAvatars()
+			const phygitals = await getPhygitals()
+
+			const avatarsWithNames = avatars.map((avatar: AvatarType) => ({
+				...avatar,
+				phygitalName: phygitals.find((p: { id: string; name: string }) => p.id === avatar.phygital_id)?.name || ''
+			}))
+
+			return avatarsWithNames.reverse()
+		},
+	})
+	const avatars = result.data
 
 	return (
 		<>
@@ -66,13 +47,13 @@ const Leaderboard = () => {
 			</div>
 
 			<div className='pt-20 flex gap-9 flex-wrap justify-center'>
-				{avatar
+				{avatars
 					?.slice(0, 12)
 					.reverse()
-					.map((avatar: AvatarType, index: number) => (
+					.map((avatar: AvatarType & { phygitalName: string }, index: number) => (
 						<AvatarCard
 							key={index}
-							phygitalId={avatar.phygital_id}
+							phygitalId={avatar.phygitalName}
 							url={avatar.url}
 						/>
 					))}