set up testing grounds

packages/nextjs/app/testing-grounds/page.tsx

@@ -3,6 +3,10 @@
 import { useState } from "react";
 import type { NextPage } from "next";
 import { NftCard } from "~~/components/nft-card/NftCard";
+import { AddressCard, AddressCardProps } from "~~/components/nft-card/values/AddressCard";
+import { CollectionNameCard, CollectionNameCardProps } from "~~/components/nft-card/values/CollectionNameCard";
+import { CollectionSymbolCard, CollectionSymbolCardProps } from "~~/components/nft-card/values/CollectionSymbolCard";
+import { CollectionDetails } from "~~/components/nft-card/values/extensions/CollectionDetails";
 // import { NameCard, NameCardProps } from "~~/components/NftCardValue/NameCard";
 import { useTokens } from "~~/hooks/useToken";
 
@@ -17,6 +21,18 @@ const inputOptions: any[] = [
   "CollectionSymbol",
 ];
 
+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" />;
+};
+
 const TestingGrounds: NextPage = () => {
   const [checkeds, setCheckeds] = useState<boolean[]>([true, true, true, true, true, true, true, true]);
 
@@ -54,7 +70,7 @@ const TestingGrounds: NextPage = () => {
   // const token = useToken(BigInt(1), "w3s");
 
   const arr = [];
-  for (let i = 1; i <= 4; i++) {
+  for (let i = 1; i <= 10; i++) {
     arr.push(BigInt(i));
   }
   const tokens = useTokens(arr, "w3s");
@@ -66,6 +82,17 @@ const TestingGrounds: NextPage = () => {
   return (
     <div className="flex flex-col justify-center items-center">
       <div className="flex flex-wrap">{inputComponents}</div>
+      <div className="w-full">
+        <CollectionDetails
+          token={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]">
         {tokensComponents}
         {/* <NftCard token={token} /> */}

packages/nextjs/contracts/deployedContracts.ts

@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     Constraints: {
-      address: "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9",
+      address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
       abi: [
         {
           type: "function",
@@ -42,7 +42,7 @@ const deployedContracts = {
       inheritedFunctions: {},
     },
     ScaffoldERC721: {
-      address: "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9",
+      address: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
       abi: [
         {
           type: "constructor",