fixed sendlink pwd security, should be same speed.

.cursorrules

@@ -11,25 +11,32 @@
 ## 💻 Code Quality
 
 - **Boy scout rule**: leave code better than you found it.
-- **Use explicit imports** where possible
+- **DRY** - do not repeat yourself. Reuse existing code and abstract shared functionality. Less code is better code.
+- this also means to use shared consts (e.g. check src/constants)
+- **Separate business logic from interface** - this is important for readability, debugging and testability.
+- **Use explicit imports** where possible.
 - **Reuse existing components and functions** - don't hardcode hacky solutions.
 - **Warn about breaking changes** - when making changes, ensure you're not breaking existing functionality, and if there's a risk, explicitly WARN about it.
 - **Mention refactor opportunities** - if you notice an opportunity to refactor or improve existing code, mention it. DO NOT make any changes you were not explicitly told to do. Only mention the potential change to the user.
 - **Performance is important** - cache where possible, make sure to not make unnecessary re-renders or data fetching.
-- **Separate business logic from interface** - this is important for readability, debugging and testability.
 - **Flag breaking changes** - always flag if changes done in Frontend are breaking and require action on Backend (or viceversa)
 
 ## 🧪 Testing
 
 - **Test new code** - where tests make sense, test new code. Especially with fast unit tests.
 - **Tests live with code** - tests should live where the code they test is, not in a separate folder
+- **Run tests**: `npm test` (fast, ~5s)
 
 ## 📁 Documentation
 
 - **All docs go in `docs/`** (except root `README.md`)
 - **Keep it concise** - docs should be kept quite concise. AI tends to make verbose logs. No one reads that, keep it short and informational.
 - **Check existing docs** before creating new ones - merge instead of duplicate
 - **Log significant changes** in `docs/CHANGELOG.md` following semantic versioning
+- **Maintain PR.md for PRs** - When working on a PR, maintain `docs/PR.md` with:
+    1. Summary of changes
+    2. Risks (what might break)
+    3. QA guidelines (what to test)
 
 ## 🚀 Performance
 

src/app/(mobile-ui)/claim/page.tsx

@@ -1,40 +1,64 @@
-import { getLinkDetails } from '@/app/actions/claimLinks'
 import { Claim } from '@/components'
-import { BASE_URL } from '@/constants'
+import { BASE_URL, PEANUT_WALLET_TOKEN_DECIMALS, PEANUT_WALLET_TOKEN_SYMBOL } from '@/constants'
 import { formatAmount, resolveAddressToUsername } from '@/utils'
 import { type Metadata } from 'next'
 import getOrigin from '@/lib/hosting/get-origin'
+import { sendLinksApi } from '@/services/sendLinks'
+import { formatUnits } from 'viem'
 
 export const dynamic = 'force-dynamic'
 
 async function getClaimLinkData(searchParams: { [key: string]: string | string[] | undefined }, siteUrl: string) {
     if (!searchParams.i || !searchParams.c) return null
 
     try {
-        const queryParams = new URLSearchParams()
-        Object.entries(searchParams).forEach(([key, val]) => {
-            if (Array.isArray(val)) {
-                val.forEach((v) => queryParams.append(key, v))
-            } else if (val) {
-                queryParams.append(key, val)
-            }
-        })
+        // Use backend API with belt-and-suspenders logic (DB + blockchain fallback)
+        const contractVersion = (searchParams.v as string) || 'v4.3'
 
-        const url = `${siteUrl}/claim?${queryParams.toString()}`
-        const linkDetails = await getLinkDetails(url)
+        const sendLink = await sendLinksApi.getByParams({
+            chainId: searchParams.c as string,
+            depositIdx: searchParams.i as string,
+            contractVersion,
+        })
+        // Backend always provides token details (from DB or blockchain fallback)
+        // Use fallback from consts if not available
+        const tokenDecimals = sendLink.tokenDecimals ?? PEANUT_WALLET_TOKEN_DECIMALS
+        const tokenSymbol = sendLink.tokenSymbol ?? PEANUT_WALLET_TOKEN_SYMBOL
+
+        // Transform to linkDetails format for metadata`
+        const linkDetails = {
+            senderAddress: sendLink.senderAddress,
+            tokenAmount: formatUnits(sendLink.amount, tokenDecimals),
+            tokenSymbol,
+            claimed: sendLink.status === 'CLAIMED' || sendLink.status === 'CANCELLED',
+        }
 
-        // Get username from sender address
-        const username = linkDetails?.senderAddress
-            ? await resolveAddressToUsername(linkDetails.senderAddress, siteUrl)
-            : null
+        // Get username from sender - use sender.username if available (from backend)
+        let username: string | null = sendLink.sender?.username || null
+
+        // If no username in backend data, try ENS resolution with timeout
+        if (!username && linkDetails.senderAddress) {
+            try {
+                // ENS race condition - catch errors to prevent Promise.race from throwing
+                const timeoutPromise = new Promise<null>((resolve) => setTimeout(() => resolve(null), 3000))
+                const resolvePromise = resolveAddressToUsername(linkDetails.senderAddress, siteUrl).catch((err) => {
+                    console.error('ENS resolution failed:', err)
+                    return null
+                })
+                username = await Promise.race([resolvePromise, timeoutPromise])
+            } catch (ensError) {
+                console.error('ENS resolution failed:', ensError)
+                username = null
+            }
+        }
 
         if (username) {
-            console.log('username', username)
+            console.log('Resolved username:', username)
         }
 
         return { linkDetails, username }
     } catch (e) {
-        console.log('error: ', e)
+        console.error('Error fetching claim link data:', e)
         return null
     }
 }

src/app/[...recipient]/client.tsx

@@ -194,7 +194,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props)
                     dispatch(paymentActions.setView('INITIAL'))
                 }
             } else {
-                setError(getErrorProps({ error, isUser: !!user }))
+                setError(getErrorProps({ error, isUser: !!user, recipient }))
             }
         }
 
@@ -587,14 +587,26 @@ const getDefaultError: (isUser: boolean) => ValidationErrorViewProps = (isUser)
     redirectTo: isUser ? '/home' : '/setup',
 })
 
-function getErrorProps({ error, isUser }: { error: ParseUrlError; isUser: boolean }): ValidationErrorViewProps {
+function getErrorProps({
+    error,
+    isUser,
+    recipient,
+}: {
+    error: ParseUrlError
+    isUser: boolean
+    recipient: string[]
+}): ValidationErrorViewProps {
+    const username = recipient[0] || 'unknown'
+
     switch (error.message) {
         case EParseUrlError.INVALID_RECIPIENT:
             return {
-                title: 'Invalid Recipient',
-                message: 'The recipient you are trying to pay is invalid. Please check the URL and try again.',
-                buttonText: isUser ? 'Go to home' : 'Create your Peanut Wallet',
-                redirectTo: isUser ? '/home' : '/setup',
+                title: `We don't know any @${username}`,
+                message: 'Are you sure you clicked on the right link?',
+                buttonText: 'Go back to home',
+                redirectTo: '/home',
+                showLearnMore: false,
+                supportMessageTemplate: 'I clicked on this link but got an error: {url}',
             }
         case EParseUrlError.INVALID_CHAIN:
             return {

src/app/[...recipient]/payment-layout-wrapper.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import GuestLoginModal from '@/components/Global/GuestLoginModal'
+import SupportDrawer from '@/components/Global/SupportDrawer'
 import TopNavbar from '@/components/Global/TopNavbar'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import { ThemeProvider } from '@/config'
@@ -64,8 +65,9 @@ export default function PaymentLayoutWrapper({ children }: { children: React.Rea
                 </div>
             </div>
 
-            {/* Modal */}
+            {/* Modals */}
             <GuestLoginModal />
+            <SupportDrawer />
         </div>
     )
 }

src/app/actions/claimLinks.ts

@@ -82,31 +82,3 @@ export async function getNextDepositIndex(contractVersion: string): Promise<numb
         args: [],
     })) as number
 }
-
-export async function claimSendLink(
-    pubKey: string,
-    recipient: string,
-    password: string,
-    waitForTx: boolean
-): Promise<SendLink | { error: string }> {
-    const response = await fetchWithSentry(`${PEANUT_API_URL}/send-links/${pubKey}/claim`, {
-        method: 'POST',
-        headers: {
-            'api-key': process.env.PEANUT_API_KEY!,
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            recipient,
-            password,
-            waitForTx,
-        }),
-    })
-    if (!response.ok) {
-        const body = await response.json()
-        if (!!body.error || !!body.message) {
-            return { error: body.message ?? body.error }
-        }
-        return { error: `HTTP error! status: ${response.status}` }
-    }
-    return jsonParse(await response.text()) as SendLink
-}

src/components/0_Bruddle/Toast.tsx

@@ -42,9 +42,9 @@ const Toast: React.FC<ToastMessage> = ({ type = 'info', message }) => {
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.8, y: 80 }}
             transition={{ type: 'spring', stiffness: 400, damping: 25 }}
-            className={twMerge(`border-2 px-6 py-1`, 'card shadow-4 min-w-fit', colors[type])}
+            className={twMerge(`border-2 px-6 py-1`, 'card shadow-4 min-w-fit max-w-[90vw] md:max-w-md', colors[type])}
         >
-            <p className="text-sm font-bold">{message}</p>
+            <p className="break-words text-sm font-bold">{message}</p>
         </motion.div>
     )
 }

src/components/Claim/Claim.consts.ts

@@ -36,8 +36,8 @@ export interface IClaimScreenProps {
     setRecipient: (recipient: { name: string | undefined; address: string }) => void
     tokenPrice: number
     setTokenPrice: (price: number) => void
-    transactionHash: string
-    setTransactionHash: (hash: string) => void
+    transactionHash: string | undefined
+    setTransactionHash: (hash: string | undefined) => void
     estimatedPoints: number
     setEstimatedPoints: (points: number) => void
     attachment: { message: string | undefined; attachmentUrl: string | undefined }

src/components/Claim/Generic/NotFound.view.tsx

@@ -1,13 +1,16 @@
 'use client'
 
-import StatusViewWrapper from '@/components/Global/StatusViewWrapper'
+import ValidationErrorView from '@/components/Payment/Views/Error.validation.view'
 
 export const NotFoundClaimLink = () => {
     return (
-        <StatusViewWrapper
-            title="Sorryyy"
-            description="This link is malformed. Are you sure you copied it correctly?"
-            supportCtaText="Deposit not found. Are you sure your link is correct?"
+        <ValidationErrorView
+            title="This link seems broken!"
+            message="Are you sure you clicked on the right link?"
+            buttonText="Go back to home"
+            redirectTo="/home"
+            showLearnMore={false}
+            supportMessageTemplate="I clicked on this link but got an error: {url}"
         />
     )
 }

src/components/Claim/Generic/WrongPassword.view.tsx

@@ -1,12 +1,16 @@
 'use client'
 
-import StatusViewWrapper from '@/components/Global/StatusViewWrapper'
+import ValidationErrorView from '@/components/Payment/Views/Error.validation.view'
 
 export const WrongPasswordClaimLink = () => {
     return (
-        <StatusViewWrapper
-            title="Sorryyy"
-            description="This link is malformed. Are you sure you copied it correctly?"
+        <ValidationErrorView
+            title="This link seems broken!"
+            message="Are you sure you clicked on the right link?"
+            buttonText="Go back to home"
+            redirectTo="/home"
+            showLearnMore={false}
+            supportMessageTemplate="I clicked on this link but got an error: {url}"
         />
     )
 }