Merge pull request #1325 from peanutprotocol/feat/clickable-pfp

[TASK-15768] feat: Clickable PFPs in txn receipt

Author: Zishan-7

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx

@@ -10,6 +10,8 @@ import { isAddress as isWalletAddress } from 'viem'
 import Card from '../Global/Card'
 import { Icon, IconName } from '../Global/Icons/Icon'
 import { VerifiedUserLabel } from '../UserHeader'
+import { useRouter } from 'next/navigation'
+import { twMerge } from 'tailwind-merge'
 
 export type TransactionDirection =
     | 'send'
@@ -37,6 +39,7 @@ interface TransactionDetailsHeaderCardProps {
     avatarUrl?: string
     haveSentMoneyToUser?: boolean
     hasPerk?: boolean
+    isAvatarClickable?: boolean
 }
 
 const getTitle = (
@@ -168,7 +171,9 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
     avatarUrl,
     haveSentMoneyToUser = false,
     hasPerk = false,
+    isAvatarClickable = false,
 }) => {
+    const router = useRouter()
     const typeForAvatar =
         transactionType ?? (direction === 'add' ? 'add' : direction === 'withdraw' ? 'withdraw' : 'send')
 
@@ -177,26 +182,35 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
     return (
         <Card className="relative p-4 md:p-6" position="single">
             <div className="flex items-center gap-3">
-                {avatarUrl ? (
-                    <div className="flex h-16 w-16 items-center justify-center rounded-full">
-                        <Image
-                            src={avatarUrl}
-                            alt="Icon"
-                            className="size-full rounded-full object-cover"
-                            width={160}
-                            height={160}
+                <div
+                    className={twMerge(isAvatarClickable && 'cursor-pointer')}
+                    onClick={() => {
+                        if (isAvatarClickable) {
+                            router.push(`/${userName}`)
+                        }
+                    }}
+                >
+                    {avatarUrl ? (
+                        <div className="flex h-16 w-16 items-center justify-center rounded-full">
+                            <Image
+                                src={avatarUrl}
+                                alt="Icon"
+                                className="size-full rounded-full object-cover"
+                                width={160}
+                                height={160}
+                            />
+                        </div>
+                    ) : (
+                        <TransactionAvatarBadge
+                            initials={initials}
+                            userName={userName}
+                            isLinkTransaction={isLinkTransaction}
+                            transactionType={typeForAvatar}
+                            context="header"
+                            size="medium"
                         />
-                    </div>
-                ) : (
-                    <TransactionAvatarBadge
-                        initials={initials}
-                        userName={userName}
-                        isLinkTransaction={isLinkTransaction}
-                        transactionType={typeForAvatar}
-                        context="header"
-                        size="medium"
-                    />
-                )}
+                    )}
+                </div>
                 <div className="space-y-1">
                     <h2 className="flex items-center gap-2 text-sm font-medium text-grey-1">
                         {icon && <Icon name={icon} size={10} />}

src/components/TransactionDetails/TransactionDetailsReceipt.tsx

@@ -10,7 +10,6 @@ import { useUserStore } from '@/redux/hooks'
 import { chargesApi } from '@/services/charges'
 import { sendLinksApi } from '@/services/sendLinks'
 import { formatAmount, formatDate, getInitialsFromName, isStableCoin, formatCurrency, getAvatarUrl } from '@/utils'
-import { getDisplayCurrencySymbol } from '@/utils/currency'
 import { formatIban, printableAddress, shortenAddress, shortenStringLong, slugify } from '@/utils/general.utils'
 import { cancelOnramp } from '@/app/actions/onramp'
 import { captureException } from '@sentry/nextjs'
@@ -323,9 +322,9 @@ export const TransactionDetailsReceipt = ({
     }
 
     // Show profile button only if txn is completed, not to/by a guest user and its a send/request/receive txn
-    const showUserProfileButton =
+    const isAvatarClickable =
         !!transaction &&
-        transaction.status === 'completed' &&
+        !transaction.extraDataForDrawer?.isLinkTransaction &&
         !!transaction.userName &&
         !isAddress(transaction.userName) &&
         (transaction.extraDataForDrawer?.transactionCardType === 'send' ||
@@ -369,6 +368,7 @@ export const TransactionDetailsReceipt = ({
                 avatarUrl={avatarUrl ?? getAvatarUrl(transaction)}
                 haveSentMoneyToUser={transaction.haveSentMoneyToUser}
                 hasPerk={!!transaction.extraDataForDrawer?.perk?.claimed}
+                isAvatarClickable={isAvatarClickable}
             />
 
             {/* details card (date, fee, memo) and more */}
@@ -1034,22 +1034,6 @@ export const TransactionDetailsReceipt = ({
                 </div>
             )}
 
-            {showUserProfileButton && (
-                <div className="pr-1">
-                    <Button
-                        onClick={() => router.push(`/${transaction.userName}`)}
-                        shadowSize="4"
-                        variant={
-                            transaction.extraDataForDrawer?.transactionCardType === 'request'
-                                ? 'purple'
-                                : 'primary-soft'
-                        }
-                        className="flex w-full items-center gap-1"
-                    >
-                        Go to {transaction.userName} profile
-                    </Button>
-                </div>
-            )}
             {/* Cancel deposit button for bridge_onramp transactions in awaiting_funds state */}
             {transaction.direction === 'bank_deposit' &&
                 transaction.extraDataForDrawer?.originalType !== EHistoryEntryType.REQUEST &&