From 557e4b71d8b20175f6ed10742d2e1d9a32e72cd8 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 16 Oct 2025 11:52:03 +0530
Subject: [PATCH 1/2] feat: add user name click

---
 .../TransactionDetailsHeaderCard.tsx             | 16 ++++++++--------
 src/components/UserHeader/index.tsx              |  9 ++++++++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
index 920309d87..342847086 100644
--- a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
@@ -179,17 +179,16 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
 
     const icon = getIcon(direction, isLinkTransaction)
 
+    const hanldeUserPfpClick = () => {
+        if (isAvatarClickable) {
+            router.push(`/${userName}`)
+        }
+    }
+
     return (
         <Card className="relative p-4 md:p-6" position="single">
             <div className="flex items-center gap-3">
-                <div
-                    className={twMerge(isAvatarClickable && 'cursor-pointer')}
-                    onClick={() => {
-                        if (isAvatarClickable) {
-                            router.push(`/${userName}`)
-                        }
-                    }}
-                >
+                <div className={twMerge(isAvatarClickable && 'cursor-pointer')} onClick={hanldeUserPfpClick}>
                     {avatarUrl ? (
                         <div className="flex h-16 w-16 items-center justify-center rounded-full">
                             <Image
@@ -221,6 +220,7 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
                             className="flex items-center gap-1"
                             haveSentMoneyToUser={haveSentMoneyToUser}
                             iconSize={18}
+                            onNameClick={isAvatarClickable ? hanldeUserPfpClick : undefined}
                         />
                     </h2>
                     <h1
diff --git a/src/components/UserHeader/index.tsx b/src/components/UserHeader/index.tsx
index 62c0fe73e..e03c85ebe 100644
--- a/src/components/UserHeader/index.tsx
+++ b/src/components/UserHeader/index.tsx
@@ -50,6 +50,7 @@ export const VerifiedUserLabel = ({
     iconSize = 14,
     haveSentMoneyToUser = false,
     isAuthenticatedUserVerified = false,
+    onNameClick,
 }: {
     name: string
     username: string
@@ -58,6 +59,7 @@ export const VerifiedUserLabel = ({
     iconSize?: number
     haveSentMoneyToUser?: boolean
     isAuthenticatedUserVerified?: boolean
+    onNameClick?: () => void
 }) => {
     const { invitedUsernamesSet, user } = useAuth()
     // determine badge and tooltip content based on verification status
@@ -94,7 +96,12 @@ export const VerifiedUserLabel = ({
                     address={username}
                 />
             ) : (
-                <div className={twMerge('font-semibold md:text-base', className)}>{name}</div>
+                <div
+                    className={twMerge('font-semibold md:text-base', className, onNameClick && 'cursor-pointer')}
+                    onClick={onNameClick}
+                >
+                    {name}
+                </div>
             )}
 
             {badge && (

From 64daf2f7b7516792d350b2e992b9fea5d5a90a76 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 16 Oct 2025 12:03:00 +0530
Subject: [PATCH 2/2] fix: correct typo in handleUserPfpClick function name

---
 .../TransactionDetails/TransactionDetailsHeaderCard.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
index 342847086..3e054c038 100644
--- a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx
@@ -179,7 +179,7 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
 
     const icon = getIcon(direction, isLinkTransaction)
 
-    const hanldeUserPfpClick = () => {
+    const handleUserPfpClick = () => {
         if (isAvatarClickable) {
             router.push(`/${userName}`)
         }
@@ -188,7 +188,7 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
     return (
         <Card className="relative p-4 md:p-6" position="single">
             <div className="flex items-center gap-3">
-                <div className={twMerge(isAvatarClickable && 'cursor-pointer')} onClick={hanldeUserPfpClick}>
+                <div className={twMerge(isAvatarClickable && 'cursor-pointer')} onClick={handleUserPfpClick}>
                     {avatarUrl ? (
                         <div className="flex h-16 w-16 items-center justify-center rounded-full">
                             <Image
@@ -220,7 +220,7 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
                             className="flex items-center gap-1"
                             haveSentMoneyToUser={haveSentMoneyToUser}
                             iconSize={18}
-                            onNameClick={isAvatarClickable ? hanldeUserPfpClick : undefined}
+                            onNameClick={isAvatarClickable ? handleUserPfpClick : undefined}
                         />
                     </h2>
                     <h1