Skip to content

Commit c48a7a6

Browse files
authored
Merge pull request #1325 from peanutprotocol/feat/clickable-pfp
[TASK-15768] feat: Clickable PFPs in txn receipt
2 parents 326a5f5 + 9ab0c5b commit c48a7a6

2 files changed

Lines changed: 36 additions & 38 deletions

File tree

src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { isAddress as isWalletAddress } from 'viem'
1010
import Card from '../Global/Card'
1111
import { Icon, IconName } from '../Global/Icons/Icon'
1212
import { VerifiedUserLabel } from '../UserHeader'
13+
import { useRouter } from 'next/navigation'
14+
import { twMerge } from 'tailwind-merge'
1315

1416
export type TransactionDirection =
1517
| 'send'
@@ -37,6 +39,7 @@ interface TransactionDetailsHeaderCardProps {
3739
avatarUrl?: string
3840
haveSentMoneyToUser?: boolean
3941
hasPerk?: boolean
42+
isAvatarClickable?: boolean
4043
}
4144

4245
const getTitle = (
@@ -168,7 +171,9 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
168171
avatarUrl,
169172
haveSentMoneyToUser = false,
170173
hasPerk = false,
174+
isAvatarClickable = false,
171175
}) => {
176+
const router = useRouter()
172177
const typeForAvatar =
173178
transactionType ?? (direction === 'add' ? 'add' : direction === 'withdraw' ? 'withdraw' : 'send')
174179

@@ -177,26 +182,35 @@ export const TransactionDetailsHeaderCard: React.FC<TransactionDetailsHeaderCard
177182
return (
178183
<Card className="relative p-4 md:p-6" position="single">
179184
<div className="flex items-center gap-3">
180-
{avatarUrl ? (
181-
<div className="flex h-16 w-16 items-center justify-center rounded-full">
182-
<Image
183-
src={avatarUrl}
184-
alt="Icon"
185-
className="size-full rounded-full object-cover"
186-
width={160}
187-
height={160}
185+
<div
186+
className={twMerge(isAvatarClickable && 'cursor-pointer')}
187+
onClick={() => {
188+
if (isAvatarClickable) {
189+
router.push(`/${userName}`)
190+
}
191+
}}
192+
>
193+
{avatarUrl ? (
194+
<div className="flex h-16 w-16 items-center justify-center rounded-full">
195+
<Image
196+
src={avatarUrl}
197+
alt="Icon"
198+
className="size-full rounded-full object-cover"
199+
width={160}
200+
height={160}
201+
/>
202+
</div>
203+
) : (
204+
<TransactionAvatarBadge
205+
initials={initials}
206+
userName={userName}
207+
isLinkTransaction={isLinkTransaction}
208+
transactionType={typeForAvatar}
209+
context="header"
210+
size="medium"
188211
/>
189-
</div>
190-
) : (
191-
<TransactionAvatarBadge
192-
initials={initials}
193-
userName={userName}
194-
isLinkTransaction={isLinkTransaction}
195-
transactionType={typeForAvatar}
196-
context="header"
197-
size="medium"
198-
/>
199-
)}
212+
)}
213+
</div>
200214
<div className="space-y-1">
201215
<h2 className="flex items-center gap-2 text-sm font-medium text-grey-1">
202216
{icon && <Icon name={icon} size={10} />}

src/components/TransactionDetails/TransactionDetailsReceipt.tsx

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { useUserStore } from '@/redux/hooks'
1010
import { chargesApi } from '@/services/charges'
1111
import { sendLinksApi } from '@/services/sendLinks'
1212
import { formatAmount, formatDate, getInitialsFromName, isStableCoin, formatCurrency, getAvatarUrl } from '@/utils'
13-
import { getDisplayCurrencySymbol } from '@/utils/currency'
1413
import { formatIban, printableAddress, shortenAddress, shortenStringLong, slugify } from '@/utils/general.utils'
1514
import { cancelOnramp } from '@/app/actions/onramp'
1615
import { captureException } from '@sentry/nextjs'
@@ -323,9 +322,9 @@ export const TransactionDetailsReceipt = ({
323322
}
324323

325324
// Show profile button only if txn is completed, not to/by a guest user and its a send/request/receive txn
326-
const showUserProfileButton =
325+
const isAvatarClickable =
327326
!!transaction &&
328-
transaction.status === 'completed' &&
327+
!transaction.extraDataForDrawer?.isLinkTransaction &&
329328
!!transaction.userName &&
330329
!isAddress(transaction.userName) &&
331330
(transaction.extraDataForDrawer?.transactionCardType === 'send' ||
@@ -369,6 +368,7 @@ export const TransactionDetailsReceipt = ({
369368
avatarUrl={avatarUrl ?? getAvatarUrl(transaction)}
370369
haveSentMoneyToUser={transaction.haveSentMoneyToUser}
371370
hasPerk={!!transaction.extraDataForDrawer?.perk?.claimed}
371+
isAvatarClickable={isAvatarClickable}
372372
/>
373373

374374
{/* details card (date, fee, memo) and more */}
@@ -1034,22 +1034,6 @@ export const TransactionDetailsReceipt = ({
10341034
</div>
10351035
)}
10361036

1037-
{showUserProfileButton && (
1038-
<div className="pr-1">
1039-
<Button
1040-
onClick={() => router.push(`/${transaction.userName}`)}
1041-
shadowSize="4"
1042-
variant={
1043-
transaction.extraDataForDrawer?.transactionCardType === 'request'
1044-
? 'purple'
1045-
: 'primary-soft'
1046-
}
1047-
className="flex w-full items-center gap-1"
1048-
>
1049-
Go to {transaction.userName} profile
1050-
</Button>
1051-
</div>
1052-
)}
10531037
{/* Cancel deposit button for bridge_onramp transactions in awaiting_funds state */}
10541038
{transaction.direction === 'bank_deposit' &&
10551039
transaction.extraDataForDrawer?.originalType !== EHistoryEntryType.REQUEST &&

0 commit comments

Comments
 (0)