diff --git a/packages/nextjs/components/MetaHeader.tsx b/packages/nextjs/components/MetaHeader.tsx index e7e610a..fadffff 100644 --- a/packages/nextjs/components/MetaHeader.tsx +++ b/packages/nextjs/components/MetaHeader.tsx @@ -15,7 +15,7 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT export const MetaHeader = ({ title = "Only Buidlors", - description = "An NFT collection for BuidlGuidl members that have shipped at least one build", + description = "A dynamic SVG NFT collection for the BuidlGuidl", image = "thumbnail.jpg", twitterCard = "summary_large_image", children, diff --git a/packages/nextjs/pages/api/get-ens-name.tsx b/packages/nextjs/pages/api/get-ens-name.tsx new file mode 100644 index 0000000..805e30a --- /dev/null +++ b/packages/nextjs/pages/api/get-ens-name.tsx @@ -0,0 +1,44 @@ +import axios from "axios"; +import type { NextApiRequest, NextApiResponse } from "next"; + +const ensContractAddress = "0xD4416b13d2b3a9aBae7AcD5D6C2BbDBE25686401"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + try { + console.log("hello"); + const { eoaAddress } = req.query; + // Base URL + const response = await axios.get( + `https://eth-mainnet.g.alchemy.com/nft/v3/${process.env.ALCHEMY_API_KEY}/getNFTsForOwner`, + { + params: { + owner: eoaAddress, + "contractAddresses[]": ensContractAddress, + withMetadata: true, + }, + }, + ); + console.log("response", response); + + const data = response.data; + let tokenUri; + let ensName; + if (data.ownedNfts.length > 0) { + tokenUri = data.ownedNfts[0].tokenUri; + const response2 = await axios.get(tokenUri); + ensName = response2.data.name; + } + + if (ensName) { + res.status(200).json({ name: ensName }); + } else { + res.status(200).json({ message: "No ENS name found for the provided EOA address." }); + } + } catch (error) { + // Log the error for server-side debugging + console.error("Failed to fetch NFT data for owner:", error); + + // Send a generic error response to the client + res.status(500).json({ error: "Failed to fetch NFT data for owner" }); + } +} diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index d205407..cfe1f7c 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -55,32 +55,7 @@ const Home: NextPage = () => { const { address } = useAccount(); - const { - writeAsync: sendRequest, - isLoading: requestTxIsLoading, - isMining: requestTxIsMining, - } = useScaffoldContractWrite({ - contractName: "OnlyBuidlorsNft", - functionName: "sendRequest", - args: [SUBSCRIPTION_ID, [address || ""], "matthu.eth"], - // blockConfirmations: 1, - onBlockConfirmation: () => { - setStepsCompleted(1); - }, - }); - - const { - writeAsync: mintNft, - // isLoading: mintIsLoading, - // isMining: mintIsMining, - } = useScaffoldContractWrite({ - contractName: "OnlyBuidlorsNft", - functionName: "mintNft", - onBlockConfirmation: () => { - setStepsCompleted(3); - }, - }); - + /*** Read Contract ***/ const { data: buidlCount } = useScaffoldContractRead({ contractName: "OnlyBuidlorsNft", functionName: "getBuidlCount", @@ -93,9 +68,40 @@ const Home: NextPage = () => { args: [address || "0x000"], }); - const { data: onlyBuildorsNftContract } = useDeployedContractInfo("OnlyBuidlorsNft"); + /*** API requests ***/ + // BuidlGuidl API Request // only make the request if the eoa and contract address are defined AND the user has minted an NFT + const bgBuildersUrl = address ? `https://buidlguidl-v3.appspot.com/builders/${address}` : null; + + const { data: isBuilder, error: isBuilderError } = useSWR(bgBuildersUrl, fetcher, { + shouldRetryOnError: false, // Do not retry on error + onError: error => { + if (error.status === 404) { + // Handle the 404 error specifically + console.error("Builder ddress not found in database:", error.info); + } + }, + }); + + if (isBuilderError) { + console.log("isBuilderError", isBuilderError); + } + + // ENS NFT Request to Alchemy API + const ensLookupUrl = address && isBuilder ? `/api/get-ens-name?eoaAddress=${address}` : null; + + const { data: ensData, error: ensNameError } = useSWR(ensLookupUrl, fetcher); + + if (ensNameError) { + console.log("ensNameError", ensNameError); + } + console.log("ensName", ensData?.name); + + const { data: onlyBuildorsNftContract } = useDeployedContractInfo("OnlyBuidlorsNft"); + + // Only Buider NFT Contract Request to Alchemy API + // Only make the request if the eoa and contract address are defined AND the user has minted an NFT const getNftForOwnerUrl = address && onlyBuildorsNftContract?.address && hasMinted ? `/api/get-nft-for-owner?eoaAddress=${address}&nftContract=${onlyBuildorsNftContract?.address}` @@ -107,6 +113,34 @@ const Home: NextPage = () => { console.log("nftError", nftError); } + /*** Write Contract ***/ + + const { + writeAsync: sendRequest, + isLoading: requestTxIsLoading, + isMining: requestTxIsMining, + } = useScaffoldContractWrite({ + contractName: "OnlyBuidlorsNft", + functionName: "sendRequest", + args: [SUBSCRIPTION_ID, [address || "0x000"], ensData?.name || ""], + // blockConfirmations: 1, + onBlockConfirmation: () => { + setStepsCompleted(1); + }, + }); + + const { + writeAsync: mintNft, + // isLoading: mintIsLoading, + // isMining: mintIsMining, + } = useScaffoldContractWrite({ + contractName: "OnlyBuidlorsNft", + functionName: "mintNft", + onBlockConfirmation: () => { + setStepsCompleted(3); + }, + }); + // only change the image source if the nftData has been successfully fetched useEffect(() => { if (nftData) { @@ -138,23 +172,6 @@ const Home: NextPage = () => { } }, [hasMinted, buidlCount, requestTxIsMining, requestTxIsLoading, stepsCompleted]); - // only make the request if the eoa and contract address are defined AND the user has minted an NFT - const bgBuildersUrl = address ? `https://buidlguidl-v3.appspot.com/builders/${address}` : null; - - const { data: isBuilder, error: isBuilderError } = useSWR(bgBuildersUrl, fetcher, { - shouldRetryOnError: false, // Do not retry on error - onError: error => { - if (error.status === 404) { - // Handle the 404 error specifically - console.error("Builder ddress not found in database:", error.info); - } - }, - }); - - if (isBuilderError) { - console.log("isBuilderError", isBuilderError); - } - return ( <> diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx index cf57849..fa39e71 100644 --- a/packages/nextjs/utils/scaffold-eth/notification.tsx +++ b/packages/nextjs/utils/scaffold-eth/notification.tsx @@ -46,7 +46,7 @@ const Notification = ({ return toast.custom( t => (