diff --git a/src/components/avatar-card.tsx b/src/components/avatar-card.tsx index 947e844..b8a42b3 100644 --- a/src/components/avatar-card.tsx +++ b/src/components/avatar-card.tsx @@ -9,9 +9,12 @@ const AvatarCard = ({ phygitalId: string url: string }) => { + + const name = phygitalId.toLowerCase().replace(/\s+/g, '-') + return (
- +
diff --git a/src/components/avatar-leaderboard.tsx b/src/components/avatar-leaderboard.tsx index 503349d..95b368c 100644 --- a/src/components/avatar-leaderboard.tsx +++ b/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([]) - + 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 = () => {
@@ -174,7 +156,7 @@ const AvatarLeaderboard = () => {

@@ -214,7 +196,7 @@ const AvatarLeaderboard = () => {
diff --git a/src/components/leaderboard.tsx b/src/components/leaderboard.tsx index db4cda4..04b6809 100644 --- a/src/components/leaderboard.tsx +++ b/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([]) - - 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 = () => {
- {avatar + {avatars ?.slice(0, 12) .reverse() - .map((avatar: AvatarType, index: number) => ( + .map((avatar: AvatarType & { phygitalName: string }, index: number) => ( ))}