Conversation
Signed-off-by: facundobozzi <72771544+FacuBozzi@users.noreply.github.com>
…nut-ui into feat/new-landing-page
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces new landing page sections and interactive animations, including scroll-driven button scaling and marquee components. Several new React components are added for features like "No Fees," "Security Built-In," and "Send in Seconds." Image asset exports are consolidated, and some illustrations are updated. The Changes
Possibly related PRs
Suggested labels
Suggested reviewers
✨ 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. 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: 5
🧹 Nitpick comments (11)
src/components/LandingPage/securityBuiltIn.tsx (2)
21-46: Consider extracting features data to separate file.While the features array is well-structured, it might be beneficial to extract it to a separate constants file for better maintainability, especially if this data needs to be accessed elsewhere.
Create a separate file
src/components/LandingPage/securityBuiltIn.constants.ts:import { StaticImageData } from 'next/image' import handThumbsUp from '@/assets/illustrations/hand-thumbs-up.svg' import handWaving from '@/assets/illustrations/hand-waving.svg' import handPeace from '@/assets/illustrations/hand-peace.svg' import biometricProtection from '@/assets/illustrations/biometric-protection.svg' import selfCustodialDesign from '@/assets/illustrations/self-custodial-design.svg' import kycOnlyWhenRequired from '@/assets/illustrations/kyc-only-when-required.svg' export interface Feature { id: number title: string titleSvg: StaticImageData description: string iconSrc: StaticImageData iconAlt: string } export const SECURITY_FEATURES: Feature[] = [ // ... feature objects ]
77-85: Consider using consistent sizing approach.The icon container uses fixed dimensions (h-10 w-10 on mobile, h-12 w-12 on desktop) while the image uses max-height/max-width constraints. This could be simplified for better maintainability.
- <div className="flex h-10 w-10 items-center justify-center md:h-12 md:w-12"> + <div className="flex h-12 w-12 items-center justify-center"> <Image src={feature.iconSrc} alt={feature.iconAlt} width={40} height={40} - className="max-h-full max-w-full object-contain md:h-12 md:w-12" + className="h-10 w-10 object-contain md:h-12 md:w-12" /> </div>src/components/LandingPage/yourMoney.tsx (2)
15-15: Consider more specific type for titleSvg.Instead of using
anytype fortitleSvg, consider using a more specific type likeStaticImageDatafrom Next.js or creating a custom type for SVG imports.- titleSvg: any + titleSvg: StaticImageData
87-87: Consider extracting magic number to constant.The conditional margin bottom logic for the second feature (
index === 1) uses a magic number. Consider extracting this to a named constant or adding a comment explaining the special case.- className={`${index === 1 ? 'mb-3' : 'mb-4'} w-full max-w-sm text-left md:text-left`} + className={`${index === 1 ? 'mb-3' : 'mb-4'} w-full max-w-sm text-left md:text-left`} // Special spacing for middle featuresrc/components/LandingPage/noFees.tsx (1)
63-112: Consider reducing repetitive animated star elements.The multiple animated star elements with very similar properties could be refactored into a more maintainable structure using an array and map function.
+const starConfigs = [ + { className: "absolute -right-36 -top-12", delay: 0.2, rotate: 22, translateY: 20, translateX: 5 }, + { className: "absolute -right-58 top-30", delay: 0.4, rotate: -17, translateY: 28, translateX: -5 }, + // ... other configurations +]; - <motion.img - src={Star.src} - alt="Floating Star" - width={50} - height={50} - className="absolute -right-36 -top-12" - initial={{ opacity: 0, translateY: 20, translateX: 5, rotate: 22 }} - whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: 22 }} - transition={{ type: 'spring', damping: 5, delay: 0.2 }} - /> + {starConfigs.map((config, index) => ( + <motion.img + key={index} + src={Star.src} + alt="Floating Star" + width={50} + height={50} + className={config.className} + initial={{ opacity: 0, translateY: config.translateY, translateX: config.translateX, rotate: config.rotate }} + whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: config.rotate }} + transition={{ type: 'spring', damping: 5, delay: config.delay }} + /> + ))}src/components/LandingPage/sendInSeconds.tsx (1)
112-140: Consider extracting cloud configurations.Similar to the star elements in
noFees.tsx, the multiple cloud animations could be refactored into a configuration array for better maintainability.+const cloudConfigs = [ + { side: 'left' as const, top: '15%', width: 320, speed: 35 }, + { side: 'right' as const, top: '40%', width: 200, speed: 40 }, + { side: 'left' as const, top: '70%', width: 180, speed: 45 }, + { side: 'right' as const, top: '80%', width: 320, speed: 30 }, +]; - <motion.img - src={borderCloud.src} - alt="Floating Border Cloud" - className="absolute left-0" - style={{ top: '15%', width: 320 }} - {...createCloudAnimation('left', 320, 35)} - /> + {cloudConfigs.map((config, index) => ( + <motion.img + key={index} + src={borderCloud.src} + alt="Floating Border Cloud" + className={`absolute ${config.side}-0`} + style={{ top: config.top, width: config.width }} + {...createCloudAnimation(config.side, config.width, config.speed)} + /> + ))}src/app/page.tsx (2)
71-123: Consider throttling scroll and wheel event handlers.The scroll and wheel event handlers fire frequently and contain complex calculations. This could impact performance on lower-end devices.
Consider using a throttle utility to limit the frequency of handler execution:
import { throttle } from 'lodash' // or implement a custom throttle const handleScroll = throttle(() => { // existing scroll logic }, 16) // ~60fps const handleWheel = throttle((event: WheelEvent) => { // existing wheel logic }, 16)Also applies to: 125-148
161-186: Component structure is well-organized.The new landing page sections are properly integrated with marquee separators. Good use of ref for the SendInSeconds component to support scroll animations.
Consider extracting the repeated Marquee pattern into a helper function for cleaner code:
const renderSectionWithMarquee = (Component: React.ComponentType, props?: any) => ( <> <Component {...props} /> <Marquee {...marqueeProps} /> </> )src/components/LandingPage/hero.tsx (3)
64-100: Consider extracting arrow configuration.The arrow rendering logic is correct, but the hardcoded values could be extracted for better maintainability.
const ARROW_CONFIG = { imagePath: '/arrows/small-arrow.svg', mobile: { width: 32, height: 16, rotation: '8deg' }, desktop: { width: 40, height: 20, rotation: '8deg' }, positions: { left: { className: '-left-8 -top-5', desktopClassName: '-left-10 -top-6' }, right: { className: '-right-8 -top-5', desktopClassName: '-right-10 -top-6', scaleX: -1 } } }
126-126: Clean up commented code and unused variable.The sparkle rendering is commented out and
arrowOpacityis always 1, making it redundant.Either remove the commented sparkle code or add a TODO comment explaining why it's disabled:
- {/* {renderSparkle(variant)} */} + {/* TODO: Sparkle effect temporarily disabled for new design */}Also, remove the unused
arrowOpacityvariable:- const arrowOpacity = 1 // Always visible - {renderArrows(variant, arrowOpacity, buttonVisible)} + {renderArrows(variant, 1, buttonVisible)}Also applies to: 136-136
175-189: New illustration section well implemented.Good use of Next.js Image component for the SVG illustration. The responsive sizing is properly handled.
Consider moving inline styles to CSS classes or styled components:
const headingStyles = { fontWeight: 500, letterSpacing: '-0.5px' }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (31)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/arrows/small-arrow.svgis excluded by!**/*.svgsrc/assets/illustrations/biometric-protection.svgis excluded by!**/*.svgsrc/assets/illustrations/border-cloud.svgis excluded by!**/*.svgsrc/assets/illustrations/exclamations.svgis excluded by!**/*.svgsrc/assets/illustrations/free-global-transfers.svgis excluded by!**/*.svgsrc/assets/illustrations/get-paid-worldwide.svgis excluded by!**/*.svgsrc/assets/illustrations/got-it-hand-flipped.svgis excluded by!**/*.svgsrc/assets/illustrations/got-it-hand.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-peace.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-waving.svgis excluded by!**/*.svgsrc/assets/illustrations/instantly-send-receive.svgis excluded by!**/*.svgsrc/assets/illustrations/kyc-only-when-required.svgis excluded by!**/*.svgsrc/assets/illustrations/mobile-security-privacy-built-in.svgis excluded by!**/*.svgsrc/assets/illustrations/mobile-send-in-seconds.svgis excluded by!**/*.svgsrc/assets/illustrations/mobile-your-money-anywhere.svgis excluded by!**/*.svgsrc/assets/illustrations/mobile-zero-fees.svgis excluded by!**/*.svgsrc/assets/illustrations/new-hand-token.svgis excluded by!**/*.svgsrc/assets/illustrations/new-hero-description.svgis excluded by!**/*.svgsrc/assets/illustrations/no-hidden-fees.svgis excluded by!**/*.svgsrc/assets/illustrations/pay-anyone-anywhere.svgis excluded by!**/*.svgsrc/assets/illustrations/pay-zero-fees.svgis excluded by!**/*.svgsrc/assets/illustrations/peanut-means.svgis excluded by!**/*.svgsrc/assets/illustrations/security-privacy-built-in.svgis excluded by!**/*.svgsrc/assets/illustrations/self-custodial-design.svgis excluded by!**/*.svgsrc/assets/illustrations/your-money-anywhere.svgis excluded by!**/*.svgsrc/assets/illustrations/zero.svgis excluded by!**/*.svgsrc/assets/iphone-ss/iphone-your-money-1.pngis excluded by!**/*.pngsrc/assets/iphone-ss/iphone-your-money-2.pngis excluded by!**/*.pngsrc/assets/iphone-ss/iphone-your-money-3.pngis excluded by!**/*.pngsrc/assets/scribble.svgis excluded by!**/*.svg
📒 Files selected for processing (13)
index.ts(1 hunks)package.json(1 hunks)src/app/page.tsx(2 hunks)src/assets/illustrations/index.ts(1 hunks)src/components/Global/Layout/index.tsx(0 hunks)src/components/LandingPage/businessIntegrate.tsx(1 hunks)src/components/LandingPage/hero.tsx(3 hunks)src/components/LandingPage/index.ts(1 hunks)src/components/LandingPage/marquee.tsx(1 hunks)src/components/LandingPage/noFees.tsx(1 hunks)src/components/LandingPage/securityBuiltIn.tsx(1 hunks)src/components/LandingPage/sendInSeconds.tsx(1 hunks)src/components/LandingPage/yourMoney.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/Global/Layout/index.tsx
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
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".
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".
src/components/LandingPage/yourMoney.tsx (10)
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.
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`.
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.
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.
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.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
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".
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".
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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
src/assets/illustrations/index.ts (1)
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.
src/components/LandingPage/noFees.tsx (10)
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.
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`.
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.
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.
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.
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.
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.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#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.
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.
src/components/LandingPage/marquee.tsx (2)
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.
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.
index.ts (1)
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.
src/app/page.tsx (8)
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#798
File: src/components/Home/HomeHistory.tsx:138-192
Timestamp: 2025-04-11T11:33:53.245Z
Learning: In the HomeHistory component, infinite scrolling is intentionally not implemented despite the presence of useInfiniteQuery and IntersectionObserver code. The component is designed to only display the first 5 entries with a "View all transactions" link for viewing the complete history.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#0
File: :0-0
Timestamp: 2025-07-05T16:58:25.340Z
Learning: Hugo0 successfully refactored sessionStorage usage to React Context in the onramp flow, demonstrating preference for centralized state management over browser storage for component-shared state in React applications.
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.
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.
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.
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.
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.
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.
src/components/LandingPage/index.ts (9)
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.
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.
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`.
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.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
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`.
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.
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.
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.
src/components/LandingPage/securityBuiltIn.tsx (2)
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.
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.
src/components/LandingPage/sendInSeconds.tsx (2)
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.
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.
src/components/LandingPage/hero.tsx (5)
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.
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.
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.
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.
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.
🧬 Code Graph Analysis (1)
src/components/LandingPage/marquee.tsx (1)
src/components/Global/MarqueeWrapper/index.tsx (1)
MarqueeComp(36-76)
⏰ 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 (23)
index.ts (1)
1-33: Excellent asset consolidation pattern.This centralized export pattern provides a clean way to manage and import assets across the application. The descriptive naming convention makes it easy to identify what each asset represents.
Consider adding JSDoc comments to document the purpose of each asset category if this file grows significantly in the future.
src/assets/illustrations/index.ts (1)
7-8: SVG Asset References Updated – No Remaining ReferencesI searched the entire repo for
hand-token.svgandhero-description.svgand only found the new paths:• src/assets/illustrations/index.ts: export … from './new-hand-token.svg'
• src/assets/illustrations/index.ts: export … from './new-hero-description.svg'There are no lingering references to the old files.
Ifhand-token.svgorhero-description.svgstill exist in your assets folder, you can safely delete them to avoid clutter.src/components/LandingPage/index.ts (1)
1-10: LandingPage Export Additions VerifiedAll new component exports follow the established pattern and each file exists and exports correctly:
- businessIntegrate.tsx →
export function BusinessIntegrate()- marquee.tsx →
export function Marquee()- noFees.tsx →
export function NoFees()- securityBuiltIn.tsx →
export function SecurityBuiltIn()- sendInSeconds.tsx →
export function SendInSeconds()- yourMoney.tsx →
export function YourMoney()src/components/LandingPage/securityBuiltIn.tsx (1)
48-110: Component implementation is well-structured.The component follows React best practices with proper JSX structure, responsive design, and accessibility considerations. The use of Next.js Image component ensures optimal performance.
Minor suggestions:
- The inline style on line 99 could be moved to Tailwind classes if this pattern is used elsewhere
- Consider adding loading="lazy" to images for better performance
src/components/LandingPage/businessIntegrate.tsx (3)
1-70: Well-structured component with good practices.The component follows React best practices with proper TypeScript types, semantic HTML structure, and responsive design. The use of Next.js Image for optimization and proper external link attributes are commendable.
8-8: Good practice: Extract background color as constant.Defining the background color as a constant improves maintainability and makes it easier to update the color scheme across the application.
59-66: Verify external link accessibility and security.The external link to the Notion page includes proper security attributes (
noopener noreferrer), which is good practice for external links.src/components/LandingPage/marquee.tsx (3)
4-9: Well-defined TypeScript interface.The
MarqueePropsinterface properly defines all optional props with clear types, making the component API explicit and type-safe.
11-16: Good use of default parameters.The component provides sensible default values for all props, making it easy to use with minimal configuration while still allowing customization when needed.
17-17: Efficient conditional rendering.The early return pattern for the visibility check is a clean and efficient way to handle conditional rendering.
src/components/LandingPage/yourMoney.tsx (2)
12-19: Well-structured Feature interface.The interface properly defines all required properties with appropriate types, making the component data structure clear and type-safe.
56-72: Effective responsive image implementation.The conditional rendering of different images for mobile and desktop versions using Tailwind's responsive classes is well-implemented and provides optimal user experience across devices.
src/components/LandingPage/noFees.tsx (3)
14-24: Proper state management and cleanup.The screen width state management with event listener cleanup is well-implemented. The SSR-safe initialization and proper cleanup prevent memory leaks.
26-39: Well-designed animation helper function.The
createCloudAnimationfunction is well-parameterized and reusable, making it easy to create consistent cloud animations with different properties.
148-164: Arrow image assets verified
Bothpublic/arrows/bottom-left-arrow.svgandpublic/arrows/bottom-right-arrow.svgexist as expected. No further changes needed.src/components/LandingPage/sendInSeconds.tsx (3)
11-21: Consistent state management pattern.The screen width state management follows the same pattern as in
noFees.tsx, which is good for consistency across components.
38-72: Well-organized button animation helpers.The button animation helper functions are well-structured and make the animation logic clear and reusable. The naming convention and parameter handling are good.
77-105: Arrow image path verifiedThe referenced asset
public/arrows/small-arrow.svgis present in the public directory. No changes required.src/app/page.tsx (3)
4-15: New component imports look good.The imports for the new landing page sections are properly structured and follow the existing pattern.
20-28: State management for scroll animations is well-structured.Good use of refs for scroll position tracking and clear state variable naming for animation phases.
73-74: Add null check for getElementById result.The
getElementByIdcall on line 73 could return null. The check on line 74 only returns early but doesn't prevent potential null reference errors if the element is not found.- const targetElement = document.getElementById('sticky-button-target') - if (!targetElement) return + const targetElement = document.getElementById('sticky-button-target') + if (!targetElement) { + console.warn('sticky-button-target element not found') + return + }⛔ Skipped due to learnings
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.Learnt from: Hugo0 PR: peanutprotocol/peanut-ui#852 File: src/hooks/useTransactionHistory.ts:177-239 Timestamp: 2025-05-14T21:16:06.369Z Learning: When reviewing code, pay attention to and resolve CodeRabbit comments as they can contain useful refactoring suggestions and insights.src/components/LandingPage/hero.tsx (2)
24-53: Excellent performance optimization with helper functions.Moving these pure functions outside the component prevents unnecessary recreations on each render. Good use of const assertions for type safety.
104-123: Scroll and resize handling properly implemented.Good addition of scroll tracking with proper event listener cleanup.
| "lottie-react": "^2.4.0", | ||
| "multicoin-address-validator": "^0.5.22", | ||
| "next": "15.3.1", | ||
| "pino-pretty": "^13.0.0", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify package usage and consider moving to devDependencies.
The pino-pretty package is typically used for formatting logs during development. If this is only used for development purposes, it should be in devDependencies instead of dependencies.
🏁 Script executed:
#!/bin/bash
# Check if pino-pretty is used in the codebase
rg -A 3 "pino-pretty|pino\.pretty" --type ts --type tsx --type js --type jsxLength of output: 106
🌐 Web query:
Is pino-pretty version 13.0.0 the latest secure version? Are there any known security vulnerabilities?
💡 Result:
Yes, version 13.0.0 of pino-pretty is the latest stable release and is considered secure. As of now, there are no known security vulnerabilities associated with this version. (security.snyk.io)
It's important to note that pino-pretty is intended for development environments to format Pino log lines for easier readability. The maintainers recommend against using pino-pretty in production settings. (classic.yarnpkg.com)
Additionally, the Pino project has a security policy in place for reporting potential vulnerabilities. If you discover any issues, you can report them via email at matteo.collina@gmail.com. (github.com)
Citations:
- 1: https://security.snyk.io/package/npm/pino-pretty?utm_source=openai
- 2: https://classic.yarnpkg.com/en/package/pino-pretty?utm_source=openai
- 3: https://github.com/pinojs/pino/security?utm_source=openai
🏁 Script executed:
#!/bin/bash
# Search for any programmatic usage of pino-pretty in source files and npm scripts
rg -n "from ['\"]pino-pretty['\"]" -g "*.{js,jsx,ts,tsx}"
rg -n "require\(['\"]pino-pretty['\"]\)" -g "*.{js,jsx,ts,tsx}"
rg -n "pino-pretty" -g "*"Length of output: 333
Move pino-pretty to devDependencies
No imports, CLI invocations, or npm‐script usages of pino-pretty were found in the codebase, and it’s only used for formatting logs during development. Please:
- In
package.json, cut the"pino-pretty": "^13.0.0"entry at line 64 underdependencies - Paste it under the
devDependenciessection
This ensures it isn’t bundled in production installs.
🤖 Prompt for AI Agents
In package.json at line 64, move the "pino-pretty": "^13.0.0" entry from the
dependencies section to the devDependencies section by cutting it from
dependencies and pasting it under devDependencies. This change ensures
pino-pretty is only installed in development environments and not bundled in
production.
| interface Feature { | ||
| id: number | ||
| title: string | ||
| titleSvg: any | ||
| description: string | ||
| iconSrc: any | ||
| iconAlt: string | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety for SVG imports.
The Feature interface uses any for titleSvg and iconSrc properties, which reduces type safety.
+import { StaticImageData } from 'next/image'
+
interface Feature {
id: number
title: string
- titleSvg: any
+ titleSvg: StaticImageData
description: string
- iconSrc: any
+ iconSrc: StaticImageData
iconAlt: string
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| interface Feature { | |
| id: number | |
| title: string | |
| titleSvg: any | |
| description: string | |
| iconSrc: any | |
| iconAlt: string | |
| } | |
| import { StaticImageData } from 'next/image' | |
| interface Feature { | |
| id: number | |
| title: string | |
| titleSvg: StaticImageData | |
| description: string | |
| iconSrc: StaticImageData | |
| iconAlt: string | |
| } |
🤖 Prompt for AI Agents
In src/components/LandingPage/securityBuiltIn.tsx around lines 12 to 19, the
Feature interface uses 'any' type for the titleSvg and iconSrc properties, which
weakens type safety. Replace 'any' with a more specific type for SVG imports,
such as React.FunctionComponent<React.SVGProps<SVGSVGElement>> or another
appropriate SVG component type, to improve type safety and enable better type
checking.
| const createCloudAnimation = (side: 'left' | 'right', width: number, speed: number) => { | ||
| const vpWidth = screenWidth || 1080 | ||
| const totalDistance = vpWidth + width | ||
|
|
||
| return { | ||
| initial: { x: side === 'left' ? -width : vpWidth }, | ||
| animate: { x: side === 'left' ? vpWidth : -width }, | ||
| transition: { | ||
| ease: 'linear', | ||
| duration: totalDistance / speed, | ||
| repeat: Infinity, | ||
| }, | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicated cloud animation logic.
The createCloudAnimation function is identical to the one in noFees.tsx. Consider extracting this to a shared utility function to reduce code duplication.
Create a shared utility file for animation helpers:
// src/utils/animations.ts
export const createCloudAnimation = (
side: 'left' | 'right',
width: number,
speed: number,
screenWidth: number
) => {
const vpWidth = screenWidth || 1080
const totalDistance = vpWidth + width
return {
initial: { x: side === 'left' ? -width : vpWidth },
animate: { x: side === 'left' ? vpWidth : -width },
transition: {
ease: 'linear',
duration: totalDistance / speed,
repeat: Infinity,
},
}
}Then import and use it in both components.
🤖 Prompt for AI Agents
In src/components/LandingPage/sendInSeconds.tsx lines 23 to 36, the
createCloudAnimation function duplicates identical logic found in noFees.tsx. To
fix this, extract createCloudAnimation into a shared utility file such as
src/utils/animations.ts, modifying it to accept screenWidth as a parameter.
Then, import and use this shared function in both sendInSeconds.tsx and
noFees.tsx to eliminate duplication and centralize animation logic.
| const stickyButtonTop = window.innerHeight - 16 - 52 // 16px bottom margin, ~52px button height | ||
| const stickyButtonBottom = window.innerHeight - 16 | ||
|
|
||
| // Freeze when the target element overlaps with the sticky button position (even lower) | ||
| const shouldFreeze = | ||
| targetRect.top <= stickyButtonBottom - 60 && | ||
| targetRect.bottom >= stickyButtonTop - 60 && | ||
| !animationComplete && | ||
| !shrinkingPhase && | ||
| !hasGrown | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract magic numbers as named constants.
The code contains several magic numbers that should be extracted for better maintainability and clarity.
Add these constants at the component level:
const ANIMATION_CONSTANTS = {
STICKY_BUTTON_HEIGHT: 52,
BOTTOM_MARGIN: 16,
FREEZE_OFFSET: 60,
SCROLL_THRESHOLD_AFTER_FREEZE: 50,
SHRINK_SCROLL_DISTANCE: 200,
RESET_SCROLL_DISTANCE: 100,
MAX_VIRTUAL_SCROLL: 500,
MAX_BUTTON_SCALE: 1.5,
SCALE_RANGE: 0.5
}Also applies to: 134-134, 135-135, 139-139
🤖 Prompt for AI Agents
In src/app/page.tsx around lines 81 to 91 (and also lines 134, 135, and 139),
the code uses several magic numbers directly in calculations, which reduces
readability and maintainability. Define a constant object named
ANIMATION_CONSTANTS at the component level containing all relevant numeric
values like STICKY_BUTTON_HEIGHT, BOTTOM_MARGIN, FREEZE_OFFSET, etc. Replace all
occurrences of these magic numbers in the specified lines with references to the
corresponding properties in ANIMATION_CONSTANTS.
| setIsScrollFrozen(true) | ||
| frozenScrollY.current = currentScrollY | ||
| virtualScrollY.current = 0 | ||
| document.body.style.overflow = 'hidden' |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using a custom hook for body overflow management.
Direct manipulation of document.body.style.overflow could interfere with other components. Also, the cleanup might not run if the component unmounts while frozen.
Consider creating a custom hook to manage body overflow state:
const useBodyOverflow = (shouldHide: boolean) => {
useEffect(() => {
const originalOverflow = document.body.style.overflow
if (shouldHide) {
document.body.style.overflow = 'hidden'
}
return () => {
document.body.style.overflow = originalOverflow
}
}, [shouldHide])
}Also applies to: 142-142, 157-157
🤖 Prompt for AI Agents
In src/app/page.tsx at lines 97, 142, and 157, the code directly manipulates
document.body.style.overflow without cleanup, risking side effects if the
component unmounts unexpectedly. Refactor by creating a custom hook that accepts
a boolean to toggle overflow hidden, uses useEffect to set overflow to 'hidden'
when true, and restores the original overflow style on cleanup. Replace all
direct overflow style changes with calls to this hook to ensure proper
management and cleanup.
1 participant
new PR with signed commits