Feat/social preview copies #1000
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate limit exceeded@Zishan-7 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 6 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
""" WalkthroughThis update introduces modularization and enhancements to metadata and Open Graph (OG) image handling across claim, recipient, and API routes. It adds username resolution for Ethereum addresses, new OG image card components, and refactors styling and logic for payment and receipt OG cards. Robots.txt is updated to allow Twitterbot access to OG images. Utility exports are expanded to include ENS resolution. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes
Possibly related PRs
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
🔭 Outside diff range comments (2)
src/app/[...recipient]/page.tsx (1)
102-143: Fix unused description variable.The
descriptionvariable is conditionally set based on whether it's a receipt or payment request (lines 103, 112), but it's not used in the metadata return statement. Instead, the same hardcoded string is repeated three times (lines 129, 136, 142).Apply this diff to use the conditionally set description:
return { title, - description: 'Tap the link to pay instantly and without fees.', + description, ...(siteUrl ? { metadataBase: new URL(siteUrl) } : {}), icons: { icon: '/logo-favicon.png', }, openGraph: { title, - description: 'Tap the link to pay instantly and without fees.', + description, images: [{ url: ogImageUrl, width: 1200, height: 630 }], }, twitter: { card: 'summary_large_image', title, - description: 'Tap the link to pay instantly and without fees.', + description, images: [ogImageUrl], }, }src/app/(mobile-ui)/claim/page.tsx (1)
91-111: Fix unused description variable.Similar to the previous file, the
descriptionvariable is conditionally set but not used. The metadata always shows the unclaimed message even for claimed links.Apply this diff to use the conditional description:
openGraph: { title, - description: 'Tap the link to claim instantly and without fees.', + description, images: [{ url: ogImageUrl, width: 1200, height: 630 }], }, twitter: { card: 'summary_large_image', title, - description: 'Tap the link to claim instantly and without fees.', + description, images: [ogImageUrl], },
🧹 Nitpick comments (5)
src/utils/ens.utils.ts (2)
11-11: Consider making thesiteUrlparameter optional with a default value.The
siteUrlparameter is used for theoriginconfiguration but may not always be critical for ENS resolution. Consider providing a default fallback.-export async function resolveAddressToUsername(address: string, siteUrl: string): Promise<string | null> { +export async function resolveAddressToUsername(address: string, siteUrl?: string): Promise<string | null> {And update the config usage:
config: { domain: 'peanut.me', - origin: siteUrl, + origin: siteUrl || 'https://peanut.me', },
19-19: Consider using a more reliable fallback RPC URL.The fallback URL
'https://eth.llamarpc.com'may not be as reliable as established providers. Consider using a more established fallback.- providerUrl: mainnetRpcUrl || 'https://eth.llamarpc.com', + providerUrl: mainnetRpcUrl || 'https://cloudflare-eth.com',src/components/og/ReceiptCardOG.tsx (1)
73-94: Consider extracting magic numbers to constants.The amount display container has several hardcoded margin values that could be made more maintainable.
+const AMOUNT_CONTAINER_STYLES = { + marginTop: 80, + marginBottom: 40, + marginLeft: -50, +} as const + <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', - marginTop: 80, - marginBottom: 40, - marginLeft: -50, // More centered but still slightly to the left + ...AMOUNT_CONTAINER_STYLES, }} >src/app/(mobile-ui)/claim/page.tsx (2)
10-41: Consider removing or improving debug logging.The function implementation looks good with proper error handling. However, the console.log statements appear to be debug artifacts that should be removed or converted to more meaningful logging.
- if (username) { - console.log('username', username) - } - return { linkDetails, username } } catch (e) { - console.log('error: ', e) + console.error('Failed to get claim link data:', e) return null }
68-89: Use const instead of let for ogImageUrl.The
ogImageUrlvariable is never reassigned after initialization, so it should be declared withconst.// Generate OG image URL - let ogImageUrl = '/metadata-img.png' + const ogImageUrl = claimData?.linkDetails + ? (() => { + const { linkDetails, username } = claimData + const ogUrl = new URL(`${siteUrl}/api/og`) + ogUrl.searchParams.set('type', 'send') + ogUrl.searchParams.set('username', username || linkDetails.senderAddress) + + if (!linkDetails.claimed) { + // for unclaimed links, show claim preview + ogUrl.searchParams.set('amount', linkDetails.tokenAmount.toString()) + ogUrl.searchParams.set('token', linkDetails.tokenSymbol) + } else { + // for claimed links, show claimed status + ogUrl.searchParams.set('isReceipt', 'true') + } + + return siteUrl ? ogUrl.toString() : '/metadata-img.png' + })() + : '/metadata-img.png'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/app/(mobile-ui)/claim/page.tsx(4 hunks)src/app/[...recipient]/page.tsx(5 hunks)src/app/api/og/route.tsx(2 hunks)src/components/og/PaymentCardOG.tsx(1 hunks)src/components/og/ReceiptCardOG.tsx(2 hunks)src/utils/ens.utils.ts(1 hunks)src/utils/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
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.
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: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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.
src/components/og/PaymentCardOG.tsx (13)
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#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:28:25.280Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, both `txFee` and `utils.formatTokenAmount(estimatedGasCost, 3)` return strings, ensuring consistent return types for `calculatedFee`.
Learnt from: Hugo0
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.
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#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#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:41:53.062Z
Learning: When resolving ENS names in `PayRequestLink`, display an error message to the user if resolution fails.
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.
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.
src/app/api/og/route.tsx (19)
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: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#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: 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#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.
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/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.
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#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.
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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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: 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.
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.
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.
src/utils/ens.utils.ts (6)
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.
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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:41:53.062Z
Learning: When resolving ENS names in `PayRequestLink`, display an error message to the user if resolution fails.
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.
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.
src/components/og/ReceiptCardOG.tsx (14)
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#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#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#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#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.
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: 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.
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.
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: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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
src/app/[...recipient]/page.tsx (17)
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-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.
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: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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.
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/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#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/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#431
File: src/components/Create/Link/Success.view.tsx:89-89
Timestamp: 2024-10-08T20:28:39.527Z
Learning: `utils.printableAddress` is implemented in the codebase.
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.
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.
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.
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.
src/app/(mobile-ui)/claim/page.tsx (12)
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#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.
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: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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.
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: 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: 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.
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.
🧬 Code Graph Analysis (2)
src/utils/ens.utils.ts (2)
src/constants/general.consts.ts (1)
rpcUrls(17-30)src/utils/__mocks__/wagmi.ts (1)
mainnet(2-14)
src/components/og/ReceiptCardOG.tsx (1)
src/interfaces/interfaces.ts (1)
PaymentLink(294-299)
⏰ 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 (13)
src/utils/index.ts (1)
8-8: LGTM!The export follows the established pattern and properly exposes the ENS utilities.
src/components/og/PaymentCardOG.tsx (1)
123-123: LGTM!The simplified ternary expression improves readability while maintaining the same logic. The text change from "is sending you" to "is sending" makes the message more concise.
src/app/api/og/route.tsx (2)
127-133: LGTM!The arrow sources object creation follows the established pattern and maintains consistency with the non-receipt case.
149-149: LGTM!Properly passes the arrow sources to the ReceiptCardOG component, completing the integration.
src/components/og/ReceiptCardOG.tsx (4)
13-24: LGTM!The optional
arrowSrcsprop is properly typed and follows TypeScript best practices for optional object properties.
57-70: LGTM!The "Receipt for" heading provides clear context and uses appropriate styling consistent with the component's design system.
95-108: LGTM!The conditional arrow rendering with proper null checks ensures the component works correctly whether arrows are provided or not.
196-218: LGTM!The "sent via" section with inline logos provides clear branding and maintains good visual hierarchy.
src/app/[...recipient]/page.tsx (4)
7-7: LGTM!The import addition is clean and follows the existing pattern.
49-50: LGTM!Good initialization of variables for tracking username and charge creator address.
57-57: LGTM!Safe extraction of creator address using optional chaining within the existing error handling.
69-73: ENS resolution error handling is robust
TheresolveAddressToUsernamefunction already wraps the lookup in a try/catch, logs any errors, and returnsnullon failure. No additional error handling is required here.src/app/(mobile-ui)/claim/page.tsx (1)
4-4: LGTM!Import addition follows the existing pattern.
Zishan-7
force-pushed
the
feat/social-preview-copies
branch
from
e1feda1 to
2687785
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/og/ProfileCardOG.tsx (3)
1-5: Consider making the font metrics configurable and add validation.The hardcoded character width calculation uses a magic number (0.6) that may not be accurate across different font variations or browsers in the OG image rendering context.
-const usernameFontSize = 150 -function usernamePxWidth(name: string) { - const charPx = 0.6 * usernameFontSize // ≈48 px per glyph - return Math.round(name.length * charPx) + 40 // +40 padding -} +const usernameFontSize = 150 +const CHAR_WIDTH_RATIO = 0.6 // Approximate character width ratio for Montserrat SemiBold +const SCRIBBLE_PADDING = 40 + +function usernamePxWidth(name: string): number { + if (!name?.length) return SCRIBBLE_PADDING + const charPx = CHAR_WIDTH_RATIO * usernameFontSize + return Math.round(name.length * charPx) + SCRIBBLE_PADDING +}
18-31: Extract magic numbers to constants for maintainability.The hardcoded dimensions and styling values make the component harder to maintain and potentially inconsistent with other OG components.
+const OG_CARD_DIMENSIONS = { + width: 1200, + height: 630, + padding: 16, +} as const + +const COLORS = { + pink: '#fe91e6', + white: '#ffffff', + black: '#000', +} as const + export function ProfileCardOG({ username, scribbleSrc, logoSrc, iconSrc, }: { username: string scribbleSrc: string logoSrc: string iconSrc: string }) { - const pink = '#fe91e6' const scribbleWidth = usernamePxWidth(username) return ( /* ----- outer white frame ----- */ <div style={{ display: 'flex', justifyContent: 'center', - backgroundColor: '#ffffff', - padding: 16, - width: 1200, - height: 630, + backgroundColor: COLORS.white, + padding: OG_CARD_DIMENSIONS.padding, + width: OG_CARD_DIMENSIONS.width, + height: OG_CARD_DIMENSIONS.height, }} >
48-50: Extract repeated font styles to constants.The Montserrat font styles are repeated with slight variations, which could lead to inconsistencies and makes maintenance harder.
+const FONT_STYLES = { + montserratMedium: { + fontFamily: 'Montserrat Medium', + fontWeight: 500, + }, + montserratSemiBold: { + fontFamily: 'Montserrat SemiBold', + fontWeight: 700, + }, +} as const <h1 style={{ - fontFamily: 'Montserrat Medium', - fontWeight: 500, + ...FONT_STYLES.montserratMedium, fontSize: 46 }}> Send or Request money </h1> <p style={{ - fontFamily: 'Montserrat Medium', - fontWeight: 500, + ...FONT_STYLES.montserratMedium, fontSize: 46 }}>with</p>Also applies to: 99-99
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/[...recipient]/page.tsx(3 hunks)src/app/api/og/route.tsx(4 hunks)src/components/og/ProfileCardOG.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/api/og/route.tsx
- src/app/[...recipient]/page.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
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.
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#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.
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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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: 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.
src/components/og/ProfileCardOG.tsx (3)
Learnt from: jjramirezn
PR: #469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In src/app/request/pay/page.tsx, if linkRes is not OK in the generateMetadata function, the desired behavior is to use the standard title and preview image without throwing an error.
Learnt from: jjramirezn
PR: #564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file src/components/Request/Pay/Views/Initial.view.tsx, when reviewing the InitialView component, do not flag potential issues with using non-null assertion ! on the slippagePercentage variable, as handling undefined values in this context is considered out of scope.
Learnt from: jjramirezn
PR: #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.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (2)
src/components/og/ProfileCardOG.tsx (2)
7-17: Add prop validation for required image sources.The component accepts image URLs as strings without validation, which could lead to broken images in the OG card if invalid URLs are passed.
Consider adding basic validation:
export function ProfileCardOG({ username, scribbleSrc, logoSrc, iconSrc, }: { - username: string - scribbleSrc: string - logoSrc: string - iconSrc: string + username: string + scribbleSrc: string + logoSrc: string + iconSrc: string }) { + // Basic validation for required props + if (!username || !scribbleSrc || !logoSrc || !iconSrc) { + throw new Error('ProfileCardOG: All props are required') + }⛔ Skipped due to learnings
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: 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.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#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.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#422 File: src/components/Request/Pay/Pay.tsx:113-123 Timestamp: 2024-10-07T13:42:07.299Z Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.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.
100-101: Verify OG image asset dimensionsPlease ensure the hard-coded width/height values for your OG logos match each asset’s real pixel dimensions to prevent distortion:
• Identify which files are being passed as
iconSrcandlogoSrc(e.g. underpublic/or wherever your assets live)
• Open each asset (SVG viewport or raster image metadata) and note its natural width×height
• Confirm the code’s props—<img src={iconSrc} width={36} height={46}…>and<img src={logoSrc} width={132} height={26}…>—match those values
• If they differ, update the hard-coded numbers to the correct dimensions
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/og/PaymentCardOG.tsx (4)
3-6: Extract magic numbers to named constants for better maintainability.The hardcoded values make it difficult to understand the reasoning behind the calculations and harder to maintain.
+const CHAR_WIDTH_MULTIPLIER = 0.6 +const BASE_CHAR_WIDTH = 80 +const USERNAME_PADDING = 40 + function usernamePxWidth(name: string) { - const charPx = 0.6 * 80 // ≈48 px per glyph - return Math.round(name.length * charPx) + 40 // +40 padding + const charPx = CHAR_WIDTH_MULTIPLIER * BASE_CHAR_WIDTH // ≈48 px per glyph + return Math.round(name.length * charPx) + USERNAME_PADDING }
8-25: Consider extracting the props interface for better maintainability.Defining the props interface separately improves code organization and reusability.
+interface PaymentCardOGProps { + link: PaymentLink & { token?: string } + iconSrc: string + logoSrc: string + scribbleSrc: string + arrowSrcs: { + topLeft: string + topRight: string + bottomLeft: string + bottomRight: string + } +} + -export function PaymentCardOG({ - link, - iconSrc, - logoSrc, - scribbleSrc, - arrowSrcs, -}: { - link: PaymentLink & { token?: string } - iconSrc: string - logoSrc: string - scribbleSrc: string - arrowSrcs: { - topLeft: string - topRight: string - bottomLeft: string - bottomRight: string - } -}) { +export function PaymentCardOG({ + link, + iconSrc, + logoSrc, + scribbleSrc, + arrowSrcs, +}: PaymentCardOGProps) {
26-28: Extract the color constant to the top of the file for consistency.The pink color is used in the component but defined locally. Consider moving it to a constants section for better organization.
import { PaymentLink } from '@/interfaces' +const COLORS = { + pink: '#fe91e6', + black: '#000', + white: '#fff', +} as const + function usernamePxWidth(name: string) {Then update the usage:
- const pink = '#fe91e6' const scribbleWidth = usernamePxWidth(link.username) /* ----- outer white frame ----- */ return ( <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, width: 1200, height: 630, border: '3px solid #000', - backgroundColor: pink, + backgroundColor: COLORS.pink,
117-223: Consider extracting the complex amount display into a separate component.The amount display section with arrows is quite complex and could benefit from being a separate component for better maintainability and testability.
This would improve:
- Code readability by reducing nesting
- Reusability if similar displays are needed elsewhere
- Testability by allowing isolated testing of the amount display logic
- Maintainability by separating concerns
Would you like me to create a separate
AmountDisplaycomponent that encapsulates this logic?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/[...recipient]/page.tsx(3 hunks)src/app/api/og/route.tsx(4 hunks)src/components/og/PaymentCardOG.tsx(1 hunks)src/components/og/ProfileCardOG.tsx(1 hunks)src/components/og/ReceiptCardOG.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/components/og/ProfileCardOG.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/app/api/og/route.tsx
- src/app/[...recipient]/page.tsx
- src/components/og/ReceiptCardOG.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
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.
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#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.
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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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: 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.
src/components/og/PaymentCardOG.tsx (17)
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In src/components/Request/Pay components, the tokenPrice property in the IPayScreenProps interface is only relevant to these views. Other components using IPayScreenProps do not need to handle tokenPriceData when it's updated in these components.
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In src/components/Request/Pay components, the tokenPrice property in the IPayScreenProps interface is only relevant to these views. Other components using IPayScreenProps do not need to handle tokenPriceData when it's updated in these components.
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, both txFee and utils.formatTokenAmount(...) return strings, ensuring that calculatedFee consistently returns a string without the need for additional type conversion.
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, both txFee and utils.formatTokenAmount(estimatedGasCost, 3) return strings, ensuring consistent return types for calculatedFee.
Learnt from: jjramirezn
PR: #469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In src/app/request/pay/page.tsx, if linkRes is not OK in the generateMetadata function, the desired behavior is to use the standard title and preview image without throwing an error.
Learnt from: jjramirezn
PR: #564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file src/components/Request/Pay/Views/Initial.view.tsx, when reviewing the InitialView component, do not flag potential issues with using non-null assertion ! on the slippagePercentage variable, as handling undefined values in this context is considered out of scope.
Learnt from: jjramirezn
PR: #413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the TokenContextProvider component within src/context/tokenSelector.context.tsx, in the TypeScript React application, when data changes and before calling fetchAndSetTokenPrice, it is necessary to reset selectedTokenData, selectedTokenPrice, selectedTokenDecimals, and inputDenomination to discard stale data.
Learnt from: jjramirezn
PR: #495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the TokenAmountInput component (src/components/Global/TokenAmountInput/index.tsx), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.
Learnt from: Hugo0
PR: #413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, it's acceptable to use the ! operator in TypeScript to assert that selectedTokenData is not null or undefined, and potential runtime errors from accessing its properties without checks can be disregarded.
Learnt from: Hugo0
PR: #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.
Learnt from: Hugo0
PR: #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.
Learnt from: Hugo0
PR: #422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in src/components/Request/Pay/Pay.tsx within the PayRequestLink component, set tokenPriceData.price to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: Hugo0
PR: #422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the PayRequestLink component (src/components/Request/Pay/Pay.tsx), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
Learnt from: Hugo0
PR: #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.
Learnt from: jjramirezn
PR: #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.
Learnt from: Hugo0
PR: #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: #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.
⏰ 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). (2)
- GitHub Check: Deploy-Preview
- GitHub Check: Analyze (javascript-typescript)
Comment on lines
+168
to
+171
| {link.token && link.token.toLowerCase() !== 'usdc' | ||
| ? `${link.amount} ${link.token}` | ||
| : `$${link.amount}`} | ||
| </span> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract duplicated token formatting logic to reduce code duplication.
The token display logic is duplicated in both the fill and outline spans.
+ const formatAmount = () => {
+ if (link.token && link.token.toLowerCase() !== 'usdc') {
+ return `${link.amount} ${link.token}`
+ }
+ return `$${link.amount}`
+ }
+
/* ----- palette ----- */
const pink = '#fe91e6'
const scribbleWidth = usernamePxWidth(link.username)Then update both occurrences:
- {link.token && link.token.toLowerCase() !== 'usdc'
- ? `${link.amount} ${link.token}`
- : `$${link.amount}`}
+ {formatAmount()}Also applies to: 188-191
🤖 Prompt for AI Agents
In src/components/og/PaymentCardOG.tsx around lines 168-171 and 188-191, the
token formatting logic is duplicated in both fill and outline spans. Extract
this logic into a separate helper function or variable that returns the
formatted token string based on the token value and amount. Then replace both
occurrences with calls to this helper to reduce code duplication and improve
maintainability.
Zishan-7
requested review from
Hugo0 and
kushagrasarathe
and removed request for
kushagrasarathe
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
public/robots.txt (2)
6-8: Comment label contradicts the rule – clarify intent.The inline comment says “Allow all crawlers for now”, yet the rule that follows blocks
/api/for every crawler exceptTwitterbot. Either rename the comment to reflect the restriction or drop theDisallow: /api/line if full access really is intended.
2-4: Wildcard pattern may be ignored by some bots.
Allow: /api/og*relies on the*wildcard, which is not part of the original Robots Exclusion standard and isn’t respected uniformly across crawlers (Twitterbot support is undocumented). Consider switching to a more widely-supported prefix match:-Allow: /api/og* +Allow: /api/ogThe shorter prefix still whitelists every URL that starts with
/api/ogwhile avoiding undefined behaviour in parsers that ignore*.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
public/robots.txt(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
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.
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1000
File: src/components/og/ProfileCardOG.tsx:0-0
Timestamp: 2025-07-24T10:57:15.245Z
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.
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#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.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:113-123
Timestamp: 2024-10-07T13:42:07.299Z
Learning: In the `PayRequestLink` component (`src/components/Request/Pay/Pay.tsx`), when resolving ENS names, handle errors by displaying an appropriate error message to the user if the ENS cannot be resolved.
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.
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: 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.
⏰ 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
… Social Previews
jjramirezn
requested changes
Jul 31, 2025
There was a problem hiding this comment.
suggestion: this logic is already in api/og, merge them
resolveAddressToENS is basically the same logic as this. I suggest to remove it from api/og and just use this one
jjramirezn
approved these changes
Jul 31, 2025
This was referenced Aug 5, 2025
Hugo0
added a commit
that referenced
this pull request
Aug 6, 2025
* feat: abstract squid route fetching Stop using the skd and use the squid API directly, this give us more control and access to all the data that returns squid (for example, we now have access to the fees and don't have to recalculate them ourselves) * refactor: use parseunits Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * refactor: remove console.dir * feat: handle very large numbers with careful scaling * refactor: use const for squid api url * feat: add cross-chain action card Use coral through squid to get the cross-chain route for the different flows. This enables xchain withdraw for peanut wallet * refactor: use decimals from token price instead of hardcoded * style: Apply prettier formatting * feat: show min received for cross-chain payments * chore: clean unused variables * fix: tests ach_pull to ach * fix: pr comments * fix: withdrawData and pulsate animation * fix: cursor placement in token amount input * fix: delete unused code * fix: add camera perm modal * fix: enable mexico bank offramp * refactor: better comments for direct usd payments * feat: add qr scanning for xchain * fix: remove malicious code * fix: handle mxn in offramp destination details (#945) * fix: show share receipt option in direct send status view (#946) * [TASK-12678] fix: coral withdraw fixes (#949) * fix: coral withdraw fixes - Stop refreshing the page after successful payment - Better error message for unsupported token pairs * chore: add squid env vars * refactor: better copy for non rfq routes from peanut wallet Also send warning to sentry * fix: show amount in USD for withdrawals to other tokens to other tokens * fix: lock orientation to portrait mode (#947) * fix: lock orienatation to protrait mode * style(fix): add new line * style: format * fix: if condition * fix: update payment form for crosschain add money (#954) * [TASK-12682] fix: show token selector for guest flow (#955) * fix: show token selector for guest flow * docs: add comment to explain url request flow * implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953) * refactor: fetch external wallet balances from mobula (#956) (#958) * [TASK-12645] copy button for individual fields (#960) * copy button for individual fields * changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value * fix: gas estimation for external wallets (#961) We were re-rendering unnecesarily the prepare transaction, also now we catch error if any * [TASK-12603] reset send flow state when navigating to/from payment link creation (#964) * reset send flow state when navigating to/from payment link creation * linting (formatting) * [TASK-12312] ENS/eth address network error being displayed on the frontend (#963) * ENS/eth address network error being displayed on the frontend * linting * fix: centre align views on mobile (#950) * [TASK-12542] added formatIban function for correct display (#952) * added formatIban function for correct display * coderabbit suggestion Signed-off-by: facundobozzi <[email protected]> * updated formatting * added iban formatting in all pages --------- Signed-off-by: facundobozzi <[email protected]> * [TASK-12672] feat: show sponsored by peanut message (#959) * feat: show sponsored by peanut message This message is shown when we are making a transaction from the peanut wallet. If the amount is more than one cent we also show the fee that the user is saving by using peanut. * fix(fees): show correct ammounts for externalwallet * refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd * fix: correct approval owner and base rpc (#965) Two things here: 1. We were using the peanut address for approval checking on deposits, this didn't affect because if the approval call failed we just continued with the deposit 2: The base rpc url was the sepolia one, not the mainnet. Big oversight there * feat: add alachemy as fallback rpc url (#948) * feat: add alachemy as fallback rpc url * fix: remove commented line * fix: address pr review comments * [TASK-12866] fix: small fixes around crosschain ui (#966) * fix: small fixes around crosschain ui * fix: avoid negative expiry time * removed white spaces before processing to BIC (#951) * feat: resuable slider component (#968) * fix: update desktop navigation with add/withdraw paths (#969) * [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943) * PATCH implemented in frontend * comment input state updating correctly (onBlur) * freezing amount after updating comments/files input * debounce attachment options and update requests on file change (avoiding race conditions when attaching files!) * style: Apply prettier formatting * removed malicious code Signed-off-by: facundobozzi <[email protected]> * PATCH method using withFormData * better onBlur logic * bug fixes * blur logic fixed * nit pick comments * code rabbit suggestion * replaced useEffect setting state with derived state and debouncing * disabling amount input after request creation * linting --------- Signed-off-by: facundobozzi <[email protected]> * fix: support page staging (#972) * fix: update desktop navigation with add/withdraw paths * fix: support page * fix: ui comments (#973) * Support and beta changes to staging (#978) * refactor: fetch external wallet balances from mobula (#956) * fix: update desktop navigation (#970) * fix: support page prod (#971) * fix: update desktop navigation * fix: support page * [TASK-12746] feat: beta changes (#975) * feat: beta changes - Banner that redirects to support page - Funds warning modal * refactor(banner): remove from landing and add hand thumbs up --------- Co-authored-by: Kushagra Sarathe <[email protected]> * [TASK-12312] Bugfix/ens error withdrawing (#976) * ENS/eth address network error being displayed on the frontend * linting * fixed andre QA observations * deleting console.log * formatting * logic fixed * fixed testst --------- Signed-off-by: facundobozzi <[email protected]> * fix: coral small issues (#979) * chore: enable usdt in mainnet (#980) * fix: slider tap bug logic (#983) * fix: slider tap bug logic * fix: tap bug on slider * fix: some issues and comments (#984) * [TASK-12771] Feat/new landing page (#974) * removed legacy button and changed try now button colors * try now button color and hero description * YourMoney component * NoFees component first part * stars done * scribble in zero fees * no hidden fees section done * securityBuiltIn done * sendInSeconds progress * sendInSeconds done * updated try now button to be a link * business integration initiation * businessIntegrate done * order and marquee reusability * order fixed * background animations in Landing Page compoejnnts * changed image for text in hero section * figma details * landing page responsiveness improvements * landing page responsiveness done * coderabbit suggestion * business integration button * fixed iphone screenshots * CTA button animation * added debugging for CTA button animation * changed animation since react gave errors * arrows in hero section * NoFees new Zero * no fees responsiveness fixed * sendInSeconds details done * coderabbit suggestions * formatting * hand-token wasnt pushed? forgot to stage or sum? anyways fixed * build issues fixed * coderabbit optimization * code formatting * arrows and ZERO thickness * shade in try now button * progress in button animation * undoing button changes * small detail fixes * added asset * changed peanut business to svg * integrate peanut component done * added pay-zero-fees.svg * added new illustrations * uout money anywhere svg * securitybuiltin component SVGs * adding YourMoney new SVGs * your money anywhere component * instantly send & receive svg * arrows fixed * button and arrows done * desktop sendinseconds button done * removed arrows disappearing effect * MOBILE: hero button done * added mobile svg * yourMoney responsive component done * added mobile-zero-fees.svg * added no-hidden-fees.svg * noFees mobile svg * noFees desktop + mobile improvements * noFees done * mobile security built in SVG * securityprivacy mobile done * mobile-send-in-seconds.svg * sendInSeconds mobile done * business integrate mobile * business integrate button and final details * removed footer * formatting * removed pino-pretty * fixed button instead of sticky/floating --------- Signed-off-by: facundobozzi <[email protected]> * [TASK-13136] feat: allow uppercase in url (#986) * feat: allow uppercase in url * fix: allow uppercase in recipient * fix: inform create request type when creating from UI (#987) * fix: balance warning modal (#988) - Slider instead of button - Expiry for local storage instead of session storage - Warning icon color * chore: remove unused file (#990) * feat: send links guest flow ( exchange/crypto) (#982) * feat: update add/withdraw flow to use new slider component * feat: guest receive to exchange/crypto flows * fix: coderabbit comments * fix: slider usage * Chore/prod to staging (#994) * refactor: fetch external wallet balances from mobula (#956) * fix: update desktop navigation (#970) * fix: support page prod (#971) * fix: update desktop navigation * fix: support page * [TASK-12746] feat: beta changes (#975) * feat: beta changes - Banner that redirects to support page - Funds warning modal * refactor(banner): remove from landing and add hand thumbs up * [TASK-13082] Sprint 100 prod release (#992) * feat: abstract squid route fetching Stop using the skd and use the squid API directly, this give us more control and access to all the data that returns squid (for example, we now have access to the fees and don't have to recalculate them ourselves) * refactor: use parseunits Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * refactor: remove console.dir * feat: handle very large numbers with careful scaling * refactor: use const for squid api url * feat: add cross-chain action card Use coral through squid to get the cross-chain route for the different flows. This enables xchain withdraw for peanut wallet * refactor: use decimals from token price instead of hardcoded * style: Apply prettier formatting * feat: show min received for cross-chain payments * chore: clean unused variables * fix: tests ach_pull to ach * fix: pr comments * fix: withdrawData and pulsate animation * fix: cursor placement in token amount input * fix: delete unused code * fix: add camera perm modal * fix: enable mexico bank offramp * refactor: better comments for direct usd payments * feat: add qr scanning for xchain * fix: remove malicious code * fix: handle mxn in offramp destination details (#945) * fix: show share receipt option in direct send status view (#946) * [TASK-12678] fix: coral withdraw fixes (#949) * fix: coral withdraw fixes - Stop refreshing the page after successful payment - Better error message for unsupported token pairs * chore: add squid env vars * refactor: better copy for non rfq routes from peanut wallet Also send warning to sentry * fix: show amount in USD for withdrawals to other tokens to other tokens * fix: lock orientation to portrait mode (#947) * fix: lock orienatation to protrait mode * style(fix): add new line * style: format * fix: if condition * fix: update payment form for crosschain add money (#954) * [TASK-12682] fix: show token selector for guest flow (#955) * fix: show token selector for guest flow * docs: add comment to explain url request flow * implemented Context instead of sessionStorage in onrampData to avoid discrepancies with the Offramp logic (#953) * refactor: fetch external wallet balances from mobula (#956) (#958) * [TASK-12645] copy button for individual fields (#960) * copy button for individual fields * changed getOnrampCurrencyConfig (deprecated)to getCurrencyConfig + user now copies raw IBAN value * fix: gas estimation for external wallets (#961) We were re-rendering unnecesarily the prepare transaction, also now we catch error if any * [TASK-12603] reset send flow state when navigating to/from payment link creation (#964) * reset send flow state when navigating to/from payment link creation * linting (formatting) * [TASK-12312] ENS/eth address network error being displayed on the frontend (#963) * ENS/eth address network error being displayed on the frontend * linting * fix: centre align views on mobile (#950) * [TASK-12542] added formatIban function for correct display (#952) * added formatIban function for correct display * coderabbit suggestion Signed-off-by: facundobozzi <[email protected]> * updated formatting * added iban formatting in all pages --------- Signed-off-by: facundobozzi <[email protected]> * [TASK-12672] feat: show sponsored by peanut message (#959) * feat: show sponsored by peanut message This message is shown when we are making a transaction from the peanut wallet. If the amount is more than one cent we also show the fee that the user is saving by using peanut. * fix(fees): show correct ammounts for externalwallet * refactor: rename estimatedGasCostUsd to estimatedGasCostUsdUsd * fix: correct approval owner and base rpc (#965) Two things here: 1. We were using the peanut address for approval checking on deposits, this didn't affect because if the approval call failed we just continued with the deposit 2: The base rpc url was the sepolia one, not the mainnet. Big oversight there * feat: add alachemy as fallback rpc url (#948) * feat: add alachemy as fallback rpc url * fix: remove commented line * fix: address pr review comments * [TASK-12866] fix: small fixes around crosschain ui (#966) * fix: small fixes around crosschain ui * fix: avoid negative expiry time * removed white spaces before processing to BIC (#951) * feat: resuable slider component (#968) * fix: update desktop navigation with add/withdraw paths (#969) * [TASK-11884] request via link with comment and attachment is creating 2 txs in the history (#943) * PATCH implemented in frontend * comment input state updating correctly (onBlur) * freezing amount after updating comments/files input * debounce attachment options and update requests on file change (avoiding race conditions when attaching files!) * style: Apply prettier formatting * removed malicious code Signed-off-by: facundobozzi <[email protected]> * PATCH method using withFormData * better onBlur logic * bug fixes * blur logic fixed * nit pick comments * code rabbit suggestion * replaced useEffect setting state with derived state and debouncing * disabling amount input after request creation * linting --------- Signed-off-by: facundobozzi <[email protected]> * fix: support page staging (#972) * fix: update desktop navigation with add/withdraw paths * fix: support page * fix: ui comments (#973) * Support and beta changes to staging (#978) * refactor: fetch external wallet balances from mobula (#956) * fix: update desktop navigation (#970) * fix: support page prod (#971) * fix: update desktop navigation * fix: support page * [TASK-12746] feat: beta changes (#975) * feat: beta changes - Banner that redirects to support page - Funds warning modal * refactor(banner): remove from landing and add hand thumbs up --------- Co-authored-by: Kushagra Sarathe <[email protected]> * [TASK-12312] Bugfix/ens error withdrawing (#976) * ENS/eth address network error being displayed on the frontend * linting * fixed andre QA observations * deleting console.log * formatting * logic fixed * fixed testst --------- Signed-off-by: facundobozzi <[email protected]> * fix: coral small issues (#979) * chore: enable usdt in mainnet (#980) * fix: slider tap bug logic (#983) * fix: slider tap bug logic * fix: tap bug on slider * fix: some issues and comments (#984) * [TASK-12771] Feat/new landing page (#974) * removed legacy button and changed try now button colors * try now button color and hero description * YourMoney component * NoFees component first part * stars done * scribble in zero fees * no hidden fees section done * securityBuiltIn done * sendInSeconds progress * sendInSeconds done * updated try now button to be a link * business integration initiation * businessIntegrate done * order and marquee reusability * order fixed * background animations in Landing Page compoejnnts * changed image for text in hero section * figma details * landing page responsiveness improvements * landing page responsiveness done * coderabbit suggestion * business integration button * fixed iphone screenshots * CTA button animation * added debugging for CTA button animation * changed animation since react gave errors * arrows in hero section * NoFees new Zero * no fees responsiveness fixed * sendInSeconds details done * coderabbit suggestions * formatting * hand-token wasnt pushed? forgot to stage or sum? anyways fixed * build issues fixed * coderabbit optimization * code formatting * arrows and ZERO thickness * shade in try now button * progress in button animation * undoing button changes * small detail fixes * added asset * changed peanut business to svg * integrate peanut component done * added pay-zero-fees.svg * added new illustrations * uout money anywhere svg * securitybuiltin component SVGs * adding YourMoney new SVGs * your money anywhere component * instantly send & receive svg * arrows fixed * button and arrows done * desktop sendinseconds button done * removed arrows disappearing effect * MOBILE: hero button done * added mobile svg * yourMoney responsive component done * added mobile-zero-fees.svg * added no-hidden-fees.svg * noFees mobile svg * noFees desktop + mobile improvements * noFees done * mobile security built in SVG * securityprivacy mobile done * mobile-send-in-seconds.svg * sendInSeconds mobile done * business integrate mobile * business integrate button and final details * removed footer * formatting * removed pino-pretty * fixed button instead of sticky/floating --------- Signed-off-by: facundobozzi <[email protected]> * [TASK-13136] feat: allow uppercase in url (#986) * feat: allow uppercase in url * fix: allow uppercase in recipient * fix: inform create request type when creating from UI (#987) * fix: balance warning modal (#988) - Slider instead of button - Expiry for local storage instead of session storage - Warning icon color * chore: remove unused file (#990) * chore: re-add removed code for gas estimation --------- Signed-off-by: facundobozzi <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: kushagrasarathe <[email protected]> Co-authored-by: facundobozzi <[email protected]> --------- Signed-off-by: facundobozzi <[email protected]> Co-authored-by: Kushagra Sarathe <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: facundobozzi <[email protected]> * refactor(payments): add payerAddress to payment creation (#1002) * feat: claim a send link to bank flow (#995) * feat: update add/withdraw flow to use new slider component * feat: guest receive to exchange/crypto flows * fix: coderabbit comments * fix: slider usage * feat: new server actions for guest flow * feat: update card and success view component for bank claims * feat: claim to bank flow components * fix: coderbbit comments * fix: import * feat: handle bank link claims for when sender is non-kyced (#996) * feat: handle bank link claims for when sender is non-kyced * fix: kyc status check for sender * fix: codderabbit comments * fix: update route payloads based on be changes * fix: merge conflict * feat: ui updates to bank flow * fix: rename comp name * fix: wrap fn in callback * feat: min ammount modal for send link claims * [TASK-12649] fix: allow user to change their email address if they have not completed kyc (#999) * fix: allow user to change their email address if they have not completed kyc * fix: account incorrect field * Feat: Landing page changes (#1006) * fix: links v2 send flow qa fixes (#1008) * fix: add reuseOnError key for guest external accounts creation * fix: success view for guest claim to bank account flow * fix: infinite loop of post signup flow using claim link * fix: back btn navigation * fix: show confirm view for xchain claims * fix: links v2 qa bug fixes (#1014) * feat: add slider in withdraw crypto flow * fix: cross chain claiming * fix: claim modal on homepage * fix: coral issue on staging (#1018) * fix: coral issue on staging * fix: squid api url const * Make txn history private (#1017) * chore: update mobula endpoint (#1020) * chore: update mobula endpoint * Update tokens.ts Signed-off-by: Hugo Montenegro <[email protected]> --------- Signed-off-by: Hugo Montenegro <[email protected]> Co-authored-by: Hugo Montenegro <[email protected]> * fix: minor bugs before prod-release (#1025) * fix: add money ui issue for same chain external wallet txn * fix: amount in withdraw to crypto sucess view * fix: reset states on flows (#1026) * fix: add money ui issue for same chain external wallet txn * fix: amount in withdraw to crypto sucess view * fix; reset states * merge: peanut-wallet in peanut-wallet-dev * fix: remove dupe title * merge: peanut-wallet in peanut-wallet-dev (#1032) * merge: peanut-wallet in peanut-wallet-dev * fix: remove dupe title * Fix KYC issues (#1029) * fix: TOS acceptance taking too much time * remove log * Fix: add money button position (#1031) * fix: Wrong flag shown in add monet flow for some countries (#1027) * fix(kernel-client): catch kernel client errors (#1036) * fix: more and more bugssssss (#1030) * fix: guest flow navigation and ofac * fix: withdraw flow navigation * fix: always show usd value in reciept and success views * fix: show $ in txn drawer * fix: mark prop as optional * fix: update text (#1035) * feat: guest claimed link history ui (#1007) * feat: guest claimed link history ui * fix: pr review comments * fix: format transfer id * Fix: Add crypto showing incorrect view on refresh (#1028) * fix: refreshing the page in the last screen when adding money shows the money was successfully added when it wasn’t * fix: payment not working on refresh * fix: charge state bug * feat: add subtext (#1019) * fix: refetch wallet balance (#1040) * chore: remove dead code * fix: refetch wallet balance wen direct req is paid * fix: activity issues (#1034) * fix: campaign icon (#1037) * Fix: Cancel button not showing for send and request link creator (#1039) * Fix: Cancel button not showing for send and request link creator * Add Cancel link warning modal * remove unused import * Fix: loading states * nit: use `currentColor` * Fix : buttons loading state * copy changes for hotfix from prod (#1042) * fix btn position (#1043) * Fix: KYC modal close button not working in withdraw flow (#1044) * fix: KYC modal close btn not working in withdraw flow * remove logs * Fix kyc close navigation flow (#1046) * Fix/withdraw amt issue (#1045) * fix: withdraw amount state issue * fix: amount in PeanutActionDetailsCard * fix: withdraw usd value * fix(semantic-send): fix history for payments (#1048) Treat as a direct send if there is no request id * fix: bic fetching (#1050) * fix: kyc issues (yes, again, and it works this time) (#1052) * fix: kyc iframe closing on verfication done * fix: tos closing issue * typo hotfix * revert hotfix * Feat/social preview copies (#1000) * claim copies done * DRY pattern for ENS getter function * fixed copy for claim link * request OG copy and image * logic for receipts in request links * receipt social preview UI + copy fixes * format * coderabbit suggestions * Update copy * fetch correct username from `chargeDetails` * fix: preview links not working on X * fix: build issues * Add social preview for profile links * remove social preview white borders * Add comment for profile link handling and refine OG image generation conditions * Add robots.txt for twitter card preview * update `robots.txt` * delete `robots.txt` and update `robots.ts` rules for twitterbot * refactor `printableAddress` function to print even shorter address on Social Previews * remove `resolveAddressToENS` and use `resolveAddressToUsername` --------- Co-authored-by: Zishan Mohd <[email protected]> * feat: remove totals from public profile (#1049) * fix: typo (#1059) * chore: hide referral campaign (#1062) * [TASK-13143] fix(cross-chain): improve route estimation (#1047) * fix(cross-chain): improve route estimation - Use linear interpolation to set realistic bounds * refactor: get route from our own service * fix: typo * fix: merge conflict --------- Signed-off-by: Juan José Ramírez <[email protected]> * fix: consecutive withdraw bug issue (#1056) * Fix social preview bugs (#1064) * fix bugs * update comment * fix: balance warning modal width * refactor(request-link): dont disable amount when not generating link * Fix: request with comment generating multiple activity entries (#1066) * fix: updating comment creating multiple requests * Add missing dependencies and remove eslint disable comment * fix: new link getting created on clearing comment input * refactor: remove console.logs --------- Signed-off-by: facundobozzi <[email protected]> Signed-off-by: Hugo Montenegro <[email protected]> Signed-off-by: Juan José Ramírez <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: kushagrasarathe <[email protected]> Co-authored-by: facundobozzi <[email protected]> Co-authored-by: Mohd Zishan <[email protected]> Co-authored-by: Hugo Montenegro <[email protected]> Co-authored-by: Hugo Montenegro <[email protected]> Co-authored-by: Zishan Mohd <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Please read this
Contributes to TASK-13068 and TASK-12605
Changes -
NOTE - previews are still not working on X I will create a separate PR to fix that
Screenshots -