Changes to header and readme

luloxi · Sep 26, 2024 · 9b619ce · 9b619ce
1 parent ca7f90d
commit 9b619ce
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-🫂 SocialBunny is an social dapp that empowers users to monetize their posts.
+🐰 SocialBunny is an social dapp 🫂 that empowers users to monetize 💰 their posts.
 
 - Posts tokenization on mainnet is optional.
 - Creators get royalties for sales of their tokenized posts
@@ -94,7 +94,9 @@ yarn deploy
 
 This command deploys a test smart contract to the local network. The contract is located in `packages/foundry/contracts` and can be modified to suit your needs. The `yarn deploy` command uses the deploy script located in `packages/foundry/script/Deploy.s.sol` to deploy the contract to the network. You can also customize the deploy script.
 
-5. Open a third terminal, navigate to `SocialBunny` and run this command to start your NextJS app:
+5. Go to `packages/nextjs/scaffold.config.ts` and comment out `targetNetworks: [chains.sepolia]` and uncomment `targetNetworks: [chains.foundry]`
+
+6. Open a third terminal, navigate to `SocialBunny` and run this command to start your NextJS app:
 
 ```
 yarn start

diff --git a/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx
@@ -22,7 +22,7 @@ export const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
   // File size validation (5MB)
   const MAX_FILE_SIZE_MB = 5 * 1024 * 1024; // 5 MB in bytes
 
-  const defaultProfilePicture = "https://ipfs.io/ipfs/QmVCvzEQHFKzAYSsou8jEJtWdFj31n2XgPpbLjbZqui4YY";
+  const defaultProfilePicture = "/guest-profile.png";
 
   // Handle file drop or selection
   const handleFileUpload = async (file: File) => {

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -1,76 +1,23 @@
 "use client";
 
 import React, { useRef, useState } from "react";
-// import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SwitchTheme } from "./SwitchTheme";
 import { faHome, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { hardhat } from "viem/chains";
-// import Image from "next/image";
 import { useAccount } from "wagmi";
-// import { PlusIcon } from "@heroicons/react/24/solid";
-// import { Bars3Icon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useScaffoldReadContract, useTargetNetwork } from "~~/hooks/scaffold-eth";
 
-// import { notification } from "~~/utils/scaffold-eth";
-
-type HeaderMenuLink = {
-  label: string;
-  href: string;
-  icon?: React.ReactNode;
-};
-
-export const menuLinks: HeaderMenuLink[] = [
-  {
-    label: "Explore",
-    href: "/",
-  },
-  {
-    label: "Create",
-    href: "/create",
-  },
-];
-
-export const HeaderMenuLinks = () => {
-  const pathname = usePathname();
-
-  return (
-    <>
-      {menuLinks.map(({ label, href, icon }) => {
-        const isActive = pathname === href;
-        return (
-          <li key={href}>
-            <Link
-              href={href}
-              passHref
-              className={`${
-                isActive ? "text-blue-600 font-bold" : ""
-              } hover:text-blue-600 font-bold py-3 px-3 text-sm rounded-full gap-2 grid grid-flow-col no-bg no-shadow`}
-            >
-              {icon}
-              <span>{label}</span>
-            </Link>
-          </li>
-        );
-      })}
-    </>
-  );
-};
-
 /**
  * Site header
  */
 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 { writeContractAsync: usdcWriteAsync } = useScaffoldWriteContract("MockUSDC");
 
   const { data: profileInfo } = useScaffoldReadContract({
     contractName: "ProfileInfo",
@@ -79,39 +26,10 @@ export const Header = () => {
     watch: true,
   });
 
-  // const { data: usdcBalance } = useScaffoldReadContract({
-  //   contractName: "MockUSDC",
-  //   functionName: "balanceOf",
-  //   args: [connectedAddress],
-  //   watch: true,
-  // });
-
-  // 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.");
-  //   }
-  // };
-
   const defaultProfilePicture = "/guest-profile.png";
 
   const profilePicture = profileInfo && profileInfo[2] ? profileInfo[2] : defaultProfilePicture;
 
-  // const burgerMenuRef = useRef<HTMLDivElement>(null);
-  // useOutsideClick(
-  //   burgerMenuRef,
-  //   useCallback(() => setIsDrawerOpen(false), []),
-  // );
-
   const menuRef = useRef<HTMLDivElement>(null);
 
   const pathname = usePathname();
@@ -177,7 +95,7 @@ export const Header = () => {
           {isConnected ? (
             <>
               <div
-                className="w-8 h-8 bg-white text-black rounded-full flex items-center justify-center cursor-pointer"
+                className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer"
                 onClick={handleMenuToggle}
                 style={{
                   backgroundImage: `url(${profilePicture})`,
@@ -188,7 +106,6 @@ export const Header = () => {
             </>
           ) : (
             <>
-              {/* <SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} /> */}
               <RainbowKitCustomConnectButton />
             </>
           )}
@@ -200,7 +117,7 @@ export const Header = () => {
 
               <div className="pt-2 mb-2 flex flex-row items-center justify-center gap-2">
                 <Link href="/myProfile" passHref>
-                  <span className="btn btn-primary" onClick={handleMenuClose}>
+                  <span className="btn btn-primary bg-base-200 border-0" onClick={handleMenuClose}>
                     My Profile
                   </span>
                 </Link>

diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -48,7 +48,10 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
+        <summary
+          tabIndex={0}
+          className="btn btn-secondary bg-base-200 btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
+        >
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}

diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     SimpleMintNFT: {
-      address: "0x5fbdb2315678afecb367f032d93f642f64180aa3",
+      address: "0xe7f1725e7734ce288f8367e1bb143e90bb3f0512",
       abi: [
         {
           type: "constructor",
@@ -685,7 +685,7 @@ const deployedContracts = {
       },
     },
     ProfileInfo: {
-      address: "0xe7f1725e7734ce288f8367e1bb143e90bb3f0512",
+      address: "0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0",
       abi: [
         {
           type: "function",
@@ -753,7 +753,7 @@ const deployedContracts = {
       inheritedFunctions: {},
     },
     SimpleMint: {
-      address: "0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0",
+      address: "0xcf7ed3acca5a467e9e704c703e8d87f634fb0fc9",
       abi: [
         {
           type: "constructor",
@@ -1066,7 +1066,7 @@ const deployedContracts = {
       },
     },
     MockNFT: {
-      address: "0xcf7ed3acca5a467e9e704c703e8d87f634fb0fc9",
+      address: "0xdc64a140aa3e981100a9beca4e685f962f0cf6c9",
       abi: [
         {
           type: "constructor",
@@ -1686,7 +1686,7 @@ const deployedContracts = {
       },
     },
     MockUSDC: {
-      address: "0xdc64a140aa3e981100a9beca4e685f962f0cf6c9",
+      address: "0x5fc8d32690cc91d4c39d9d3abcbd16989f875707",
       abi: [
         {
           type: "constructor",
@@ -2143,7 +2143,7 @@ const deployedContracts = {
       },
     },
     Marketplace: {
-      address: "0x5fc8d32690cc91d4c39d9d3abcbd16989f875707",
+      address: "0x0165878a594ca255338adfa4d48449f69242eb8f",
       abi: [
         {
           type: "constructor",

diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
@@ -10,7 +10,8 @@ export type ScaffoldConfig = {
 
 const scaffoldConfig = {
   // The networks on which your DApp is live
-  targetNetworks: [chains.sepolia, chains.foundry],
+  // For working locally, comment out chains.sepolia and uncomment chains.foundry
+  targetNetworks: [chains.sepolia],
   // targetNetworks: [chains.foundry],
 
   // The interval at which your front-end polls the RPC servers for new data