Skip to content

Commit c75d1a7

Browse files
luloxiluloxi
committed
UI improvements
1 parent 63b8abd commit c75d1a7

File tree

5 files changed

+91
-38
lines changed

5 files changed

+91
-38
lines changed

‎packages/nextjs/app/explore/Explore.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
99
import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
1010

1111
export interface Post extends Partial<NFTMetaData> {
12+
nftAddress?: string;
1213
postId?: number;
1314
uri: string;
1415
user: string;
15-
16+
price: string;
17+
amount: string;
1618
date?: string;
1719
}
1820

@@ -58,6 +60,8 @@ export const Explore = () => {
5860
const user = event.args?.user;
5961
const tokenURI = event.args?.tokenURI;
6062
const date = event.args?.date;
63+
const price = event.args?.price;
64+
const amount = event.args?.amount;
6165

6266
if (!tokenURI) continue;
6367

@@ -68,6 +72,8 @@ export const Explore = () => {
6872
postId: parseInt(event.args?.articleId?.toString() ?? "0"),
6973
uri: tokenURI,
7074
user: user || "",
75+
price: price?.toString() || "",
76+
amount: amount?.toString() || "",
7177
date: date?.toString() || "",
7278
...nftMetadata,
7379
});

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@ import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
1414

1515
export interface Post extends Partial<NFTMetaData> {
1616
listingId?: number;
17+
nftAddress?: string;
18+
postId?: number;
1719
uri: string;
1820
user: string;
21+
price: string;
22+
amount: string;
1923
date?: string;
2024
}
2125

@@ -65,6 +69,8 @@ const ProfilePage: NextPage = () => {
6569
const user = args?.user;
6670
const tokenURI = args?.tokenURI;
6771
const date = args?.date;
72+
const price = args?.price;
73+
const amount = args?.amount;
6874

6975
if (args?.user !== address) continue;
7076
if (!tokenURI) continue;
@@ -84,6 +90,8 @@ const ProfilePage: NextPage = () => {
8490
uri: tokenURI,
8591
user: user || "",
8692
date: date?.toString() || "",
93+
price: price?.toString() || "",
94+
amount: amount?.toString() || "",
8795
...nftMetadata,
8896
});
8997
} catch (e) {

‎packages/nextjs/components/Footer.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { usePathname } from "next/navigation";
44
import Create from "../app/create/Create";
55
import Modal from "../app/create/Modal";
66
import { useAccount } from "wagmi";
7-
import { HeartIcon } from "@heroicons/react/24/outline";
7+
import { HeartIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
88
import {
99
BellIcon,
1010
EnvelopeIcon,
@@ -114,21 +114,20 @@ export const Footer = () => {
114114
<footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-around items-center">
115115
<Link href="/not-found" passHref>
116116
<ShoppingCartIcon
117-
className={`h-6 w-6 text-red-600 ${
118-
pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
119-
}`}
117+
className={`h-6 w-6 text-red-600 ${pathname === "/cart" ? "text-blue-600" : "hover:text-blue-600"}`}
120118
/>
121119
</Link>
120+
122121
<Link href="/not-found" passHref>
123-
<EnvelopeIcon
122+
<BellIcon
124123
className={`h-6 w-6 text-red-600 ${
125124
pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
126125
}`}
127126
/>
128127
</Link>
129128

130129
<Link href="/not-found" passHref>
131-
<BellIcon
130+
<PlusIcon
132131
className={`h-6 w-6 text-red-600 ${
133132
pathname === "/notifications" ? "text-blue-600" : "hover:text-blue-600"
134133
}`}

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

Lines changed: 70 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,10 @@ import { useEffect, useRef, useState } from "react";
44
import Image from "next/image";
55
import Link from "next/link";
66
import BookmarkButton from "./BookmarkButton";
7-
// import CommentSection from "./CommentSection";
8-
// import LikeButton from "./LikedButton";
9-
// import { ProfileAddress } from "./ProfileAddress";
10-
import {
11-
// BookmarkIcon,
12-
// ChatBubbleLeftIcon,
13-
MagnifyingGlassPlusIcon,
14-
ShareIcon,
15-
ShoppingCartIcon,
16-
XMarkIcon,
17-
} from "@heroicons/react/24/outline";
18-
// import { ChatBubbleLeftIcon as ChatBubbleLeftSolidIcon } from "@heroicons/react/24/solid";
19-
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
7+
import { formatEther, parseEther } from "viem";
8+
import { useAccount } from "wagmi";
9+
import { MagnifyingGlassPlusIcon, ShareIcon, ShoppingCartIcon, XMarkIcon } from "@heroicons/react/24/outline";
10+
import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
2011
import { notification } from "~~/utils/scaffold-eth";
2112
import { NFTMetaData } from "~~/utils/simpleNFT/nftsMetadata";
2213

@@ -25,12 +16,17 @@ export interface Post extends Partial<NFTMetaData> {
2516
postId?: number;
2617
uri: string;
2718
user: string;
19+
price: string;
20+
amount: string;
2821
date?: string;
2922
}
3023

3124
export const PostCard = ({ post }: { post: Post }) => {
3225
const [isModalOpen, setIsModalOpen] = useState(false);
33-
// const [showCommentSection, setShowCommentSection] = useState(false);
26+
const [loading, setLoading] = useState(false);
27+
28+
const { address: connectedAddress } = useAccount();
29+
const { writeContractAsync } = useScaffoldWriteContract("BasedShop");
3430

3531
const { data: profileInfo } = useScaffoldReadContract({
3632
contractName: "BasedProfile",
@@ -39,6 +35,20 @@ export const PostCard = ({ post }: { post: Post }) => {
3935
watch: true,
4036
});
4137

38+
const { data: articlePrice } = useScaffoldReadContract({
39+
contractName: "BasedShop",
40+
functionName: "articlePrices",
41+
args: [BigInt(post.postId || 0)],
42+
watch: true,
43+
});
44+
45+
const { data: articleAmount } = useScaffoldReadContract({
46+
contractName: "BasedShop",
47+
functionName: "articleAmounts",
48+
args: [BigInt(post.postId || 0)],
49+
watch: true,
50+
});
51+
4252
const defaultProfilePicture = "/guest-profile.jpg";
4353

4454
const profilePicture = profileInfo && profileInfo[2] ? profileInfo[2] : defaultProfilePicture;
@@ -51,10 +61,6 @@ export const PostCard = ({ post }: { post: Post }) => {
5161
setIsModalOpen(false);
5262
};
5363

54-
// const toggleCommentSection = () => {
55-
// setShowCommentSection(!showCommentSection);
56-
// };
57-
5864
const handleShare = async () => {
5965
if (navigator.share) {
6066
try {
@@ -77,6 +83,32 @@ export const PostCard = ({ post }: { post: Post }) => {
7783
}
7884
};
7985

86+
const handleBuyArticle = async () => {
87+
if (!connectedAddress) {
88+
notification.error("Please connect your wallet");
89+
return;
90+
}
91+
92+
setLoading(true);
93+
94+
try {
95+
const contractResponse = await writeContractAsync({
96+
functionName: "buyArticle",
97+
args: [BigInt(post.postId || 0)],
98+
value: articlePrice,
99+
});
100+
101+
if (contractResponse) {
102+
notification.success("Posted successfully!");
103+
}
104+
} catch (error) {
105+
console.error("Error during posting:", error);
106+
notification.error("Posting failed, please try again.");
107+
} finally {
108+
setLoading(false);
109+
}
110+
};
111+
80112
const formatDate = (timestamp: number): string => {
81113
const date = new Date(timestamp * 1000); // Convert to milliseconds
82114
return date.toLocaleDateString(); // Format the date as needed
@@ -124,7 +156,10 @@ export const PostCard = ({ post }: { post: Post }) => {
124156
</div>
125157
)}
126158
<div className="flex flex-col justify-center w-2/3 pl-4">
127-
<p className="my-0 text-lg">{post.description ?? "No description available."}</p>
159+
<span className="my-0 text-lg">{post.description ?? "No description available."}</span>
160+
<span className="text-md italic">
161+
On stock: <span className="font-bold">{articleAmount?.toString()}</span> units
162+
</span>
128163
</div>
129164
</div>
130165

@@ -139,24 +174,28 @@ export const PostCard = ({ post }: { post: Post }) => {
139174
<BookmarkButton postId={BigInt(post.postId || 0)} />
140175
</div>
141176

142-
{/* <div className="flex items-center gap-3">
143-
<LikeButton postId={BigInt(post.postId || 0)} />
144-
<button onClick={toggleCommentSection} className="icon-button">
145-
{showCommentSection ? (
146-
<ChatBubbleLeftSolidIcon className="comment-icon text-blue-600" />
147-
) : (
148-
<ChatBubbleLeftIcon className="comment-icon" />
149-
)}
150-
</button>
151-
</div> */}
152177
<div className="flex items-center gap-3">
153-
<button className="px-4 py-2 rounded-lg bg-red-600 text-white">Buy</button>
178+
{articlePrice !== null && (
179+
<div className="flex items-center">
180+
<span className="text-lg font-semibold">
181+
{articlePrice !== undefined ? formatEther(articlePrice) : "N/A"}
182+
</span>
183+
<Image src="/ethereumlogo.svg" alt="ETH Logo" width={20} height={20} className="ml-2" />
184+
</div>
185+
)}
186+
<button
187+
disabled={loading}
188+
onClick={handleBuyArticle}
189+
className="px-4 py-2 rounded-lg bg-green-600 text-white"
190+
>
191+
Buy
192+
</button>
193+
154194
<button className="p-2 rounded-full bg-red-600 text-white">
155195
<ShoppingCartIcon className="h-5 w-5" />
156196
</button>
157197
</div>
158198
</div>
159-
{/* {showCommentSection && <CommentSection postId={BigInt(post.postId || 0)} />} */}
160199
</div>
161200

162201
{/* Modal for fullscreen image */}

‎packages/nextjs/public/ethereumlogo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)