move nft data processing to frontend

MattPereira · Jan 11, 2024 · 9de49ef · 9de49ef · vercel · Jan 11, 2024
1 parent 3e62eaf
commit 9de49ef
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/nextjs/components/portfolio/sections/Achievements.tsx b/packages/nextjs/components/portfolio/sections/Achievements.tsx
@@ -7,15 +7,14 @@ const fetcher = (url: string) => fetch(url).then(res => res.json());
 export function Achievements() {
   const { data, error, isLoading } = useSWR(`${process.env.NEXT_PUBLIC_VERCEL_URL}/api/get-nfts`, fetcher);
 
-  // if (error) {
-  //   console.error("nftsError", error);
-  //   return (
-  //     <SectionContainer>
-  //       <SectionHeader title="Achievements" />
-  //       <div className="text-center">Error loading achievement NFTs</div>
-  //     </SectionContainer>
-  //   );
-  // }
+  // Process the data only if it's available
+  const nfts = data
+    ? data.map((nft: any) => ({
+        image: nft.image?.originalUrl,
+        description: nft.description,
+        name: nft.name,
+      }))
+    : [];
 
   return (
     <SectionContainer>
@@ -28,7 +27,7 @@ export function Achievements() {
         <div className="text-center">Error loading achievement NFTs</div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 rounded-xl">
-          {data.data.map((nft: any, idx: number) => (
+          {nfts.map((nft: any, idx: number) => (
             <div
               key={idx}
               className="flex flex-col items-center justify-center border border-base-content rounded-xl p-3 bg-base-200"

diff --git a/packages/nextjs/pages/api/get-nfts.tsx b/packages/nextjs/pages/api/get-nfts.tsx
@@ -4,7 +4,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   try {
     const address = "0x41f727fA294E50400aC27317832A9F78659476B9";
     // Base URL
-    const url = `https://arb-mainnet.g.alchemy.com/nft/v3/${process.env.ALCHEMY_API_KEY}/getNFTsForOwner?owner=${address}&withMetadata=true&pageSize=100`;
+    const url = `https://arb-mainnet.g.alchemy.com/nft/v3/${process.env.ALCHEMY_API_KEY}/getNFTsForOwner?owner=${address}&withMetadata=true`;
 
     // Fetch data
     const response = await fetch(url);
@@ -16,15 +16,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const data = await response.json();
     console.log("data", data.ownedNfts[0]);
+    const nfts = data.ownedNfts;
 
+    // MAY BE CAUSING ERROR WITH SERVERLESS FUNCTION DEPLOYED TO VERCEL
     // Process the data
-    const nfts = data.ownedNfts.map((nft: any) => ({
-      image: nft.image?.originalUrl,
-      description: nft.description,
-      name: nft.name,
-    }));
+    // const nfts = data.ownedNfts.map((nft: any) => ({
+    //   image: nft.image?.originalUrl,
+    //   description: nft.description,
+    //   name: nft.name,
+    // }));
 
-    res.status(200).json({ data: nfts });
+    res.status(200).json(nfts);
   } catch (error) {
     // Log the error for server-side debugging
     console.error("Failed to fetch NFT data:", error);