First version of search, only searchs by address

README.md

@@ -17,13 +17,13 @@
 
 ## 🌐 Phase 2 (Social Activity and Indexing)
 
+- **Search**: By address, ENS or username
 - **Social features:** Following users, liking, commenting and sharing posts.
 - **Integrate The Graph to index activity** and save RPC calls (Reference: [Bootstrap a Full Stack Modern dapp using the Scaffold-ETH CLI and Subgraph Extension](https://siddhantk08.hashnode.dev/bootstrap-a-full-stack-modern-dapp-using-the-scaffold-eth-cli-and-subgraph-extension))
 
 ## 👥 Phase 3 (Social improvements)
 
 - **Individual post pages** for displaying long texts and big images
-- Search by address or username
 - **Notification system**
 - **Accessibility support**: Posts on the website must be [ARIA compliant](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
 

packages/foundry/contracts/ProfileInfo.sol

@@ -10,6 +10,7 @@ contract ProfileInfo {
   }
 
   mapping(address => Profile) public profiles;
+  mapping(string => address) public nameToAddress;
 
   function setProfile(
     string memory _name,

packages/nextjs/app/profile/[address]/page.tsx

@@ -26,12 +26,11 @@ export interface Collectible extends Partial<NFTMetaData> {
 const defaultProfilePicture = "/guest-profile.jpg";
 
 const ProfilePage: NextPage = () => {
-  const [name, setName] = useState("");
+  const [username, setUsername] = useState("");
   const [bio, setBio] = useState("");
   const [profilePicture, setProfilePicture] = useState<string>("");
   const [website, setWebsite] = useState("");
   const [isEditing, setIsEditing] = useState(false); // New state for edit mode
-
   const [listedCollectibles, setListedCollectibles] = useState<Collectible[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -64,7 +63,7 @@ const ProfilePage: NextPage = () => {
     try {
       await profileInfoWriteAsync({
         functionName: "setProfile",
-        args: [name, bio, profilePicture, website],
+        args: [username, bio, profilePicture, website],
       });
 
       notification.success("Profile Edited Successfully");
@@ -115,7 +114,7 @@ const ProfilePage: NextPage = () => {
 
   useEffect(() => {
     if (!isEditing && profileInfo) {
-      setName(profileInfo[0] || "");
+      setUsername(profileInfo[0] || "");
       setBio(profileInfo[1] || "");
       setProfilePicture(profileInfo[2] ? profileInfo[2] : defaultProfilePicture);
       setWebsite(profileInfo[3] || "");
@@ -177,10 +176,10 @@ const ProfilePage: NextPage = () => {
           {/* User Info Section */}
           <div className="flex flex-col justify-center items-center">
             {isEditing ? (
-              <InputBase placeholder="Your Name" value={name} onChange={setName} />
+              <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
             ) : (
               <>
-                <h2 className="text-2xl font-bold">{name || "Guest user"}</h2>
+                <h2 className="text-2xl font-bold">{username || "Guest user"}</h2>
                 <div className="text-base-content">
                   <Address address={address} />
                 </div>

packages/nextjs/app/search/Search.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { LoadingSpinner } from "../explore/_components/LoadingSpinner";
+import { InputBase } from "~~/components/scaffold-eth";
+
+export const Search = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleSearch = async () => {
+    if (!searchQuery) {
+      setError("Please enter an address.");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    const address = searchQuery;
+
+    // If the search query is not an address, show an error
+    if (!/^0x[a-fA-F0-9]{40}$/.test(searchQuery)) {
+      setError("Invalid address format.");
+      setLoading(false);
+      return;
+    }
+
+    // Redirect to the user's profile page
+    router.push(`/profile/${address}`);
+  };
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+      <h1 className="text-4xl mb-4">Search for Users</h1>
+      <div className="w-full max-w-md">
+        <div className="mb-4">
+          <InputBase placeholder="Enter address" value={searchQuery} onChange={setSearchQuery} />
+        </div>
+
+        {error && <p className="text-red-500 mb-4">{error}</p>}
+        <button
+          onClick={handleSearch}
+          className="btn btn-primary w-full border-0 bg-orange-600 rounded-lg text-white py-2 px-4"
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/search/page.tsx

@@ -0,0 +1,18 @@
+import { Search } from "./Search";
+import type { NextPage } from "next";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Search",
+  description: "Built with 🏗 Scaffold-ETH 2",
+});
+
+const SearchPage: NextPage = () => {
+  return (
+    <>
+      <Search />
+    </>
+  );
+};
+
+export default SearchPage;

packages/nextjs/components/Footer.tsx

@@ -92,9 +92,9 @@ export const Footer = () => {
           <HomeIcon className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`} />
         </Link>
 
-        <Link href="/not-found" passHref>
+        <Link href="/search" passHref>
           <MagnifyingGlassIcon
-            className={`h-6 w-6 text-red-600 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
+            className={`h-6 w-6  ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
           />
         </Link>
 

packages/nextjs/components/Header.tsx

@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { SwitchTheme } from "./SwitchTheme";
 import { hardhat } from "viem/chains";
 import { useAccount } from "wagmi";
-import { HomeIcon } from "@heroicons/react/24/solid";
+import { HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useScaffoldReadContract, useTargetNetwork } from "~~/hooks/scaffold-eth";
 
@@ -66,6 +66,20 @@ export const Header = () => {
               </div>
             </button>
           </Link>
+
+          <Link href="/search" passHref>
+            <button
+              className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+                pathname === "/search" ? "text-blue-600" : ""
+              }`}
+            >
+              <div className="flex flex-row items-center justify-center gap-2">
+                <MagnifyingGlassIcon className="h-6 w-6" />
+
+                <span>Search</span>
+              </div>
+            </button>
+          </Link>
         </div>
       </div>
 

packages/nextjs/public/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "PunkSociety",
-  "description": "Multimedia social dapp with monetizable posts",
+  "description": "Forkable social dapp built with Scaffold-ETH 2",
   "iconPath": "logo.svg",
   "display": "standalone"
 }