Added a circle profile picture with a menu

luloxi · Sep 23, 2024 · fd072ac · fd072ac
1 parent f2000e4
commit fd072ac
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git a/packages/nextjs/app/create/_components/ImageUploader.tsx b/packages/nextjs/app/create/_components/ImageUploader.tsx
@@ -111,7 +111,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ image, setUploaded
           <label className="w-full h-full flex flex-col items-center justify-center cursor-pointer">
             <span className="text-5xl h-auto rounded-full ">+</span>
             <span className="font-bold">Upload image</span>
-            <span className="">Max filesize: 2 MB</span>
+            <span className="">Max filesize: 5 MB</span>
             <input
               type="file"
               accept="image/*"

diff --git a/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx
@@ -118,7 +118,7 @@ export const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
           <label className="w-full h-full flex flex-col cursor-pointer text-xs m-0">
             <span className="text-5xl h-auto rounded-full ">+</span>
             <span className="font-bold">Upload image</span>
-            <span className="">Max filesize: 2 MB</span>
+            <span className="">Max filesize: 5 MB</span>
             <input
               type="file"
               accept="image/*"
@@ -129,7 +129,7 @@ export const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
         </div>
       ) : (
         <Image
-          src={defaultProfilePicture}
+          src={profilePicture ? profilePicture : defaultProfilePicture}
           alt="Profile Picture Preview"
           className="rounded-full object-cover"
           width={128}

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import React, { useCallback, useRef, useState } from "react";
-// import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+// import Image from "next/image";
+import { useAccount } from "wagmi";
 import { Bars3Icon, PhotoIcon, ShoppingBagIcon, UserIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
-import { useOutsideClick } from "~~/hooks/scaffold-eth";
+import { useOutsideClick, useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 type HeaderMenuLink = {
   label: string;
@@ -58,15 +59,36 @@ export const HeaderMenuLinks = () => {
  */
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const pathname = usePathname(); // Add this line to track the active route
 
+  const { address: connectedAddress, isConnected } = useAccount();
+
+  const { data: profileInfo } = useScaffoldReadContract({
+    contractName: "ProfileInfo",
+    functionName: "profiles",
+    args: [connectedAddress],
+    watch: true,
+  });
+
+  const defaultProfilePicture = "https://ipfs.io/ipfs/QmVCvzEQHFKzAYSsou8jEJtWdFj31n2XgPpbLjbZqui4YY";
+
+  const profilePicture = profileInfo ? profileInfo[2] : defaultProfilePicture;
+
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(
+    menuRef,
+    useCallback(() => setIsMenuOpen(false), []),
+  );
+
   return (
     <div className="sticky lg:sticky top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
@@ -113,22 +135,38 @@ export const Header = () => {
           <HeaderMenuLinks />
         </ul>
       </div>
-      <div className="navbar-end flex-grow mr-4 flex gap-2 items-center">
-        {/* My Profile link on desktop */}
-        <div className="hidden lg:flex items-center">
-          <Link
-            href="/myProfile"
-            className={`${
-              pathname === "/myProfile" ? "text-blue-600 font-bold" : ""
-            } hover:text-blue-600 font-bold  active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
-          >
-            <UserIcon className="h-4 w-4" />
-            <span>My Profile</span>
-          </Link>
-        </div>
 
-        <RainbowKitCustomConnectButton />
-        <FaucetButton />
+      <div className="navbar-end relative" ref={menuRef}>
+        {isConnected ? (
+          <div
+            className="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center cursor-pointer"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            style={{
+              backgroundImage: `url(${profilePicture})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }}
+          ></div>
+        ) : (
+          <RainbowKitCustomConnectButton />
+        )}
+        {isMenuOpen && isConnected && (
+          <div className="absolute right-0 top-10 mt-2 w-48 bg-base-100 shadow-lg rounded-lg">
+            <ul className="menu p-2">
+              <li>
+                <RainbowKitCustomConnectButton />
+              </li>
+              <li>
+                <div className="flex flex-row gap-2">
+                  <Link href="/myProfile" passHref>
+                    <span className="btn btn-secondary">My Profile</span>
+                  </Link>
+                  <FaucetButton />
+                </div>
+              </li>
+            </ul>
+          </div>
+        )}
       </div>
     </div>
   );