From f7384da5a500a5932ed07bb7cde492350ba36c20 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Mon, 15 Sep 2025 22:56:35 +0530
Subject: [PATCH 1/5] Add go to profile button

---
 .../TransactionDetailsReceipt.tsx             | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index 581b07ca8..76dae3c66 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -28,6 +28,7 @@ import { twMerge } from 'tailwind-merge'
 import { isAddress } from 'viem'
 import { getBankAccountLabel, TransactionDetailsRowKey, transactionDetailsRowKeys } from './transaction-details.utils'
 import { useSupportModalContext } from '@/context/SupportModalContext'
+import { useRouter } from 'next/navigation'
 
 export const TransactionDetailsReceipt = ({
     transaction,
@@ -59,6 +60,7 @@ export const TransactionDetailsReceipt = ({
     const [tokenData, setTokenData] = useState<{ symbol: string; icon: string } | null>(null)
     const [isTokenDataLoading, setIsTokenDataLoading] = useState(true)
     const { setIsSupportModalOpen } = useSupportModalContext()
+    const router = useRouter()
 
     useEffect(() => {
         setIsModalOpen?.(showCancelLinkModal)
@@ -278,6 +280,16 @@ export const TransactionDetailsReceipt = ({
         }
     }
 
+    const showUserProfileButton = useMemo(() => {
+        return (
+            transaction.status === 'completed' &&
+            !isAddress(transaction.userName) &&
+            (transaction.extraDataForDrawer?.transactionCardType === 'send' ||
+                transaction.extraDataForDrawer?.transactionCardType === 'request' ||
+                transaction.extraDataForDrawer?.transactionCardType === 'receive')
+        )
+    }, [transaction])
+
     return (
         <div ref={contentRef} className={twMerge('space-y-4', className)}>
             {/* show qr code at the top if applicable */}
@@ -911,6 +923,22 @@ 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 &&

From b4a34ca2b84c6963b0baed2327c31827b3171b0d Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Mon, 15 Sep 2025 23:15:36 +0530
Subject: [PATCH 2/5] update create account button

---
 src/components/Claim/Link/Onchain/Success.view.tsx   | 11 +++++++++--
 src/components/Payment/Views/Status.payment.view.tsx | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx
index 19447b4fd..d5c686acf 100644
--- a/src/components/Claim/Link/Onchain/Success.view.tsx
+++ b/src/components/Claim/Link/Onchain/Success.view.tsx
@@ -14,6 +14,8 @@ import { useEffect, useMemo } from 'react'
 import type { Hash } from 'viem'
 import { formatUnits } from 'viem'
 import * as _consts from '../../Claim.consts'
+import Image from 'next/image'
+import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
 
 export const SuccessClaimLinkView = ({
     transactionHash,
@@ -130,8 +132,13 @@ export const SuccessClaimLinkView = ({
             )
         }
         return (
-            <Button icon="user-plus" onClick={() => router.push('/setup')} shadowSize="4">
-                Create Account
+            <Button onClick={() => router.push('/setup')} shadowSize="4">
+                <div>Create a</div>
+                <div className="flex items-center gap-1">
+                    <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
+                    <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
+                </div>
+                <div>account</div>
             </Button>
         )
     }
diff --git a/src/components/Payment/Views/Status.payment.view.tsx b/src/components/Payment/Views/Status.payment.view.tsx
index 072280be1..f849edb88 100644
--- a/src/components/Payment/Views/Status.payment.view.tsx
+++ b/src/components/Payment/Views/Status.payment.view.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
 import { Button } from '@/components/0_Bruddle'
 import AddressLink from '@/components/Global/AddressLink'
 import Card from '@/components/Global/Card'
@@ -18,6 +19,7 @@ import { paymentActions } from '@/redux/slices/payment-slice'
 import { ApiUser } from '@/services/users'
 import { formatAmount, getInitialsFromName, printableAddress } from '@/utils'
 import { useQueryClient } from '@tanstack/react-query'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { ReactNode, useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
@@ -230,8 +232,13 @@ const DirectSuccessView = ({
                             Back to home
                         </Button>
                     ) : (
-                        <Button icon="user-plus" onClick={() => router.push('/setup')} shadowSize="4">
-                            Create Account
+                        <Button onClick={() => router.push('/setup')} shadowSize="4">
+                            <div>Create a</div>
+                            <div className="flex items-center gap-1">
+                                <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
+                                <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
+                            </div>
+                            <div>account</div>
                         </Button>
                     )}
                     {type === 'SEND' && !isExternalWalletFlow && !isWithdrawFlow && (

From 74ff4aed390f6eb9a1cf333aa9ffcc8b6d140658 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Tue, 16 Sep 2025 13:56:09 +0530
Subject: [PATCH 3/5] Extract create acoount button into a separate component

---
 .../Claim/Link/Onchain/Success.view.tsx       | 12 ++-------
 .../Global/CreateAccountButton/index.tsx      | 25 +++++++++++++++++++
 .../Payment/Views/Status.payment.view.tsx     | 10 ++------
 .../TransactionDetailsReceipt.tsx             | 17 ++++++-------
 4 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Global/CreateAccountButton/index.tsx

diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx
index d5c686acf..63cfa3e51 100644
--- a/src/components/Claim/Link/Onchain/Success.view.tsx
+++ b/src/components/Claim/Link/Onchain/Success.view.tsx
@@ -16,6 +16,7 @@ import { formatUnits } from 'viem'
 import * as _consts from '../../Claim.consts'
 import Image from 'next/image'
 import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
+import CreateAccountButton from '@/components/Global/CreateAccountButton'
 
 export const SuccessClaimLinkView = ({
     transactionHash,
@@ -131,16 +132,7 @@ export const SuccessClaimLinkView = ({
                 </Button>
             )
         }
-        return (
-            <Button onClick={() => router.push('/setup')} shadowSize="4">
-                <div>Create a</div>
-                <div className="flex items-center gap-1">
-                    <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
-                    <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
-                </div>
-                <div>account</div>
-            </Button>
-        )
+        return <CreateAccountButton onClick={() => router.push('/setup')} />
     }
 
     return (
diff --git a/src/components/Global/CreateAccountButton/index.tsx b/src/components/Global/CreateAccountButton/index.tsx
new file mode 100644
index 000000000..f367ad66d
--- /dev/null
+++ b/src/components/Global/CreateAccountButton/index.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
+import { Button } from '@/components/0_Bruddle'
+import Image from 'next/image'
+import React from 'react'
+
+interface CreateAccountButtonProps {
+    onClick: () => void
+}
+
+const CreateAccountButton = ({ onClick }: CreateAccountButtonProps) => {
+    return (
+        <Button onClick={onClick} shadowSize="4">
+            <div>Create a</div>
+            <div className="flex items-center gap-1">
+                <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
+                <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
+            </div>
+            <div>account</div>
+        </Button>
+    )
+}
+
+export default CreateAccountButton
diff --git a/src/components/Payment/Views/Status.payment.view.tsx b/src/components/Payment/Views/Status.payment.view.tsx
index f849edb88..5e3353da2 100644
--- a/src/components/Payment/Views/Status.payment.view.tsx
+++ b/src/components/Payment/Views/Status.payment.view.tsx
@@ -3,6 +3,7 @@ import { PEANUT_LOGO_BLACK, PEANUTMAN_LOGO } from '@/assets'
 import { Button } from '@/components/0_Bruddle'
 import AddressLink from '@/components/Global/AddressLink'
 import Card from '@/components/Global/Card'
+import CreateAccountButton from '@/components/Global/CreateAccountButton'
 import { Icon } from '@/components/Global/Icons/Icon'
 import NavHeader from '@/components/Global/NavHeader'
 import { SoundPlayer } from '@/components/Global/SoundPlayer'
@@ -232,14 +233,7 @@ const DirectSuccessView = ({
                             Back to home
                         </Button>
                     ) : (
-                        <Button onClick={() => router.push('/setup')} shadowSize="4">
-                            <div>Create a</div>
-                            <div className="flex items-center gap-1">
-                                <Image src={PEANUTMAN_LOGO} alt="Peanut Logo" className="size-5" />
-                                <Image src={PEANUT_LOGO_BLACK} alt="Peanut Logo" />
-                            </div>
-                            <div>account</div>
-                        </Button>
+                        <CreateAccountButton onClick={() => router.push('/setup')} />
                     )}
                     {type === 'SEND' && !isExternalWalletFlow && !isWithdrawFlow && (
                         <Button
diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index 76dae3c66..219066294 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -280,15 +280,14 @@ export const TransactionDetailsReceipt = ({
         }
     }
 
-    const showUserProfileButton = useMemo(() => {
-        return (
-            transaction.status === 'completed' &&
-            !isAddress(transaction.userName) &&
-            (transaction.extraDataForDrawer?.transactionCardType === 'send' ||
-                transaction.extraDataForDrawer?.transactionCardType === 'request' ||
-                transaction.extraDataForDrawer?.transactionCardType === 'receive')
-        )
-    }, [transaction])
+    const showUserProfileButton =
+        !!transaction &&
+        transaction.status === 'completed' &&
+        !!transaction.userName &&
+        !isAddress(transaction.userName) &&
+        (transaction.extraDataForDrawer?.transactionCardType === 'send' ||
+            transaction.extraDataForDrawer?.transactionCardType === 'request' ||
+            transaction.extraDataForDrawer?.transactionCardType === 'receive')
 
     return (
         <div ref={contentRef} className={twMerge('space-y-4', className)}>

From 607321c60d41ffd6c06253fb4c20dfaf0c8d1e87 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Tue, 16 Sep 2025 20:23:52 +0530
Subject: [PATCH 4/5] add comment

---
 src/components/TransactionDetails/TransactionDetailsReceipt.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index 219066294..fd31858ec 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -280,6 +280,7 @@ 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 =
         !!transaction &&
         transaction.status === 'completed' &&

From 87f1aa2a654fd5d20ae2cdb3a9ca7d64fdbc2e22 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Tue, 16 Sep 2025 20:30:54 +0530
Subject: [PATCH 5/5] feat: add 'use client' directive to
 TransactionDetailsReceipt component

---
 src/components/TransactionDetails/TransactionDetailsReceipt.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
index fd31858ec..39b66e6d7 100644
--- a/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
+++ b/src/components/TransactionDetails/TransactionDetailsReceipt.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import Card from '@/components/Global/Card'
 import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow'
 import { TransactionDetails } from '@/components/TransactionDetails/transactionTransformer'