Merge pull request #1216 from peanutprotocol/feat/sucess-txn-ctas

[TASK-13463] Feat: Add go to profile button and update create account button

Author: Zishan-7

src/components/Claim/Link/Onchain/Success.view.tsx

@@ -14,6 +14,9 @@ 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'
+import CreateAccountButton from '@/components/Global/CreateAccountButton'
 
 export const SuccessClaimLinkView = ({
     transactionHash,
@@ -129,11 +132,7 @@ export const SuccessClaimLinkView = ({
                 </Button>
             )
         }
-        return (
-            <Button icon="user-plus" onClick={() => router.push('/setup')} shadowSize="4">
-                Create Account
-            </Button>
-        )
+        return <CreateAccountButton onClick={() => router.push('/setup')} />
     }
 
     return (

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

src/components/Payment/Views/Status.payment.view.tsx

@@ -1,7 +1,9 @@
 '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'
+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'
@@ -18,6 +20,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,9 +233,7 @@ const DirectSuccessView = ({
                             Back to home
                         </Button>
                     ) : (
-                        <Button icon="user-plus" onClick={() => router.push('/setup')} shadowSize="4">
-                            Create Account
-                        </Button>
+                        <CreateAccountButton onClick={() => router.push('/setup')} />
                     )}
                     {type === 'SEND' && !isExternalWalletFlow && !isWithdrawFlow && (
                         <Button

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'
@@ -28,6 +30,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 +62,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 +282,16 @@ 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' &&
+        !!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)}>
             {/* show qr code at the top if applicable */}
@@ -911,6 +925,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 &&