added dynamic nft loading

packages/nextjs/app/collections/[network]/[address]/[tokenId]/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+export default function Token({ params }: { params: { id: string } }) {
+  console.log(params);
+
+  return (
+    <div>
+      <p>Hello!</p>
+    </div>
+  );
+}

packages/nextjs/app/collections/[network]/[address]/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+//, { useEffect }
+import { useState } from "react";
+import { useAccount } from "wagmi";
+// import "react-dropdown/style.css";
+import { Collection } from "~~/components/scaffold-nft/collection/Collection";
+// import useAdvancedFiltering from "~~/hooks/scaffold-nft/useAdvancedFiltering";
+// import useCheckboxes from "~~/hooks/scaffold-nft/useCheckboxes";
+// import useTokenIds from "~~/hooks/scaffold-nft/useTokenIds";
+import { useTokens } from "~~/hooks/scaffold-nft/useTokens";
+
+// import { renderInputOptions } from "~~/scaffold-nft-config";
+
+export default function CollectionPage({ params }: { params: { network: string; address: string } }) {
+  // const { inputComponents, componentsToRender } = useCheckboxes(renderInputOptions);
+
+  const userAccount = useAccount();
+
+  // const { tokenIds, setTokenIds } = useTokenIds(2);
+  // async function onSubmit(newIds: bigint[]) {
+  //   setTokenIds([...newIds]);
+  // }
+
+  // const tokenIds = [BigInt(0), BigInt(1)];
+
+  const [tokenIds] = useState<bigint[]>([BigInt(0), BigInt(1)]);
+
+  // const {
+  //   chosenOption,
+  //   // chosenOption2,
+  //   output: advancedOutput,
+  // } = useAdvancedFiltering(inputComponents, onSubmit);
+
+  const { collection, isLoading, isError } = useTokens(
+    params["network"],
+    params["address"],
+    userAccount.address!,
+    tokenIds,
+    "nftstorage",
+    //chosenOption2,
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      {/* {advancedOutput} */}
+      <Collection collection={collection} isLoading={isLoading} isError={isError} />
+    </div>
+  );
+}

packages/nextjs/components/scaffold-nft/_deprecated/CollectionCard.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import "react-dropdown/style.css";
+import { NftCard } from "~~/components/scaffold-nft/_deprecated/NftCard";
+import { AddressCard, AddressCardProps } from "~~/components/scaffold-nft/_deprecated/values/AddressCard";
+import {
+  CollectionNameCard,
+  CollectionNameCardProps,
+} from "~~/components/scaffold-nft/_deprecated/values/CollectionNameCard";
+import {
+  CollectionSymbolCard,
+  CollectionSymbolCardProps,
+} from "~~/components/scaffold-nft/_deprecated/values/CollectionSymbolCard";
+import { CollectionDetails } from "~~/components/scaffold-nft/_deprecated/values/extensions/CollectionDetails";
+
+const AddressCardComponent = (props: AddressCardProps) => {
+  return <AddressCard {...props} bgColor="bg-base-300" />;
+};
+
+const CollectionNameCardComponent = (props: CollectionNameCardProps) => {
+  return <CollectionNameCard {...props} bgColor="bg-base-300" />;
+};
+
+const CollectionSymbolCardComponent = (props: CollectionSymbolCardProps) => {
+  return <CollectionSymbolCard {...props} bgColor="bg-base-300" />;
+};
+
+type Props = {
+  collection: any;
+  isLoading: any;
+  isError: any;
+  renderOrder: any;
+};
+
+export const CollectionCard = ({ collection, isLoading, isError, renderOrder }: Props) => {
+  const tokensComponents = collection?.tokens?.map((token: any, index: number) => {
+    return <NftCard key={index} token={token} renderOrder={renderOrder} />;
+  });
+
+  let mainContent;
+  if (isLoading) {
+    mainContent = <p>Loading...</p>;
+  } else {
+    if (isError) {
+      mainContent = <p>There was an error. Please try changing the advanced settings.</p>;
+    } else {
+      mainContent = tokensComponents;
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="w-full">
+        <CollectionDetails
+          token={collection?.tokens[0]}
+          showDescriptor={true}
+          bgColor="bg-base-100"
+          AddressCard={AddressCardComponent}
+          CollectionNameCard={CollectionNameCardComponent}
+          CollectionSymbolCard={CollectionSymbolCardComponent}
+        />
+      </div>
+      <div className="flex flex-wrap justify-center m-1 p-1 bg-base-100 rounded lg:max-w-[1300px]">{mainContent}</div>{" "}
+    </div>
+  );
+};

packages/nextjs/components/scaffold-nft/_deprecated/NftCard.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { ComponentType } from "react";
+import { Size, Style, beautyStyleMap } from "./types/Types";
+import { AddressCard, AddressCardProps } from "./values/AddressCard";
+import { AttributesCard, AttributesCardProps } from "./values/AttributesCard";
+import { CollectionNameCard, CollectionNameCardProps } from "./values/CollectionNameCard";
+import { CollectionSymbolCard, CollectionSymbolCardProps } from "./values/CollectionSymbolCard";
+import { DescriptionCard, DescriptionCardProps } from "./values/DescriptionCard";
+import { IdCard, IdCardProps } from "./values/IdCard";
+import { ImageCard, ImageCardProps } from "./values/ImageCard";
+import { NameCard, NameCardProps } from "./values/NameCard";
+import { CollectionDetails, CollectionDetailsProps } from "./values/extensions/CollectionDetails";
+import { v4 as uuidv4 } from "uuid";
+import { ScaffoldToken } from "~~/types/scaffold-nft/ScaffoldToken";
+
+type PrettyLoadType = "animated" | "text";
+
+type Props = {
+  token?: ScaffoldToken;
+  NameCard?: ComponentType<NameCardProps>;
+  ImageCard?: ComponentType<ImageCardProps>;
+  DescriptionCard?: ComponentType<DescriptionCardProps>;
+  AttributesCard?: ComponentType<AttributesCardProps>;
+  AddressCard?: ComponentType<AddressCardProps>;
+  CollectionNameCard?: ComponentType<CollectionNameCardProps>;
+  CollectionSymbolCard?: ComponentType<CollectionSymbolCardProps>;
+  IdCard?: ComponentType<IdCardProps>;
+  CollectionDetailsCard?: ComponentType<CollectionDetailsProps>;
+
+  renderOrder?: (
+    | "Image"
+    | "Id"
+    | "Name"
+    | "Description"
+    | "Attributes"
+    | "Address"
+    | "CollectionName"
+    | "CollectionSymbol"
+  )[];
+  collectionDataLoadType?: "Together" | "Individual";
+  prettyLoad?: boolean;
+  prettyLoadType?: PrettyLoadType;
+  size?: Size;
+  style?: Style;
+};
+
+const NameCardComponent = (props: NameCardProps) => {
+  return <NameCard {...props} />;
+};
+
+const ImageCardComponent = (props: ImageCardProps) => {
+  return <ImageCard {...props} />;
+};
+
+const DescriptionCardComponent = (props: DescriptionCardProps) => {
+  return <DescriptionCard {...props} />;
+};
+
+const AttributesCardComponent = (props: AttributesCardProps) => {
+  return <AttributesCard {...props} />;
+};
+
+const AddressCardComponent = (props: AddressCardProps) => {
+  return <AddressCard {...props} />;
+};
+
+const CollectionNameCardComponent = (props: CollectionNameCardProps) => {
+  return <CollectionNameCard {...props} />;
+};
+
+const CollectionSymbolCardComponent = (props: CollectionSymbolCardProps) => {
+  return <CollectionSymbolCard {...props} />;
+};
+
+const CollectionDetailsCardComponent = (props: CollectionDetailsProps) => {
+  return <CollectionDetails {...props} />;
+};
+
+const IdCardComponent = (props: IdCardProps) => {
+  return <IdCard {...props} />;
+};
+
+export const NftCard = ({
+  token,
+  NameCard = NameCardComponent,
+  ImageCard = ImageCardComponent,
+  DescriptionCard = DescriptionCardComponent,
+  AttributesCard = AttributesCardComponent,
+  AddressCard = AddressCardComponent,
+  CollectionNameCard = CollectionNameCardComponent,
+  CollectionSymbolCard = CollectionSymbolCardComponent,
+  IdCard = IdCardComponent,
+  CollectionDetailsCard = CollectionDetailsCardComponent,
+  collectionDataLoadType = "Together",
+  renderOrder = ["Image", "Id", "Name", "Description", "Attributes", "Address", "CollectionName", "CollectionSymbol"],
+  prettyLoad = true,
+  prettyLoadType = "animated",
+  size = "base",
+  style = "rounded",
+}: Props) => {
+  const sizeMap = {
+    base: "w-32 lg:w-96 m-0.5 lg:m-4",
+    // base: "max-w-96 lg:max-w-max m-4",
+  };
+
+  const animatedLoadingSizeMap = {
+    base: "h-80 w-32",
+  };
+
+  const textLoadingSizeMap = {
+    base: "text-4xl",
+  };
+
+  const prettyLoadMap = {
+    animated: (
+      <div className="animate-pulse flex space-x-4">
+        <div className="flex items-center space-y-6">
+          <div className={`bg-slate-300 ${animatedLoadingSizeMap[size]}  ${beautyStyleMap[style]}`}></div>
+        </div>
+      </div>
+    ),
+    text: <p className={`text-center ${textLoadingSizeMap[size]}`}>Loading NFT...</p>,
+  };
+
+  const renderedComponents: any = [];
+  const collectionComponents: any = [];
+
+  for (let i = 0; i < renderOrder.length; i++) {
+    if (renderOrder[i] === "Image") {
+      renderedComponents.push(
+        <ImageCard
+          key={uuidv4()}
+          value={token?.metadata?.image?.value}
+          showDescriptor={false}
+          style={style}
+          size={size}
+        />,
+      );
+    }
+
+    if (renderOrder[i] === "Name") {
+      renderedComponents.push(
+        <NameCard key={uuidv4()} value={token?.metadata?.name} showDescriptor={true} style={style} size={size} />,
+      );
+    }
+
+    if (renderOrder[i] === "Description") {
+      renderedComponents.push(
+        <DescriptionCard
+          key={uuidv4()}
+          value={token?.metadata?.description}
+          showDescriptor={true}
+          style={style}
+          size={size}
+        />,
+      );
+    }
+
+    if (renderOrder[i] === "Attributes") {
+      renderedComponents.push(
+        <AttributesCard key={uuidv4()} value={token?.metadata?.attributes} showDescriptor={true} style={style} />,
+      );
+    }
+
+    if (renderOrder[i] === "Id") {
+      renderedComponents.push(
+        <IdCard key={uuidv4()} value={token?.id} showDescriptor={true} style={style} size={size} />,
+      );
+    }
+
+    if (renderOrder[i] === "Address" || renderOrder[i] === "CollectionName" || renderOrder[i] === "CollectionSymbol") {
+      collectionComponents.push(renderOrder[i]);
+    }
+  }
+
+  if (collectionComponents.length > 0) {
+    if (collectionDataLoadType === "Together") {
+      renderedComponents.push(
+        <CollectionDetailsCard
+          key={uuidv4()}
+          token={token}
+          showDescriptor={true}
+          style={style}
+          renderOrder={collectionComponents}
+          AddressCard={props => {
+            return <AddressCard {...props} value={token?.address} showDescriptor={true} style={style} size={size} />;
+          }}
+          CollectionNameCard={props => {
+            return (
+              <CollectionNameCard
+                {...props}
+                value={token?.collectionName}
+                showDescriptor={true}
+                style={style}
+                size={size}
+              />
+            );
+          }}
+          CollectionSymbolCard={props => {
+            return (
+              <CollectionSymbolCard
+                {...props}
+                value={token?.collectionSymbol}
+                showDescriptor={true}
+                style={style}
+                size={size}
+              />
+            );
+          }}
+        />,
+      );
+    } else if (collectionDataLoadType === "Individual") {
+      for (let i = 0; i < collectionComponents.length; i++) {
+        if (collectionComponents[i] === "Address") {
+          renderedComponents.push(
+            <AddressCard key={uuidv4()} value={token?.address} showDescriptor={true} style={style} size={size} />,
+          );
+        }
+
+        if (collectionComponents[i] === "CollectionName") {
+          renderedComponents.push(
+            <CollectionNameCard
+              key={uuidv4()}
+              value={token?.collectionName}
+              showDescriptor={true}
+              style={style}
+              size={size}
+            />,
+          );
+        }
+        if (collectionComponents[i] === "CollectionSymbol") {
+          renderedComponents.push(
+            <CollectionSymbolCard
+              key={uuidv4()}
+              value={token?.collectionSymbol}
+              showDescriptor={true}
+              style={style}
+              size={size}
+            />,
+          );
+        }
+      }
+    }
+  }
+
+  let cardContent: any;
+
+  if (prettyLoad) {
+    if (
+      token?.metadata === undefined ||
+      token?.collectionName === undefined ||
+      token?.collectionSymbol === undefined ||
+      token?.address === undefined ||
+      token?.id === undefined
+    ) {
+      cardContent = prettyLoadMap[prettyLoadType];
+    } else {
+      cardContent = renderedComponents;
+    }
+  } else {
+    cardContent = renderedComponents;
+  }
+
+  return <div className={`flex flex-col bg-base-300 ${sizeMap[size]} ${beautyStyleMap[style]}`}>{cardContent}</div>;
+};