Prod Release Sprint 124#1551
Merged
kushagrasarathe merged 217 commits intopeanut-walletfrom Jan 7, 2026
Merged
Conversation
[TASK-17159] Add updated points component in withdraw flow
…unts fix: take account owner name and use it to create external account on bridge
…chore chore: added home carousel cta item
fix: update copy to be dynamic for install pwa screen wen on brave
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughThis PR performs a large-scale refactoring of the codebase, splitting barrel imports across Changes
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ❌ 3❌ Failed checks (1 warning, 2 inconclusive)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 (5)
src/components/Setup/components/SetupWrapper.tsx (1)
281-292: Consider adding type safety for the cloned props.The
cloneElementapproach works but lacks type checking for the injected props. IfInstallPWA's prop interface changes, this won't catch mismatches at compile time.Consider using a render prop pattern or explicit prop passing for better type safety:
-{Children.map(children, (child) => { - if ((child as ReactElement).type === InstallPWA) { - return cloneElement(child as ReactElement, { - deferredPrompt, - canInstall, - deviceType, - screenId, - setShowBraveSuccessMessage, - }) - } - return child -})} +{Children.map(children, (child) => { + if ((child as ReactElement<React.ComponentProps<typeof InstallPWA>>).type === InstallPWA) { + return cloneElement(child as ReactElement<React.ComponentProps<typeof InstallPWA>>, { + deferredPrompt, + canInstall, + deviceType, + screenId, + setShowBraveSuccessMessage, + }) + } + return child +})}src/app/(mobile-ui)/withdraw/manteca/page.tsx (1)
47-48: Unused import:STAR_STRAIGHT_ICONThe
STAR_STRAIGHT_ICONimport appears to be unused after the refactor to usePointsCard. The inline points display that previously used this icon has been replaced.import { usePointsCalculation } from '@/hooks/usePointsCalculation' -import STAR_STRAIGHT_ICON from '@/assets/icons/starStraight.svg' import PointsCard from '@/components/Common/PointsCard'src/components/AddWithdraw/DynamicBankAccountForm.tsx (3)
29-45: Clarify long‑term plan for multiple name fields on IBankAccountDetailsYou now have
name,firstName,lastName, andaccountOwnerNameonIBankAccountDetails. The comments later in the file state thatfirstName/lastNameare only for backwards compatibility and not used in the UI, andaccountOwnerNameis the canonical input.To reduce future confusion for consumers of this type, consider either:
- Marking
nameand/orfirstName/lastNameas clearly legacy/deprecated in a doc comment, or- Planning a follow‑up refactor where
accountOwnerNamebecomes the only public input, and first/last are derived only at the payload boundary.This doesn’t block the current change but will help keep the type surface understandable as the codebase evolves.
175-191: Harden and de‑duplicate accountOwnerName → first/last split logicThe splitting logic is straightforward and matches the validation rules (first token as
firstName, the rest aslastName, with a legacy fallback todata.firstName/data.lastName). A couple of small robustness/maintainability tweaks would help:
- Guard on the trimmed value, not just truthiness
Right now, a string of only spaces enters the first branch:
if (data.accountOwnerName) { const nameParts = data.accountOwnerName.trim().split(/\s+/) firstName = nameParts[0] || '' lastName = nameParts.slice(1).join(' ') || '' }Even though the UI validator should prevent this, you could make the split logic safer (and friendlier to programmatic callers) by basing the condition on the trimmed value and falling back if it’s empty or has fewer than two parts:
- if (data.accountOwnerName) { - const nameParts = data.accountOwnerName.trim().split(/\s+/) - firstName = nameParts[0] || '' - lastName = nameParts.slice(1).join(' ') || '' - } else { - firstName = data.firstName || '' - lastName = data.lastName || '' - } + const trimmedOwnerName = (data.accountOwnerName ?? '').trim() + if (trimmedOwnerName.length > 0) { + const nameParts = trimmedOwnerName.split(/\s+/) + if (nameParts.length >= 2) { + firstName = nameParts[0] + lastName = nameParts.slice(1).join(' ') + } else { + // fallback if only a single token somehow sneaks through + firstName = data.firstName || nameParts[0] || '' + lastName = data.lastName || '' + } + } else { + firstName = data.firstName || '' + lastName = data.lastName || '' + }
- Consider extracting into a small helper
Since the exact same
firstName/lastNamepair is used in the payload (accountOwnerName.firstName/lastName), the rawData passed toonSuccess, and the persisted Redux form data, extracting this into a helper (e.g.deriveAccountOwnerNames(data: IBankAccountDetails)) would:
- Avoid future drift if the splitting rules change.
- Make this part of
onSubmiteasier to read.These adjustments are non‑blocking but would make the behavior more defensive and maintainable.
Also applies to: 226-227, 238-239
357-387: DRY up duplicated account owner name validation rulesThe
accountOwnerNamefield’s validation (required+ “at least two space‑separated parts”) is repeated three times: guest claim flow, logged‑in claim withoutfullName, and withdraw flow. The logic and error messages are identical.To keep things consistent and easier to tweak later, consider extracting the rules into a shared constant/function:
+ const accountOwnerNameRules = { + required: 'Account owner name is required', + validate: (value: string) => { + const trimmed = value.trim() + const parts = trimmed.split(/\s+/) + if (parts.length < 2) { + return 'Please enter both first and last name' + } + return true + }, + } ... - {renderInput('accountOwnerName', 'Account Owner Name', { - required: 'Account owner name is required', - validate: (value: string) => { - const trimmed = value.trim() - const parts = trimmed.split(/\s+/) - if (parts.length < 2) { - return 'Please enter both first and last name' - } - return true - }, - })} + {renderInput('accountOwnerName', 'Account Owner Name', accountOwnerNameRules)}Same reference can be reused in all three places, reducing the chance of small copy‑paste differences in future edits.
Also applies to: 396-409
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx(1 hunks)src/app/(mobile-ui)/withdraw/manteca/page.tsx(2 hunks)src/components/AddWithdraw/AddWithdrawCountriesList.tsx(3 hunks)src/components/AddWithdraw/DynamicBankAccountForm.tsx(8 hunks)src/components/Claim/Link/views/BankFlowManager.view.tsx(1 hunks)src/components/Setup/Views/InstallPWA.tsx(5 hunks)src/components/Setup/components/SetupWrapper.tsx(4 hunks)src/hooks/useBravePWAInstallState.ts(1 hunks)src/hooks/useGetBrowserType.ts(1 hunks)src/hooks/useHomeCarouselCTAs.tsx(7 hunks)
🧰 Additional context used
🧠 Learnings (20)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Claim/Link/views/BankFlowManager.view.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2024-10-18T01:51:35.247Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Claim/Link/views/BankFlowManager.view.tsx
📚 Learning: 2025-11-06T08:19:05.201Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1407
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:459-475
Timestamp: 2025-11-06T08:19:05.201Z
Learning: In src/components/AddWithdraw/DynamicBankAccountForm.tsx, the street address field has a 35-character maximum length limit because the backend provider enforces this constraint, applicable to both US and Mexican addresses.
Applied to files:
src/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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)/withdraw/[country]/bank/page.tsxsrc/hooks/useHomeCarouselCTAs.tsxsrc/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/hooks/useHomeCarouselCTAs.tsxsrc/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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)/withdraw/[country]/bank/page.tsxsrc/hooks/useHomeCarouselCTAs.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-08-13T18:22:01.941Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/hooks/useHomeCarouselCTAs.tsxsrc/app/(mobile-ui)/withdraw/manteca/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-11-04T17:47:06.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1396
File: src/app/(mobile-ui)/home/page.tsx:295-304
Timestamp: 2025-11-04T17:47:06.328Z
Learning: In src/app/(mobile-ui)/home/page.tsx, when closing the KycCompletedModal, updateUserById is called without awaiting to provide instant feedback to the user. This fire-and-forget pattern for modal dismissals and UI preference updates is intentional and consistent across the codebase—user experience with instant UI feedback takes priority over waiting for backend sync operations.
Applied to files:
src/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/hooks/useHomeCarouselCTAs.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-08-11T10:35:02.715Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 1078
File: src/hooks/useKycFlow.ts:129-141
Timestamp: 2025-08-11T10:35:02.715Z
Learning: In the KYC flow implementation in `src/hooks/useKycFlow.ts`, when Terms of Service (ToS) is accepted, there will always be a KYC link available in the `apiResponse`. The system ensures this invariant, so defensive checks for missing KYC links after ToS acceptance are unnecessary.
Applied to files:
src/hooks/useHomeCarouselCTAs.tsx
📚 Learning: 2025-08-20T09:08:19.266Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 1112
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:336-343
Timestamp: 2025-08-20T09:08:19.266Z
Learning: In the KYC flow implementation, `setJustCompletedKyc` must be called after `await fetchUser()` in the `handleKycSuccess` callback. Setting `justCompletedKyc` before fetching the user would cause a re-fetching loop because `handleKycSuccess` is set in a useEffect inside the KYC hook, which would cause the UI flow to get stuck in one view.
Applied to files:
src/hooks/useHomeCarouselCTAs.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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)/withdraw/manteca/page.tsx
📚 Learning: 2025-09-16T17:27:39.840Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1201
File: src/components/Payment/Views/MantecaFulfillment.view.tsx:56-56
Timestamp: 2025-09-16T17:27:39.840Z
Learning: In the TRequestResponse interface (src/services/services.types.ts), recipientAccount is a required field, not optional. When requestDetails is not null, recipientAccount and its nested user.username properties are guaranteed to exist. Only requestDetails itself can be null (typed as TRequestResponse | null).
Applied to files:
src/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-05-13T10:05:24.057Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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/components/AddWithdraw/DynamicBankAccountForm.tsx
📚 Learning: 2025-06-22T16:10:53.167Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 915
File: src/hooks/useKycFlow.ts:96-124
Timestamp: 2025-06-22T16:10:53.167Z
Learning: The `initiateKyc` function in `src/app/actions/users.ts` already includes comprehensive error handling with try-catch blocks and returns structured responses with either `{ data }` or `{ error }` fields, so additional try-catch blocks around its usage are not needed.
Applied to files:
src/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: 2025-10-15T06:45:22.055Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1241
File: src/components/ForceIOSPWAInstall/index.tsx:6-51
Timestamp: 2025-10-15T06:45:22.055Z
Learning: In the ForceIOSPWAInstall component (src/components/ForceIOSPWAInstall/index.tsx), the blocking behavior without a skip/dismiss option is intentional by design to force PWA installation on iOS devices.
Applied to files:
src/components/Setup/components/SetupWrapper.tsxsrc/components/Setup/Views/InstallPWA.tsx
📚 Learning: 2025-08-19T09:08:16.945Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1107
File: src/components/LandingPage/hero.tsx:160-160
Timestamp: 2025-08-19T09:08:16.945Z
Learning: In the Hero component at src/components/LandingPage/hero.tsx, the team prefers to keep the main heading as h2 (not h1) and does not want a heading prop parameter - the heading content should remain hardcoded in the component.
Applied to files:
src/components/Setup/components/SetupWrapper.tsx
📚 Learning: 2025-08-07T12:53:50.946Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1072
File: src/app/(setup)/setup/page.tsx:173-175
Timestamp: 2025-08-07T12:53:50.946Z
Learning: In the peanut-ui setup flow at `src/app/(setup)/setup/page.tsx`, when handling unsupported scenarios, both device not supported and browser not supported cases should show the same "Unsupported browser" message using the `UnsupportedBrowserModal` component, rather than having distinct messaging for each scenario.
Applied to files:
src/components/Setup/Views/InstallPWA.tsx
📚 Learning: 2025-08-12T17:44:04.268Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/dropLink.tsx:35-42
Timestamp: 2025-08-12T17:44:04.268Z
Learning: In the Peanut UI project, opening the `/setup` route in a new tab from landing page CTAs is intentional design behavior to keep users on the marketing page while they start the setup process.
Applied to files:
src/components/Setup/Views/InstallPWA.tsx
🧬 Code graph analysis (6)
src/hooks/useBravePWAInstallState.ts (1)
src/hooks/useGetBrowserType.ts (1)
useGetBrowserType(19-85)
src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx (1)
src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(18-88)
src/hooks/useHomeCarouselCTAs.tsx (1)
src/hooks/useGeoLocation.ts (1)
useGeoLocation(17-71)
src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)
scripts/compare-rates.mjs (2)
value(24-24)trimmed(20-20)
src/components/Setup/components/SetupWrapper.tsx (1)
src/hooks/useBravePWAInstallState.ts (1)
useBravePWAInstallState(17-67)
src/components/Setup/Views/InstallPWA.tsx (2)
src/components/Setup/Setup.types.ts (2)
BeforeInstallPromptEvent(57-64)ScreenId(1-14)src/hooks/useBravePWAInstallState.ts (1)
useBravePWAInstallState(17-67)
⏰ 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: Analyze (javascript-typescript)
🔇 Additional comments (19)
src/hooks/useGetBrowserType.ts (1)
56-59: LGTM! Correct ordering for Brave detection.Moving Brave detection before Chrome is necessary since Brave's user agent includes "chrome". The optional chaining on
isBrave?.()and explicit=== truecheck provide good defensive handling.src/hooks/useBravePWAInstallState.ts (1)
17-67: Well-structured hook with proper cleanup.The implementation correctly:
- Uses cancellation pattern for async safety
- Cleans up event listener on unmount
- Gracefully handles missing
getInstalledRelatedAppsAPI- Combines multiple signals (standalone mode, related apps, browser type)
src/components/Setup/components/SetupWrapper.tsx (1)
212-223: Clean integration of Brave-specific messaging.The conditional heading logic is clear and the state management is straightforward. The
shouldShowBraveInstalledHeaderOnlyflag appropriately gates the success message to Brave users on PWA install screens.src/components/Setup/Views/InstallPWA.tsx (4)
38-38: Good refactor to centralized hook.Replacing the inline Brave detection with
useBravePWAInstallStateconsolidates browser detection logic and ensures consistency across components.
159-163: Confirm intended UX: Brave users see only the header after installation.When Brave PWA is installed but not in standalone mode,
AndroidPWASpecificInstallFlowreturnsnull. Combined withSetupWrappershowing "Success! Please open the Peanut app from your home screen...", this provides the guidance. Just ensure this is the intended flow where users see only text with no action button.
72-74: Addingpushto dependencies is technically correct.While Next.js router's
pushfunction is stable, including it satisfies the exhaustive-deps rule. No functional change expected.
95-110: Remove this review comment — the component does not use conflicting sources of PWA state.InstallPWA imports only
isBravefromuseBravePWAInstallState(line 38), notisPWAInstalled. The component's localisPWAInstalledstate (line 37) is independent and is the only source used within this component. The local state intentionally includes the 10-secondinstallCompletedelay (lines 76–82), and the effect at lines 95–110 correctly uses only this local state alongsideisBrave. No divergence between two sources exists.Likely an incorrect or invalid review comment.
src/app/(mobile-ui)/withdraw/manteca/page.tsx (1)
372-374: Good refactor: Consolidated points display into reusable component.The replacement of the inline points display with
PointsCardimproves consistency across the codebase. ThepointsDivRefis correctly passed for confetti origin positioning.src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx (1)
292-295: Good change: Clearer label and consistent data source.The label change from "Full name" to "Account Owner" is more accurate for this context. The fallback chain
accountOwnerName -> fullName -> 'N/A'properly handles cases where the new field isn't yet populated on older accounts.src/hooks/useHomeCarouselCTAs.tsx (5)
45-45: Verify handling when geolocation is loading or fails.
useGeoLocationreturnscountryCodewhich can benullduring loading or on error. TheisLatamUsercheck at line 97 correctly handles this (null !== 'AR' && null !== 'BR'), so the LATAM CTA won't show during loading, which is appropriate behavior.
95-98: Good DRY refactor for KYC and LATAM checks.Consolidating
hasKycApprovalavoids repeating the OR condition. TheisLatamUserderivation is clear and correctly uses the 2-letter ISO country codes thatuseGeoLocationreturns.
153-177: New LATAM Cashback CTA looks good.The CTA is appropriately gated to Argentina and Brazil users. The copy is clear about the 20% cashback benefit and the invite mechanism. Navigation to
/pointsis correct for the rewards/referral page.
206-206: Consistent use ofhasKycApprovalvariable.The KYC prompt condition now correctly uses the consolidated
hasKycApprovalvariable, maintaining consistency with the QR payment CTA logic.
242-242: Dependency array correctly updated.Adding
userCountryCodeensures the carousel CTAs regenerate when the user's country is determined, which is necessary for the LATAM CTA to appear correctly.src/components/AddWithdraw/AddWithdrawCountriesList.tsx (3)
15-15: Import cleanup:updateUserByIdremoved.The removal of
updateUserByIdfrom imports aligns with the AI summary indicating that the branch updating user profile (fullName and email) has been removed. This simplifies the flow by relying on form-collectedaccountOwnerName.
94-96: Simplified happy path validation.Removing the
fullNamecheck is correct sinceaccountOwnerNameis now always collected from the form (viaDynamicBankAccountForm). The comment clearly documents this design decision.
119-126: Fallback account details correctly constructaccountOwnerNamefor display.The code safely constructs
accountOwnerNamefrompayload.accountOwnerName.firstNameandpayload.accountOwnerName.lastName. Form validation upstream inDynamicBankAccountFormensures both properties are always strings (with empty string defaults), so the template literal correctly composes the display name for the confirmation page even when the account isn't immediately found in refreshed user data.src/components/Claim/Link/views/BankFlowManager.view.tsx (1)
431-434: The splitfirstNameandlastNamederived fromuser.fullNameare not actually used in the saved accounts flow. While a single-word name would result in an emptylastNamestring, this doesn't impact functionality sincereceiverFullNameis set directly touserForOfframp.fullName(the unsplit full name), and the split values are neither displayed in the confirmation view nor sent to any API. If these fields are intended for future use, consider whether the empty string for single-word names is acceptable or if additional validation/trimming is needed.src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)
91-107: Prefill behavior for account owner name and email looks consistent with flowsThe new
defaultAccountOwnerNameanduseFormdefaults correctly distinguish flows:
- Claim flow: pre‑fills
accountOwnerNameanduser.user.fullName/user.user.emailwhen present.- Withdraw flow: leaves
accountOwnerNameempty by design and avoids pre‑filling email, relying instead on the stored user email (only rendering the email field when there is no user email).Because
initialDataandpersistedFormDataare spread after the defaults, existing saved data will still override these values, preserving backwards compatibility. This looks good as‑is.
Fix/manteca loading state, Duplicate manteca KYC modal, copy change
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/(mobile-ui)/qr-pay/page.tsx (1)
1556-1576: Send button loading label change looks good; consider centralizing copyThe conditional now cleanly differentiates between WebSocket wait (
'Processing Payment...') and generic loading ('Loading...'), which is fine and keeps UX clear. If you find more places using similar strings, you might eventually want to centralize these labels (or tie them toloadingState) to avoid copy drift, but that’s purely optional.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/(mobile-ui)/qr-pay/page.tsx(1 hunks)src/components/Global/PeanutActionCard/index.tsx(1 hunks)src/components/Kyc/InitiateMantecaKYCModal.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (14)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/components/Global/PeanutActionCard/index.tsx
📚 Learning: 2025-07-24T10:57:15.315Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1000
File: src/components/og/ProfileCardOG.tsx:0-0
Timestamp: 2025-07-24T10:57:15.315Z
Learning: In `src/components/og/ProfileCardOG.tsx`, the scribble image should have an empty alt attribute (alt="") to prevent layout issues if the image fails to load. Since it's a decorative element positioned absolutely over the username text, showing alt text would interfere with the layout and username display.
Applied to files:
src/components/Global/PeanutActionCard/index.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsxsrc/components/Kyc/InitiateMantecaKYCModal.tsx
📚 Learning: 2025-09-08T03:13:09.111Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 1190
File: src/app/(mobile-ui)/qr-pay/page.tsx:156-176
Timestamp: 2025-09-08T03:13:09.111Z
Learning: In the peanut-ui mobile app, the `/qr-pay` route is only accessed through the DirectSendQR component which always includes the qrCode parameter in the URL when redirecting users to the QR pay page.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-22T18:10:56.955Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:25-25
Timestamp: 2024-10-22T18:10:56.955Z
Learning: In the `src/app/request/pay/page.tsx` file, the `PreviewType` enum values are strings, so when adding `previewType` to `URLSearchParams`, there's no need to convert them to strings.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2024-10-23T09:38:04.446Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:04.446Z
Learning: Within `src/app/request/pay/page.tsx`, extracting the `getBaseUrl` function does not add significant readability, and the host URL construction code is expected to change soon.
Applied to files:
src/app/(mobile-ui)/qr-pay/page.tsx
📚 Learning: 2025-11-04T17:47:06.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1396
File: src/app/(mobile-ui)/home/page.tsx:295-304
Timestamp: 2025-11-04T17:47:06.328Z
Learning: In src/app/(mobile-ui)/home/page.tsx, when closing the KycCompletedModal, updateUserById is called without awaiting to provide instant feedback to the user. This fire-and-forget pattern for modal dismissals and UI preference updates is intentional and consistent across the codebase—user experience with instant UI feedback takes priority over waiting for backend sync operations.
Applied to files:
src/components/Kyc/InitiateMantecaKYCModal.tsx
📚 Learning: 2025-08-20T09:08:19.266Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 1112
File: src/components/Claim/Link/views/BankFlowManager.view.tsx:336-343
Timestamp: 2025-08-20T09:08:19.266Z
Learning: In the KYC flow implementation, `setJustCompletedKyc` must be called after `await fetchUser()` in the `handleKycSuccess` callback. Setting `justCompletedKyc` before fetching the user would cause a re-fetching loop because `handleKycSuccess` is set in a useEffect inside the KYC hook, which would cause the UI flow to get stuck in one view.
Applied to files:
src/components/Kyc/InitiateMantecaKYCModal.tsx
🔇 Additional comments (4)
src/components/Global/PeanutActionCard/index.tsx (1)
27-27: Copy change looks goodText update is localized to the subtitle and doesn’t affect layout or behavior. Safe to ship as-is.
src/components/Kyc/InitiateMantecaKYCModal.tsx (3)
22-22: LGTM!The
autoStartKycprop is properly typed and integrated into the component.Also applies to: 35-35
64-69: LGTM!The dynamic title and description logic provides appropriate feedback during the auto-start flow while preserving flexibility for custom messaging.
118-118: LGTM!The auto-start logic correctly triggers for users who haven't completed KYC approval, streamlining the verification flow for new users while preserving manual control for users requiring regional re-verification.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Global/WalletNavigation/index.tsx (1)
109-109: Consider addingfill="currentColor"to Support icon for consistency.The Home icon (Line 87) uses
fill="currentColor"to inherit color for the active state styling, but the Support icon does not. Adding this attribute would ensure consistent color behavior across both mobile navigation items.🔎 Proposed fix for visual consistency
- <NavIcon name="peanut-support" size={20} /> + <NavIcon name="peanut-support" size={20} fill="currentColor" />
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Global/WalletNavigation/index.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
🧬 Code graph analysis (1)
src/components/Global/WalletNavigation/index.tsx (1)
src/context/ModalsContext.tsx (1)
useModalsContext(81-87)
⏰ 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/Global/WalletNavigation/index.tsx (3)
23-29: LGTM! Icon sizing reflects a unified design scheme.The updated icon sizes create logical groupings (14 for directional actions and info, 15 for transaction actions), improving visual consistency across the desktop navigation.
87-88: LGTM! Home icon and label spacing updated consistently.The larger icon (26 vs 20) combined with
fill="currentColor"ensures proper color inheritance for the active state, and removingmt-1from the label maintains proper visual alignment with the increased icon size.
6-6: No issues identified. TheuseModalsContexthook correctly provides thesetIsSupportModalOpenmethod. The ModalsContext interface (line 16) and provider value (line 59) both includesetIsSupportModalOpen, and the usage at line 72 in WalletNavigation is valid.
fix: error component icon width
[TASK-17701] Fix/deposit qa bugs
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/app/(mobile-ui)/add-money/crypto/page.tsx (1)
20-26: IncludepeanutWalletAddressin the query key to prevent stale cache.The
queryFnusespeanutWalletAddressto create the deposit address, but it's missing from thequeryKey. If the wallet address changes (e.g., account switch), React Query will serve stale cached data created for a different wallet address.🔎 Proposed fix
const { data: depositAddressData, isLoading } = useQuery({ - queryKey: ['rhino-deposit-address', user?.user.userId, chainType], + queryKey: ['rhino-deposit-address', user?.user.userId, peanutWalletAddress, chainType], queryFn: () => rhinoApi.createDepositAddress(peanutWalletAddress as string, chainType, user?.user.userId as string), enabled: !!user && !!peanutWalletAddress, staleTime: 1000 * 60 * 60 * 24, // 24 hours })src/components/Global/Icons/Icon.tsx (1)
168-168: Refine the Tailwind color class detection regex.The regex
/text-/will match any className containing "text-" anywhere (e.g., "context-menu", "latest-version", "subtext-container"), not just Tailwind color classes. This could cause incorrect color handling where Tailwind classes are detected when they shouldn't be.🔎 Proposed fix to make the regex more specific
- const hasTextColorClass = className && /text-/.test(className) + const hasTextColorClass = className && /(?:^|\s)text-\w+/.test(className)This ensures the pattern matches "text-" only at word boundaries (start of string or after whitespace), preventing false positives.
🧹 Nitpick comments (4)
src/components/Global/CopyToClipboard/index.tsx (1)
68-68: Simplify redundant fill logic.Since
fillhas a default value of'black'(line 20), the ternaryfill ? fill : 'white'will never use the'white'fallback. This is either dead code or indicates a misunderstanding of the default parameter behavior.🔎 Proposed fix
- fill={fill ? fill : 'white'} + fill={fill}src/components/Global/TokenAndNetworkConfirmationModal/index.tsx (1)
41-48: Calculate remaining EVM chain count dynamically.The hardcoded
.slice(0, 6)and'+4 EVM'text assume exactly 10 EVM chains total. IfRHINO_SUPPORTED_EVM_CHAINSgrows or shrinks, this display becomes incorrect.🔎 Proposed fix
- {RHINO_SUPPORTED_EVM_CHAINS.slice(0, 6).map((chain) => ( + {RHINO_SUPPORTED_EVM_CHAINS.slice(0, Math.min(6, RHINO_SUPPORTED_EVM_CHAINS.length)).map((chain) => ( <ChainChip key={chain.name} chainName={chain.name} chainSymbol={chain.logoUrl} /> ))} - <ChainChip - chainName={'+4 EVM'} - logo="plus" - logoClassName="bg-black rounded-full text-white" - /> + {RHINO_SUPPORTED_EVM_CHAINS.length > 6 && ( + <ChainChip + chainName={`+${RHINO_SUPPORTED_EVM_CHAINS.length - 6} EVM`} + logo="plus" + logoClassName="bg-black rounded-full text-white" + /> + )}src/components/Global/AddressLink/index.tsx (2)
17-17: Simplify by removing redundant crypto address check.The
printableAddressfunction already checksisCryptoAddressinternally and returns the address unchanged if it's not a crypto address. The ternary here is redundant.🔎 Proposed simplification
- isCryptoAddress(address) ? printableAddress(address) : address + printableAddress(address)
38-38: Simplify by removing redundant crypto address check.Same as line 17—
printableAddressalready handles non-crypto addresses internally, making this ternary unnecessary.🔎 Proposed simplification
- setDisplayAddress(isCryptoAddress(address) ? printableAddress(address) : address) + setDisplayAddress(printableAddress(address))
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/components/ChainChip.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Global/AddressLink/index.tsxsrc/components/Global/CopyToClipboard/index.tsxsrc/components/Global/Icons/Icon.tsxsrc/components/Global/TokenAndNetworkConfirmationModal/index.tsx
🧰 Additional context used
🧠 Learnings (32)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 669
File: src/lib/validation/recipient.ts:21-56
Timestamp: 2025-02-17T14:07:49.883Z
Learning: In the peanut-ui repository, wrapping switch case blocks in braces to comply with linter rules and avoid variable leakage is considered a non-blocking style improvement.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2026-01-02T13:14:32.635Z
Learning: In the peanut-ui codebase, the add-money flows (bank and Manteca) use nuqs library for URL-based state management (step, amount, currency via useQueryStates), while RequestFulfillmentFlowContext still uses enum-based context state. This creates intentional partial migration where URL state is used for user-facing flows that benefit from deep linking and bookmarking.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.
Applied to files:
src/components/Global/CopyToClipboard/index.tsxsrc/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/Global/AddressLink/index.tsx
📚 Learning: 2025-10-02T15:23:01.513Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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/crypto/page.tsx
📚 Learning: 2026-01-02T13:14:32.635Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2026-01-02T13:14:32.635Z
Learning: In the peanut-ui codebase, the add-money flows (bank and Manteca) use nuqs library for URL-based state management (step, amount, currency via useQueryStates), while RequestFulfillmentFlowContext still uses enum-based context state. This creates intentional partial migration where URL state is used for user-facing flows that benefit from deep linking and bookmarking.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsx
📚 Learning: 2024-10-22T18:10:56.955Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:25-25
Timestamp: 2024-10-22T18:10:56.955Z
Learning: In the `src/app/request/pay/page.tsx` file, the `PreviewType` enum values are strings, so when adding `previewType` to `URLSearchParams`, there's no need to convert them to strings.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/crypto/page.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/components/ChainChip.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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 used instead of `router.replace` in URL manipulation functions when immediate/synchronous URL updates are required for subsequent actions to read the updated URL parameters.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/app/(mobile-ui)/add-money/crypto/page.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2025-07-24T13:26:10.290Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1014
File: src/components/Claim/Link/Initial.view.tsx:413-413
Timestamp: 2025-07-24T13:26:10.290Z
Learning: In the peanut-ui repository, the change from `${SQUID_API_URL}/route` to `${SQUID_API_URL}/v2/route` in src/components/Claim/Link/Initial.view.tsx was a typo fix, not an API migration, as the codebase was already using Squid API v2.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsx
📚 Learning: 2025-11-13T18:17:06.391Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2025-11-13T18:17:06.391Z
Learning: In peanutprotocol/peanut-ui, the Service Worker cannot cache POST requests (including blockchain RPC calls like balanceOf) because the browser Cache Storage API only accepts GET requests as cache keys per the W3C spec. Alternative solutions documented in sw.ts include server-side proxy (POST→GET conversion) or custom IndexedDB caching. Current approach uses TanStack Query in-memory cache (30s staleTime) for balance queries.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsx
📚 Learning: 2025-07-07T20:22:11.092Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 958
File: src/app/actions/tokens.ts:266-266
Timestamp: 2025-07-07T20:22:11.092Z
Learning: In `src/app/actions/tokens.ts`, within the `fetchWalletBalances` function, using the non-null assertion operator `!` on `process.env.MOBULA_API_KEY!` is intentional and correct, and should not be flagged for replacement with explicit validation.
Applied to files:
src/app/(mobile-ui)/add-money/crypto/page.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.
Applied to files:
src/components/AddMoney/components/ChainChip.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2025-06-22T16:10:53.167Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 915
File: src/hooks/useKycFlow.ts:96-124
Timestamp: 2025-06-22T16:10:53.167Z
Learning: The `initiateKyc` function in `src/app/actions/users.ts` already includes comprehensive error handling with try-catch blocks and returns structured responses with either `{ data }` or `{ error }` fields, so additional try-catch blocks around its usage are not needed.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-07T13:42:07.299Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Global/AddressLink/index.tsx
📚 Learning: 2025-08-22T07:28:32.281Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.281Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AddressLink/index.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AddressLink/index.tsx
📚 Learning: 2024-10-08T20:28:39.527Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 431
File: src/components/Create/Link/Success.view.tsx:89-89
Timestamp: 2024-10-08T20:28:39.527Z
Learning: `utils.printableAddress` is implemented in the codebase.
Applied to files:
src/components/Global/AddressLink/index.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Applied to files:
src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2024-10-07T15:50:29.173Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
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/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2024-10-11T01:14:15.489Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.
Applied to files:
src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2025-08-07T12:53:50.946Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1072
File: src/app/(setup)/setup/page.tsx:173-175
Timestamp: 2025-08-07T12:53:50.946Z
Learning: In the peanut-ui setup flow at `src/app/(setup)/setup/page.tsx`, when handling unsupported scenarios, both device not supported and browser not supported cases should show the same "Unsupported browser" message using the `UnsupportedBrowserModal` component, rather than having distinct messaging for each scenario.
Applied to files:
src/components/Global/TokenAndNetworkConfirmationModal/index.tsx
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/components/Global/Icons/Icon.tsx
🧬 Code graph analysis (7)
src/components/Global/CopyToClipboard/index.tsx (2)
src/components/0_Bruddle/Button.tsx (1)
Button(80-283)src/components/Global/Icons/Icon.tsx (1)
Icon(286-295)
src/app/(mobile-ui)/add-money/crypto/page.tsx (4)
src/context/authContext.tsx (1)
useAuth(247-253)src/hooks/wallet/useWallet.ts (1)
useWallet(16-122)src/services/services.types.ts (1)
RhinoChainType(475-475)src/services/rhino.ts (1)
rhinoApi(5-89)
src/components/AddMoney/components/ChainChip.tsx (2)
src/components/Global/Icons/Icon.tsx (2)
IconName(74-146)Icon(286-295)src/components/0_Bruddle/Card.tsx (1)
Card(72-72)
src/components/AddMoney/views/RhinoDeposit.view.tsx (6)
src/services/services.types.ts (2)
RhinoChainType(475-475)CreateDepositAddressResponse(476-481)src/components/Global/CopyToClipboard/index.tsx (1)
CopyToClipboardRef(6-8)src/services/rhino.ts (1)
rhinoApi(5-89)src/hooks/useAutoTruncatedAddress.ts (1)
useAutoTruncatedAddress(102-199)src/utils/general.utils.ts (2)
isCryptoAddress(89-91)printableAddress(93-96)src/constants/rhino.consts.ts (3)
RHINO_SUPPORTED_TOKENS(56-59)SUPPORTED_EVM_CHAINS(26-37)CHAIN_LOGOS(2-15)
src/components/Global/AddressLink/index.tsx (2)
src/utils/general.utils.ts (2)
isCryptoAddress(89-91)printableAddress(93-96)src/utils/__mocks__/justaname.ts (1)
usePrimaryName(6-10)
src/components/Global/TokenAndNetworkConfirmationModal/index.tsx (1)
src/constants/rhino.consts.ts (3)
RHINO_SUPPORTED_OTHER_CHAINS(51-53)RHINO_SUPPORTED_EVM_CHAINS(47-49)RHINO_SUPPORTED_TOKENS(56-59)
src/components/Global/Icons/Icon.tsx (2)
src/components/Global/Icons/bulb.tsx (1)
BulbIcon(3-11)src/components/Global/Icons/invite-heart.tsx (1)
InviteHeartIcon(3-32)
⏰ 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 (5)
src/components/AddMoney/components/ChainChip.tsx (1)
12-20: LGTM!Clean implementation with clear props and rendering logic. The component appropriately handles both image-based and icon-based logos via conditional rendering.
src/components/AddMoney/views/RhinoDeposit.view.tsx (3)
164-190: LGTM!The tabbed network selector is well-implemented using Radix UI with proper ARIA labels and clear visual states. The three network types (EVM, Solana, Tron) are appropriately handled.
202-217: LGTM!The QR code display and copy-to-clipboard integration is well-executed. Good use of the imperative
copyRef.current?.copy()API and theuseAutoTruncatedAddresshook for responsive address display.
227-239: Clarify TRON USDT support limitation in the Rhino API.The code excludes USDT from TRON deposits, leaving only USDC as the supported token. Since TRC-20 USDT is widely used on TRON, this limitation warrants documentation. Verify whether:
- The Rhino API genuinely does not support USDT deposits on TRON (backend constraint)
- Or if this is outdated logic that should be updated
Add a comment explaining the constraint if it's intentional, or remove the filter if USDT should be supported.
src/app/(mobile-ui)/add-money/crypto/page.tsx (1)
28-31: LGTM!The success callback is properly memoized with
useCallback, and the dependencies are correct. The flow to show the success view with the deposited amount is clean.
Feat: Hide home history amount on balance toggle
…ddresses Fix: format Solana and Tron addresses
[TASK-17897] Fix: not able to type amount in ARS
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI Agents
In @src/components/Global/AmountInput/index.tsx:
- Around line 162-171: formattedAmount from formatTokenAmount may include commas
(e.g., "1,234.56"), so converting it directly with Number(...) in the block that
sets display and exact values causes NaN; update the logic around
formattedAmount (the variables selectedAmountStr, formattedAmount and the call
to setExactValue using DECIMAL_SCALE) to strip commas (e.g., remove all ','
characters) or otherwise normalize the string to a plain numeric literal before
converting to Number/parseFloat, then call setDisplayValue(formattedAmount) and
setExactValue(Number(cleanedString) * 10 ** DECIMAL_SCALE).
- Around line 75-80: The useEffect that syncs initialAmount checks displayValue
but only lists [initialAmount] in its dependency array, causing a stale
comparison; update the effect by removing the displayValue check from the
if-condition so it reads if (initialAmount && initialAmount !==
lastOutputSecondaryRef.current) { setDisplayValue(initialAmount);
setExactValue(Number(initialAmount) * 10 ** DECIMAL_SCALE); } thereby keeping
the dependency array as [initialAmount] and relying on lastOutputSecondaryRef to
prevent feedback loops; ensure you reference the existing identifiers useEffect,
initialAmount, lastOutputSecondaryRef, setDisplayValue, setExactValue, and
DECIMAL_SCALE when making the change.
- Around line 178-186: The useEffect handling defaultSliderSuggestedAmount sets
display and exact values using formatTokenAmount but converts the
comma-formatted string to Number directly, causing NaN; update the effect (the
useEffect that reads defaultSliderSuggestedAmount) to strip commas from the
formattedAmount before converting: call formattedAmount.replace(/,/g, '') (or a
small helper like stripCommas) prior to Number(...) when computing
setExactValue(Number(...) * 10 ** DECIMAL_SCALE), and ensure setDisplayValue
still receives the original formatted (with commas) string.
- Around line 216-225: The onChange handler for AmountInput uses
formatTokenAmount (which may insert commas) but then calls Number(value) when
setting exact cents via setExactValue, causing NaN for commaed values; update
the handler (the onChange arrow function setting displayValue and calling
setExactValue) to remove thousands separators from the string before converting
to Number (e.g., strip commas or non-numeric characters except the decimal
point) and then multiply by 10 ** DECIMAL_SCALE so setExactValue receives a
valid numeric value.
- Around line 141-175: The onSliderValueChange useCallback closes over
displaySymbol and denominations (used when calling formatTokenAmount) but they
are not listed in its dependency array, which can lead to stale values; update
the dependency array for onSliderValueChange to include displaySymbol and
denominations (and also include formatTokenAmount and DECIMAL_SCALE if they are
not guaranteed stable) so the callback rebinds when those values change.
- Around line 122-139: The useEffect updates setPrimaryAmount and
setSecondaryAmount but does not list those callback props in its dependency
array; add setPrimaryAmount and setSecondaryAmount to the effect dependencies
(alongside displayValue, alternativeDisplayValue, displaySymbol,
secondaryDenomination) so React’s exhaustive-deps rule is satisfied and the
effect will re-run if those callbacks change; you do not need to add
lastOutputSecondaryRef since refs are stable.
🧹 Nitpick comments (2)
src/components/Global/AmountInput/index.tsx (2)
104-109: Consider addingdenominationsto useMemo dependencies.The
exchangeRatecalculation uses thedenominationsobject (Line 106-107) but it's not included in the dependency array. Whiledenominationsis derived from props and will change when those props change, including it ensures React can properly track all dependencies.🔎 Proposed fix
const exchangeRate = useMemo(() => { if (!secondaryDenomination) return 1 const alternativePrice = denominations[alternativeDisplaySymbol]?.price const mainPrice = denominations[displaySymbol]?.price return alternativePrice / mainPrice -}, [displaySymbol, alternativeDisplaySymbol, secondaryDenomination]) +}, [displaySymbol, alternativeDisplaySymbol, secondaryDenomination, denominations])
116-120: Consider addingdenominationsto useMemo dependencies.The calculation uses
denominations[alternativeDisplaySymbol]?.decimals(Line 119) butdenominationsis not in the dependency array.🔎 Proposed fix
const alternativeDisplayValue = useMemo(() => { if (!secondaryDenomination || !alternativeValue) return '0.00' const scaledDownValue = alternativeValue / 10 ** DECIMAL_SCALE return formatTokenAmount(scaledDownValue, denominations[alternativeDisplaySymbol]?.decimals) ?? '0.00' -}, [alternativeValue, alternativeDisplaySymbol, secondaryDenomination]) +}, [alternativeValue, alternativeDisplaySymbol, secondaryDenomination, denominations])
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Global/AmountInput/index.tsx
🧰 Additional context used
🧠 Learnings (20)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2026-01-02T13:14:32.635Z
Learning: In the peanut-ui codebase, the add-money flows (bank and Manteca) use nuqs library for URL-based state management (step, amount, currency via useQueryStates), while RequestFulfillmentFlowContext still uses enum-based context state. This creates intentional partial migration where URL state is used for user-facing flows that benefit from deep linking and bookmarking.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-10-24T13:44:39.473Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2025-08-22T07:25:59.304Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T12:20:47.207Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-11T01:14:15.489Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-24T12:40:15.006Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 478
File: src/components/Request/Create/Views/Initial.view.tsx:48-128
Timestamp: 2024-10-24T12:40:15.006Z
Learning: When `handleOnNext` is deliberately refactored to avoid dependencies that change, it's acceptable to have an empty dependency array in `useCallback`.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2025-05-19T19:40:43.138Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 868
File: src/components/Payment/PaymentForm/index.tsx:284-293
Timestamp: 2025-05-19T19:40:43.138Z
Learning: When converting between USD and token amounts, always check if the token price (divisor) is valid and non-zero before performing the division to prevent Infinity, NaN, or errors. Implementing validation like `if (!tokenPrice || isNaN(tokenPrice) || tokenPrice === 0)` before division operations is crucial for handling cases where price data might be unavailable.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-12-02T17:21:45.515Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/context/walletContext/walletContext.tsx:87-88
Timestamp: 2024-12-02T17:21:45.515Z
Learning: When converting `totalBalance` (in USD) to a `BigInt` balance in `src/context/walletContext/walletContext.tsx`, multiplying by `1e6` is intentional to maintain compatibility with USDC's 6 decimal places. The application displays only 2 decimal places, so this level of precision is sufficient.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-11-26T12:06:11.603Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.
Applied to files:
src/components/Global/AmountInput/index.tsx
⏰ 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 (1)
src/components/Global/AmountInput/index.tsx (1)
93-97: Add missing dependency to useEffect.The
setCurrentDenominationcallback should be included in the dependency array to satisfy React's exhaustive-deps rule and ensure the effect captures the latest reference.🔎 Proposed fix
useEffect(() => { if (setCurrentDenomination) { setCurrentDenomination(displaySymbol) } -}, [displaySymbol]) +}, [displaySymbol, setCurrentDenomination])⛔ Skipped due to learnings
Learnt from: Zishan-7 Repo: peanutprotocol/peanut-ui PR: 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.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 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.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 495 File: src/components/Create/useCreateLink.tsx:647-657 Timestamp: 2024-10-29T16:06:38.812Z Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 413 File: src/context/tokenSelector.context.tsx:118-123 Timestamp: 2024-10-08T20:13:42.967Z Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 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.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 478 File: src/components/Dashboard/useDashboard.tsx:134-134 Timestamp: 2024-10-24T12:36:40.508Z Learning: In the file `src/components/Dashboard/useDashboard.tsx`, memoization of the `getTokenSymbol` function is not necessary because it is lightweight and does not involve complex computations or network calls.Learnt from: jjramirezn Repo: peanutprotocol/peanut-ui PR: 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.
Fix: Token amount input error for secondary currency
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI Agents
In @src/components/Global/AmountInput/index.tsx:
- Around line 64-66: The initialization uses Number(initialAmount) which breaks
for comma-formatted strings like "1,234.56"; before converting initialAmount to
a numeric exactValue, strip commas (e.g., const cleaned = (initialAmount ||
'').replace(/,/g, '')) and then parse Number(cleaned) or fallback to 0, e.g.
setExactValue(Number(cleaned || '0') * 10 ** DECIMAL_SCALE); keep displayValue
initialized to the original initialAmount (so the UI still shows commas) and
update any other logic that parses initialAmount (e.g., in TokenAmountInput
consumers) to use the same cleaned value.
- Around line 77-82: The sync useEffect handling initialAmount fails to strip
thousand-separators, so Number(initialAmount) can yield NaN; update the effect
that reads initialAmount (the useEffect referencing initialAmount, displayValue,
isEditingRef) to sanitize initialAmount by removing commas (e.g., replaceAll or
regex) before converting to Number, then call setDisplayValue with the raw
initialAmount and setExactValue(Number(sanitized) * 10 ** DECIMAL_SCALE) to
match the behavior used elsewhere (same fix as around line 66).
- Line 73: hasValue is computed using Number(displayValue) which returns NaN for
values containing commas (e.g., "1,234.56"), so update the computation to strip
commas before converting: compute hasValue from
Number(displayValue.replace(/,/g, '')) or use parseFloat on the comma-stripped
string and coerce to Boolean; ensure the same comma-stripping approach is used
wherever displayValue is parsed (including places that set
defaultSliderSuggestedAmount or compute rawAlternativeValue) so the conditional
gating rawAlternativeValue behaves correctly.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Global/AmountInput/index.tsx
🧰 Additional context used
🧠 Learnings (19)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2026-01-02T13:14:32.635Z
Learning: In the peanut-ui codebase, the add-money flows (bank and Manteca) use nuqs library for URL-based state management (step, amount, currency via useQueryStates), while RequestFulfillmentFlowContext still uses enum-based context state. This creates intentional partial migration where URL state is used for user-facing flows that benefit from deep linking and bookmarking.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2025-10-24T13:44:39.473Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T12:20:47.207Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2025-08-22T07:25:59.304Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-10-11T01:14:15.489Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In `src/components/Global/TokenSelector/TokenSelector.tsx`, when the calculation within functions like `byChainAndText` is not computationally expensive, it's acceptable to avoid using `useCallback` for memoization.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for `useCreateLink` in `src/components/Create/useCreateLink.tsx`, the `switchNetwork` function used within `useCallback` hooks is stable and does not need to be included in the dependency arrays.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2024-11-26T12:06:11.603Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 545
File: src/components/Global/GeneralRecipientInput/index.tsx:118-126
Timestamp: 2024-11-26T12:06:11.603Z
Learning: For bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `'us'` or `'iban'`.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/Global/AmountInput/index.tsx
📚 Learning: 2025-05-19T19:40:43.138Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 868
File: src/components/Payment/PaymentForm/index.tsx:284-293
Timestamp: 2025-05-19T19:40:43.138Z
Learning: When converting between USD and token amounts, always check if the token price (divisor) is valid and non-zero before performing the division to prevent Infinity, NaN, or errors. Implementing validation like `if (!tokenPrice || isNaN(tokenPrice) || tokenPrice === 0)` before division operations is crucial for handling cases where price data might be unavailable.
Applied to files:
src/components/Global/AmountInput/index.tsx
📚 Learning: 2024-12-02T17:21:45.515Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 551
File: src/context/walletContext/walletContext.tsx:87-88
Timestamp: 2024-12-02T17:21:45.515Z
Learning: When converting `totalBalance` (in USD) to a `BigInt` balance in `src/context/walletContext/walletContext.tsx`, multiplying by `1e6` is intentional to maintain compatibility with USDC's 6 decimal places. The application displays only 2 decimal places, so this level of precision is sufficient.
Applied to files:
src/components/Global/AmountInput/index.tsx
🧬 Code graph analysis (1)
src/components/Global/AmountInput/index.tsx (2)
src/hooks/useGetDeviceType.ts (1)
useDeviceType(37-42)src/utils/general.utils.ts (1)
formatTokenAmount(375-421)
⏰ 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 (2)
src/components/Global/AmountInput/index.tsx (2)
140-175: The slider snapping logic is well-designed.The magnetic snap point at 33.33% with tolerance and completion threshold provides good UX for equal splits. The logic correctly:
- Snaps only at the 33.33% magnetic point (with 0.5% tolerance)
- Only snaps when
amountCollected > 0exists- Requires the snap amount to nearly complete the pot (98% threshold)
- Fills exactly to
remainingAmountwhen conditions are metThis prevents accidental over-filling while making equal splits intuitive.
268-294: Currency toggle implementation is correct.The toggle logic properly handles:
- Resetting
isEditingRefto allow sync with converted value- Empty input case (just swaps symbol)
- Strips commas from
alternativeDisplayValuebefore settingdisplayValue(line 283)- Uses pre-scaled
alternativeValuedirectly forexactValue(line 282)The exchange icon and positioning provide clear affordance for the swap action.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/components/AddMoney/views/RhinoDeposit.view.tsx:
- Line 47: Rename the misspelled state and its setter: change
isUpdatingDepositAddresStatus to isUpdatingDepositAddressStatus and
setisUpdatingDepositAddresStatus to setIsUpdatingDepositAddressStatus; update
the useState declaration and replace all usages of the old identifiers
(including any props, effects, handlers, or conditional checks) to the new
camelCase names to keep consistency across the component (e.g., in functions,
JSX, and calls that toggle or read this state).
In @src/components/Global/InfoCard/index.tsx:
- Line 30: The success variant definition for the InfoCard (the "success" key
that currently sets 'border-success-1 bg-success-6 text-success-7') fails WCAG
AA contrast; update the text color to a darker success token (e.g., replace
text-success-7 with a darker token such as text-success-8 or another shade that
yields at least 4.5:1 against bg-success-6) and re-run a contrast checker to
confirm the new combination meets 4.5:1 for normal text.
🧹 Nitpick comments (2)
src/components/Common/ContactsListSkeleton.tsx (2)
16-22: UseisDisabledprop instead of empty onClick handler.The skeleton cards use an empty
onClick={() => {}}handler. SinceActionListCardsupports anisDisabledprop, consider using it to prevent interaction more explicitly.♻️ Proposed refactor
return ( <ActionListCard key={index} title={<div className="h-4 w-32 animate-pulse rounded bg-gray-200" />} position={position} - onClick={() => {}} + onClick={() => {}} + isDisabled={true} leftIcon={<div className="h-8 w-8 animate-pulse rounded-full bg-gray-200" />} /> )
9-27: Add accessibility attributes for loading state.The skeleton lacks ARIA attributes to announce the loading state to screen readers. Consider adding
aria-busy="true"and anaria-labelor visually-hidden text to improve accessibility.♻️ Proposed refactor
return ( - <div className="space-y-2"> + <div className="space-y-2" aria-busy="true" aria-label="Loading contacts"> <h2 className="text-base font-bold">Your contacts</h2> <div className="flex-1 space-y-0 overflow-y-auto">
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/AddMoney/components/AddMoneyBankDetails.tsxsrc/components/AddMoney/views/RhinoDeposit.view.tsxsrc/components/Common/ContactsListSkeleton.tsxsrc/components/Global/InfoCard/index.tsx
🧰 Additional context used
🧠 Learnings (26)
📓 Common learnings
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:279-279
Timestamp: 2025-08-14T08:02:26.705Z
Learning: For hotfixes in the peanut-ui codebase, prefer generic error messages over specific validation error details until the copy can be reviewed with the team, even when the validation functions return detailed error messages.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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.
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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`.
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-22T18:10:56.955Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:25-25
Timestamp: 2024-10-22T18:10:56.955Z
Learning: In the `src/app/request/pay/page.tsx` file, the `PreviewType` enum values are strings, so when adding `previewType` to `URLSearchParams`, there's no need to convert them to strings.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 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/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2025-06-22T16:10:53.167Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui PR: 915
File: src/hooks/useKycFlow.ts:96-124
Timestamp: 2025-06-22T16:10:53.167Z
Learning: The `initiateKyc` function in `src/app/actions/users.ts` already includes comprehensive error handling with try-catch blocks and returns structured responses with either `{ data }` or `{ error }` fields, so additional try-catch blocks around its usage are not needed.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-07T13:42:07.299Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2025-08-22T07:28:32.281Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:522-545
Timestamp: 2025-08-22T07:28:32.281Z
Learning: In `src/components/Payment/PaymentForm/index.tsx`, the `handleCompleteDaimoPayment` function is only for updating payment status in the backend after a successful Daimo payment. Payment success/failure is handled by Daimo itself, so try/catch error handling and error display are not needed for backend sync failures - users shouldn't see errors if payment succeeded but database update failed.
Applied to files:
src/components/AddMoney/views/RhinoDeposit.view.tsx
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/views/RhinoDeposit.view.tsx
📚 Learning: 2025-11-06T08:19:05.201Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1407
File: src/components/AddWithdraw/DynamicBankAccountForm.tsx:459-475
Timestamp: 2025-11-06T08:19:05.201Z
Learning: In src/components/AddWithdraw/DynamicBankAccountForm.tsx, the street address field has a 35-character maximum length limit because the backend provider enforces this constraint, applicable to both US and Mexican addresses.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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: 2026-01-02T13:14:32.635Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 0
File: :0-0
Timestamp: 2026-01-02T13:14:32.635Z
Learning: In the peanut-ui codebase, the add-money flows (bank and Manteca) use nuqs library for URL-based state management (step, amount, currency via useQueryStates), while RequestFulfillmentFlowContext still uses enum-based context state. This creates intentional partial migration where URL state is used for user-facing flows that benefit from deep linking and bookmarking.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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: 2024-10-29T12:19:41.968Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-07T13:42:00.443Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-08-22T07:25:59.304Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1104
File: src/components/Payment/PaymentForm/index.tsx:596-600
Timestamp: 2025-08-22T07:25:59.304Z
Learning: The `TokenAmountInput` component in `src/components/Global/TokenAmountInput/` always returns decimal strings (e.g., "1,234.56"), not base units. When passing these values to external APIs like Daimo's `toUnits` prop, simply stripping commas with `.replace(/,/g, '')` is sufficient.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 420
File: src/components/Offramp/Offramp.consts.ts:27-28
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Offramp/Offramp.consts.ts`, the `MIN_CASHOUT_LIMIT` is set to $10 because smaller amounts are impractical due to approximately $1 fee per cashout.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: 2025-10-24T13:44:39.473Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 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/AddMoneyBankDetails.tsx
📚 Learning: 2025-11-07T11:51:58.900Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1419
File: src/components/Global/BalanceWarningModal/index.tsx:94-94
Timestamp: 2025-11-07T11:51:58.900Z
Learning: In `src/components/Global/BalanceWarningModal/index.tsx`, the casual and congratulatory phrase "You're rich! Congrats on having a high balance." is intentional and by design.
Applied to files:
src/components/AddMoney/components/AddMoneyBankDetails.tsx
🧬 Code graph analysis (2)
src/components/Common/ContactsListSkeleton.tsx (2)
src/components/Global/Card/index.tsx (1)
getCardPosition(15-20)src/components/ActionListCard/index.tsx (1)
ActionListCard(23-78)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (1)
src/components/Payment/PaymentInfoRow.tsx (1)
PaymentInfoRow(18-89)
⏰ 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 (16)
src/components/AddMoney/components/AddMoneyBankDetails.tsx (5)
15-18: LGTM!Import path updates align with the broader refactoring to use granular, feature-specific module imports.
76-79: LGTM!Amount source correctly updated to use
depositInstructions.amountfrom the request fulfillment context, consistent with the removal ofusePaymentStoreandchargeDetails.
224-234: Verify that 10-character truncation is sufficient for bank deposit references.The deposit reference is truncated to 10 characters for both display and copy operations. If banks require the full reference to correctly identify and route transfers, copying only the first 10 characters could cause deposit failures or misattribution.
Ensure this truncation aligns with the backend's reference generation and bank requirements.
248-255: LGTM!Account Holder Name is correctly rendered conditionally at the top of the bank details block, following the same pattern as other detail rows and consistent with the
generateBankDetailsfunction logic for Euro/Mexico flows.
214-217: LGTM!The
iconSize="4"update creates visual consistency with thePaymentInfoRowcomponent, which also usesiconSize=4for its copy functionality.src/components/Common/ContactsListSkeleton.tsx (1)
2-3: Import paths are correct and resolve properly to their respective modules.src/components/Global/InfoCard/index.tsx (5)
7-7: LGTM!The addition of the 'success' variant and customContent prop are properly typed and integrate cleanly with the component's API.
Also applies to: 22-22
39-39: Verify the icon size reduction aligns with design specifications.The default
iconSizechanged from 16 to 14 pixels, affecting all instances that don't explicitly override it. Confirm this visual change is intentional and review existing usages to ensure consistency with the design system.Based on learnings, visual changes should be validated with the design team before release.
51-51: LGTM!The parameter correctly matches the interface definition.
54-54: LGTM!Including
customContentin thehasContentcheck correctly prevents the fallback message when custom content is provided.
104-105: LGTM!The custom content is correctly rendered within the content area. The explicit conditional check is clear and works as expected.
src/components/AddMoney/views/RhinoDeposit.view.tsx (5)
52-83: LGTM!The polling setup with initial delay, status fetching via TanStack Query, and status mapping logic are well-implemented. The 15-second initial delay before polling starts is reasonable to avoid unnecessary API calls, and the conditional refetch interval properly stops polling once the deposit is completed.
108-112: Verify onSuccess is not called multiple times.The effect includes
onSuccessin the dependency array. If the parent component doesn't memoize this callback, it will re-create it on every render, causing the effect to re-run. Since you're checking ifdepositAddressStatus === 'completed', a non-memoized callback could triggeronSuccessmultiple times while in the completed state.Consider either:
- Ensuring the parent memoizes
onSuccesswithuseCallback- Adding a ref-based guard to ensure
onSuccessis called only once per completion- Removing
onSuccessfrom deps and usinguseEffectEventif available in your React versionExample guard pattern
+const hasCalledSuccess = useRef(false) + useEffect(() => { - if (depositAddressStatus === 'completed' && depositAddressStatusData?.amount) { + if (depositAddressStatus === 'completed' && depositAddressStatusData?.amount && !hasCalledSuccess.current) { + hasCalledSuccess.current = true onSuccess(depositAddressStatusData?.amount) } -}, [depositAddressStatusData, depositAddressStatus, onSuccess]) +}, [depositAddressStatusData, depositAddressStatus])
114-147: LGTM!The error state UI provides clear, user-friendly messaging explaining the market movement issue and reassuring users that their funds are being returned. The "Try Again" flow is intuitive.
149-281: LGTM!The main UI is well-structured with:
- Proper loading states and conditional rendering
- Clear network type selector with Radix Tabs
- QR code with truncated address display and copy functionality
- Correct token filtering (USDC excluded for TRON at lines 227-232)
- Helpful deposit limit information
- Conditional EVM networks card for better UX
The component provides a smooth deposit flow with appropriate visual feedback.
85-96: Add error handling for the status reset call.The
rhinoApi.resetDepositAddressStatuscall can throw an error, but failures are currently swallowed. This leaves users without feedback when clicking "Try Again" fails.Likely an incorrect or invalid review comment.
Fix: send success navigation
Zishan-7
approved these changes
Jan 7, 2026
kushagrasarathe
approved these changes
Jan 7, 2026
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
4 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.
No description provided.