Fix social preview bugs

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,

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) {

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' },
+                ],
             }
         )
     }

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({
                 <h2
                     style={{
                         fontFamily: 'Montserrat SemiBold',
-                        fontWeight: 700,
+                        fontWeight: 1000,
                         fontSize: usernameFontSize,
                         margin: 0,
                         letterSpacing: '-0.05em',
                     }}
                 >
-                    {username}
+                    {username.toUpperCase()}
                 </h2>
 
                 {/* 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,
                 }}
             >
-                <p style={{ fontFamily: 'Montserrat Medium', fontWeight: 500, fontSize: 46 }}>with</p>
+                <p style={{ fontFamily: 'Montserrat SemiBold', fontWeight: 800, fontSize: 50 }}>with</p>
                 <img src={iconSrc} width={36} height={46} alt="Peanut logo" />
                 <img src={logoSrc} width={132} height={26} alt="Peanut text" />
             </div>

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