diff --git a/src/app/providers/hooks/useFetchNftInfo.ts b/src/app/providers/hooks/useFetchNftInfo.ts
new file mode 100644
index 00000000..9b0b6a4c
--- /dev/null
+++ b/src/app/providers/hooks/useFetchNftInfo.ts
@@ -0,0 +1,9 @@
+import { fetchNftInfo } from '@/app/user/Balances/actions'
+import { useQuery } from '@tanstack/react-query'
+
+export const useFetchNftInfo = (nftAddress: string) => {
+ return useQuery({
+ queryFn: () => fetchNftInfo(nftAddress),
+ queryKey: ['nftInfo'],
+ })
+}
diff --git a/src/app/user/Balances/actions.ts b/src/app/user/Balances/actions.ts
index fb359824..bb5da677 100644
--- a/src/app/user/Balances/actions.ts
+++ b/src/app/user/Balances/actions.ts
@@ -5,6 +5,7 @@ import {
fetchNFTsOwnedByAddressAndNftAddress,
fetchPricesEndpoint,
fetchProposalsCreatedByGovernorAddress,
+ getNftInfo,
} from '@/lib/endpoints'
import { tokenContracts, GovernorAddress } from '@/lib/contracts'
import { NftMeta } from '@/shared/types'
@@ -97,3 +98,6 @@ export async function fetchIpfsUri(
const { data } = await axiosInstance.get(uri, { responseType })
return data
}
+
+export const fetchNftInfo = (address: string) =>
+ axiosInstance.get(getNftInfo.replace('{{nftAddress}}', address))
diff --git a/src/lib/endpoints.ts b/src/lib/endpoints.ts
index 740a8311..9ee57689 100644
--- a/src/lib/endpoints.ts
+++ b/src/lib/endpoints.ts
@@ -6,3 +6,5 @@ export const fetchNFTsOwnedByAddressAndNftAddress = '/address/{{address}}/nfts/{
export const fetchProposalsCreatedByGovernorAddress =
'/address/{{address}}/eventsByTopic0?topic0=0x7d84a6263ae0d98d3329bd7b46bb4e8d6f98cd35a7adb45c274c8b7fd5ebd5e0'
+
+export const getNftInfo = '/nfts/{{nftAddress}}'
diff --git a/src/pages/communities/nft/[address].tsx b/src/pages/communities/nft/[address].tsx
index 6ed0cc12..cf3597e2 100644
--- a/src/pages/communities/nft/[address].tsx
+++ b/src/pages/communities/nft/[address].tsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/Button'
import { Chip } from '@/components/Chip/Chip'
import { MainContainer } from '@/components/MainContainer/MainContainer'
import { Paragraph, Span } from '@/components/Typography'
-import { cn } from '@/lib/utils'
+import { cn, truncateMiddle } from '@/lib/utils'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { ReactNode, useState } from 'react'
@@ -15,6 +15,8 @@ import { useCommunity } from '@/shared/hooks/useCommunity'
import { useMintNFT } from '@/shared/hooks/useMintNFT'
import { useNftMeta } from '@/shared/hooks/useNFTMeta'
import { DEFAULT_NFT_BASE64 } from '@/shared/defaultNFT'
+import { useFetchNftInfo } from '@/app/providers/hooks/useFetchNftInfo'
+import { CopyButton } from '@/components/CopyButton'
export default function Page() {
const router = useRouter()
@@ -24,6 +26,11 @@ export default function Page() {
const { onMintNFT, isPending: isClaiming } = useMintNFT(nftAddress)
const [message, setMessage] = useState('')
+ const { data: nftInfo } = useFetchNftInfo(nftAddress || '')
+
+ const nftHolders = nftInfo?.data.holders || '-'
+ const nftName = nftInfo?.data.name || '-'
+
const { isLoadingNftImage, meta } = useNftMeta(nftAddress)
const handleMinting = () => {
@@ -65,11 +72,11 @@ export default function Page() {