From 295a3c3d04972e34f431e817d4a68552315dde14 Mon Sep 17 00:00:00 2001
From: tusharshah21 <tusharkumarshah14394@gmail.com>
Date: Fri, 23 Jan 2026 12:09:26 +0000
Subject: [PATCH] feat: add plus button to badges for quick attestation (#52)

---
 .../action-buttons/AddAttestationDialog.tsx   | 10 ++++++-
 .../profile-page/ProfileAttestations.tsx      | 28 ++++++++++++++++++-
 .../ProfileIssuedAttestations.tsx             | 28 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/profiles/action-buttons/AddAttestationDialog.tsx b/frontend/src/components/profiles/action-buttons/AddAttestationDialog.tsx
index 188eac4..0212714 100644
--- a/frontend/src/components/profiles/action-buttons/AddAttestationDialog.tsx
+++ b/frontend/src/components/profiles/action-buttons/AddAttestationDialog.tsx
@@ -43,9 +43,11 @@ type FormValues = z.infer<typeof formSchema>;
 export function AddAttestationDialog({
   recipient,
   children,
+  preselectedBadge,
 }: {
   recipient: string;
   children: React.ReactElement;
+  preselectedBadge?: string;
 }) {
   const [open, setOpen] = useState(false);
   const [errorDisplayText, setErrorDisplayText] = useState<string | null>(null);
@@ -63,7 +65,7 @@ export function AddAttestationDialog({
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { badgeName: "", justification: "" },
+    defaultValues: { badgeName: preselectedBadge || "", justification: "" },
   });
 
   const onSubmit = async (values: FormValues) => {
@@ -107,6 +109,12 @@ export function AddAttestationDialog({
     reset,
   ]);
 
+  useEffect(() => {
+    if (open && preselectedBadge) {
+      form.setValue("badgeName", preselectedBadge);
+    }
+  }, [open, preselectedBadge, form]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
diff --git a/frontend/src/components/profiles/profile-page/ProfileAttestations.tsx b/frontend/src/components/profiles/profile-page/ProfileAttestations.tsx
index 2ed7742..15705fe 100644
--- a/frontend/src/components/profiles/profile-page/ProfileAttestations.tsx
+++ b/frontend/src/components/profiles/profile-page/ProfileAttestations.tsx
@@ -1,4 +1,4 @@
-import { Award, Badge } from "lucide-react";
+import { Award, Badge, Plus } from "lucide-react";
 import { useGetAttestations } from "@/hooks/attestations/use-get-attestations";
 import { useMemo } from "react";
 import {
@@ -9,10 +9,18 @@ import {
 } from "@/components/ui/accordion";
 import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
 import CopyAddressToClipboard from "@/components/CopyAddressToClipboard";
+import { AddAttestationDialog } from "@/components/profiles/action-buttons/AddAttestationDialog";
+import { Button } from "@/components/ui/button";
+import { useAccount } from "wagmi";
 
 export function ProfileAttestations({ address }: { address: string }) {
   const attestationsQuery = useGetAttestations();
   const profilesQuery = useGetProfiles();
+  const { address: connectedAddress } = useAccount();
+  const isOwner =
+    !!connectedAddress &&
+    !!address &&
+    connectedAddress.toLowerCase() === address.toLowerCase();
 
   const attestations = useMemo(() => {
     const list = attestationsQuery.data ?? [];
@@ -74,6 +82,24 @@ export function ProfileAttestations({ address }: { address: string }) {
                   <span className="text-sm text-gray-600">
                     ({items.length})
                   </span>
+                  {!isOwner && connectedAddress && badgeName && (
+                    <AddAttestationDialog
+                      recipient={address}
+                      preselectedBadge={badgeName}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 ml-2"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                        aria-label="Add attestation for this badge"
+                      >
+                        <Plus className="h-3 w-3" />
+                      </Button>
+                    </AddAttestationDialog>
+                  )}
                 </div>
               </AccordionTrigger>
               <AccordionContent>
diff --git a/frontend/src/components/profiles/profile-page/ProfileIssuedAttestations.tsx b/frontend/src/components/profiles/profile-page/ProfileIssuedAttestations.tsx
index db5110f..36732ba 100644
--- a/frontend/src/components/profiles/profile-page/ProfileIssuedAttestations.tsx
+++ b/frontend/src/components/profiles/profile-page/ProfileIssuedAttestations.tsx
@@ -1,4 +1,4 @@
-import { Send, Badge } from "lucide-react";
+import { Send, Badge, Plus } from "lucide-react";
 import { useGetAttestations } from "@/hooks/attestations/use-get-attestations";
 import { useMemo } from "react";
 import {
@@ -8,10 +8,18 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
+import { AddAttestationDialog } from "@/components/profiles/action-buttons/AddAttestationDialog";
+import { Button } from "@/components/ui/button";
+import { useAccount } from "wagmi";
 
 export function ProfileIssuedAttestations({ address }: { address: string }) {
   const attestationsQuery = useGetAttestations();
   const profilesQuery = useGetProfiles();
+  const { address: connectedAddress } = useAccount();
+  const isOwner =
+    !!connectedAddress &&
+    !!address &&
+    connectedAddress.toLowerCase() === address.toLowerCase();
 
   const issuedAttestations = useMemo(() => {
     const list = attestationsQuery.data ?? [];
@@ -74,6 +82,24 @@ export function ProfileIssuedAttestations({ address }: { address: string }) {
                   <span className="text-sm text-gray-600">
                     ({items.length})
                   </span>
+                  {!isOwner && connectedAddress && badgeName && (
+                    <AddAttestationDialog
+                      recipient={address}
+                      preselectedBadge={badgeName}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 ml-2"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                        aria-label="Add attestation for this badge"
+                      >
+                        <Plus className="h-3 w-3" />
+                      </Button>
+                    </AddAttestationDialog>
+                  )}
                 </div>
               </AccordionTrigger>
               <AccordionContent>