UI improvements

packages/nextjs/app/explore/Explore.tsx

@@ -9,10 +9,12 @@ import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
 
 export interface Post extends Partial<NFTMetaData> {
+  nftAddress?: string;
   postId?: number;
   uri: string;
   user: string;
-
+  price: string;
+  amount: string;
   date?: string;
 }
 
@@ -58,6 +60,8 @@ export const Explore = () => {
             const user = event.args?.user;
             const tokenURI = event.args?.tokenURI;
             const date = event.args?.date;
+            const price = event.args?.price;
+            const amount = event.args?.amount;
 
             if (!tokenURI) continue;
 
@@ -68,6 +72,8 @@ export const Explore = () => {
               postId: parseInt(event.args?.articleId?.toString() ?? "0"),
               uri: tokenURI,
               user: user || "",
+              price: price?.toString() || "",
+              amount: amount?.toString() || "",
               date: date?.toString() || "",
               ...nftMetadata,
             });

packages/nextjs/app/profile/[address]/page.tsx

@@ -14,8 +14,12 @@ import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
 
 export interface Post extends Partial<NFTMetaData> {
   listingId?: number;
+  nftAddress?: string;
+  postId?: number;
   uri: string;
   user: string;
+  price: string;
+  amount: string;
   date?: string;
 }
 
@@ -65,6 +69,8 @@ const ProfilePage: NextPage = () => {
             const user = args?.user;
             const tokenURI = args?.tokenURI;
             const date = args?.date;
+            const price = args?.price;
+            const amount = args?.amount;
 
             if (args?.user !== address) continue;
             if (!tokenURI) continue;
@@ -84,6 +90,8 @@ const ProfilePage: NextPage = () => {
               uri: tokenURI,
               user: user || "",
               date: date?.toString() || "",
+              price: price?.toString() || "",
+              amount: amount?.toString() || "",
               ...nftMetadata,
             });
           } catch (e) {

packages/nextjs/components/Footer.tsx

@@ -4,7 +4,7 @@ import { usePathname } from "next/navigation";
 import Create from "../app/create/Create";
 import Modal from "../app/create/Modal";
 import { useAccount } from "wagmi";
-import { HeartIcon } from "@heroicons/react/24/outline";
+import { HeartIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import {
   BellIcon,
   EnvelopeIcon,
@@ -114,21 +114,20 @@ export const Footer = () => {
       <footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-around items-center">
         <Link href="/not-found" passHref>
           <ShoppingCartIcon
-            className={`h-6 w-6 text-red-600 ${
-              pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
-            }`}
+            className={`h-6 w-6 text-red-600 ${pathname === "/cart" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
+
         <Link href="/not-found" passHref>
-          <EnvelopeIcon
+          <BellIcon
             className={`h-6 w-6 text-red-600 ${
               pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
             }`}
           />
         </Link>
 
         <Link href="/not-found" passHref>
-          <BellIcon
+          <PlusIcon
             className={`h-6 w-6 text-red-600 ${
               pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
             }`}

packages/nextjs/components/punk-society/PostCard.tsx

@@ -4,19 +4,10 @@ import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import BookmarkButton from "./BookmarkButton";
-// import CommentSection from "./CommentSection";
-// import LikeButton from "./LikedButton";
-// import { ProfileAddress } from "./ProfileAddress";
-import {
-  // BookmarkIcon,
-  // ChatBubbleLeftIcon,
-  MagnifyingGlassPlusIcon,
-  ShareIcon,
-  ShoppingCartIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-// import { ChatBubbleLeftIcon as ChatBubbleLeftSolidIcon } from "@heroicons/react/24/solid";
-import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import { formatEther, parseEther } from "viem";
+import { useAccount } from "wagmi";
+import { MagnifyingGlassPlusIcon, ShareIcon, ShoppingCartIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
 
@@ -25,12 +16,17 @@ export interface Post extends Partial<NFTMetaData> {
   postId?: number;
   uri: string;
   user: string;
+  price: string;
+  amount: string;
   date?: string;
 }
 
 export const PostCard = ({ post }: { post: Post }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // const [showCommentSection, setShowCommentSection] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { address: connectedAddress } = useAccount();
+  const { writeContractAsync } = useScaffoldWriteContract("BasedShop");
 
   const { data: profileInfo } = useScaffoldReadContract({
     contractName: "BasedProfile",
@@ -39,6 +35,20 @@ export const PostCard = ({ post }: { post: Post }) => {
     watch: true,
   });
 
+  const { data: articlePrice } = useScaffoldReadContract({
+    contractName: "BasedShop",
+    functionName: "articlePrices",
+    args: [BigInt(post.postId || 0)],
+    watch: true,
+  });
+
+  const { data: articleAmount } = useScaffoldReadContract({
+    contractName: "BasedShop",
+    functionName: "articleAmounts",
+    args: [BigInt(post.postId || 0)],
+    watch: true,
+  });
+
   const defaultProfilePicture = "/guest-profile.jpg";
 
   const profilePicture = profileInfo && profileInfo[2] ? profileInfo[2] : defaultProfilePicture;
@@ -51,10 +61,6 @@ export const PostCard = ({ post }: { post: Post }) => {
     setIsModalOpen(false);
   };
 
-  // const toggleCommentSection = () => {
-  //   setShowCommentSection(!showCommentSection);
-  // };
-
   const handleShare = async () => {
     if (navigator.share) {
       try {
@@ -77,6 +83,32 @@ export const PostCard = ({ post }: { post: Post }) => {
     }
   };
 
+  const handleBuyArticle = async () => {
+    if (!connectedAddress) {
+      notification.error("Please connect your wallet");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const contractResponse = await writeContractAsync({
+        functionName: "buyArticle",
+        args: [BigInt(post.postId || 0)],
+        value: articlePrice,
+      });
+
+      if (contractResponse) {
+        notification.success("Posted successfully!");
+      }
+    } catch (error) {
+      console.error("Error during posting:", error);
+      notification.error("Posting failed, please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const formatDate = (timestamp: number): string => {
     const date = new Date(timestamp * 1000); // Convert to milliseconds
     return date.toLocaleDateString(); // Format the date as needed
@@ -124,7 +156,10 @@ export const PostCard = ({ post }: { post: Post }) => {
             </div>
           )}
           <div className="flex flex-col justify-center w-2/3 pl-4">
-            <p className="my-0 text-lg">{post.description ?? "No description available."}</p>
+            <span className="my-0 text-lg">{post.description ?? "No description available."}</span>
+            <span className="text-md italic">
+              On stock: <span className="font-bold">{articleAmount?.toString()}</span> units
+            </span>
           </div>
         </div>
 
@@ -139,24 +174,28 @@ export const PostCard = ({ post }: { post: Post }) => {
               <BookmarkButton postId={BigInt(post.postId || 0)} />
             </div>
 
-            {/* <div className="flex items-center gap-3">
-              <LikeButton postId={BigInt(post.postId || 0)} />
-              <button onClick={toggleCommentSection} className="icon-button">
-                {showCommentSection ? (
-                  <ChatBubbleLeftSolidIcon className="comment-icon text-blue-600" />
-                ) : (
-                  <ChatBubbleLeftIcon className="comment-icon" />
-                )}
-              </button>
-            </div> */}
             <div className="flex items-center gap-3">
-              <button className="px-4 py-2 rounded-lg bg-red-600 text-white">Buy</button>
+              {articlePrice !== null && (
+                <div className="flex items-center">
+                  <span className="text-lg font-semibold">
+                    {articlePrice !== undefined ? formatEther(articlePrice) : "N/A"}
+                  </span>
+                  <Image src="/ethereumlogo.svg" alt="ETH Logo" width={20} height={20} className="ml-2" />
+                </div>
+              )}
+              <button
+                disabled={loading}
+                onClick={handleBuyArticle}
+                className="px-4 py-2 rounded-lg bg-green-600 text-white"
+              >
+                Buy
+              </button>
+
               <button className="p-2 rounded-full bg-red-600 text-white">
                 <ShoppingCartIcon className="h-5 w-5" />
               </button>
             </div>
           </div>
-          {/* {showCommentSection && <CommentSection postId={BigInt(post.postId || 0)} />} */}
         </div>
 
         {/* Modal for fullscreen image */}