diff --git a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx b/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx index b7827a338..920309d87 100644 --- a/src/components/TransactionDetails/TransactionDetailsHeaderCard.tsx +++ b/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 { + const router = useRouter() const typeForAvatar = transactionType ?? (direction === 'add' ? 'add' : direction === 'withdraw' ? 'withdraw' : 'send') @@ -177,26 +182,35 @@ export const TransactionDetailsHeaderCard: React.FC
- {avatarUrl ? ( -
- Icon { + if (isAvatarClickable) { + router.push(`/${userName}`) + } + }} + > + {avatarUrl ? ( +
+ Icon +
+ ) : ( + -
- ) : ( - - )} + )} +

{icon && } diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx index 37e6f59ec..5449762f4 100644 --- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx +++ b/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 = ({

)} - {showUserProfileButton && ( -
- -
- )} {/* Cancel deposit button for bridge_onramp transactions in awaiting_funds state */} {transaction.direction === 'bank_deposit' && transaction.extraDataForDrawer?.originalType !== EHistoryEntryType.REQUEST &&