seperated local loading

JacobHomanics · Apr 30, 2024 · 2118157 · 2118157
1 parent 5d4f29c
commit 2118157
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 64 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,72 +1,83 @@
 "use client";
 
-import { useState } from "react";
+import Link from "next/link";
 import type { NextPage } from "next";
-import { NftCard } from "~~/components/nft-card/NftCard";
-// import { NameCard, NameCardProps } from "~~/components/NftCardValue/NameCard";
-import { useToken, useTokens } from "~~/hooks/useToken";
-
-const inputOptions: any[] = [
-  "Image",
-  "Name",
-  "Description",
-  "Attributes",
-  "Address",
-  "CollectionName",
-  "CollectionSymbol",
-  "Id",
-];
+import { useAccount } from "wagmi";
+import {
+  BeakerIcon, // BugAntIcon, MagnifyingGlassIcon
+} from "@heroicons/react/24/outline";
+import { Address } from "~~/components/scaffold-eth";
 
 const Home: NextPage = () => {
-  const [checkeds, setCheckeds] = useState<boolean[]>([true, true, true, true, true, true, true, true]);
-
-  const handleChange = (index: number) => {
-    const temp: boolean[] = checkeds;
-
-    temp[index] = !temp[index];
-
-    setCheckeds([...temp]);
-  };
-
-  const inputComponents = inputOptions.map((inputName, index) => {
-    return (
-      <div key={index + "-input"}>
-        <label className="m-1">
-          {inputName}
-          <input
-            className="m-1"
-            type="checkbox"
-            checked={checkeds[index]}
-            onChange={() => {
-              handleChange(index);
-            }}
-          />
-        </label>
-      </div>
-    );
-  });
-
-  const componentsToRender: any = [];
-  for (let i = 0; i < checkeds.length; i++) {
-    if (checkeds[i]) componentsToRender.push(inputOptions[i]);
-  }
-
-  const token = useToken(BigInt(1), "w3s");
+  const { address: connectedAddress } = useAccount();
 
-  const tokens = useTokens([BigInt(1)], "w3s");
+  return (
+    <>
+      <div className="flex items-center flex-col flex-grow pt-10">
+        <div className="px-5">
+          <h1 className="text-center">
+            <span className="block text-2xl mb-2">Welcome to</span>
+            <span className="block text-4xl font-bold">Scaffold-NFT</span>
+          </h1>
+          <div className="flex justify-center items-center space-x-2">
+            <p className="my-2 font-medium">Connected Address:</p>
+            <Address address={connectedAddress} />
+          </div>
+          <p className="text-center text-lg">
+            Get started by editing{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              packages/nextjs/app/page.tsx
+            </code>
+          </p>
+          <p className="text-center text-lg">
+            Edit your smart contract{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              YourContract.sol
+            </code>{" "}
+            in{" "}
+            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
+              packages/hardhat/contracts
+            </code>
+          </p>
+        </div>
 
-  const tokensComponents = tokens.map((token, index) => {
-    return <NftCard key={index} token={token} renderOrder={componentsToRender} collectionDataLoadType="Individual" />;
-  });
+        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
+            {/* <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <BugAntIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Tinker with your smart contract using the{" "}
+                <Link href="/debug" passHref className="link">
+                  Debug Contracts
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Explore your local transactions with the{" "}
+                <Link href="/blockexplorer" passHref className="link">
+                  Block Explorer
+                </Link>{" "}
+                tab.
+              </p>
+            </div> */}
 
-  return (
-    <div>
-      <div className="flex flex-wrap">{inputComponents}</div>
-      <div className="flex flex-wrap justify-center m-1 p-1 bg-base-100 rounded">
-        {tokensComponents}
-        <NftCard token={token} />
+            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+              <BeakerIcon className="h-8 w-8 fill-secondary" />
+              <p>
+                Test your local deployments at the{" "}
+                <Link href="/testing-grounds" passHref className="link">
+                  Testing Grounds
+                </Link>{" "}
+                tab.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/packages/nextjs/app/testing-grounds/page.tsx b/packages/nextjs/app/testing-grounds/page.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import type { NextPage } from "next";
+import { NftCard } from "~~/components/nft-card/NftCard";
+// import { NameCard, NameCardProps } from "~~/components/NftCardValue/NameCard";
+import { useToken, useTokens } from "~~/hooks/useToken";
+
+const inputOptions: any[] = [
+  "Image",
+  "Name",
+  "Description",
+  "Attributes",
+  "Address",
+  "CollectionName",
+  "CollectionSymbol",
+  "Id",
+];
+
+const TestingGrounds: NextPage = () => {
+  const [checkeds, setCheckeds] = useState<boolean[]>([true, true, true, true, true, true, true, true]);
+
+  const handleChange = (index: number) => {
+    const temp: boolean[] = checkeds;
+
+    temp[index] = !temp[index];
+
+    setCheckeds([...temp]);
+  };
+
+  const inputComponents = inputOptions.map((inputName, index) => {
+    return (
+      <div key={index + "-input"}>
+        <label className="m-1">
+          {inputName}
+          <input
+            className="m-1"
+            type="checkbox"
+            checked={checkeds[index]}
+            onChange={() => {
+              handleChange(index);
+            }}
+          />
+        </label>
+      </div>
+    );
+  });
+
+  const componentsToRender: any = [];
+  for (let i = 0; i < checkeds.length; i++) {
+    if (checkeds[i]) componentsToRender.push(inputOptions[i]);
+  }
+
+  const token = useToken(BigInt(1), "w3s");
+
+  const tokens = useTokens([BigInt(1)], "w3s");
+
+  const tokensComponents = tokens.map((token, index) => {
+    return <NftCard key={index} token={token} renderOrder={componentsToRender} collectionDataLoadType="Individual" />;
+  });
+
+  return (
+    <div>
+      <div className="flex flex-wrap">{inputComponents}</div>
+      <div className="flex flex-wrap justify-center m-1 p-1 bg-base-100 rounded">
+        {tokensComponents}
+        <NftCard token={token} />
+      </div>
+    </div>
+  );
+};
+
+export default TestingGrounds;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useChainId } from "wagmi";
 import { Bars3Icon, BugAntIcon, CogIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -31,7 +32,11 @@ export const menuLinks: HeaderMenuLink[] = [
   },
 ];
 
-export const HeaderMenuLinks = () => {
+type Props = {
+  menuLinks: HeaderMenuLink[];
+};
+
+export const HeaderMenuLinks = ({ menuLinks }: Props) => {
   const pathname = usePathname();
 
   return (
@@ -61,6 +66,25 @@ export const HeaderMenuLinks = () => {
  * Site header
  */
 export const Header = () => {
+  const [instancedHeaderLinks, setInstancedHeaderLinks] = useState(menuLinks);
+
+  const chainId = useChainId();
+  console.log(chainId);
+
+  useEffect(() => {
+    if (chainId === 31337) {
+      setInstancedHeaderLinks([
+        ...instancedHeaderLinks,
+        {
+          label: "Testing Grounds",
+          href: "/testing-grounds",
+        },
+      ]);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chainId]);
+
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   useOutsideClick(
@@ -89,7 +113,7 @@ export const Header = () => {
                 setIsDrawerOpen(false);
               }}
             >
-              <HeaderMenuLinks />
+              <HeaderMenuLinks menuLinks={instancedHeaderLinks} />
             </ul>
           )}
         </div>
@@ -103,7 +127,7 @@ export const Header = () => {
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
-          <HeaderMenuLinks />
+          <HeaderMenuLinks menuLinks={instancedHeaderLinks} />
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">