Added rainbowconnector to profile and menu close on outside click, wh…

…at else do you wanna know?
luloxi · Sep 29, 2024 · c1b7483 · c1b7483
1 parent fd71cb5
commit c1b7483
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/packages/nextjs/app/profile/[address]/page.tsx b/packages/nextjs/app/profile/[address]/page.tsx
@@ -9,7 +9,7 @@ import ProfilePictureUpload from "../_components/ProfilePictureUpload";
 import { NextPage } from "next";
 import { useAccount } from "wagmi";
 import { PencilIcon } from "@heroicons/react/24/outline";
-import { Address } from "~~/components/scaffold-eth";
+import { Address, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { InputBase } from "~~/components/scaffold-eth";
 import { useScaffoldEventHistory, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
@@ -178,27 +178,29 @@ const ProfilePage: NextPage = () => {
               setProfilePicture={setProfilePicture}
             />
           </div>
-          {/* <div className="avatar mr-4 md:mr-8">
-          <div className="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
-            <ProfilePictureUpload profilePicture={profilePicture} setProfilePicture={setProfilePicture} />
-          </div>
-        </div> */}
           {/* User Info Section */}
           <div className="flex flex-col justify-center items-center">
             {isEditing ? (
               <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
             ) : (
               <>
                 <h2 className="text-2xl font-bold">{username || "Guest user"}</h2>
-                <div className="text-base-content">
-                  <Address address={address} />
-                </div>
-                <p className={`text-base-content ${bio ? "" : "text-red-600"}`}>{bio || "no biography available"}</p>
+
+                {bio && <p className="text-base-content">{bio}</p>}
                 {website && (
                   <a href={website} target="_blank" rel="noopener noreferrer" className="text-blue-600">
                     {website}
                   </a>
                 )}
+                <div className="mt-2">
+                  {address == connectedAddress ? (
+                    <RainbowKitCustomConnectButton />
+                  ) : (
+                    <div className="text-base-content">
+                      <Address address={address} />
+                    </div>
+                  )}
+                </div>
               </>
             )}
           </div>

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -14,13 +14,8 @@ import { useOutsideClick, useScaffoldReadContract, useTargetNetwork } from "~~/h
  * Site header
  */
 export const Header = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isSettingsMenuOpen, setIsSettingsMenuOpen] = useState(false);
 
-  const toggleSettingsMenu = () => {
-    setIsSettingsMenuOpen(!isSettingsMenuOpen);
-  };
-
   const { address: connectedAddress } = useAccount();
 
   const { data: profileInfo } = useScaffoldReadContract({
@@ -38,15 +33,15 @@ export const Header = () => {
 
   const pathname = usePathname();
 
-  const handleMenuToggle = () => {
-    setIsMenuOpen(!isMenuOpen);
+  const toggleSettingsMenu = () => {
+    setIsSettingsMenuOpen(!isSettingsMenuOpen);
   };
 
-  const handleMenuClose = () => {
-    setIsMenuOpen(false);
+  const closeSettingsMenu = () => {
+    setIsSettingsMenuOpen(false);
   };
 
-  useOutsideClick(menuRef, handleMenuClose);
+  useOutsideClick(menuRef, closeSettingsMenu);
 
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === hardhat.id;
@@ -117,7 +112,6 @@ export const Header = () => {
           <Link href={`/profile/${connectedAddress}`} passHref>
             <div
               className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
-              onClick={handleMenuToggle}
               style={{
                 backgroundImage: `url(${profilePicture})`,
                 backgroundSize: "cover",