[SDK] Handle non-URLs for metadata images in payment widgets #7413
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: d0ce77d The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThe changes update payment widget metadata handling, including improved support for non-URL images and refactored image URL resolution. Input field labels in the UI are adjusted for clarity. Default values and theme-aware placeholder images are introduced for checkout widgets, with logic refactored into new helper functions where appropriate. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LeftSection
participant RightSection
participant CheckoutWidget
User->>LeftSection: Edit metadata fields (Name, Description, Image)
LeftSection->>RightSection: Pass payOptions (name, description, image)
RightSection->>CheckoutWidget: Render with props (name, description, image)
RightSection->>CheckoutWidget: If missing, use theme-aware defaults
CheckoutWidget->>User: Display payment widget with resolved metadata
Suggested labels
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (5)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 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 (
|
github-actions
bot
added
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
joaquim-verges
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/playground-web/src/app/connect/pay/embed/RightSection.tsx (1)
182-186: Consider alternatives to external placeholder service.While the theme-aware default images are a good UX improvement, relying on an external service (placehold.co) introduces potential reliability and privacy concerns.
Consider these alternatives:
- Use local placeholder images bundled with the app
- Generate placeholder images using CSS/Canvas
- Use a more reliable CDN service
If you must use external placeholders, consider extracting the URLs to constants for better maintainability:
+const PLACEHOLDER_URLS = { + dark: "https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto", + light: "https://placehold.co/600x400/f2eff3/6f6d78?text=Your%20Product%20Here&font=roboto" +} as const; + function getDefaultImage(theme: "dark" | "light") { - return theme === "dark" - ? "https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto" - : "https://placehold.co/600x400/f2eff3/6f6d78?text=Your%20Product%20Here&font=roboto"; + return PLACEHOLDER_URLS[theme]; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.changeset/fluffy-cows-swim.md(1 hunks)apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx(2 hunks)apps/playground-web/src/app/connect/pay/embed/RightSection.tsx(2 hunks)apps/playground-web/src/components/pay/direct-payment.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
.changeset/fluffy-cows-swim.md (1)
1-6: Changeset documentation looks good.The changeset correctly documents the patch for handling non-URLs in metadata images for payment widgets.
apps/playground-web/src/components/pay/direct-payment.tsx (1)
14-14: Good addition of explicit image prop.Adding the explicit
imageprop makes the CheckoutWidget usage more clear and aligns with the improved metadata handling across the codebase.apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx (2)
280-280: Improved label clarity.Changing "Title" to "Name" provides better semantic clarity for the product name field.
321-321: Fixed incorrect field labeling.Correcting the label from "Image" to "Description" for the description input field fixes what appears to be a mislabeling issue and improves user experience.
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (2)
30-33: Good refactoring of URL resolution logic.Extracting the URL resolution into the
getUrlhelper function improves code readability and reusability.
67-75: Well-implemented helper function.The
getUrlfunction properly handles IPFS URI resolution and provides a clean abstraction for URL processing.apps/playground-web/src/app/connect/pay/embed/RightSection.tsx (1)
74-76: Improved flexibility with individual props and defaults.The refactoring from a single
purchaseDataobject to individual props with fallback defaults provides better flexibility and ensures graceful handling of missing metadata.
size-limit report 📦
|
Codecov ReportAttention: Patch coverage is
❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #7413 +/- ##
==========================================
- Coverage 52.08% 52.08% -0.01%
==========================================
Files 947 947
Lines 63623 63636 +13
Branches 4215 4222 +7
==========================================
+ Hits 33140 33146 +6
- Misses 30377 30384 +7
Partials 106 106
🚀 New features to boost your workflow:
|
joaquim-verges
force-pushed
the
Handle_non-URLs_for_metadata_images_in_payment_widgets
branch
from
66fd195 to
6776d08
Compare
joaquim-verges
force-pushed
the
Handle_non-URLs_for_metadata_images_in_payment_widgets
branch
from
6776d08 to
d0ce77d
Compare
joaquim-verges
deleted the
Handle_non-URLs_for_metadata_images_in_payment_widgets
branch
PR-Codex overview
This PR focuses on enhancing the handling of metadata for payment widgets, including improvements to image URL resolution and modifications to widget properties for better user experience.
Detailed summary
WithHeaderto usegetUrlfor image URL resolution.descriptionandimageproperties toBuyWidget.LeftSectionandRightSectionto reflect changes in labels and added properties for description and image.getDefaultImagefunction for fallback images.Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Style