Search improved, UI fix

luloxi · Oct 9, 2024 · bcde0f0 · bcde0f0
1 parent 91008eb
commit bcde0f0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -28,8 +28,9 @@ Social dapp that allows users to monetize 💰 their social activity 🫂.
 
 ## 👥 Phase 2 (Social Activity and Indexing)
 
-- **PunkSociety contract:** Following users, liking, commenting and sharing posts.
-- **Search**: By address or username
+- ✅ **PunkSociety contract:** Social interactions.
+- ✅ **Search**: By address or username
+- Enable following users, liking, commenting and sharing posts on frontend
 - **Notification system**
 - **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) | [The Graph tool for creating a subgraph](https://thegraph.com/docs/en/developing/creating-a-subgraph/))
 

diff --git a/packages/nextjs/app/search/Search.tsx b/packages/nextjs/app/search/Search.tsx
@@ -3,55 +3,60 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { LoadingBars } from "../../components/punk-society/LoadingBars";
-import { AddressInput } from "~~/components/scaffold-eth";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export const Search = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const router = useRouter();
 
+  const { data: nameToAddress } = useScaffoldReadContract({
+    contractName: "PunkProfile",
+    functionName: "nameToAddress",
+    args: [searchQuery],
+    watch: true,
+  });
+
   const handleSearch = async () => {
     if (!searchQuery) {
-      setError("Please enter an address.");
+      setError("Please enter an address or username.");
       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.");
+    try {
+      if (searchQuery.length > 17) {
+        // If the search query is longer than 17 characters, assume it's an Ethereum address
+        router.push(`/profile/${searchQuery}`);
+      } else if (nameToAddress && nameToAddress !== "0x0000000000000000000000000000000000000000") {
+        // If the search query resolves to a non-zero address, navigate to the resolved address profile
+        router.push(`/profile/${nameToAddress}`);
+      } else {
+        setError("Invalid address or username.");
+      }
+    } catch (error) {
+      setError("An error occurred while searching.");
+    } finally {
       setLoading(false);
-      return;
     }
-
-    // Redirect to the user's profile page
-    router.push(`/profile/${address}`);
   };
 
-  if (loading) {
-    return <LoadingBars />;
-  }
-
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen py-2">
-      <div className="w-full max-w-md px-4">
-        <div className="mb-4">
-          <AddressInput placeholder="Enter address or ENS" 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-blue-600 rounded-lg text-white py-2 px-4"
-        >
-          Go to profile
-        </button>
-      </div>
+    <div className="flex items-center justify-center min-h-screen  gap-3">
+      <input
+        type="text"
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value.toLowerCase())}
+        placeholder="Enter username or address"
+        className="input input-bordered w-full max-w-xs"
+      />
+      <button onClick={handleSearch} disabled={loading} className="btn btn-primary">
+        {loading ? <LoadingBars /> : "Go"}
+      </button>
+      {error && <p className="text-red-500 mt-2">{error}</p>}
     </div>
   );
 };
diff --git a/packages/nextjs/components/punk-society/ProfileAddress.tsx b/packages/nextjs/components/punk-society/ProfileAddress.tsx
@@ -14,16 +14,6 @@ type AddressProps = {
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 };
 
-const blockieSizeMap = {
-  xs: 6,
-  sm: 7,
-  base: 8,
-  lg: 9,
-  xl: 10,
-  "2xl": 12,
-  "3xl": 15,
-};
-
 /**
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
@@ -72,17 +62,17 @@ export const ProfileAddress = ({ address, disableAddressLink, format, size = "ba
           <Image
             src={profileInfo[2]}
             alt="Profile Picture"
-            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            className="rounded-full"
+            width={128}
+            height={128}
+            className="rounded-full object-cover w-8 h-8"
           />
         ) : (
           <Image
             src={defaultProfilePicture}
             alt="Profile Picture"
-            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            className="rounded-full"
+            width={128}
+            height={128}
+            className="rounded-full object-cover w-8 h-8"
           />
         )}
       </div>