[TASK-9261] fix: use username when available in requests

src/components/Payment/PaymentForm/index.tsx

@@ -23,6 +23,7 @@ import { useSearchParams } from 'next/navigation'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useAccount } from 'wagmi'
 import { PaymentInfoRow } from '../PaymentInfoRow'
+import { AccountType } from '@/interfaces'
 
 export const PaymentForm = ({ recipient, amount, token, chain }: ParsedURL) => {
     const dispatch = useAppDispatch()
@@ -187,14 +188,20 @@ export const PaymentForm = ({ recipient, amount, token, chain }: ParsedURL) => {
         }
     }, [requestDetails, isPeanutWallet])
 
+    const recipientLabel = useMemo(() => {
+        if (requestDetails?.recipientAccount?.type === AccountType.PEANUT_WALLET) {
+            return requestDetails!.recipientAccount.user.username
+        }
+
+        return printableAddress(requestDetails!.recipientAddress)
+    }, [requestDetails])
+
     const renderRequestedPaymentDetails = () => {
         if (!requestDetails) return null
 
         return (
             <div className="mb-6 border border-dashed border-black p-4">
-                <div className="text-sm font-semibold text-black">
-                    {printableAddress(requestDetails?.recipientAddress)} is requesting:
-                </div>
+                <div className="text-sm font-semibold text-black">{recipientLabel} is requesting:</div>
                 <div className="flex flex-col">
                     <PaymentInfoRow
                         label="Amount"
@@ -261,8 +268,7 @@ export const PaymentForm = ({ recipient, amount, token, chain }: ParsedURL) => {
                 disabled={!!amount}
             />
 
-            {/* Requested payment details if available */}
-            {requestId && renderRequestedPaymentDetails()}
+            {requestDetails?.recipientAccount.type !== AccountType.PEANUT_WALLET && renderRequestedPaymentDetails()}
 
             {!isPeanutWallet && (
                 <div>

src/components/Request/Create/Views/Initial.view.tsx

@@ -15,13 +15,13 @@ import { fetchTokenSymbol, isNativeCurrency } from '@/utils'
 import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import * as _consts from '../Create.consts'
-import { useToast } from '@/components/0_Bruddle/Toast'
 import { fetchWithSentry } from '@/utils'
 import * as Sentry from '@sentry/nextjs'
+import { useAuth } from '@/context/authContext'
 
 export const InitialView = ({
     onNext,
-    onPrev,
+    onPrev: _onPrev,
     setLink,
     setAttachmentOptions,
     attachmentOptions,
@@ -32,8 +32,8 @@ export const InitialView = ({
     recipientAddress,
     setRecipientAddress,
 }: _consts.ICreateScreenProps) => {
-    const toast = useToast()
     const { address, selectedWallet, isExternalWallet, isPeanutWallet, isConnected } = useWallet()
+    const { user } = useAuth()
     const {
         selectedTokenPrice,
         inputDenomination,
@@ -131,8 +131,7 @@ export const InitialView = ({
                 const requestLinkDetails = await requestResponse.json()
 
                 //TODO: create util function to generate link
-                //TODO: use human readeable instead of address
-                let link = `${process.env.NEXT_PUBLIC_BASE_URL}/${requestLinkDetails.recipientAddress}/`
+                let link = `${process.env.NEXT_PUBLIC_BASE_URL}/${isPeanutWallet ? user!.user.username : requestLinkDetails.recipientAddress}/`
                 if (requestLinkDetails.tokenAmount) {
                     link += `${requestLinkDetails.tokenAmount}`
                 }

src/services/services.types.ts

@@ -37,6 +37,14 @@ export interface TRequestResponse {
     updatedAt: string
     charges: ChargeEntry[]
     history: TRequestHistory[]
+    recipientAccount: {
+        userId: string
+        identifier: string
+        type: string
+        user: {
+            username: string
+        }
+    }
 }
 
 interface ChargeEntry {