Show NFTs to children and add html skeleton for NFT list

Author: danitome24

packages/nextjs/app/nfts/page.tsx

@@ -37,11 +37,6 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/perks",
     visibleTo: "parent",
   },
-  {
-    label: "NFTs",
-    href: "/nfts",
-    visibleTo: "child",
-  },
   {
     label: "Debug Contracts",
     href: "/debug",

packages/nextjs/components/Header.tsx

@@ -1,4 +1,5 @@
 import { ContentHeader, PerksListGrid, TasksList, TasksProgress, TokensBalance } from ".";
+import { NftList } from "./ChildDashboard/NftList";
 import { useAccount } from "wagmi";
 import { useTaskManager, useTokenBalance } from "~~/hooks/kiddo-perks";
 
@@ -26,6 +27,40 @@ export const ChildDashboard = () => {
       </div>
       <TasksList />
       <PerksListGrid childTokens={rawTokenBalance} />
+      <NftList
+        availableNfts={[
+          {
+            id: "1",
+            image: "/images/nft1.png",
+            name: "Super Star NFT",
+            description: "A special NFT for completing 5 tasks.",
+            cost: 10,
+            isMinted: false,
+            canBeMinted: true,
+          },
+          {
+            id: "2",
+            image: "/images/nft2.png",
+            name: "Task Master",
+            description: "Awarded for completing all tasks this week.",
+            cost: 20,
+            isMinted: false,
+            canBeMinted: false,
+          },
+          {
+            id: "3",
+            image: "/images/nft3.png",
+            name: "Legendary Helper",
+            description: "Given to children who help every day for a month.",
+            cost: 50,
+            isMinted: true,
+            canBeMinted: false,
+          },
+        ]}
+        onMint={nftId => {
+          console.log(`Minting NFT with ID: ${nftId}`);
+        }}
+      />
     </div>
   );
 };

packages/nextjs/components/kiddo-perks/ChildDashboard.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Image from "next/image";
+
+interface NftItem {
+  id: string;
+  image: string;
+  name: string;
+  description: string;
+  cost: number; // Cost in KDO tokens
+  isMinted: boolean; // Indicates if the NFT is already minted by the user
+  canBeMinted: boolean; // Determines if the user has enough tokens to mint
+}
+
+interface NftListProps {
+  availableNfts: NftItem[];
+  onMint: (nftId: string) => void; // Callback to handle NFT minting
+}
+
+export const NftList: React.FC<NftListProps> = ({ availableNfts, onMint }) => {
+  return (
+    <section className="mt-6">
+      <h2 className="text-lg font-semibold mb-4 text-secondary">Available NFTs</h2>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {availableNfts.map(nft => (
+          <div key={nft.id} className="flex items-center bg-base-200 rounded-lg shadow-md p-4">
+            <Image
+              width={20}
+              height={20}
+              src={nft.image}
+              alt={nft.name}
+              className="w-20 h-20 object-cover rounded-md mr-4"
+            />
+            <div className="flex-1">
+              <h3 className="text-primary font-semibold text-md">{nft.name}</h3>
+              <p className="text-neutral text-sm">{nft.description}</p>
+              <div className="mt-2">
+                <span className="badge badge-secondary">Cost: {nft.cost} KDO</span>
+              </div>
+            </div>
+            <div className="ml-4">
+              {nft.isMinted ? (
+                <button className="btn btn-disabled btn-success">Minted</button>
+              ) : nft.canBeMinted ? (
+                <button className="btn btn-primary btn-sm" onClick={() => onMint(nft.id)}>
+                  Mint
+                </button>
+              ) : (
+                <button className="btn btn-disabled btn-sm">Cannot Mint</button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

packages/nextjs/components/kiddo-perks/ChildDashboard/NftList.tsx

@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     KDOToken: {
-      address: "0xe1da8919f262ee86f9be05059c9280142cf23f48",
+      address: "0x700b6a60ce7eaaea56f065753d8dcb9653dbad35",
       abi: [
         {
           type: "constructor",
@@ -450,11 +450,37 @@ const deployedContracts = {
       },
     },
     KDONft: {
-      address: "0x0c8e79f3534b00d9a3d4a856b665bf4ebc22f2ba",
+      address: "0xa15bb66138824a1c7167f5e85b957d04dd34e468",
       abi: [
         {
           type: "constructor",
-          inputs: [],
+          inputs: [
+            {
+              name: "fiveSvgImageUri",
+              type: "string",
+              internalType: "string",
+            },
+            {
+              name: "tenSvgImageUri",
+              type: "string",
+              internalType: "string",
+            },
+            {
+              name: "twentySvgImageUri",
+              type: "string",
+              internalType: "string",
+            },
+            {
+              name: "fiftySvgImageUri",
+              type: "string",
+              internalType: "string",
+            },
+            {
+              name: "hundredSvgImageUri",
+              type: "string",
+              internalType: "string",
+            },
+          ],
           stateMutability: "nonpayable",
         },
         {
@@ -638,6 +664,25 @@ const deployedContracts = {
           ],
           stateMutability: "view",
         },
+        {
+          type: "function",
+          name: "s_tokenIdToMilestone",
+          inputs: [
+            {
+              name: "tokenId",
+              type: "uint256",
+              internalType: "uint256",
+            },
+          ],
+          outputs: [
+            {
+              name: "taskMilestone",
+              type: "uint8",
+              internalType: "enum KDONft.TaskMilestone",
+            },
+          ],
+          stateMutability: "view",
+        },
         {
           type: "function",
           name: "safeTransferFrom",
@@ -1022,7 +1067,7 @@ const deployedContracts = {
       },
     },
     KiddoPerks: {
-      address: "0xed1db453c3156ff3155a97ad217b3087d5dc5f6e",
+      address: "0xb19b36b1456e65e3a6d514d3f715f204bd59f431",
       abi: [
         {
           type: "constructor",