From 3433eafc68931aedcde734f79e83342561d16d75 Mon Sep 17 00:00:00 2001
From: Matthew Pereira <matthewdavidpereira@gmail.com>
Date: Wed, 17 Jan 2024 20:19:40 -0800
Subject: [PATCH] convert fetch to SWR and use axios instead of fetch on server
 side route handler

---
 packages/nextjs/components/Header.tsx         |   4 -
 .../components/only-buildors/Button.tsx       |   6 +-
 .../AddressInfoDropdown.tsx                   |   4 +-
 .../pages/api/get-nfts-for-contract.tsx       |  31 ++--
 packages/nextjs/pages/collection.tsx          |  53 +++---
 packages/nextjs/pages/index.tsx               | 155 +++++++++---------
 6 files changed, 124 insertions(+), 129 deletions(-)

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index c6162ed..fe64b0c 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useRef, useState } from "react";
 // import Image from "next/image";
 import Link from "next/link";
-import { useDarkMode } from "usehooks-ts";
 // import { useRouter } from "next/router";
 import { Bars3Icon, BugAntIcon, BuildingLibraryIcon, PhotoIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
@@ -62,15 +61,12 @@ export const HeaderMenuLinks = () => {
  * Site header
  */
 export const Header = () => {
-  const { isDarkMode } = useDarkMode();
-
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
-  console.log("isDarkMode", isDarkMode);
 
   return (
     <div
diff --git a/packages/nextjs/components/only-buildors/Button.tsx b/packages/nextjs/components/only-buildors/Button.tsx
index 4d03916..14c4617 100644
--- a/packages/nextjs/components/only-buildors/Button.tsx
+++ b/packages/nextjs/components/only-buildors/Button.tsx
@@ -1,3 +1,5 @@
+import { useDarkMode } from "usehooks-ts";
+
 type ButtonProps = {
   onClick?: () => void; // Make onClick optional
   children: React.ReactNode; // children can be any JSX element
@@ -8,6 +10,8 @@ type ButtonProps = {
  * https://devdojo.com/tailwindcss/buttons
  */
 export const Button = ({ onClick, children, disabled }: ButtonProps) => {
+  const { isDarkMode } = useDarkMode();
+
   return (
     <button
       disabled={disabled}
@@ -19,7 +23,7 @@ export const Button = ({ onClick, children, disabled }: ButtonProps) => {
       <span className="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out delay-100 bg-accent rounded-full opacity-0 group-hover:opacity-100 "></span>
       <span
         className={`${
-          disabled ? "text-neutral-500" : "text-accent"
+          disabled ? "text-neutral-500" : isDarkMode ? "text-accent" : "text-white"
         } relative  transition-colors duration-200 ease-in-out delay-100 group-hover:text-white`}
       >
         {children}
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
index a03cad1..8892547 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -52,7 +52,7 @@ export const AddressInfoDropdown = ({
         </summary>
         <ul
           tabIndex={0}
-          className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+          className="dropdown-content menu z-[2] p-2 mt-2 bg-primary text-primary-content rounded-box gap-1"
         >
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
@@ -118,7 +118,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
+              className="menu-item text-red-600 btn-sm !rounded-xl flex gap-3 py-3"
               type="button"
               onClick={() => disconnect()}
             >
diff --git a/packages/nextjs/pages/api/get-nfts-for-contract.tsx b/packages/nextjs/pages/api/get-nfts-for-contract.tsx
index ca676ab..cff86b0 100644
--- a/packages/nextjs/pages/api/get-nfts-for-contract.tsx
+++ b/packages/nextjs/pages/api/get-nfts-for-contract.tsx
@@ -1,27 +1,34 @@
+import axios from "axios";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    // Base URL
-    const url = `https://eth-sepolia.g.alchemy.com/nft/v3/${process.env.ALCHEMY_API_KEY}/getNFTsForContract?contractAddress=0x6a7415A8d287b343417150E7a74069D6D121372d&withMetadata=true`;
+    const { contractAddress } = req.query;
 
-    // Fetch data
-    const response = await fetch(url);
-
-    // Check if the response was successful
-    if (!response.ok) {
-      throw new Error(`API responded with status code ${response.status}`);
+    // Check if contractAddress is provided
+    if (!contractAddress) {
+      return res.status(400).json({ error: "Contract address is required" });
     }
 
-    const data = await response.json();
-    const nftsArray = data.nfts;
+    // Fetch data using axios
+    const response = await axios.get(
+      `https://eth-sepolia.g.alchemy.com/nft/v3/${process.env.ALCHEMY_API_KEY}/getNFTsForContract`,
+      {
+        params: {
+          contractAddress,
+          withMetadata: true,
+        },
+      },
+    );
+
+    // Extract data from response
+    const nftsArray = response.data.nfts;
 
     res.status(200).json(nftsArray);
   } catch (error) {
-    // Log the error for server-side debugging
     console.error("Failed to fetch NFT data for contract", error);
 
-    // Send a generic error response to the client
+    // Send a response with the error message
     res.status(500).json({ error: "Failed to fetch NFT data for contract" });
   }
 }
diff --git a/packages/nextjs/pages/collection.tsx b/packages/nextjs/pages/collection.tsx
index 3080f87..aa4c4d7 100644
--- a/packages/nextjs/pages/collection.tsx
+++ b/packages/nextjs/pages/collection.tsx
@@ -1,28 +1,32 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import type { NextPage } from "next";
+import useSWR from "swr";
 import { RarityTable } from "~~/components/only-buildors/";
-import { useScaffoldContractRead } from "~~/hooks/scaffold-eth/";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth/";
+
+// Define the fetcher function for SWR
+const fetcher = (url: string) => fetch(url).then(res => res.json());
 
 const Collection: NextPage = () => {
-  const [bgNft, setBgNft] = useState<any>(null);
   const [nfts, setNfts] = useState<any>([]);
 
-  const { data: base64encodedTokenUri } = useScaffoldContractRead({
-    contractName: "OnlyBuidlorsNft",
-    functionName: "tokenURI",
-    args: [0n],
-  });
+  const { data: onlyBuildorsNftContract } = useDeployedContractInfo("OnlyBuidlorsNft");
+
+  const getNftsForContractUrl = onlyBuildorsNftContract?.address
+    ? `/api/get-nfts-for-contract?contractAddress=${onlyBuildorsNftContract?.address}`
+    : null;
+
+  const { data: nftsData, error: nftsError } = useSWR(getNftsForContractUrl, fetcher);
+
+  if (nftsError) {
+    console.log("nftsError", nftsError);
+  }
 
   useEffect(() => {
-    const fetchNftData = async () => {
+    if (nftsData) {
       try {
-        const response = await fetch("/api/get-nfts-for-contract");
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        const decodedNfts = data.map((nft: any) => {
+        const decodedNfts = nftsData.map((nft: any) => {
           const utf8String = Buffer.from(nft.raw.tokenUri, "base64").toString("utf-8");
           return JSON.parse(utf8String);
         });
@@ -30,26 +34,9 @@ const Collection: NextPage = () => {
       } catch (e) {
         console.log("error", e);
       }
-    };
-
-    fetchNftData();
-  }, []);
-
-  console.log("nfts", nfts);
-
-  useEffect(() => {
-    if (!base64encodedTokenUri) return;
-    // Decode the Base64 string
-    const decodedString = atob(base64encodedTokenUri);
-
-    // Parse the JSON metadata
-    const metadata = JSON.parse(decodedString);
-
-    // Set the NFT data
-    setBgNft(metadata);
-  }, [base64encodedTokenUri]);
+    }
+  }, [nftsData]);
 
-  console.log(bgNft);
   return (
     <>
       <section className="p-5 md:p-10 xl:p-14">
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 31b1ead..e525a42 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -6,7 +6,6 @@ import useSWR from "swr";
 import { useAccount } from "wagmi";
 import { CheckIcon } from "@heroicons/react/24/outline";
 import { MetaHeader } from "~~/components/MetaHeader";
-// import { BuidlGuidlLogo } from "~~/components/only-buildors";
 import { Button } from "~~/components/only-buildors/";
 import { useDeployedContractInfo, useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth/";
 
@@ -14,12 +13,15 @@ import { useDeployedContractInfo, useScaffoldContractRead, useScaffoldContractWr
 const steps = [
   {
     number: 1,
-    text: <>Send a transaction to NFT contract to initiate a request to chainlink functions node</>,
+    text: <>Send a transaction to on chain NFT contract to send a request to chainlink functions node</>,
   },
   {
     number: 2,
     text: (
-      <>Wait for chainlink node to execute off chain API call to BuidlGuidl server and respond to the NFT contract</>
+      <>
+        Wait for chainlink node to execute off chain API call to BuidlGuidl server and relay the response to the NFT
+        contract
+      </>
     ),
   },
   {
@@ -28,7 +30,7 @@ const steps = [
   },
 ];
 
-// Define the subscription ID for the Chainlink functions
+// Define the subscription ID for the Chainlink functions (specific to each network)
 const SUBSCRIPTION_ID = 1905n;
 
 // Define the fetcher function for SWR
@@ -155,90 +157,89 @@ const Home: NextPage = () => {
   return (
     <>
       <MetaHeader />
-      {/* <section className="grow flex flex-col"> */}
-      <section className="">
-        <div className="p-5 md:p-10 lg:px-16 2xl:p-24">
-          <div className="grid grid-cols-1 2xl:grid-cols-2 gap-14 pb-20 items-end border-b border-primary">
+      <section className="p-5 md:p-10 lg:px-16 2xl:p-24 grow flex flex-col">
+        <div className="grid grid-cols-1 2xl:grid-cols-2 gap-14 pb-20 items-end border-b border-primary">
+          <div className="flex justify-center lg:justify-start">
             <div>
-              <h1 className="text-5xl md:text-6xl lg:text-8xl font-lucky">
+              <h1 className="text-6xl md:text-7xl lg:text-8xl font-lucky">
                 <div>ONLY</div> BUIDLORS
               </h1>
-              <div className="text-xl lg:text-2xl xl:text-3xl">
+              <div className="text-xl sm:text-2xl xl:text-3xl">
                 A dynamic SVG NFT collection for BuidlGuidl members only.
               </div>
             </div>
-            <div className="flex justify-center">
-              <Image
-                src={imgSrc}
-                width={800}
-                height={700}
-                alt="dynamic image of minting proccess and final NFT"
-                className="rounded-xl"
-              />
-            </div>
           </div>
+          <div className="flex justify-center">
+            <Image
+              src={imgSrc}
+              width={800}
+              height={700}
+              alt="dynamic image of minting proccess and final NFT"
+              className="rounded-xl"
+            />
+          </div>
+        </div>
 
-          <div className="pt-20 pb-10">
-            {isBuilder ? (
-              <div className="grid grid-cols-1 2xl:grid-cols-2 gap-8 items-center">
-                <div>
-                  {steps.map(step => (
-                    <div key={step.number} className="text-2xl flex gap-4 mb-5 items-start">
-                      <div
-                        style={{ minWidth: "40px" }}
-                        className={`${
-                          stepsCompleted >= step.number ? "bg-green-600" : "bg-primary"
-                        } font-bold w-10 h-10 flex items-center justify-center rounded-full text-primary-content`}
-                      >
-                        {stepsCompleted >= step.number ? <CheckIcon className="w-6 h-6 text-white" /> : step.number}
-                      </div>
-                      <div>{step.text}</div>
+        <div className="grow flex flex-col items-center justify-center py-10">
+          {isBuilder ? (
+            <div className="grid grid-cols-1 2xl:grid-cols-2 gap-20 items-center">
+              <div>
+                {steps.map(step => (
+                  <div key={step.number} className="text-2xl flex gap-4 mb-8 items-start">
+                    <div
+                      style={{ minWidth: "40px" }}
+                      className={`${
+                        stepsCompleted >= step.number ? "bg-green-600" : "bg-primary"
+                      } font-bold w-10 h-10 flex items-center justify-center rounded-full text-primary-content`}
+                    >
+                      {stepsCompleted >= step.number ? <CheckIcon className="w-6 h-6 text-white" /> : step.number}
                     </div>
-                  ))}
-                </div>
-
-                <div className="flex flex-col justify-center items-center">
-                  {hasMinted ? (
-                    <Link href="/collection">
-                      <Button>View Collection</Button>
-                    </Link>
-                  ) : buidlCount && buidlCount > 0n ? (
-                    <Button onClick={() => mintNft()}>Mint NFT</Button>
-                  ) : (
-                    <Button onClick={() => sendRequest()} disabled={stepsCompleted >= 1}>
-                      {stepsCompleted >= 1 ? "Request proccessing..." : "Send Request"}
-                    </Button>
-                  )}
-                </div>
+                    <div>{step.text}</div>
+                  </div>
+                ))}
               </div>
-            ) : (
-              <div className="text-xl lg:text-2xl xl:text-3xl text-center">
-                <div className="mb-10">
-                  Please connect the wallet associated with your{" "}
-                  <a
-                    className="underline text-accent"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://app.buidlguidl.com/builders/0x41f727fA294E50400aC27317832A9F78659476B9"
-                  >
-                    BuidlGuidl profile
-                  </a>{" "}
-                  in order to mint an NFT
-                </div>
-                <div>
-                  If you are not a member yet, join us by the completing challenges at{" "}
-                  <a
-                    className="underline text-accent"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://speedrunethereum.com/"
-                  >
-                    Speedrun Ethereum
-                  </a>
-                </div>
+
+              <div className="flex flex-col justify-center items-center">
+                {hasMinted ? (
+                  <Link href="/collection">
+                    <Button>View Collection</Button>
+                  </Link>
+                ) : buidlCount && buidlCount > 0n ? (
+                  <Button onClick={() => mintNft()}>Mint NFT</Button>
+                ) : (
+                  <Button onClick={() => sendRequest()} disabled={stepsCompleted >= 1}>
+                    {stepsCompleted >= 1 ? "Request proccessing..." : "Send Request"}
+                  </Button>
+                )}
               </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="text-xl sm:text-2xl xl:text-3xl text-center">
+              <div className="mb-10">
+                Connect the wallet associated with your{" "}
+                <a
+                  className="underline text-accent"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://app.buidlguidl.com/builders/0x41f727fA294E50400aC27317832A9F78659476B9"
+                >
+                  BuidlGuidl profile
+                </a>{" "}
+                to mint an NFT
+              </div>
+              <div>
+                If you are not a member yet, join us by the completing challenges at{" "}
+                <a
+                  className="underline text-accent"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://speedrunethereum.com/"
+                >
+                  Speedrun Ethereum
+                </a>
+              </div>
+            </div>
+          )}
         </div>
       </section>
     </>