diff --git a/src/app/(mobile-ui)/claim/page.tsx b/src/app/(mobile-ui)/claim/page.tsx index 4b134efc9..558d96264 100644 --- a/src/app/(mobile-ui)/claim/page.tsx +++ b/src/app/(mobile-ui)/claim/page.tsx @@ -57,7 +57,7 @@ export async function generateMetadata({ if (!linkDetails.claimed) { title = username - ? `${username} sent you ${formatAmount(Number(linkDetails.tokenAmount))} via Peanut` + ? `${username} sent you $${formatAmount(Number(linkDetails.tokenAmount))} via Peanut` : `You received ${Number(linkDetails.tokenAmount) < 0.01 ? 'some ' : formatAmount(Number(linkDetails.tokenAmount)) + ' in '}${linkDetails.tokenSymbol}!` } else { title = 'This link has been claimed' @@ -90,7 +90,7 @@ export async function generateMetadata({ const description = claimData?.linkDetails?.claimed ? 'This payment link has already been claimed.' - : 'Tap the link to claim instantly and without fees.' + : 'Tap the link to receive instantly and without fees.' return { title, @@ -101,7 +101,7 @@ export async function generateMetadata({ }, openGraph: { title, - description: 'Tap the link to claim instantly and without fees.', + description, images: [{ url: ogImageUrl, width: 1200, height: 630 }], type: 'website', siteName: 'Peanut', @@ -111,7 +111,7 @@ export async function generateMetadata({ site: '@PeanutProtocol', creator: '@PeanutProtocol', title, - description: 'Tap the link to claim instantly and without fees.', + description, images: [ { url: ogImageUrl, diff --git a/src/app/[...recipient]/page.tsx b/src/app/[...recipient]/page.tsx index 4e7c48e5f..c4dd63362 100644 --- a/src/app/[...recipient]/page.tsx +++ b/src/app/[...recipient]/page.tsx @@ -56,7 +56,13 @@ export async function generateMetadata({ params, searchParams }: any) { try { const chargeDetails = await chargesApi.get(chargeId) isPaid = chargeDetails?.fulfillmentPayment?.status === 'SUCCESSFUL' - username = chargeDetails.requestee?.username + if (isPaid) { + // If the charge is paid (i.e its a receipt), we need to get the username of the payer + username = chargeDetails.payments.find((payment) => payment.status === 'SUCCESSFUL')?.payerAccount?.user + ?.username + } else { + username = chargeDetails.requestee?.username + } // If we don't have amount/token from URL but have chargeId, get them from charge details if (!amount && chargeDetails) { @@ -109,12 +115,12 @@ export async function generateMetadata({ params, searchParams }: any) { if (isReceipt) { // Receipt case - show who shared the receipt const displayName = username || (isEthAddress ? printableAddress(recipient) : recipient) - title = `${displayName} shared a receipt for ${amount} via Peanut` + title = `${displayName} shared a receipt for $${amount} via Peanut` description = 'Tap to view the payment details instantly and securely.' } else if (amount && token) { - title = `${isEthAddress ? printableAddress(recipient) : recipient} is requesting ${amount} via Peanut` + title = `${isEthAddress ? printableAddress(recipient) : recipient} is requesting $${amount} via Peanut` } else if (amount) { - title = `${isEthAddress ? printableAddress(recipient) : recipient} is requesting ${amount} via Peanut` + title = `${isEthAddress ? printableAddress(recipient) : recipient} is requesting $${amount} via Peanut` } else if (isAddressOrEns) { title = `${isEthAddress ? printableAddress(recipient) : recipient} is requesting funds` } else if (chargeId) { diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx index 88fbfa0b7..118bae91c 100644 --- a/src/app/api/og/route.tsx +++ b/src/app/api/og/route.tsx @@ -101,6 +101,12 @@ export async function GET(req: NextRequest) { { width: 1200, height: 630, + fonts: [ + { name: 'Knerd Filled', data: knerdFilled, style: 'normal' }, + { name: 'Knerd Outline', data: knerdOutline, style: 'normal' }, + { name: 'Montserrat Medium', data: montserratMedium, style: 'normal' }, + { name: 'Montserrat SemiBold', data: montserratSemibold, style: 'normal' }, + ], } ) } diff --git a/src/components/og/ProfileCardOG.tsx b/src/components/og/ProfileCardOG.tsx index 310a2abee..7fc3452c6 100644 --- a/src/components/og/ProfileCardOG.tsx +++ b/src/components/og/ProfileCardOG.tsx @@ -1,7 +1,7 @@ const usernameFontSize = 150 function usernamePxWidth(name: string) { - const charPx = 0.6 * usernameFontSize // ≈48 px per glyph - return Math.round(name.length * charPx) + 40 // +40 padding + const charPx = 0.9 * usernameFontSize // ≈135 px per glyph + return Math.round(name.length * charPx) + 80 // +80 padding } export function ProfileCardOG({ @@ -50,13 +50,13 @@ export function ProfileCardOG({

- {username} + {username.toUpperCase()}

{/* 2) the scribble on top, absolutely positioned */} @@ -67,7 +67,7 @@ export function ProfileCardOG({ alt="" style={{ position: 'absolute', - top: -20, + top: -50, left: '50%', transform: 'translateX(-50%)', pointerEvents: 'none', @@ -83,7 +83,7 @@ export function ProfileCardOG({ gap: 16, }} > -

with

+

with

Peanut logo Peanut text diff --git a/src/services/services.types.ts b/src/services/services.types.ts index 3d6e2bb20..2b5362f4f 100644 --- a/src/services/services.types.ts +++ b/src/services/services.types.ts @@ -178,6 +178,7 @@ export interface TRequestChargeResponse { tokenDecimals: number tokenType: string tokenSymbol: string + transactionType: TChargeTransactionType updatedAt: string payments: Payment[] fulfillmentPayment: Payment | null