From 493678c49c4295815c387bdeb64a73b6f7fd9a9e Mon Sep 17 00:00:00 2001
From: Iwueseiter <156322726+Iwueseiter@users.noreply.github.com>
Date: Tue, 7 Oct 2025 15:07:45 +0000
Subject: [PATCH] Add description on the profile page

---
 frontend/src/components/pages/ProfilePage.tsx    | 15 ++++++++++++++-
 .../action-buttons/CreateProfileDialog.tsx       |  3 ++-
 .../action-buttons/EditProfileDialog.tsx         |  3 ++-
 .../profiles/profile-page/ProfileDescription.tsx | 16 ++++++++++++++++
 4 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/profiles/profile-page/ProfileDescription.tsx

diff --git a/frontend/src/components/pages/ProfilePage.tsx b/frontend/src/components/pages/ProfilePage.tsx
index 0074f6d..8527162 100644
--- a/frontend/src/components/pages/ProfilePage.tsx
+++ b/frontend/src/components/pages/ProfilePage.tsx
@@ -2,16 +2,29 @@ import { AppWrapper } from "@/components/AppWrapper";
 import ProfileHeader from "@/components/profiles/profile-page/ProfileHeader";
 import ProfileActions from "@/components/profiles/profile-page/ProfileActions";
 import ProfileAttestations from "@/components/profiles/profile-page/ProfileAttestations";
+import ProfileDescription from "@/components/profiles/profile-page/ProfileDescription";
+import { useMemo } from "react";
+import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
 
 type Props = { address?: string };
 
 export default function ProfilePage({ address }: Props) {
+  const profilesQuery = useGetProfiles();
+  const profile = useMemo(() => {
+    const list = profilesQuery.data ?? [];
+    return list.find(
+      (x) => x.address.toLowerCase() === (address || "").toLowerCase()
+    );
+  }, [profilesQuery.data, address]);
+
   return (
     <AppWrapper>
       <section className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
         <ProfileHeader address={address || ""} />
 
-        <ProfileActions address={address || ""} />
+        <ProfileActions address={address || ""} name={profile?.name} description={profile?.description} />
+
+        <ProfileDescription description={profile?.description} />
 
         <ProfileAttestations address={address || ""} />
       </section>
diff --git a/frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx b/frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx
index 390266a..b94afc8 100644
--- a/frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx
+++ b/frontend/src/components/profiles/action-buttons/CreateProfileDialog.tsx
@@ -93,7 +93,8 @@ export function CreateProfileButton() {
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Input
+                    <textarea
+                      className="w-full min-h-[80px] rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                       placeholder="Write a short introduction..."
                       {...field}
                     />
diff --git a/frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx b/frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx
index f4619c6..b724fc8 100644
--- a/frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx
+++ b/frontend/src/components/profiles/action-buttons/EditProfileDialog.tsx
@@ -100,7 +100,8 @@ export function EditProfileDialog({
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Input
+                    <textarea
+                      className="w-full min-h-[80px] rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                       placeholder="Write a short introduction..."
                       {...field}
                     />
diff --git a/frontend/src/components/profiles/profile-page/ProfileDescription.tsx b/frontend/src/components/profiles/profile-page/ProfileDescription.tsx
new file mode 100644
index 0000000..40865c8
--- /dev/null
+++ b/frontend/src/components/profiles/profile-page/ProfileDescription.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+interface ProfileDescriptionProps {
+  description?: string;
+}
+
+export const ProfileDescription: React.FC<ProfileDescriptionProps> = ({ description }) => {
+  if (!description) return null;
+  return (
+    <div className="my-6">
+      <p className="text-lg text-gray-700 whitespace-pre-line">{description}</p>
+    </div>
+  );
+};
+
+export default ProfileDescription;