Several UI improvements, first version of a user profile

packages/nextjs/app/layout.tsx

@@ -5,7 +5,7 @@ import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({
-  title: "Scaffold-ETH 2 App",
+  title: "Technai",
   description: "Built with 🏗 Scaffold-ETH 2",
 });
 

packages/nextjs/app/marketplace/_components/Marketplace.tsx

@@ -2,6 +2,9 @@
 
 import { useEffect, useState } from "react";
 import { NFTCard } from "./NFTCard";
+import { MarketplaceDescription } from "./marketplaceDescription";
+import { useAccount } from "wagmi";
+import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useScaffoldContract, useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
@@ -20,6 +23,8 @@ export interface Collectible extends Partial<NFTMetaData> {
 }
 
 export const Marketplace = () => {
+  const { address: isConnected, isConnecting } = useAccount();
+
   const [listedCollectibles, setListedCollectibles] = useState<Collectible[]>([]);
 
   // Fetch the collectible contract
@@ -150,6 +155,8 @@ export const Marketplace = () => {
 
   return (
     <>
+      <MarketplaceDescription />
+      <div className="flex justify-center">{!isConnected || isConnecting ? <RainbowKitCustomConnectButton /> : ""}</div>
       {listedCollectibles.length === 0 ? (
         <div className="flex justify-center items-center mt-10">
           <div className="text-2xl text-primary-content">No NFTs found</div>

packages/nextjs/app/marketplace/_components/NFTCard.tsx

@@ -77,7 +77,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
           </a>
         )}
         <a
-          className={`tab tab-bordered ${activeTab === "info" ? "bg-yellow-600" : ""}`}
+          className={`tab tab-bordered ${activeTab === "info" ? "bg-blue-600" : ""}`}
           onClick={() => setActiveTab("info")}
         >
           Info
@@ -131,10 +131,6 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
         <div>
           <figure className="relative">
             <img src={nft.image} alt="NFT Image" className="h-60 min-w-full" />
-            <figcaption className="glass absolute bottom-4 left-4 p-4 w-25 rounded-xl">
-              <span className="text-white "># {nft.listingId ?? "N/A"}</span>{" "}
-              {/* Display 'N/A' if listingId is missing */}
-            </figcaption>
           </figure>
           <div className="card-body space-y-3">
             {nft.animation_url && (
@@ -184,9 +180,22 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
             {/* Handle missing description */}
           </div>
           <div className="flex space-x-3 mt-1 items-center">
-            <span className="text-lg font-semibold">Owner : </span>
-            <Address address={nft.owner} />
+            {nft.listingId ? (
+              <>
+                <span className="text-lg font-semibold">Owner: </span>
+                <Address address={nft.owner} />
+              </>
+            ) : (
+              <>
+                <span className="text-lg font-semibold">Artist: </span>
+                <Address address={nft.owner} />
+              </>
+            )}
           </div>
+          {/* <div className="flex space-x-3 mt-1 items-center">
+            <span className="text-lg font-semibold">Listing ID : </span>
+            <span className="text-lg  ">{nft.listingId ?? "N/A"}</span>{" "}
+          </div> */}
         </div>
       )}
     </div>

packages/nextjs/app/marketplace/_components/marketplaceDescription.tsx

@@ -0,0 +1,51 @@
+export const MarketplaceDescription = () => {
+  return (
+    <div className="self-center md:w-full collapse bg-base-300">
+      <input type="checkbox" />
+      <div className="collapse-title text-center text-xl font-medium">
+        New to NFT Marketplaces? <strong className="text-green-500">Click here!</strong>
+      </div>
+      <div className="collapse-content">
+        {/* Responsive 2-column layout, becomes 1 column on small screens */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center">
+          {/* Left column: Green highlights */}
+          <div className="flex flex-col">
+            <p>
+              NFTs, or Non-Fungible Tokens,{" "}
+              <strong className="text-green-600">represent ownership of a piece of content or art</strong>.
+              <br />
+              Collectors can <strong className="text-green-600">mint or trade each piece</strong> of a NFT collection.
+            </p>
+            <p>
+              NFTs allow artists to <strong className="text-green-600">earn royalties</strong> each time their work is
+              resold.
+              <br />
+              This gives artists continuous <strong className="text-green-600">income beyond the first sale</strong>.
+            </p>
+          </div>
+
+          {/* Right column: Yellow highlights */}
+          <div className="flex flex-col">
+            <p>
+              Collectors can <strong className="text-green-600">mint</strong> or{" "}
+              <strong className="text-red-600">trade</strong> each piece of a NFT collection.
+              <br />
+              Minting means <strong className="text-green-600">
+                creating and owning a new piece of a collection
+              </strong>{" "}
+              which <strong className="text-red-600">is tradeable</strong>
+            </p>
+            <p>
+              You can choose <strong className="text-green-600">to mint an NFT of a collection</strong> (if still
+              available)
+              <br />
+              <span>
+                or <strong className="text-red-600">buy an NFT</strong> that was minted by someone else.
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/marketplace/page.tsx

@@ -1,17 +1,15 @@
-"use client";
-
 import { Marketplace } from "./_components/Marketplace";
 import type { NextPage } from "next";
-import { useAccount } from "wagmi";
-import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
-const MarketplacePage: NextPage = () => {
-  const { address: isConnected, isConnecting } = useAccount();
-  // const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+export const metadata = getMetadata({
+  title: "Marketplace",
+  description: "Built with 🏗 Scaffold-ETH 2",
+});
 
+const MarketplacePage: NextPage = () => {
   return (
     <>
-      <div className="flex justify-center">{!isConnected || isConnecting ? <RainbowKitCustomConnectButton /> : ""}</div>
       <Marketplace />
     </>
   );

packages/nextjs/app/myNFTs/_components/MyHoldings.tsx → packages/nextjs/app/myProfile/_components/MyHoldings.tsx

@@ -18,7 +18,7 @@ export const MyHoldings = () => {
   const { address: connectedAddress } = useAccount();
   const [myAllCollectibles, setMyAllCollectibles] = useState<Collectible[]>([]);
   const [allCollectiblesLoading, setAllCollectiblesLoading] = useState(false);
-  const [showOnlyMyNFTs, setShowOnlyMyNFTs] = useState(false);
+  // const [showOnlyMyNFTs, setShowOnlyMyNFTs] = useState(true); // When false, displays all NFTs of the MockNFT collection
 
   const { data: yourCollectibleContract } = useScaffoldContract({
     contractName: "MockNFT",
@@ -46,9 +46,9 @@ export const MyHoldings = () => {
           const tokenURI = await yourCollectibleContract.read.tokenURI([tokenId]);
           const owner = await yourCollectibleContract.read.ownerOf([tokenId]);
 
-          if (showOnlyMyNFTs && owner.toLowerCase() !== connectedAddress.toLowerCase()) {
-            continue;
-          }
+          // if (showOnlyMyNFTs && owner.toLowerCase() !== connectedAddress.toLowerCase()) {
+          //   continue;
+          // }
 
           const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
 
@@ -73,7 +73,8 @@ export const MyHoldings = () => {
     };
 
     updateMyCollectibles();
-  }, [connectedAddress, showOnlyMyNFTs, myTotalBalance]); // Watching balance to update NFTs
+    // }, [connectedAddress, showOnlyMyNFTs, myTotalBalance]); // Watching balance to update NFTs
+  }, [connectedAddress, myTotalBalance]); // Watching balance to update NFTs
 
   if (allCollectiblesLoading)
     return (
@@ -84,7 +85,7 @@ export const MyHoldings = () => {
 
   return (
     <>
-      <div className="flex justify-center items-center mt-4">
+      {/* <div className="flex justify-center items-center mt-4">
         <label className="text-primary-content text-xl">
           <input
             type="checkbox"
@@ -94,7 +95,7 @@ export const MyHoldings = () => {
           />
           Show only my NFTs
         </label>
-      </div>
+      </div> */}
       {myAllCollectibles.length === 0 ? (
         <div className="flex justify-center items-center mt-10">
           <div className="text-2xl text-primary-content">No NFTs found</div>