[TASK-12561] Fix on/off-ramp bugs

[Zishan-7]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Sep 15, 2025 3:13pm

[notion-workspace]

non-blocking bugs on/off-ramp flows

[coderabbitai]

Walkthrough

Updates the add-money bank page to return fullName and email in initial data, adds a console log of initialData in the user details form, adjusts drawer bottom padding in the KYC status drawer, and changes a button font weight in the transaction details receipt.

Changes

Cohort / File(s)	Summary of changes
Add money user details data shape and logging src/app/(mobile-ui)/add-money/[country]/bank/page.tsx, src/components/AddMoney/UserDetailsForm.tsx	page.tsx: initialData now returns { fullName, email } using user.user.fullName ?? ''; firstName/lastName no longer returned. UserDetailsForm.tsx: added console.log(initialData) after state init.
KYC drawer padding tweak src/components/Kyc/KycStatusDrawer.tsx	Updated DrawerContent className from "p-5" to "p-5 pb-12".
Transaction details button weight src/components/TransactionDetails/TransactionDetailsReceipt.tsx	Changed toggle button class from font-medium to font-normal.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [TASK-14388] Feat/request on ramp improvements #1207 — Similar migration from firstName/lastName to fullName in add-money and UserDetailsForm.
• Fix page container and txn history bugs #1084 — Touches TransactionDetailsReceipt with related label logic changes.
• [TASK-12649] fix: allow user to change their email address if they have not completed kyc #999 — Modifies add-money bank flow and UserDetailsForm behavior.

Suggested labels

enhancement

Suggested reviewers

• kushagrasarathe
• jjramirezn

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "[TASK-12561] Fix on/off-ramp bugs" is concise and aligns with the changeset's intent to address issues in the on/off-ramp flows (for example the add-money user details payload change and minor UI tweaks). It is relevant to the modified files and clear enough for a teammate scanning history.
Description Check	✅ Passed	The PR description contains only two image attachments (screenshots) and those images appear related to the on/off-ramp fixes in the changeset, so the description is not completely off-topic. However it lacks any textual context about what was changed, why, and how to verify the fixes.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/on/off-ramp-bugs

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (5)

src/components/TransactionDetails/TransactionDetailsReceipt.tsx (3)

523-533: LGTM on styling tweak; add aria-expanded for a11y on the toggle.

The font-weight change is fine. Consider minimal a11y: expose the expanded state.

Apply this diff:

-                                <button
-                                    onClick={() => setShowBankDetails(!showBankDetails)}
-                                    className="flex w-full items-center justify-between py-3 text-left text-sm font-normal text-black underline transition-colors"
-                                >
+                                <button
+                                    onClick={() => setShowBankDetails(!showBankDetails)}
+                                    aria-expanded={showBankDetails}
+                                    className="flex w-full items-center justify-between py-3 text-left text-sm font-normal text-black underline transition-colors"
+                                >

---

862-874: Guard navigation when link is absent in “Pay” action.

If link is undefined, this navigates to ''. Disable the button or no-op to avoid confusing UX.

Apply this diff:

-                    <Button
+                    <Button
+                        disabled={!transaction.extraDataForDrawer?.link}
                         onClick={() => {
-                            window.location.href = transaction.extraDataForDrawer?.link ?? ''
+                            const link = transaction.extraDataForDrawer?.link
+                            if (link) window.location.href = link
                         }}
                         shadowSize="4"
                         className="flex w-full items-center gap-1"
                     >

---

1011-1021: Avoid non‑null assertions for user/link in CancelSendLinkModal action.

This can throw if user or link is momentarily unavailable. Add a safe guard.

Apply this diff:

-                    onClick={() => {
+                    onClick={() => {
                         setIsLoading(true)
                         setShowCancelLinkModal(false)
-                        sendLinksApi
-                            .claim(user!.user.username!, transaction.extraDataForDrawer!.link!)
+                        const username = user?.user.username
+                        const link = transaction.extraDataForDrawer?.link
+                        if (!username || !link) {
+                            console.error('Missing username or link for claim action')
+                            setIsLoading(false)
+                            return
+                        }
+                        sendLinksApi
+                            .claim(username, link)

src/components/Kyc/KycStatusDrawer.tsx (1)

123-123: Padding change looks good; consider safe‑area padding for notched devices.

Optional: include iOS/Android safe‑area inset to prevent content from being obscured by system UI.

Apply this diff:

-                <DrawerContent className="p-5 pb-12">{renderContent()}</DrawerContent>
+                <DrawerContent className="p-5 pb-12 pb-[calc(3rem+env(safe-area-inset-bottom))]">
+                    {renderContent()}
+                </DrawerContent>

src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)

244-253: Drop unused first/last name split and clean useMemo deps.

These variables aren’t used in initialUserDetails anymore; remove them and trim the dependency array.

Apply this diff:

-    const [firstName, ...lastNameParts] = (user?.user.fullName ?? '').split(' ')
-    const lastName = lastNameParts.join(' ')
-
     const initialUserDetails: Partial<UserDetailsFormData> = useMemo(
         () => ({
             fullName: user?.user.fullName ?? '',
             email: user?.user.email ?? '',
         }),
-        [user?.user.fullName, user?.user.email, firstName, lastName]
+        [user?.user.fullName, user?.user.email]
     )

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bced779 and 3e1c0cc.

📒 Files selected for processing (4)

• src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1 hunks)
• src/components/AddMoney/UserDetailsForm.tsx (1 hunks)
• src/components/Kyc/KycStatusDrawer.tsx (1 hunks)
• src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-08-14T14:42:54.411Z

Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.

Applied to files:

• src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

📚 Learning: 2025-05-22T15:38:48.586Z

Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".

Applied to files:

• src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

🧬 Code graph analysis (1)

src/components/Kyc/KycStatusDrawer.tsx (1)

src/components/Global/Drawer/index.tsx (1)

• DrawerContent (86-86)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview