Skip to content

Commit

Permalink
Merge pull request #12 from MyriadFlow/main
Browse files Browse the repository at this point in the history
fix: broken links
  • Loading branch information
adetyaz authored Nov 8, 2024
2 parents 4983b91 + 004a5e6 commit 39d0db3
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 73 deletions.
5 changes: 4 additions & 1 deletion src/components/avatar-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down
48 changes: 15 additions & 33 deletions src/components/avatar-leaderboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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');
Expand Down Expand Up @@ -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'
>
Expand Down Expand Up @@ -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'
>
Expand Down Expand Up @@ -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'
>
Expand Down
59 changes: 20 additions & 39 deletions src/components/leaderboard.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<>
Expand All @@ -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}
/>
))}
Expand Down

0 comments on commit 39d0db3

Please sign in to comment.