From 850be628817c10c0bf8e04c6c203dea9e9ed2f7b Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 10:59:06 -0700 Subject: [PATCH 1/8] fix: remove avatar from header response --- src/components/cactiComponents/HeaderResponse.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/cactiComponents/HeaderResponse.tsx b/src/components/cactiComponents/HeaderResponse.tsx index 2d4bdf0d8..156d59af8 100644 --- a/src/components/cactiComponents/HeaderResponse.tsx +++ b/src/components/cactiComponents/HeaderResponse.tsx @@ -36,10 +36,8 @@ export const HeaderResponse = (props: any) => {
- {project?.logo || props.altImageUrl ? ( + {(project?.logo || props.altImageUrl) && ( projectLogo - ) : ( - )}
{props.text}
From b73e375116601578a59fd8a7ab6119ffaae0111f Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 11:00:17 -0700 Subject: [PATCH 2/8] chore: remove unused --- src/components/cactiComponents/HeaderResponse.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/cactiComponents/HeaderResponse.tsx b/src/components/cactiComponents/HeaderResponse.tsx index 156d59af8..2417e4c23 100644 --- a/src/components/cactiComponents/HeaderResponse.tsx +++ b/src/components/cactiComponents/HeaderResponse.tsx @@ -25,9 +25,6 @@ export const HeaderResponse = (props: any) => { const project = findProjectByName(props.projectName); setProject(project); } - // if (props.projectName==='user') { - // setProject({name: 'user', logo: '/images/user.png', url: 'https://app.cacti.finance/'}) - // } }, [props.projectName]); const url = project?.url || props.altUrl; From 5c8eac60aa479b90ab6005b28109bd745697a11e Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 11:00:29 -0700 Subject: [PATCH 3/8] chore: clean --- src/components/cactiComponents/HeaderResponse.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/cactiComponents/HeaderResponse.tsx b/src/components/cactiComponents/HeaderResponse.tsx index 2417e4c23..f7468c6be 100644 --- a/src/components/cactiComponents/HeaderResponse.tsx +++ b/src/components/cactiComponents/HeaderResponse.tsx @@ -1,12 +1,6 @@ import { useEffect, useState } from 'react'; -import { - ArrowTopRightOnSquareIcon, - ChevronDownIcon, - ChevronUpIcon, -} from '@heroicons/react/24/outline'; -import { findProjectByName, shortenAddress } from '@/utils'; -import projectList from '@/utils/ProjectList.json'; -import Avatar from '../Avatar'; +import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'; +import { findProjectByName } from '@/utils'; import { ResponseWrap } from './helpers/layout'; const navigateToExternalUrl = ({ url }: { url: string | URL }) => { From 2ec5685f867d70dda6638244f050850ee29fad2e Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 11:49:00 -0700 Subject: [PATCH 4/8] feat: useNft hook with onwer info --- .../experimental_/widgets/nft/BuyNft.tsx | 21 +++-- .../experimental_/widgets/nft/NftAsset.tsx | 58 +++---------- src/hooks/useNft.ts | 86 +++++++++++++++++++ 3 files changed, 110 insertions(+), 55 deletions(-) create mode 100644 src/hooks/useNft.ts diff --git a/src/components/experimental_/widgets/nft/BuyNft.tsx b/src/components/experimental_/widgets/nft/BuyNft.tsx index e87159685..5442f89e7 100644 --- a/src/components/experimental_/widgets/nft/BuyNft.tsx +++ b/src/components/experimental_/widgets/nft/BuyNft.tsx @@ -4,12 +4,12 @@ import axios from 'axios'; import { BigNumber, BigNumberish, ethers } from 'ethers'; // @ts-ignore TODO: fix this import * as JSONbigint from 'json-bigint'; -import { useAccount } from 'wagmi'; +import { Address, useAccount } from 'wagmi'; import SeaportAbi from '@/abi/SeaportAbi.json'; -import { NftOwner } from '@/components/CheckNftOwner'; import { ActionResponse, HeaderResponse } from '@/components/cactiComponents'; import { ImageVariant } from '@/components/cactiComponents/ImageResponse'; import { TxBasicParams } from '@/components/cactiComponents/hooks/useSubmitTx'; +import useNft from '@/hooks/useNft'; import { Order } from '@/types'; import { ConnectFirst } from '../helpers/ConnectFirst'; import { NftAsset } from './NftAsset'; @@ -62,8 +62,13 @@ const fetchFulfillParams = async ( export const BuyNft = ({ nftAddress, tokenId }: { nftAddress: string; tokenId: string }) => { // // The new owner will be the receiver const { address: account } = useAccount(); - //const addRecentTransaction = useAddRecentTransaction(); - // const { refetch: refetchBal } = useBalance(); + const { + data: { isOwner }, + } = useNft({ + address: nftAddress as Address, + tokenId: +tokenId, + network: 'ethereum-mainnet', + }); // fetchListing possible states: // If order array is empty, show the NFT is not currently for sale @@ -127,8 +132,8 @@ export const BuyNft = ({ nftAddress, tokenId }: { nftAddress: string; tokenId: s ); diff --git a/src/components/experimental_/widgets/nft/NftAsset.tsx b/src/components/experimental_/widgets/nft/NftAsset.tsx index 31585d782..6ab15ef49 100644 --- a/src/components/experimental_/widgets/nft/NftAsset.tsx +++ b/src/components/experimental_/widgets/nft/NftAsset.tsx @@ -1,46 +1,21 @@ -import { useQuery } from 'react-query'; -import { useAsset } from '@center-inc/react'; -import axios from 'axios'; +import { Network } from '@center-inc/react'; +import { Address } from 'wagmi'; import { ImageResponse } from '@/components/cactiComponents'; import { ImageVariant } from '@/components/cactiComponents/ImageResponse'; import { InlineChip } from '@/components/cactiComponents/InlineChip'; -import { ETHEREUM_NETWORK } from '@/utils/constants'; +import useNft from '@/hooks/useNft'; export interface NftAssetProps { - network: string; - address: string; - tokenId: string | number; + network: Network; + address: Address; + tokenId: number; collectionName?: string; name?: string; previewImageUrl?: string; - variant?: ImageVariant; // widget variant - price?: string; } -const fetchNftAsset = async ( - nftAddress: string, - tokenId: string, - network: string = ETHEREUM_NETWORK -) => { - return axios - .get(`https://api.center.dev/v1/${network}/${nftAddress}/${tokenId}`, { - // .get(`https://api.center.app/v2/${network}/${nftAddress}/nft/${tokenId}/metadata`,{ - headers: { - Accept: 'application/json', - 'X-API-Key': process.env.NEXT_PUBLIC_CENTER_APP_KEY || 'test', - }, - }) - .then((res) => { - console.log(res.data); - return res.data; - }) - .catch((err) => { - console.log(err); - }); -}; - export const NftAsset = ({ network, address, @@ -51,34 +26,23 @@ export const NftAsset = ({ variant, price, }: NftAssetProps) => { - const { - data: nftData, - error, - isLoading, - } = useQuery( - ['NftAsset', address, tokenId], - async () => fetchNftAsset(address, tokenId.toString(), network), - { - enabled: true, - } - ); + const { data: nftData } = useNft({ network, address, tokenId }); return ( {variant === ImageVariant.SHOWCASE && ( -
{nftData?.metadata?.description}
+
{nftData.metadata?.description}
)} {price && ( { + const { address: account } = useAccount(); + const fetchNft = async ( + nftAddress: string, + tokenId: number, + network: string = ETHEREUM_NETWORK + ) => { + const { data } = await axios.get( + `https://api.center.dev/v1/${network}/${nftAddress}/${tokenId}`, + { + headers: { + Accept: 'application/json', + 'X-API-Key': process.env.NEXT_PUBLIC_CENTER_APP_KEY || 'test', + }, + } + ); + return data; + }; + + const { data: centerData, ...rest } = useQuery({ + queryKey: ['nft', address, tokenId, network], + queryFn: async () => await fetchNft(address, tokenId, network), + }); + + const { data: owner } = useQuery({ + queryKey: ['nftOwner', address, tokenId, network], + queryFn: async () => + await readContract({ + address, + abi: erc721ABI, + functionName: 'ownerOf', + args: [BigNumber.from(tokenId)], + }), + refetchOnWindowFocus: false, + }); + + const data = { ...centerData, owner, isOwner: owner === account }; + + return { + data, + ...rest, + }; +}; + +export default useNft; From c11be91b8415ba7b050a7b726c676046f09bcb46 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 11:52:40 -0700 Subject: [PATCH 5/8] feat: refetchOwner on success --- src/components/experimental_/widgets/nft/BuyNft.tsx | 2 ++ src/hooks/useNft.ts | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/experimental_/widgets/nft/BuyNft.tsx b/src/components/experimental_/widgets/nft/BuyNft.tsx index 5442f89e7..e67cbe6af 100644 --- a/src/components/experimental_/widgets/nft/BuyNft.tsx +++ b/src/components/experimental_/widgets/nft/BuyNft.tsx @@ -64,6 +64,7 @@ export const BuyNft = ({ nftAddress, tokenId }: { nftAddress: string; tokenId: s const { address: account } = useAccount(); const { data: { isOwner }, + refetchOwner, } = useNft({ address: nftAddress as Address, tokenId: +tokenId, @@ -145,6 +146,7 @@ export const BuyNft = ({ nftAddress, tokenId }: { nftAddress: string; tokenId: s approvalParams={undefined} label={isOwner ? 'Already Owner' : notForSale ? 'Item not for sale' : 'Purchase NFT'} disabled={isExpired || notForSale || isOwner} + onSuccess={refetchOwner} /> ); diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts index 32541a9f4..71ff379fb 100644 --- a/src/hooks/useNft.ts +++ b/src/hooks/useNft.ts @@ -63,7 +63,7 @@ const useNft = ({ queryFn: async () => await fetchNft(address, tokenId, network), }); - const { data: owner } = useQuery({ + const { data: owner, refetch: refetchOwner } = useQuery({ queryKey: ['nftOwner', address, tokenId, network], queryFn: async () => await readContract({ @@ -80,6 +80,7 @@ const useNft = ({ return { data, ...rest, + refetchOwner, }; }; From f85aeb2aff691b6e27b8b360137bbca10bc69b0c Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 11:54:30 -0700 Subject: [PATCH 6/8] fix: type --- src/components/experimental_/widgets/nft/NftCollection.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/experimental_/widgets/nft/NftCollection.tsx b/src/components/experimental_/widgets/nft/NftCollection.tsx index 59a572783..6818c55b2 100644 --- a/src/components/experimental_/widgets/nft/NftCollection.tsx +++ b/src/components/experimental_/widgets/nft/NftCollection.tsx @@ -1,4 +1,5 @@ import { Network, useCollection } from '@center-inc/react'; +import { Address } from 'wagmi'; import { ImageResponse } from '@/components/cactiComponents'; import { ImageVariant } from '@/components/cactiComponents/ImageResponse'; import ListContainer from '../../containers/ListContainer'; @@ -41,7 +42,7 @@ export const NftCollection = ({ * Create the nfts assets for each tokenId to Show * */ const assets = assetsIdsToShow.map((id) => ( - + )); return ( From 1b4c3a5f170cff28e9c6d90898d5f86bcddf0c68 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 12:09:52 -0700 Subject: [PATCH 7/8] fix: dont refetch on window focus --- src/hooks/useNft.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts index 71ff379fb..ade987682 100644 --- a/src/hooks/useNft.ts +++ b/src/hooks/useNft.ts @@ -61,6 +61,7 @@ const useNft = ({ const { data: centerData, ...rest } = useQuery({ queryKey: ['nft', address, tokenId, network], queryFn: async () => await fetchNft(address, tokenId, network), + refetchOnWindowFocus: false, }); const { data: owner, refetch: refetchOwner } = useQuery({ From 1da15dcfae27774c2dc6903d62e89ab848c20bf8 Mon Sep 17 00:00:00 2001 From: marcomariscal Date: Thu, 10 Aug 2023 13:27:42 -0700 Subject: [PATCH 8/8] fix: refetch --- src/components/experimental_/widgets/nft/BuyNft.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/experimental_/widgets/nft/BuyNft.tsx b/src/components/experimental_/widgets/nft/BuyNft.tsx index e67cbe6af..fdca5fece 100644 --- a/src/components/experimental_/widgets/nft/BuyNft.tsx +++ b/src/components/experimental_/widgets/nft/BuyNft.tsx @@ -146,7 +146,7 @@ export const BuyNft = ({ nftAddress, tokenId }: { nftAddress: string; tokenId: s approvalParams={undefined} label={isOwner ? 'Already Owner' : notForSale ? 'Item not for sale' : 'Purchase NFT'} disabled={isExpired || notForSale || isOwner} - onSuccess={refetchOwner} + onSuccess={async () => await refetchOwner()} /> );