Refactor PageContainer
#1055
Refactor PageContainer
#1055
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis change removes the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ 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)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/components/AddMoney/views/CryptoDepositQR.view.tsx (1)
20-25:handleCopyAddressreturns an unused cleanup function – leads to dangling timeouts on repeat clicksReact ignores the return value of an event handler. Each button press schedules a
setTimeout, but none of them are ever cleared; spamming the button queues N timers that all fire 2 s later, needlessly re-rendering.-const handleCopyAddress = useCallback(() => { - copyTextToClipboardWithFallback(depositAddress) - setCopied(true) - const timer = setTimeout(() => setCopied(false), 2000) - return () => clearTimeout(timer) -}, [depositAddress]) +const handleCopyAddress = useCallback(() => { + copyTextToClipboardWithFallback(depositAddress) + setCopied(true) + // Clear any previous timeout before scheduling a new one + clearTimeout(handleCopyAddress.timeoutId) + handleCopyAddress.timeoutId = window.setTimeout(() => setCopied(false), 2000) +}, [depositAddress]) as (() => void) & { timeoutId?: number }Alternatively, move the timer logic to a
useEffectcoupled withcopied. Either way, ensure only one timer exists at a time.
♻️ Duplicate comments (4)
src/app/(mobile-ui)/withdraw/layout.tsx (1)
12-12: Same alignment caveat as in Request pageThe explicit alignment class was dropped here as well; ensure the withdrawal flow still renders with the intended top padding/alignment.
src/app/(mobile-ui)/profile/edit/page.tsx (1)
13-15: Alignment checkRemoval of
self-startmay centre the profile-edit form. Confirm whether this is desired; if not, passalignItems="start".src/app/send/[...username]/page.tsx (1)
18-20: Verify vertical alignment in direct-pay flowWith the wrapper class removed, content could shift to vertical centre. Double-check on mobile; apply
alignItems="start"if necessary.src/app/(mobile-ui)/add-money/layout.tsx (1)
12-12: Add-money layout: confirm top alignmentSame note as above—confirm visual behaviour and use the new prop if required.
🧹 Nitpick comments (13)
src/components/Claim/Claim.tsx (1)
241-243: Nice adoption of the newalignItemspropSwitching from a manual class to
alignItems="center"improves clarity.
Only caveat: the previous wrapper hadpb-5; if that padding was important for safe-area spacing at the bottom, consider adding it back viaclassNameto avoid components touching the screen edge.src/components/Send/link/views/Success.link.send.view.tsx (1)
38-40: Consider replacing repeated flex wrapper withPageContainer.Now that
PageContainerhandles full-height and accepts analignItemsprop, you can drop the bespoke flex classes altogether and gain a single source of truth for layout.-import PageContainer from '@/components/0_Bruddle/PageContainer' // ← add … - <div className="flex w-full flex-col justify-start space-y-8"> + <PageContainer alignItems="start"> … - </div> + </PageContainer>Reduces class duplication and keeps future style tweaks local to one place.
src/components/Request/link/views/Create.request.link.view.tsx (1)
353-355: Wrapper can be collapsed intoPageContainer.Same observation as in the Send flow: the new
PageContaineralready gives youflex,w-full,min-h-[inherit], and optional alignment. Swapping the<div>for<PageContainer alignItems="start">keeps the codebase consistent.src/components/Send/link/LinkSendFlowManager.tsx (1)
51-53: Optional: delegate container styling toPageContainer.Using the shared component would keep this manager in sync with future layout tweaks and removes the need for manual
flex/ spacing classes.- {view === 'INITIAL' && ( - <div className="flex w-full flex-col justify-start space-y-8"> + {view === 'INITIAL' && ( + <PageContainer alignItems="start"> … - </div> + </PageContainer>Requires
import PageContainer from '@/components/0_Bruddle/PageContainer'.src/app/request/[...username]/page.tsx (1)
16-18: PassalignItemsto preserve previous centering
PageContainerused to hard-codeitems-center; after the refactor it now defaults toitems-startunless you supply the newalignItemsprop.
If the design still expects the inner content (i.e.DirectRequestInitialView) to be vertically centred, add the prop:- <PageContainer> + <PageContainer alignItems="center">src/app/(mobile-ui)/send/page.tsx (1)
15-17: Verify vertical alignment after removing custom classes
The explicith-full min-h-[inherit] md:self-startwas removed.PageContainernow embedsmin-h-[inherit], but noth-fullorself-start.
Double-check on small devices that the send router stays full-height and, on medium screens, still aligns to the top as before. If needed:- <PageContainer> + <PageContainer className="h-full md:self-start">src/app/(mobile-ui)/withdraw/page.tsx (1)
199-222: Potential shrink-height issue after droppingmin-h-[inherit]
Unlike other screens, this wrapper isn’t inside aPageContainer, so removingmin-h-[inherit]might let the column collapse on short-content cases (e.g. very small error messages). If that behaviour is undesirable, either re-add the class or wrap the whole screen withPageContainerfor consistency.src/components/Payment/Views/Confirm.payment.view.tsx (1)
419-423: Potential loss of full-height layout after removingmin-h-[inherit].The outer wrapper no longer guarantees a minimum height.
Because the nested<div className="my-auto flex h-full ...">relies on the parent having at leasth-full/min-h-full, vertical centring (my-auto) may break on tall screens and content could stick to the top.Consider restoring an explicit height constraint or, better, wrap the whole view in the recently-refactored
PageContainerwithalignItems="start"/centerto keep the new styling consistent:-<div className="flex flex-col justify-between gap-8"> +<PageContainer alignItems="start" className="justify-between gap-8">or simply add
h-full:-<div className="flex flex-col justify-between gap-8"> +<div className="flex h-full flex-col justify-between gap-8">Please verify on a long page (e.g. mobile Safari, 100 vh) that the footer is still reachable.
src/components/AddWithdraw/DynamicBankAccountForm.tsx (1)
206-208: Confirm vertical spacing on tall viewports.
min-h-[inherit]was dropped here too. If this form is rendered inside a container that already manages height (e.g. the newPageContainer), no problem; otherwise the form might no longer be vertically centred.Just double-check on devices with extra-tall screens.
src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx (1)
182-184: Layout may not stretch to full height after class removal.Same observation as other files: parent container lost the minimum/full-height guarantee (
min-h-[inherit]).
Ensure the success view that follows doesn’t leave blank space at the bottom on large displays.src/app/[...recipient]/client.tsx (1)
397-405: Consistency: align default payment flow with other views.Default flow container also lost any
min-h-*. As above, confirm it still looks correct when the content is short.
If issues arise, reuse thePageContainercomponent instead of raw divs.src/app/(mobile-ui)/layout.tsx (1)
139-145: Droppingmd:min-h-fullcan affect desktop scroll behaviour.On desktop widths (
md:), the scrollable content previously had a full-height minimum ensuring the footer/nav stayed at the bottom. Without it, short pages may leave white space.If that’s unintended, reinstate the class or rely on
PageContainer:-'flex w-full items-center justify-center md:ml-auto md:w-[calc(100%-160px)]', +'flex w-full items-center justify-center md:ml-auto md:w-[calc(100%-160px)] md:min-h-full',Test on 1440×900 to confirm.
src/components/0_Bruddle/PageContainer.tsx (1)
12-13: Optimize the conditional alignment logic.The current implementation includes
items-startin the base class and then conditionally overrides it, which could be simplified.Consider this cleaner approach:
- 'flex min-h-[inherit] w-full items-start justify-center *:w-full md:pl-24 md:*:max-w-xl', - props.alignItems === 'center' ? 'items-center' : 'items-start', + 'flex min-h-[inherit] w-full justify-center *:w-full md:pl-24 md:*:max-w-xl', + props.alignItems === 'center' ? 'items-center' : 'items-start',This removes the redundant
items-startfrom the base class since it's handled by the conditional logic.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (37)
src/app/(mobile-ui)/add-money/[country]/bank/page.tsx(3 hunks)src/app/(mobile-ui)/add-money/layout.tsx(1 hunks)src/app/(mobile-ui)/layout.tsx(1 hunks)src/app/(mobile-ui)/profile/edit/page.tsx(1 hunks)src/app/(mobile-ui)/request/create/page.tsx(1 hunks)src/app/(mobile-ui)/request/page.tsx(1 hunks)src/app/(mobile-ui)/send/page.tsx(1 hunks)src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx(1 hunks)src/app/(mobile-ui)/withdraw/crypto/page.tsx(1 hunks)src/app/(mobile-ui)/withdraw/layout.tsx(1 hunks)src/app/(mobile-ui)/withdraw/page.tsx(1 hunks)src/app/[...recipient]/client.tsx(2 hunks)src/app/[...recipient]/page.tsx(1 hunks)src/app/request/[...username]/page.tsx(1 hunks)src/app/send/[...username]/page.tsx(1 hunks)src/components/0_Bruddle/PageContainer.tsx(1 hunks)src/components/AddMoney/components/AddMoneyBankDetails.tsx(1 hunks)src/components/AddMoney/views/CryptoDepositQR.view.tsx(1 hunks)src/components/AddWithdraw/AddWithdrawCountriesList.tsx(2 hunks)src/components/AddWithdraw/AddWithdrawRouterView.tsx(4 hunks)src/components/AddWithdraw/DynamicBankAccountForm.tsx(1 hunks)src/components/Claim/Claim.tsx(1 hunks)src/components/Claim/Link/Initial.view.tsx(1 hunks)src/components/Claim/Link/Onchain/Confirm.view.tsx(1 hunks)src/components/Claim/Link/Onchain/Success.view.tsx(1 hunks)src/components/Claim/Link/views/BankFlowManager.view.tsx(1 hunks)src/components/Claim/Link/views/ClaimCountryList.view.tsx(1 hunks)src/components/Claim/Link/views/Confirm.bank-claim.view.tsx(1 hunks)src/components/Global/Icons/Icon.tsx(2 hunks)src/components/Global/Icons/link-slash.tsx(1 hunks)src/components/Payment/PaymentForm/index.tsx(1 hunks)src/components/Payment/Views/Confirm.payment.view.tsx(1 hunks)src/components/Payment/Views/Status.payment.view.tsx(1 hunks)src/components/Request/direct-request/views/Initial.direct.request.view.tsx(3 hunks)src/components/Request/link/views/Create.request.link.view.tsx(1 hunks)src/components/Send/link/LinkSendFlowManager.tsx(1 hunks)src/components/Send/link/views/Success.link.send.view.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (38)
📓 Common learnings
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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: Hugo0
PR: peanutprotocol/peanut-ui#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.
📚 Learning: within `src/app/request/pay/page.tsx`, extracting the `getbaseurl` function does not add significant...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/app/(mobile-ui)/send/page.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/[...recipient]/page.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in the react typescript file `src/components/request/pay/views/initial.view.tsx`, when reviewing the...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/profile/edit/page.tsxsrc/components/Claim/Claim.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/[...recipient]/page.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Global/Icons/Icon.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/layout.tsxsrc/components/Global/Icons/link-slash.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/Claim/Link/Initial.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in the peanut-ui project, pages that handle request flows (like create.request.link.view.tsx) are on...
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#845
File: src/components/Request/link/views/Create.request.link.view.tsx:81-81
Timestamp: 2025-05-13T10:05:24.057Z
Learning: In the peanut-ui project, pages that handle request flows (like Create.request.link.view.tsx) are only accessible to logged-in users who will always have a username, making null checks for user?.user.username unnecessary in these contexts.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/profile/edit/page.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/layout.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/app/[...recipient]/client.tsx
📚 Learning: in `src/app/request/pay/page.tsx`, the `id` parameter is accessed via `searchparams.id` in the `gene...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:32-49
Timestamp: 2024-10-22T18:11:36.864Z
Learning: In `src/app/request/pay/page.tsx`, the `id` parameter is accessed via `searchParams.id` in the `generateMetadata` function.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/[...recipient]/page.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsx
📚 Learning: in the `src/app/request/pay/page.tsx` file, the `previewtype` enum values are strings, so when addin...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/app/request/[...username]/page.tsxsrc/app/[...recipient]/client.tsx
📚 Learning: in `src/app/request/pay/page.tsx`, if `linkres` is not ok in the `generatemetadata` function, the de...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In `src/app/request/pay/page.tsx`, if `linkRes` is not OK in the `generateMetadata` function, the desired behavior is to use the standard title and preview image without throwing an error.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/components/Claim/Claim.tsxsrc/components/Send/link/views/Success.link.send.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/[...recipient]/page.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsx
📚 Learning: in the peanut-ui repository, the change from `${squid_api_url}/route` to `${squid_api_url}/v2/route`...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#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)/request/page.tsxsrc/components/Claim/Claim.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Global/Icons/Icon.tsxsrc/app/(mobile-ui)/layout.tsxsrc/components/Global/Icons/link-slash.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: when calling `handleonnext` in `src/components/request/create/views/initial.view.tsx`, it's acceptab...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#478
File: src/components/Request/Create/Views/Initial.view.tsx:169-176
Timestamp: 2024-10-24T12:45:22.708Z
Learning: When calling `handleOnNext` in `src/components/Request/Create/Views/Initial.view.tsx`, it's acceptable to duplicate parameter lists for readability instead of refactoring to avoid duplication.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Request/link/views/Create.request.link.view.tsx
📚 Learning: in `src/components/request/pay` components, the `tokenprice` property in the `ipayscreenprops` inter...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/[...recipient]/page.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/app/(mobile-ui)/layout.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in next.js app router, catch-all routes (like `/request/[...username]`) will only match urls with at...
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#828
File: src/app/(mobile-ui)/request/[...username]/page.tsx:17-17
Timestamp: 2025-05-02T19:14:25.010Z
Learning: In Next.js App Router, catch-all routes (like `/request/[...username]`) will only match URLs with at least one parameter segment, ensuring that the page component only renders when there is at least one value in the params array.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/app/send/[...username]/page.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/app/[...recipient]/client.tsx
📚 Learning: in `src/components/request/create/views/initial.view.tsx`, the function `gettokendetails` is a simpl...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#478
File: src/components/Request/Create/Views/Initial.view.tsx:81-89
Timestamp: 2024-10-24T12:38:32.793Z
Learning: In `src/components/Request/Create/Views/Initial.view.tsx`, the function `getTokenDetails` is a simple function that does not fetch from the network or perform asynchronous operations.
Applied to files:
src/app/(mobile-ui)/request/page.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/components/Request/link/views/Create.request.link.view.tsx
📚 Learning: in `src/components/request/pay/views/initial.view.tsx`, both `txfee` and `utils.formattokenamount(.....
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(...)` return strings, ensuring that `calculatedFee` consistently returns a string without the need for additional type conversion.
Applied to files:
src/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/layout.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/Claim/Link/Initial.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in the `initialcashoutview` component (`src/components/cashout/components/initial.view.tsx`), linked...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Applied to files:
src/app/send/[...username]/page.tsxsrc/app/(mobile-ui)/add-money/layout.tsxsrc/components/Send/link/views/Success.link.send.view.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/Claim/Link/Initial.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in `src/components/og/profilecardog.tsx`, the scribble image should have an empty alt attribute (alt...
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#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/app/(mobile-ui)/profile/edit/page.tsx
📚 Learning: in `src/components/claim/claim.tsx`, external calls like token price fetching and cross-chain detail...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Claim/Claim.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: the country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx a...
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Applied to files:
src/app/(mobile-ui)/add-money/layout.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsx
📚 Learning: in `src/components/request/pay/views/initial.view.tsx`, both `txfee` and `utils.formattokenamount(es...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Applied to files:
src/app/(mobile-ui)/add-money/layout.tsxsrc/app/(mobile-ui)/withdraw/page.tsxsrc/components/Payment/Views/Status.payment.view.tsxsrc/app/(mobile-ui)/withdraw/layout.tsxsrc/app/(mobile-ui)/withdraw/[country]/bank/page.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/layout.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: the `handleconfirm` function in `src/components/create/link/confirm.view.tsx` is separate from the o...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#458
File: src/components/Offramp/Confirm.view.tsx:141-141
Timestamp: 2024-10-18T01:51:35.247Z
Learning: The `handleConfirm` function in `src/components/Create/Link/Confirm.view.tsx` is separate from the one in `src/components/Offramp/Confirm.view.tsx` and does not need to be renamed when refactoring `handleConfirm` in `src/components/Offramp/Confirm.view.tsx`.
Applied to files:
src/components/Send/link/views/Success.link.send.view.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Global/Icons/Icon.tsxsrc/components/Global/Icons/link-slash.tsxsrc/components/Claim/Link/views/ClaimCountryList.view.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/app/request/[...username]/page.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: in the react code for `usecreatelink` in `src/components/create/usecreatelink.tsx`, the `switchnetwo...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Send/link/views/Success.link.send.view.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Global/Icons/Icon.tsxsrc/components/Global/Icons/link-slash.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/components/Send/link/LinkSendFlowManager.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: in the `tokenamountinput` component (`src/components/global/tokenamountinput/index.tsx`), when the '...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.
Applied to files:
src/app/(mobile-ui)/withdraw/page.tsxsrc/components/Global/Icons/Icon.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in the `tokenamountinput` component within `src/components/global/tokenamountinput/index.tsx`, when ...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Create/Link/Input.view.tsx:244-248
Timestamp: 2024-10-29T12:20:47.207Z
Learning: In the `TokenAmountInput` component within `src/components/Global/TokenAmountInput/index.tsx`, when `balance` is undefined, the `maxValue` prop should be set to an empty string `''`.
Applied to files:
src/app/(mobile-ui)/withdraw/page.tsxsrc/app/(mobile-ui)/add-money/[country]/bank/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddWithdraw/DynamicBankAccountForm.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/components/AddMoney/components/AddMoneyBankDetails.tsx
📚 Learning: in `src/components/offramp/offramp.consts.ts`, the `min_cashout_limit` is set to $10 because smaller...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#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/app/(mobile-ui)/withdraw/page.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: in `src/components/request/pay/views/initial.view.tsx`, it's acceptable to use the `!` operator in t...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
Applied to files:
src/components/Payment/Views/Status.payment.view.tsxsrc/components/Claim/Link/Onchain/Success.view.tsxsrc/components/Payment/PaymentForm/index.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/Claim/Link/views/BankFlowManager.view.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: in the `initialview` component at `src/components/request/create/views/initial.view.tsx`, when setti...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Applied to files:
src/components/Payment/Views/Status.payment.view.tsxsrc/components/Request/direct-request/views/Initial.direct.request.view.tsxsrc/app/(mobile-ui)/layout.tsxsrc/app/(mobile-ui)/request/create/page.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/app/(mobile-ui)/withdraw/crypto/page.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/app/[...recipient]/client.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsxsrc/components/Request/link/views/Create.request.link.view.tsxsrc/components/AddWithdraw/AddWithdrawRouterView.tsxsrc/components/Claim/Link/Initial.view.tsx
📚 Learning: in the file `src/components/dashboard/usedashboard.tsx`, memoization of the `gettokensymbol` functio...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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.
Applied to files:
src/components/Global/Icons/Icon.tsx
📚 Learning: in `src/components/global/tokenselector/tokenselector.tsx`, when the calculation within functions li...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Icons/Icon.tsx
📚 Learning: in the `tokencontextprovider` component within `src/context/tokenselector.context.tsx`, in the types...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Icons/Icon.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsxsrc/components/AddMoney/views/CryptoDepositQR.view.tsx
📚 Learning: in the peanut-ui repository, wrapping switch case blocks in braces to comply with linter rules and a...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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.
Applied to files:
src/app/(mobile-ui)/layout.tsx
📚 Learning: in the peanut ui codebase, the `resettokencontextprovider` function from `tokenselectorcontext` is a...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the `resetTokenContextProvider` function from `tokenSelectorContext` is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.
Applied to files:
src/app/(mobile-ui)/layout.tsx
📚 Learning: in withdraw flows for peanut wallet, the peanutactiondetailscard should always display "usdc" as the...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Applied to files:
src/app/(mobile-ui)/layout.tsxsrc/components/AddWithdraw/AddWithdrawCountriesList.tsx
📚 Learning: the `sendlinksapi.claim` function in the peanut protocol ui accepts both username and wallet address...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#827
File: src/components/Claim/Link/Initial.view.tsx:120-126
Timestamp: 2025-04-30T21:31:27.790Z
Learning: The `sendLinksApi.claim` function in the Peanut Protocol UI accepts both username and wallet address as the first parameter.
Applied to files:
src/app/(mobile-ui)/layout.tsx
📚 Learning: in `src/components/request/create/views/initial.view.tsx`, the `inputvalue` variable passed to `pean...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#478
File: src/components/Request/Create/Views/Initial.view.tsx:93-94
Timestamp: 2024-10-24T12:39:09.318Z
Learning: In `src/components/Request/Create/Views/Initial.view.tsx`, the `inputValue` variable passed to `peanut.createRequestLink` is expected to be a string.
Applied to files:
src/app/(mobile-ui)/request/create/page.tsxsrc/components/Request/link/views/Create.request.link.view.tsx
📚 Learning: the generalrecipientinput component supports username validation and resolution through the validate...
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#873
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:95-95
Timestamp: 2025-05-23T19:26:58.220Z
Learning: The GeneralRecipientInput component supports username validation and resolution through the validateAndResolveRecipient function in src/lib/validation/recipient.ts. The function automatically detects usernames (inputs that don't contain '.' for ENS and don't start with '0x' for addresses), validates them via API HEAD request, fetches user data, and resolves them to Ethereum addresses from the user's PEANUT_WALLET account.
Applied to files:
src/app/request/[...username]/page.tsx
📚 Learning: in the `src/components/offramp/confirm.view.tsx` file, it's acceptable to include crass or informal ...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#458
File: src/components/Offramp/Confirm.view.tsx:96-96
Timestamp: 2024-10-18T08:54:22.142Z
Learning: In the `src/components/Offramp/Confirm.view.tsx` file, it's acceptable to include crass or informal language in code comments.
Applied to files:
src/components/Claim/Link/Onchain/Confirm.view.tsxsrc/components/Payment/Views/Confirm.payment.view.tsxsrc/components/Claim/Link/views/Confirm.bank-claim.view.tsx
📚 Learning: when the token price cannot be fetched in `src/components/request/pay/pay.tsx` within the `payreques...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-08T20:13:42.967Z
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/Payment/Views/Confirm.payment.view.tsx
📚 Learning: in the `payrequestlink` component (`src/components/request/pay/pay.tsx`), when resolving ens names, ...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-08T20:13:42.967Z
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/Payment/Views/Confirm.payment.view.tsx
📚 Learning: for bank account input fields, use `autocomplete="bank-account-number"` when the recipient type is `...
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#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/Claim/Link/views/Confirm.bank-claim.view.tsx
🧬 Code Graph Analysis (2)
src/components/Global/Icons/Icon.tsx (1)
src/components/Global/Icons/link-slash.tsx (1)
LinkSlashIcon(3-12)
src/components/Request/direct-request/views/Initial.direct.request.view.tsx (1)
src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(4-19)
⏰ 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 (28)
src/components/AddMoney/views/CryptoDepositQR.view.tsx (1)
28-28: Confirm removal ofmin-h-[inherit]doesn’t collapse height in nested flows
min-h-[inherit]guaranteed that the container inherited its parent’s min-height, preventing accidental collapse when the parent used flex column withgapor when siblings expanded. Removing it is fine as long as:
PageContainer(or any direct parent) now explicitly setsmin-h-screen/h-full, or- All screens embedding this view still receive the expected full-viewport layout on Safari & mobile browsers (they differ in flex‐box height calculations).
Please sanity-check on the main breakpoint set and run a quick manual smoke-test for:
- /add-money crypto deposit (desktop + mobile),
- screen rotations on iOS.
If any scroll-jumping or content clipping shows up, consider keeping
min-h-[inherit]or shifting responsibility to the parent container.src/components/Global/Icons/link-slash.tsx (1)
3-3: Corrected export name – looks good
The rename toLinkSlashIconaligns the component’s export with its filename and downstream imports. No functional or type-safety issues detected.src/components/Global/Icons/Icon.tsx (1)
53-54: Import & map entry updated consistently
The misspelling is fixed both in the import and theiconComponentsrecord, restoring full type coverage for the'link-slash'variant and eliminating the previous compile-time error. 👍Also applies to: 143-144
src/app/(mobile-ui)/request/page.tsx (1)
15-17: Confirm layout after removing explicit alignment
PageContainerpreviously received aself-startclass here; that alignment is now implicit. If the page relies on top-aligned content, consider passing the newalignItems="start"prop or adding an appropriate wrapper utility class.
Please verify on small-screen devices that the router view is not vertically centered by default.src/app/[...recipient]/page.tsx (1)
162-164: Check that the newPageContainerdefault styling meets expectations
PageContaineris now rendered without anyclassNameoverrides.
Assuming the component’s internal refactor addsmin-h-[inherit]by default, this should be fine—but it also means any previous side-effects (e.g. extra padding/margins) are gone.Please eyeball the page in both desktop and mobile break-points to ensure the vertical spacing still matches the intended design.
src/app/(mobile-ui)/request/create/page.tsx (1)
14-16: Explicit min-height removed – verify full-page scroll behaviour
min-h-[inherit]was dropped from thePageContainerwrapper.
Because mobile flows often rely on that rule to keep the screen scrollable behind bottom sheets, double-check that the page still occupies the full viewport height and that any virtual-keyboard interactions aren’t clipping content.src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)
56-60: Container no longer enforces inherited min-heightThe root
<div>lostmin-h-[inherit]. Confirm that long content (e.g. lengthy error strings) does not push elements outside the viewport or create unexpected scroll bars—especially on smaller devices.src/components/Claim/Link/views/ClaimCountryList.view.tsx (1)
42-44: Verify list scrolling after min-height removalWith
min-h-[inherit]gone, the flex container now relies on its children to control height. Ensure the country list (overflow-y-auto) still receives enough flex space to scroll, particularly on iOS Safari where flex height quirks are common.src/components/Claim/Link/Onchain/Success.view.tsx (1)
138-140: LGTM – class removal aligns withPageContainerrefactor.Nothing else changed; behaviour remains intact.
src/components/Claim/Link/Onchain/Confirm.view.tsx (1)
135-137: LGTM – styling update only.No functional impact detected.
src/components/Claim/Link/Initial.view.tsx (1)
616-616: Removal ofmin-h-[inherit]is safe here
This view is usually rendered inside aPageContainer, which now owns themin-h-[inherit]rule. Dropping the class in this local wrapper therefore avoids duplicate rules and is fine.src/components/Payment/PaymentForm/index.tsx (1)
600-746: Consistency withPageContainer
PaymentFormtypically lives inside a page that already usesPageContainer, so dropping the localmin-h-[inherit]should be fine.
However, if this component is ever embedded withoutPageContainer, the vertical stretch will be lost. Clarify the contract (component always wrapped vs. self-contained) to avoid future layout bugs.src/components/Request/direct-request/views/Initial.direct.request.view.tsx (4)
197-197: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the loading state container aligns with the broader refactoring effort to standardize container height styling across the codebase.
205-205: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the validation error container maintains consistency with the overall styling refactor.
217-217: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the success view container is consistent with the coordinated styling adjustments across the application.
238-238: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the main form container completes the consistent styling adjustments in this component.src/app/(mobile-ui)/add-money/[country]/bank/page.tsx (3)
289-289: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the user details collection step container aligns with the broader styling refactor across the mobile UI.
318-318: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the KYC step container maintains consistency with the overall styling adjustments.
336-336: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the input amount step container completes the consistent styling cleanup in this component.src/components/Claim/Link/views/BankFlowManager.view.tsx (1)
211-211: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the main container aligns with the coordinated styling refactor to standardize container height behavior across the application.src/components/Payment/Views/Status.payment.view.tsx (1)
177-177: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the main container maintains consistency with the overall styling refactor while preserving all the complex payment status logic.src/components/AddMoney/components/AddMoneyBankDetails.tsx (1)
107-107: LGTM - Consistent styling cleanupThe removal of
min-h-[inherit]from the main container aligns with the coordinated styling refactor to standardize container height behavior across the application.src/app/[...recipient]/client.tsx (1)
372-380: PUBLIC_PROFILE wrapper no longer enforces min height.
twMerge('mx-auto h-full w-full …')keepsh-full, so removal is probably safe.
If you notice the page no longer pushes the bottom nav to the screen bottom, consider addingmin-h-[calc(100dvh-160px)]like other flows for consistency.src/app/(mobile-ui)/withdraw/crypto/page.tsx (1)
319-319: LGTM! Clean removal of redundant min-h-[inherit] class.This change aligns with the PR's objective to centralize minimum height handling in the PageContainer component while removing excessive usage throughout the codebase.
src/components/AddWithdraw/AddWithdrawCountriesList.tsx (1)
192-192: LGTM! Consistent removal of min-h-[inherit] classes.Both container divs appropriately remove the redundant
min-h-[inherit]class while preserving their essential layout classes. This aligns with the PR's systematic cleanup to centralize minimum height handling.Also applies to: 209-209
src/components/AddWithdraw/AddWithdrawRouterView.tsx (1)
193-193: LGTM! Systematic cleanup of min-h-[inherit] across all render branches.All four container divs appropriately remove the redundant
min-h-[inherit]class while maintaining their essential flex layout and spacing classes. The changes are consistent across all conditional render paths and align with the PR's refactoring objectives.Also applies to: 218-218, 250-250, 275-275
src/components/0_Bruddle/PageContainer.tsx (2)
4-6: Well-designed interface for the new alignItems prop.The
PageContainerPropsinterface properly extendsHTMLAttributes<HTMLDivElement>and provides a clean API for controlling vertical alignment with clear type constraints.
8-20: Excellent refactoring that centralizes layout control.The updated component successfully centralizes minimum height inheritance (
min-h-[inherit]) while providing a clean prop-based API for alignment control. This design eliminates the need for consumers to manually manage these CSS classes, improving maintainability across the codebase.
Contributes to TASK-12905
PageContainer.tsxto take the full height of its parent component, introduced thealignItemsprop to customise alignment according to the requirement.min-h-[inherit]