[Docs] Portal Images #7526
[Docs] Portal Images #7526
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes update image-related properties across several files. The icon size and positioning are modified in an image generation route, while the metadata for two documentation pages is updated to use a different icon and image title. No changes are made to public APIs or exported function signatures. Changes
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (15)
📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (1)`**/*.{ts,tsx}`: Write idiomatic TypeScript with explicit function declarations ...
📄 Source: CodeRabbit Inference Engine (CLAUDE.md) List of files the instruction was applied to:
🧠 Learnings (4)📓 Common learningsapps/portal/src/app/pay/supported-chains/page.mdx (1)apps/portal/src/app/pay/page.mdx (1)apps/portal/src/app/api/og/route.tsx (4)⏰ Context from checks skipped due to timeout of 90000ms (2)
🔇 Additional comments (4)
✨ 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 (
|
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. |
github-actions
bot
added
the
Portal
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7526 +/- ##
=======================================
Coverage 51.96% 51.96%
=======================================
Files 952 952
Lines 64224 64220 -4
Branches 4237 4237
=======================================
- Hits 33377 33375 -2
+ Misses 30740 30738 -2
Partials 107 107
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
apps/portal/src/app/api/og/route.tsx (1)
7-7: Typo in constant name (BAST_URL) leaks into every generated asset URL
BAST_URLis most likely meant to beBASE_URL. Using the miss-spelled identifier propagates to everysrc={…}making all OG image requests 404 when the environment variable/path is correct but the variable name is not.-const BAST_URL = getBaseUrl(); +const BASE_URL = getBaseUrl(); ... -const iconUrl = `${BAST_URL}/og/icons/${icon}.svg`; +const iconUrl = `${BASE_URL}/og/icons/${icon}.svg`;(Search/replace the remaining occurrences as well.)
🧹 Nitpick comments (1)
apps/portal/src/app/api/og/route.tsx (1)
14-16: Variableinter600fetches a “700” font – naming drift
For clarity & future maintenance, rename either the file or the variable so weight and name match.-const inter600 = fetch(new URL("./inter/700.ttf", import.meta.url)).then( +const inter700 = fetch(new URL("./inter/700.ttf", import.meta.url)).then( (res) => res.arrayBuffer(), ); ... - data: await inter600, + data: await inter700,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/portal/public/og/background-1.pngis excluded by!**/*.pngapps/portal/public/og/icons/account-abstraction.svgis excluded by!**/*.svgapps/portal/public/og/icons/auth.svgis excluded by!**/*.svgapps/portal/public/og/icons/contract.svgis excluded by!**/*.svgapps/portal/public/og/icons/contracts.svgis excluded by!**/*.svgapps/portal/public/og/icons/infra.svgis excluded by!**/*.svgapps/portal/public/og/icons/insight.svgis excluded by!**/*.svgapps/portal/public/og/icons/nebula.svgis excluded by!**/*.svgapps/portal/public/og/icons/payment.svgis excluded by!**/*.svgapps/portal/public/og/icons/payments.svgis excluded by!**/*.svgapps/portal/public/og/icons/rpc.svgis excluded by!**/*.svgapps/portal/public/og/icons/storage.svgis excluded by!**/*.svgapps/portal/public/og/icons/transactions.svgis excluded by!**/*.svgapps/portal/public/og/icons/vault.svgis excluded by!**/*.svgapps/portal/public/og/icons/wallets.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
apps/portal/src/app/api/og/route.tsx(2 hunks)apps/portal/src/app/pay/page.mdx(1 hunks)apps/portal/src/app/pay/supported-chains/page.mdx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{ts,tsx}`: Write idiomatic TypeScript with explicit function declarations ...
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
📄 Source: CodeRabbit Inference Engine (CLAUDE.md)
List of files the instruction was applied to:
apps/portal/src/app/api/og/route.tsx
🧠 Learnings (3)
apps/portal/src/app/pay/page.mdx (1)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
apps/portal/src/app/pay/supported-chains/page.mdx (1)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
apps/portal/src/app/api/og/route.tsx (9)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/*.{ts,tsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/hooks/**/*.{ts,tsx} : Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions
Learnt from: MananTank
PR: thirdweb-dev/js#7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/webhook-metrics.tsx:40-40
Timestamp: 2025-07-02T20:04:53.982Z
Learning: The Spinner component imported from "@/components/ui/Spinner/Spinner" in the dashboard accepts a className prop, not a size prop. The correct usage is <Spinner className="size-4" />, not <Spinner size="sm" />. The component defaults to "size-4" if no className is provided.
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/portal/src/app/pay/page.mdx (1)
7-10: Ensurepayments.svgactually exists in/og/icons/
The icon key changed to"payments", which maps to
${BASE_URL}/og/icons/payments.svgat render time.
If the file isn’t present the OG preview will show a broken image. Please confirm the asset landed in the repo or CI-generated bucket.apps/portal/src/app/pay/supported-chains/page.mdx (1)
5-7: Same missing-asset check for new"payments"icon
Double-check thatpayments.svgis available; otherwise both this page and/paywill produce broken social previews.
| const height = 630; | ||
|
|
||
| const iconSize = 300; | ||
| const iconSize = 400; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
iconSize bumped to 400 px without re-balancing dependent layout math
Increasing only iconSize makes the element 33 % larger but the top/right offsets (below) are now hard-coded numbers unrelated to the new size, so the icon will no longer be vertically centred and may overlap content on smaller canvases. Consider deriving offsets from iconSize to keep proportions stable.
🤖 Prompt for AI Agents
In apps/portal/src/app/api/og/route.tsx at line 12, the iconSize constant was
increased to 400 but the related top and right offset values remain hard-coded
and do not scale with iconSize. To fix this, update the offset calculations to
be proportional to iconSize instead of fixed numbers, ensuring the icon stays
vertically centered and does not overlap content regardless of size changes.
| right: width / 20, | ||
| top: height / 2 - iconSize / 1.5, | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hard-coded offsets break proportional layout
right: width / 20 and top: height / 2 - iconSize / 1.5 ignore iconSize changes and magic-number the positioning.
Example fix (centres the icon and gives a margin equal to 5 % of canvas width):
- right: width / 20,
- top: height / 2 - iconSize / 1.5,
+ right: width * 0.05,
+ top: (height - iconSize) / 2,This keeps the asset fully visible whatever size you set.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| right: width / 20, | |
| top: height / 2 - iconSize / 1.5, | |
| }} | |
| right: width * 0.05, | |
| top: (height - iconSize) / 2, | |
| }} |
🤖 Prompt for AI Agents
In apps/portal/src/app/api/og/route.tsx around lines 139 to 141, the style uses
hard-coded offsets for right and top properties that do not scale proportionally
with iconSize, causing layout issues. Replace these fixed calculations with
expressions that center the icon and apply a margin relative to the canvas
width, such as setting right to 5% of width and top to vertically center the
icon based on iconSize, ensuring the icon remains fully visible and properly
positioned regardless of size changes.
size-limit report 📦
|
CORE-0000
PR-Codex overview
This PR focuses on updating the
PaymentsandSupported Chainssections in the documentation, modifying icons and their sizes, and enhancing SVG graphics for various icons. It also removes unused images, improving overall asset management.Detailed summary
background-1.png,auth.svg,infra.svg,nebula.svg,payment.svg,storage.svg,contract.svg.iconinpage.mdxfromthirdwebtopayments.titleinpage.mdxto "thirdweb Payments Docs: Web3 Payments, On-ramping, bridging & swapping".supported-chains/page.mdx:titleto "Supported Chains".icontopayments.iconSizefrom300to400inroute.tsx.route.tsx.insight.svgwith a new design.rpc.svg,contracts.svg, andvault.svg, enhancing visual representation.Summary by CodeRabbit
Style
Documentation