-
Notifications
You must be signed in to change notification settings - Fork 13
Feat/legacy landing page #981
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces a MigrationBanner component, modifies the Hero component to support multiple CTAs, and updates the Layout to use the new banner. It also expands the TryNow card set, adjusts icon handling, and makes minor asset and animation data source changes, focusing on internal component usage and styling. Changes
Possibly related PRs
Suggested labels
✨ 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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/components/Global/MigrationBanner/index.tsx (1)
1-22
: Well-structured migration banner componentThe component demonstrates good practices:
- Clean TypeScript interface with optional props
- Proper semantic HTML structure
- Accessibility considerations with alt text
- Consistent styling patterns
Consider making the migration URL configurable via props for better reusability, though the current hardcoded approach is acceptable for this specific migration use case.
src/components/Global/Layout/index.tsx (1)
3-3
: Remove unused Footer importThe Footer component is imported but no longer rendered in the JSX. Consider removing this import to clean up the code.
-import Footer from '@/components/Global/Footer'
src/components/Global/TryNow/index.tsx (1)
18-18
: Consider strengthening type safety for icon property.The mixed
StaticImageData | string
type for the icon property could lead to runtime issues if string URLs are used inconsistently with the Image component.Consider using a more type-safe approach:
interface ITryNowCard { title: string description: string - icon: StaticImageData | string + icon: StaticImageData href: string isExternal?: boolean needsIconAdjustment?: boolean }Alternatively, if string URLs are needed, add proper type guards in the rendering logic.
Also applies to: 21-21
src/components/LandingPage/hero.tsx (1)
68-114
: Improve CTA positioning and add validation for primary CTAs.The multi-CTA implementation works but has some areas for improvement:
Fixed positioning calculation: The
right-[calc(50%-120px)]
assumes a specific total width that may not scale well with varying numbers of CTAs.Missing primary CTA validation: There's no guarantee that at least one CTA is marked as primary, which could affect UX consistency.
Consider these improvements:
{ctas && ctas.length > 0 && ( - <div className="fixed bottom-4 right-[calc(50%-120px)] z-20 flex gap-4 sm:bottom-8"> + <div className="fixed bottom-4 left-1/2 z-20 flex -translate-x-1/2 gap-4 sm:bottom-8"> {ctas.map((cta, index) => ( <motion.div key={index} // ... existing animation props > {cta.primary && ( <img src={Sparkle.src} className="absolute -right-4 -top-4 h-auto w-5 sm:-right-5 sm:-top-5 sm:w-6" alt="Sparkle" /> )}Additionally, consider adding validation in the parent component to ensure at least one CTA is primary:
// In parent component const validateCTAs = (ctas: HeroProps['ctas']) => { return ctas?.some(cta => cta.primary) ?? false }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/icons/gitbook-black.png
is excluded by!**/*.png
📒 Files selected for processing (7)
src/app/page.tsx
(2 hunks)src/assets/icons/index.ts
(1 hunks)src/components/Global/Layout/index.tsx
(3 hunks)src/components/Global/MigrationBanner/index.tsx
(1 hunks)src/components/Global/TryNow/index.tsx
(4 hunks)src/components/LandingPage/hero.tsx
(2 hunks)src/components/Welcome/welcomeSDK.tsx
(2 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#942
File: src/components/AddMoney/consts/index.ts:2151-2162
Timestamp: 2025-06-30T10:44:08.048Z
Learning: Hugo0 often agrees with refactoring suggestions but defers implementation due to time constraints, preferring to track improvements as follow-up issues when they're part of larger architectural changes.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#823
File: src/context/kernelClient.context.tsx:79-86
Timestamp: 2025-04-29T19:36:38.121Z
Learning: When Hugo0 asks to "resolve coderabbit comments", they want to acknowledge the comment without necessarily implementing the suggested changes, as the current implementation might be intentional for their specific use case.
src/components/Welcome/welcomeSDK.tsx (6)
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#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#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#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: 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.
src/components/Global/MigrationBanner/index.tsx (1)
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.
src/app/page.tsx (10)
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: 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#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.
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#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#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.
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#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/Global/Layout/index.tsx (7)
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: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#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/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/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`.
src/components/Global/TryNow/index.tsx (7)
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#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: 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#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#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.
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.
🧬 Code Graph Analysis (2)
src/app/page.tsx (1)
src/components/LandingPage/hero.tsx (1)
Hero
(21-117)
src/components/Global/Layout/index.tsx (1)
src/components/Global/MigrationBanner/index.tsx (1)
MigrationBanner
(11-22)
🔇 Additional comments (10)
src/assets/icons/index.ts (1)
11-11
: LGTM: Clean asset export additionThe new
GITBOOK_BLACK_ICON
export follows the established naming convention and integrates well with the existing icon exports.src/components/Welcome/welcomeSDK.tsx (1)
335-335
: Consistent animation data source usageGood consistency with the updated
defaultLottieOptions
configuration. The direct string path usage aligns with the animation data source changes.src/app/page.tsx (2)
16-27
: Excellent CTA structure refactoringThe transition from single
cta
to multiplectas
array is well-implemented:
- Clear primary/secondary distinction
- Proper boolean flags for styling
- Intuitive user flow with "TRY NOW" as primary and "LEGACY" as fallback
- Aligns perfectly with the updated Hero component interface
165-165
: Consistent Hero component usageThe Hero component call correctly uses the new
ctas
prop structure, maintaining consistency with the updated component interface.src/components/Global/Layout/index.tsx (3)
4-4
: Clean migration banner integrationThe MigrationBanner import is properly integrated for the layout migration changes.
43-43
: Verify background color change impactThe background color change from
'bg-background-1'
to'bg-pink-1'
for the/pay
route appears intentional for the migration. Ensure this change doesn't conflict with other styling or affect user experience negatively.
45-45
: Strategic dual banner placementThe dual MigrationBanner placement (top and bottom) effectively emphasizes the migration message. The consistent height specification (
h-[7vh] min-h-[90px]
) ensures proper spacing and responsive behavior.Also applies to: 55-55
src/components/Global/TryNow/index.tsx (2)
1-9
: LGTM! Icon imports properly expanded.The additional icon imports and StaticImageData type import are correctly structured to support the new legacy cards.
Also applies to: 11-11
44-70
: Legacy cards appropriately added to support migration strategy.The new legacy cards are well-structured and clearly labeled. The configuration properly uses the new
needsIconAdjustment
flag for visual consistency.src/components/LandingPage/hero.tsx (1)
13-17
: LGTM! Multi-CTA support properly implemented.The type changes cleanly support multiple CTAs with the primary flag distinction. The function parameter update is consistent with the interface change.
Also applies to: 21-21
loop: true, | ||
autoplay: true, | ||
animationData: REDPACKET_LOTTIE, | ||
animationData: '/lottie/redpacket-lottie.json', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Verification agent
🧩 Analysis chain
Verify animation data availability at runtime
The change from imported REDPACKET_LOTTIE
to string path '/lottie/redpacket-lottie.json'
shifts from build-time bundling to runtime loading. Ensure the animation file is available at this path and consider the performance implications of this change.
🏁 Script executed:
#!/bin/bash
# Check if the animation file exists at the expected path
fd -t f "redpacket-lottie.json" --exec ls -la {}
Length of output: 143
Ensure the JSON is served at “/lottie/redpacket-lottie.json” at runtime
We located redpacket-lottie.json
under src/assets/lottie/
, but referencing it via animationData: '/lottie/redpacket-lottie.json'
requires that file to live in your app’s static‐served folder (e.g. public/lottie/
) or be copied there by your build pipeline. Otherwise the Lottie player will 404 at runtime.
• Move
src/assets/lottie/redpacket-lottie.json
→public/lottie/redpacket-lottie.json
• Or update your bundler (e.g. add a CopyWebpackPlugin entry) to emit lottie/redpacket-lottie.json
under dist
/public
so '/lottie/redpacket-lottie.json'
resolves correctly
• After relocating/configuring, test both dev and production builds to confirm the file loads and measure any caching/performance impacts
🤖 Prompt for AI Agents
In src/components/Welcome/welcomeSDK.tsx at line 180, the animationData path
'/lottie/redpacket-lottie.json' expects the JSON file to be served from the
public static folder. To fix this, move the file from
src/assets/lottie/redpacket-lottie.json to public/lottie/redpacket-lottie.json,
or configure your build pipeline (e.g., using CopyWebpackPlugin) to copy it to
the appropriate public directory during build. After making this change, verify
that the file loads correctly in both development and production environments.
index === 0 ? 'p-4' : 'p-2', | ||
index === 6 && 'pt-4' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Refactor hardcoded index checks for better maintainability.
The hardcoded index checks (index === 6
) are fragile and will break if the cards array order changes. Consider using a more robust approach.
- className={twMerge(
- 'hidden size-16 items-center justify-center rounded-full bg-purple-1 md:flex',
- index === 0 ? 'p-4' : 'p-2',
- index === 6 && 'pt-4'
- )}
+ className={twMerge(
+ 'hidden size-16 items-center justify-center rounded-full bg-purple-1 md:flex',
+ index === 0 ? 'p-4' : 'p-2',
+ card.title === 'Docs (legacy)' && 'pt-4'
+ )}
Or better yet, add a specific flag to the card interface for special styling needs:
interface ITryNowCard {
title: string
description: string
icon: StaticImageData | string
href: string
isExternal?: boolean
needsIconAdjustment?: boolean
+ needsTopPadding?: boolean
}
Also applies to: 102-106, 115-119
🤖 Prompt for AI Agents
In src/components/Global/TryNow/index.tsx around lines 98 to 99, the code uses
hardcoded index checks like `index === 6` for styling, which is fragile and
breaks if the cards array changes. To fix this, update the card data structure
to include a specific boolean flag indicating special styling needs, then use
that flag in the rendering logic instead of index comparisons. Apply the same
change to lines 102-106 and 115-119 for consistency.
No description provided.