From b655fa5d740f832f850741870876ff743fc6fcb4 Mon Sep 17 00:00:00 2001 From: Lulox Date: Sun, 29 Sep 2024 19:11:07 -0300 Subject: [PATCH] UI improvements not made on a rush, looking better now --- .../explore/_components/ProfileAddress.tsx | 60 +++++--------- .../nextjs/app/profile/[address]/page.tsx | 22 +++--- .../_components/ProfilePictureUpload.tsx | 78 +++++++++++++++++-- packages/nextjs/next.config.js | 32 ++++++-- 4 files changed, 130 insertions(+), 62 deletions(-) diff --git a/packages/nextjs/app/explore/_components/ProfileAddress.tsx b/packages/nextjs/app/explore/_components/ProfileAddress.tsx index 2955ffa..734591b 100644 --- a/packages/nextjs/app/explore/_components/ProfileAddress.tsx +++ b/packages/nextjs/app/explore/_components/ProfileAddress.tsx @@ -1,12 +1,9 @@ "use client"; -import { useEffect, useState } from "react"; +import Image from "next/image"; import Link from "next/link"; import { Address as AddressType, getAddress, isAddress } from "viem"; import { hardhat } from "viem/chains"; -import { normalize } from "viem/ens"; -import { useEnsAvatar, useEnsName } from "wagmi"; -import { BlockieAvatar } from "~~/components/scaffold-eth"; import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; @@ -31,10 +28,10 @@ const blockieSizeMap = { * Displays an address (or ENS) with a Blockie image and option to copy address. */ export const ProfileAddress = ({ address, disableAddressLink, format, size = "base" }: AddressProps) => { - // const [ens, setEns] = useState(); - const [ensAvatar, setEnsAvatar] = useState(); const checkSumAddress = address ? getAddress(address) : undefined; + const defaultProfilePicture = "/guest-profile.jpg"; + const { targetNetwork } = useTargetNetwork(); const { data: profileInfo } = useScaffoldReadContract({ @@ -44,31 +41,6 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba watch: true, }); - const { data: fetchedEns } = useEnsName({ - address: checkSumAddress, - chainId: 1, - query: { - enabled: isAddress(checkSumAddress ?? ""), - }, - }); - const { data: fetchedEnsAvatar } = useEnsAvatar({ - name: fetchedEns ? normalize(fetchedEns) : undefined, - chainId: 1, - query: { - enabled: Boolean(fetchedEns), - gcTime: 30_000, - }, - }); - - // We need to apply this pattern to avoid Hydration errors. - // useEffect(() => { - // setEns(fetchedEns); - // }, [fetchedEns]); - - useEffect(() => { - setEnsAvatar(fetchedEnsAvatar); - }, [fetchedEnsAvatar]); - // Skeleton UI if (!checkSumAddress) { return ( @@ -87,10 +59,6 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba let displayAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4); - // else if (ens) { - // displayAddress = ens; - // } - if (profileInfo && profileInfo[0] !== "") { displayAddress = profileInfo[0]; } else if (format === "long") { @@ -100,11 +68,23 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba return (
- + {profileInfo && profileInfo[2] ? ( + Profile Picture + ) : ( + Profile Picture + )}
{disableAddressLink ? ( {displayAddress} diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx index 0841cc5..37aa5f0 100644 --- a/packages/nextjs/app/profile/[address]/page.tsx +++ b/packages/nextjs/app/profile/[address]/page.tsx @@ -83,8 +83,11 @@ const ProfilePage: NextPage = () => { }; useEffect(() => { - const fetchListedNFTs = async () => { - if (!createEvents) return; + const fetchPosts = async () => { + if (!createEvents) { + // setLoading(false); + return; + } const postsUpdate: Post[] = []; @@ -113,9 +116,10 @@ const ProfilePage: NextPage = () => { } setListedPosts(postsUpdate); + setLoading(false); }; - fetchListedNFTs(); + fetchPosts(); }, [createEvents, address, connectedAddress]); useEffect(() => { @@ -235,16 +239,16 @@ const ProfilePage: NextPage = () => { )}
- {loading && } + {/* {loading && } */} - {listedPosts.length === 0 ? ( + {loading ? ( + + ) : listedPosts.length !== 0 ? ( + + ) : (
No posts found
- ) : loading ? ( - - ) : ( - )} ); diff --git a/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx index 29e611e..c0ece7a 100644 --- a/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx +++ b/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Image from "next/image"; import { uploadToPinata } from "~~/utils/pinata-upload"; import { notification } from "~~/utils/scaffold-eth"; @@ -18,13 +18,19 @@ const ProfilePictureUpload: React.FC = ({ }) => { const defaultProfilePicture = "/guest-profile.jpg"; - const [previewImage, setPreviewImage] = useState( - profilePicture != "" ? profilePicture : defaultProfilePicture, - ); + const [previewImage, setPreviewImage] = useState(""); const [dragActive, setDragActive] = useState(false); const [loading, setLoading] = useState(false); const [hovered, setHovered] = useState(false); + useEffect(() => { + if (profilePicture) { + setPreviewImage(profilePicture); + } else { + setPreviewImage(""); + } + }, [profilePicture]); + // Handle file drop or selection const handleFileUpload = async (file: File) => { const reader = new FileReader(); @@ -73,7 +79,7 @@ const ProfilePictureUpload: React.FC = ({ // Handle remove image const handleRemoveImage = () => { setProfilePicture(""); - setPreviewImage(null); + setPreviewImage(""); }; return ( @@ -88,10 +94,66 @@ const ProfilePictureUpload: React.FC = ({ onMouseLeave={() => setHovered(false)} > - {previewImage ? ( + {isEditing ? ( +
+ {previewImage ? ( + <> + Profile Picture + + + ) : ( + + )} +
+ ) : ( + Profile Picture + )} + {hovered && previewImage && ( + + )} + {loading && ( +
+ Uploading... +
+ )} + {/* {hovered && !isEditing && ( + + )} */} + {/* {previewImage ? (
Profile Pixar Preview = ({
Uploading...
- )} + )} */}
); }; diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js index 2eb0c3f..2938a1c 100644 --- a/packages/nextjs/next.config.js +++ b/packages/nextjs/next.config.js @@ -14,11 +14,6 @@ const nextConfig = { config.externals.push("pino-pretty", "lokijs", "encoding"); return config; }, -}; - -module.exports = nextConfig; - -module.exports = { images: { remotePatterns: [ { @@ -27,6 +22,33 @@ module.exports = { port: "", pathname: "/ipfs/**", }, + { + protocol: "https", + hostname: "gateway.pinata.cloud", + port: "", + pathname: "/ipfs/**", + }, ], }, }; + +module.exports = nextConfig; + +// module.exports = { +// images: { +// remotePatterns: [ +// { +// protocol: "https", +// hostname: "ipfs.io", +// port: "", +// pathname: "/ipfs/**", +// }, +// { +// protocol: "https", +// hostname: "gateway.pinata.cloud", +// port: "", +// pathname: "/ipfs/**", +// }, +// ], +// }, +// };