[TASK-16299] Feat/add flow improvements#1376
Merged
Zishan-7 merged 5 commits intopeanut-wallet-devfrom Oct 30, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughAdds a new InfoCard component, refactors add-money bank transfer UIs to use InfoCard/CopyToClipboard, extends OnrampConfirmationModal API to accept amount/currency, updates several call sites, expands CopyToClipboard icon sizes, and extends Tailwind color palette. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)
433-436: Consider using InfoCard for consistency.This PR introduces a new
InfoCardcomponent (used insrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxand elsewhere) to standardize info/warning messages. For consistency, consider replacing this inline Icon-based block withInfoCard:- <div className="flex items-center gap-2 text-gray-1"> - <Icon name="info" className="size-4" /> - <p className="text-sm">You can only withdraw to accounts under your name.</p> - </div> + <InfoCard + variant="info" + icon="info" + description="You can only withdraw to accounts under your name." + />This aligns with the UI standardization pattern evident throughout the PR.
src/components/Global/InfoCard/index.tsx (1)
48-91: Consider hiding empty InfoCards instead of showing fallback text.Line 91 displays "No content provided" when the InfoCard has no
title,description, oritems. This fallback might create visual noise if an InfoCard is accidentally rendered without content. Consider returningnullinstead:</> )} - {!hasContent && <span className={BASE_TEXT_CLASSES}>No content provided</span>} </div> </div> </Card>Or render nothing when empty:
const InfoCard = ({...}: InfoCardProps) => { const variantClasses = VARIANT_CLASSES[variant] const hasContent = title || description || items + + if (!hasContent) return null return ( <Card className={twMerge('flex w-full border', variantClasses, className)}>This prevents accidental rendering of empty cards in production.
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)
19-19: Remove commented import.The
Iconimport is no longer needed after replacing the inline icon block withInfoCard. Remove the commented line for cleaner code.-// import Icon from '@/components/Global/Icon'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx(4 hunks)src/components/AddMoney/components/AddMoneyBankDetails.tsx(5 hunks)src/components/AddMoney/components/OnrampConfirmationModal.tsx(2 hunks)src/components/AddWithdraw/DynamicBankAccountForm.tsx(2 hunks)src/components/Global/CopyToClipboard/index.tsx(1 hunks)src/components/Global/InfoCard/index.tsx(1 hunks)src/components/Request/views/ReqFulfillBankFlowManager.tsx(2 hunks)tailwind.config.js(3 hunks)
🧰 Additional context used
🧠 Learnings (25)
📓 Common learnings
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 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/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.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/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-13T18:22:01.941Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.941Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.
Applied to files:
src/components/AddWithdraw/DynamicBankAccountForm.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Applied to files:
src/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2025-10-24T13:44:39.473Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2024-10-29T12:20:47.207Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsx
📚 Learning: 2024-10-18T08:54:22.142Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#458
File: src/components/Offramp/Confirm.view.tsx:96-96
Timestamp: 2024-10-18T08:54:22.142Z
Learning: In the `src/components/Offramp/Confirm.view.tsx` file, it's acceptable to include crass or informal language in code comments.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsx
📚 Learning: 2024-10-18T01:51:35.247Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#458
File: src/components/Offramp/Confirm.view.tsx:141-141
Timestamp: 2024-10-18T01:51:35.247Z
Learning: The `handleConfirm` function in `src/components/Create/Link/Confirm.view.tsx` is separate from the one in `src/components/Offramp/Confirm.view.tsx` and does not need to be renamed when refactoring `handleConfirm` in `src/components/Offramp/Confirm.view.tsx`.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsx
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In `src/app/request/pay/page.tsx`, if `linkRes` is not OK in the `generateMetadata` function, the desired behavior is to use the standard title and preview image without throwing an error.
Applied to files:
src/components/AddMoney/components/OnrampConfirmationModal.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1299
File: src/app/(mobile-ui)/points/page.tsx:41-51
Timestamp: 2025-10-08T17:13:13.155Z
Learning: In `src/app/(mobile-ui)/points/page.tsx`, the icon name "invite-heart" is intentionally used (not "inviter-heart") when displaying who invited the current user, as this is a deliberate design choice despite semantic differences with UserHeader usage.
Applied to files:
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1185
File: src/components/Claim/useClaimLink.tsx:14-0
Timestamp: 2025-09-05T07:31:11.396Z
Learning: In the peanut-ui codebase, `window.history.replaceState` is preferred over `router.replace` when immediate/synchronous URL parameter updates are required, as `router.replace` is asynchronous and doesn't guarantee instant URL changes that subsequent code can rely on. This pattern is used consistently across usePaymentInitiator.ts, Confirm.payment.view.tsx, and useClaimLink.tsx.
Applied to files:
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2025-05-13T10:05:24.057Z
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#845
File: src/components/Request/link/views/Create.request.link.view.tsx:81-81
Timestamp: 2025-05-13T10:05:24.057Z
Learning: In the peanut-ui project, pages that handle request flows (like Create.request.link.view.tsx) are only accessible to logged-in users who will always have a username, making null checks for user?.user.username unnecessary in these contexts.
Applied to files:
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/components/Request/views/ReqFulfillBankFlowManager.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
Applied to files:
src/components/Request/views/ReqFulfillBankFlowManager.tsx
🧬 Code graph analysis (5)
src/components/Global/InfoCard/index.tsx (1)
src/components/Global/Icons/Icon.tsx (2)
IconProps(135-138)Icon(209-218)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (3)
src/utils/currency.ts (1)
formatCurrencyAmount(11-23)src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(18-87)src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(209-218)
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)
src/utils/bridge.utils.ts (2)
getCurrencySymbol(48-55)getCurrencyConfig(16-36)
src/components/Request/views/ReqFulfillBankFlowManager.tsx (1)
src/utils/bridge.utils.ts (2)
getCurrencySymbol(48-55)getCurrencyConfig(16-36)
⏰ 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
🔇 Additional comments (6)
tailwind.config.js (1)
30-30: LGTM! Color extensions support new UI components.The added color shades (
secondary.9,yellow.9/10/11,error.5/6) align with the newInfoCardcomponent's variant system introduced in this PR. The colors follow the existing naming conventions and extend the palette without breaking changes.Also applies to: 61-63, 120-121
src/components/Global/CopyToClipboard/index.tsx (1)
10-10: LGTM! Extends icon sizing options.Adding the
'3'size option provides finer-grained control over icon sizing and is used inAddMoneyBankDetails.tsx(lines 179, 195). The change is backward compatible.src/components/Request/views/ReqFulfillBankFlowManager.tsx (1)
191-192: LGTM! Currency derivation follows established pattern.The
amountandcurrencyprops correctly extend theOnrampConfirmationModalto display currency-specific information. The pattern matches usage insrc/app/(mobile-ui)/add-money/[country]/bank/page.tsx. Note that ifselectedCountryis null,getCurrencyConfigwill default to EUR, which is acceptable given the flow should ensure a country is selected at this step.src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (1)
347-351: LGTM! Consistent migration to InfoCard and modal enhancement.The replacement of the inline icon block with
InfoCard(lines 347-351) and the addition ofamount/currencyprops toOnrampConfirmationModal(lines 374-375) align with the standardization pattern across the PR. The currency derivation is consistent with other components.Also applies to: 374-375
src/components/AddMoney/components/OnrampConfirmationModal.tsx (1)
35-65: LGTM! Well-structured modal content with InfoCard composition.The refactored content effectively uses
InfoCardcomponents to present:
- Default card listing what will be provided
- Info card with check icons showing must-do items (including exact amount with currency symbol)
- Error card warning about consequences of mistakes
The inline JSX fragment (lines 44-51) correctly embeds the formatted
currencyandamountwithin the InfoCard items. This provides clear, structured guidance to users.src/components/AddMoney/components/AddMoneyBankDetails.tsx (1)
165-289: LGTM! Excellent UI refactor with improved user experience.The changes transform the bank details view with:
Dedicated cards for key information (lines 170-205): Amount and deposit reference now have prominent displays with copy functionality using the new
iconSize="3"option.Streamlined bank details (lines 207-264): Consolidated into a single card with consistent
PaymentInfoRowitems. ThehideBottomBorderprop creates a cleaner visual grouping.Enhanced guidance (lines 266-274): Warning
InfoCardprovides a clear double-check list before transfer.Better action flow (lines 276-278): New "I've sent the transfer" button provides clear next step, navigating to
/home.Visual hierarchy (line 283): ShareButton variant changed to
primary-softappropriately deemphasizes the secondary action.The refactor significantly improves clarity and usability of the bank transfer flow.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/AddMoney/components/AddMoneyBankDetails.tsx(6 hunks)src/components/Request/views/ReqFulfillBankFlowManager.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Request/views/ReqFulfillBankFlowManager.tsx
🧰 Additional context used
🧠 Learnings (12)
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 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/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.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/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-13T18:22:01.941Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.941Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-14T14:36:18.758Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:0-0
Timestamp: 2025-08-14T14:36:18.758Z
Learning: Bridge API requires ISO3 country codes (3-letter codes like "USA", "GBR") while flag display components need ISO2 codes (2-letter codes like "US", "GB").
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
🧬 Code graph analysis (1)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (3)
src/utils/currency.ts (1)
formatCurrencyAmount(11-23)src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(18-87)src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
⏰ 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
kushagrasarathe
approved these changes
Oct 30, 2025
Contributor
kushagrasarathe
left a comment
kushagrasarathe
left a comment
There was a problem hiding this comment.
approvved, some unused imports, and commented code, remove before merging
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (1)
59-67: Remove unused code.The
amountBasedOnCurrencyExchangeRatefunction is defined but never used in the component. The newformattedCurrencyAmountmemo (lines 106-114) has replaced its functionality.Apply this diff to remove the unused code:
- const amountBasedOnCurrencyExchangeRate = useCallback( - (amount: string) => { - if (!exchangeRate) return currencySymbolBasedOnCountry + ' ' + amount - return ( - currencySymbolBasedOnCountry + ' ' + formatAmount(parseFloat(amount ?? '0') * parseFloat(exchangeRate)) - ) - }, - [exchangeRate, currencySymbolBasedOnCountry] - )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx(3 hunks)src/components/AddMoney/components/AddMoneyBankDetails.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/(mobile-ui)/add-money/[country]/bank/page.tsx
🧰 Additional context used
🧠 Learnings (16)
📚 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/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-04T13:10:49.199Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In `src/app/request/pay/page.tsx`, if `linkRes` is not OK in the `generateMetadata` function, the desired behavior is to use the standard title and preview image without throwing an error.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.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/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-13T18:22:01.941Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:0-0
Timestamp: 2025-08-13T18:22:01.941Z
Learning: In the DynamicBankAccountForm component, the countryName parameter from useParams will always resemble a country title, not a URL slug.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-14T14:36:18.758Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1094
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:0-0
Timestamp: 2025-08-14T14:36:18.758Z
Learning: Bridge API requires ISO3 country codes (3-letter codes like "USA", "GBR") while flag display components need ISO2 codes (2-letter codes like "US", "GB").
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1266
File: src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx:46-57
Timestamp: 2025-10-02T15:23:01.513Z
Learning: In the withdraw flow at src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx, the points calculation query intentionally uses crypto.randomUUID() in the queryKey dependency array to bypass React Query caching, ensuring fresh points estimates on every render. This is the intended behavior.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
🧬 Code graph analysis (1)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (3)
src/utils/currency.ts (1)
formatCurrencyAmount(11-23)src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(18-87)src/components/0_Bruddle/Button.tsx (1)
Button(76-267)
⏰ 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
🔇 Additional comments (3)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (3)
106-114: Good memoization of formatted currency amount.The logic correctly handles both flows: USD for request-fulfillment and the onramp currency for add-money. The dependencies are appropriate and the early return at lines 163-165 prevents issues with empty amounts.
183-203: Good fix – copy button is now properly gated.The conditional rendering at lines 188-194 correctly addresses the previous review concern. The
CopyToClipboardcomponent is only rendered whendepositMessageexists, preventing users from copying the 'Loading...' placeholder.
274-276: Verify transfer completion flow and state tracking.The button immediately navigates to
/homewithout apparent confirmation or state updates. Please ensure:
- User action is tracked (they claimed to have sent the transfer)
- Backend is notified if needed for transfer monitoring
- Analytics/logging captures this flow completion
- User experience is appropriate (no accidental clicks, clear next steps)
If state tracking happens elsewhere in the flow or this is intentional design for simplicity, please confirm.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Also contributes to TASK-16360