Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@luloxi
luloxi committed Sep 24, 2024
1 parent 3b10f80 commit 983e8aa
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 53 deletions.
14 changes: 8 additions & 6 deletions packages/nextjs/app/myProfile/MyProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { MyHoldings } from "./_components/MyHoldings";
import { ProfilePictureUpload } from "./_components/ProfilePictureUpload";
import { NextPage } from "next";
import { useAccount } from "wagmi";
import { PencilIcon } from "@heroicons/react/24/outline";
import { Address, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { InputBase } from "~~/components/scaffold-eth";
import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
Expand Down Expand Up @@ -135,7 +136,7 @@ export const MyProfile: NextPage = () => {
return (
<div className="flex flex-col items-center p-2">
{/* User Profile Section */}
<div className="relative flex flex-col md:flex-row items-start bg-base-100 p-6 rounded-lg shadow-md w-full">
<div className="relative flex flex-col md:flex-row items-center bg-base-100 p-6 rounded-lg shadow-md w-full">
{/* Profile Picture */}
<div className="avatar mr-4 md:mr-8">
<ProfilePictureUpload
Expand All @@ -151,7 +152,7 @@ export const MyProfile: NextPage = () => {
</div> */}

{/* User Info Section */}
<div className="flex flex-col justify-start">
<div className="flex flex-col justify-center items-center">
{isEditing ? (
<InputBase placeholder="Your Name" value={name} onChange={setName} />
) : (
Expand Down Expand Up @@ -193,11 +194,12 @@ export const MyProfile: NextPage = () => {
{/* Edit/Cancel Button */}
{isEditing ? (
<button className="absolute top-4 right-4 btn btn-secondary btn-sm" onClick={() => setIsEditing(false)}>
Cancel Edition
X Cancel
</button>
) : (
<button className="absolute top-4 right-4 btn btn-primary btn-sm" onClick={() => setIsEditing(true)}>
Edit Profile
<PencilIcon className="h-5 w-5" />
Edit
</button>
)}

Expand All @@ -211,7 +213,7 @@ export const MyProfile: NextPage = () => {
) : (
<div className="absolute bottom-2 right-4 flex items-center gap-2">
<button className="btn btn-primary btn-sm" onClick={handleMintUSDC}>
Mint test USDC
+
</button>

{/* Wrap Image in a div and set explicit width/height */}
Expand All @@ -232,7 +234,7 @@ export const MyProfile: NextPage = () => {

{/* Tabs Section */}
<div className="mt-2 md:px-4 w-full rounded-lg">
<div className="tabs justify-start flex-wrap border-b-2 border-base-300">
<div className="tabs justify-start flex-wrap border-b-2 border-base-300 overflow-x-auto">
<a
className={`tab tab-lifted text-lg whitespace-nowrap ${
activeTab === "your-nfts" ? "border-blue-600 font-bold text-blue-600" : ""
Expand Down
125 changes: 78 additions & 47 deletions packages/nextjs/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
"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 } from "@heroicons/react/24/outline";
// import { Bars3Icon } from "@heroicons/react/24/outline";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { useOutsideClick, useScaffoldReadContract } from "~~/hooks/scaffold-eth";
import { useOutsideClick, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
import { notification } from "~~/utils/scaffold-eth";

type HeaderMenuLink = {
label: string;
Expand Down Expand Up @@ -56,12 +58,13 @@ export const HeaderMenuLinks = () => {
* Site header
*/
export const Header = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
// 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 { writeContractAsync: usdcWriteAsync } = useScaffoldWriteContract("MockUSDC");

const { data: profileInfo } = useScaffoldReadContract({
contractName: "ProfileInfo",
Expand All @@ -70,69 +73,97 @@ export const Header = () => {
watch: true,
});

const { data: usdcBalance } = useScaffoldReadContract({
contractName: "MockUSDC",
functionName: "balanceOf",
args: [connectedAddress],
watch: true,
});

const defaultProfilePicture = "https://ipfs.io/ipfs/QmVCvzEQHFKzAYSsou8jEJtWdFj31n2XgPpbLjbZqui4YY";

const profilePicture = profileInfo && profileInfo[2] ? profileInfo[2] : defaultProfilePicture;

const burgerMenuRef = useRef<HTMLDivElement>(null);
useOutsideClick(
burgerMenuRef,
useCallback(() => setIsDrawerOpen(false), []),
);
// const burgerMenuRef = useRef<HTMLDivElement>(null);
// useOutsideClick(
// burgerMenuRef,
// useCallback(() => setIsDrawerOpen(false), []),
// );

const menuRef = useRef<HTMLDivElement>(null);

const pathname = usePathname();

useOutsideClick(
menuRef,
useCallback(() => setIsMenuOpen(false), []),
);

const handleMintUSDC = async () => {
try {
await usdcWriteAsync({
functionName: "mint",
args: [connectedAddress, BigInt(100e6)], // Mint 1 USDC
});

notification.success("USDC Minted Successfully");
} catch (error) {
console.error("Error during minting:", error);

// Log the error and notify the user
notification.error("Minting failed, please try again.");
}
};

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">
<div className="lg:hidden dropdown" ref={burgerMenuRef}>
<label
tabIndex={0}
className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
onClick={() => {
setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
}}
>
<Bars3Icon className="h-1/2" />
</label>
{isDrawerOpen && (
<ul
tabIndex={0}
className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
onClick={() => {
setIsDrawerOpen(false);
}}
>
<HeaderMenuLinks />
</ul>
)}
</div>
<Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
<div className="flex relative w-24 h-10">
<span className="text-3xl font-bold">DARTE</span>
</div>
<div className="navbar-start ml-2">
<Link href="/create" passHref>
<button className={`btn text-3xl ${pathname === "/create" ? "text-blue-600" : "hover:text-blue-600"}`}>
+
</button>
</Link>
</div>

<div className="navbar-center flex-1 flex justify-center items-center">
<Link href="/" passHref>
<span className={`text-3xl font-bold ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`}>
DARTE
</span>
</Link>
<ul className="hidden lg:flex lg:flex-nowrap menu-horizontal px-1 gap-2">
<HeaderMenuLinks />
</ul>
</div>

<div className="navbar-end pr-4 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>
<>
<div className="hidden lg:flex items-center gap-2 pr-4 cursor-pointer" onClick={handleMintUSDC}>
{/* <button className="btn btn-primary btn-sm" onClick={handleMintUSDC}>
+
</button> */}

{/* Wrap Image in a div and set explicit width/height */}
<div className="w-7 h-7 relative">
<Image
src="/usdc-logo.png" // Ensure you use the correct path for Next.js
alt="USDC Logo"
width={28} // 7 * 4px = 28px
height={28} // 7 * 4px = 28px
style={{ objectFit: "contain" }} // Ensures the image behaves like 'object-contain'
/>
</div>

<p className="text-md text-cyan-600 font-bold">{usdcBalance ? Number(usdcBalance) / 1e6 : 0}</p>
</div>
<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 />
)}
Expand Down

0 comments on commit 983e8aa

Please sign in to comment.