diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index 4a3d3cf1a..f67ba7577 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/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 (
-
- {printableAddress(requestDetails?.recipientAddress)} is requesting: -
+
{recipientLabel} is requesting:
{ disabled={!!amount} /> - {/* Requested payment details if available */} - {requestId && renderRequestedPaymentDetails()} + {requestDetails?.recipientAccount.type !== AccountType.PEANUT_WALLET && renderRequestedPaymentDetails()} {!isPeanutWallet && (
diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx index ad57db400..7f027e2ed 100644 --- a/src/components/Request/Create/Views/Initial.view.tsx +++ b/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}` } diff --git a/src/services/services.types.ts b/src/services/services.types.ts index 05d84dec2..154326abe 100644 --- a/src/services/services.types.ts +++ b/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 {