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() { Early
Early Adopters
-
+
Crypto ipsum bitcoin ethereum dogecoin litecoin. Hedera USD kadena chainlink arweave hive binance. Shiba-inu terra ICON IOTA ICON livepeer velas uniswap. Kadena kusama IOTA horizen.
-
+
{/* Chips with community links */} @@ -87,17 +94,12 @@ export default function Page() { {/* pioneer, holders, followers */}
- //
- // Address here - // - //
+ {truncateMiddle(nftAddress as string)} } /> - - +
{/* 50%: NFT Image and Membership*/} @@ -114,7 +116,7 @@ export default function Page() {
Membership NFT -
+
{!isLoadingNftImage && ( {meta?.name )} - - {isMember ? ( -
- Early Adopter #{tokenId} - Owned - {meta?.description} -
- ) : ( -
- Early Adopter - - - Crypto ipsum bitcoin ethereum dogecoin litecoin. Hedera USD kadena chainlink arweave hive - binance. Shiba-inu terra ICON IOTA ICON livepeer velas uniswap. Kadena kusama IOTA - horizen. - -
- )} +
+ {isMember ? ( +
+ Early Adopter #{tokenId} + Owned + {meta?.description} +
+ ) : ( +
+ Early Adopter + + + Crypto ipsum bitcoin ethereum dogecoin litecoin. Hedera USD kadena chainlink weave hive + binance. Shiba-inu terra ICON IOTA ICON livepeer velas uniswap. Kadena kusama IOTA + horizen. + +
+ )} +