[Portal] Move x402 from payments to top-level section #8386
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
|
github-actions
bot
added
the
Portal
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. |
WalkthroughRehomes x402 docs and routes from /payments/x402/* to /x402/*: adds redirects, exposes x402 in header and learning resources, removes x402 from Payments sidebar, adds a dedicated x402 sidebar and layout, and updates multiple MDX pages and internal links to use the new /x402 and /bridge paths. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant NextRouter as Next.js Router / Server
participant DocApp as Docs App (/x402)
note over Browser,NextRouter `#D3E5FF`: Request to legacy route
Browser->>NextRouter: GET /payments/x402 or /payments/x402/<path>
alt redirect rule matches
NextRouter-->>Browser: 307 Redirect -> /x402 or /x402/<path>
Browser->>DocApp: GET /x402 or /x402/<path>
DocApp-->>Browser: 200 OK (x402 page)
else no match
NextRouter-->>Browser: 404 / other handling
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
⛔ Files ignored due to path filters (1)
📒 Files selected for processing (21)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (2)
🚧 Files skipped from review as they are similar to previous changes (7)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧠 Learnings (28)📓 Common learnings📚 Learning: 2025-05-27T19:55:25.056ZApplied to files:
📚 Learning: 2025-08-27T22:11:41.748ZApplied to files:
📚 Learning: 2025-08-20T10:35:18.543ZApplied to files:
📚 Learning: 2025-08-20T10:35:18.543ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-08-07T20:43:21.864ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-07T21:21:47.488ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-08-20T10:37:10.123ZApplied to files:
📚 Learning: 2025-07-18T19:20:32.530ZApplied to files:
📚 Learning: 2025-10-03T23:36:00.631ZApplied to files:
🧬 Code graph analysis (1)apps/portal/src/app/x402/sidebar.tsx (4)
🪛 LanguageToolapps/portal/src/app/x402/page.mdx[grammar] ~53-~53: Use a hyphen to join words. (QB_NEW_EN_HYPHEN) [grammar] ~53-~53: Use a hyphen to join words. (QB_NEW_EN_HYPHEN) [grammar] ~99-~99: Use a hyphen to join words. (QB_NEW_EN_HYPHEN) [grammar] ~99-~99: Ensure spelling is correct (QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1) ⏰ 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). (6)
🔇 Additional comments (15)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8386 +/- ##
=======================================
Coverage 54.64% 54.64%
=======================================
Files 919 919
Lines 60704 60704
Branches 4112 4112
=======================================
Hits 33171 33171
+ Misses 27432 27431 -1
- Partials 101 102 +1
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![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
🧹 Nitpick comments (1)
apps/portal/src/app/x402/page.mdx (1)
4-11: Consider updating metadata to reflect top-level documentation structure.The metadata still references "x402 Payments" and uses the "payments" icon, but this page is now a top-level x402 section rather than a payments subsection. While not a blocker (the content is appropriate), consider updating the icon or description to align with the new structural hierarchy.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
apps/portal/src/app/x402/server/x402-protocol-flow.pngis excluded by!**/*.png
📒 Files selected for processing (10)
apps/portal/redirects.mjs(1 hunks)apps/portal/src/app/Header.tsx(1 hunks)apps/portal/src/app/page.tsx(1 hunks)apps/portal/src/app/payments/sidebar.tsx(0 hunks)apps/portal/src/app/x402/client/page.mdx(1 hunks)apps/portal/src/app/x402/facilitator/page.mdx(1 hunks)apps/portal/src/app/x402/layout.tsx(1 hunks)apps/portal/src/app/x402/page.mdx(5 hunks)apps/portal/src/app/x402/server/page.mdx(1 hunks)apps/portal/src/app/x402/sidebar.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- apps/portal/src/app/payments/sidebar.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{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
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/portal/src/app/Header.tsxapps/portal/src/app/page.tsxapps/portal/src/app/x402/sidebar.tsxapps/portal/src/app/x402/layout.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/portal/src/app/Header.tsxapps/portal/src/app/page.tsxapps/portal/src/app/x402/sidebar.tsxapps/portal/src/app/x402/layout.tsx
🧠 Learnings (21)
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/portal/src/app/x402/client/page.mdxapps/portal/src/app/page.tsxapps/portal/redirects.mjsapps/portal/src/app/x402/layout.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/portal/src/app/Header.tsxapps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Use `NavLink` for internal navigation to get active state handling
Applied to files:
apps/portal/src/app/Header.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
Applied to files:
apps/portal/src/app/Header.tsx
📚 Learning: 2025-08-07T20:43:21.864Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7812
File: apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx:48-60
Timestamp: 2025-08-07T20:43:21.864Z
Learning: In the TokenBanner component at apps/dashboard/src/app/(app)/(dashboard)/published-contract/components/token-banner.tsx, the Link components use target="_blank" with internal application routes (starting with "/") to open pages in new tabs within the same application. These internal links do not require rel="noopener noreferrer" security attributes, which are only needed for external URLs.
Applied to files:
apps/portal/src/app/Header.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/portal/src/app/page.tsxapps/portal/redirects.mjsapps/portal/src/app/x402/layout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
Applied to files:
apps/portal/src/app/x402/sidebar.tsxapps/portal/src/app/x402/layout.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Server Components (Node edge): Start files with `import "server-only";`
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/feature/components/**/index.ts : Expose a barrel `index.ts` when necessary for feature components
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/**/index.ts : Group related components in their own folder and expose a single barrel `index.ts` where necessary.
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
Applied to files:
apps/portal/src/app/x402/sidebar.tsxapps/portal/src/app/x402/layout.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/portal/src/app/x402/sidebar.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Applied to files:
apps/portal/src/app/x402/facilitator/page.mdxapps/portal/src/app/x402/page.mdx
📚 Learning: 2025-06-03T23:44:40.243Z
Learnt from: joaquim-verges
Repo: thirdweb-dev/js PR: 7268
File: packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts:210-216
Timestamp: 2025-06-03T23:44:40.243Z
Learning: EIP7702 wallets do not need special handling for switching chains, unlike EIP4337 wallets which require reconnection when switching chains. In the switchChain method condition, EIP7702 should be intentionally excluded from the reconnection logic.
Applied to files:
apps/portal/src/app/x402/facilitator/page.mdx
📚 Learning: 2025-08-29T23:44:47.512Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.512Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.
Applied to files:
apps/portal/src/app/x402/layout.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Surface breaking changes prominently in PR descriptions
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49
Timestamp: 2025-05-27T19:55:25.056Z
Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.
Applied to files:
apps/portal/src/app/x402/server/page.mdx
🧬 Code graph analysis (2)
apps/portal/src/app/x402/sidebar.tsx (2)
apps/portal/src/app/payments/sidebar.tsx (1)
sidebar(8-116)apps/portal/src/icons/index.ts (6)
ExternalLinkIcon(4-4)EngineIcon(11-11)TypeScriptIcon(22-22)ReactIcon(21-21)UnityIcon(23-23)UnrealEngineIcon(24-24)
apps/portal/src/app/x402/layout.tsx (2)
apps/portal/src/components/Layouts/DocLayout.tsx (1)
DocLayout(25-76)apps/portal/src/app/x402/sidebar.tsx (1)
sidebar(8-77)
🪛 LanguageTool
apps/portal/src/app/x402/page.mdx
[grammar] ~53-~53: Use a hyphen to join words.
Context: ...o use the thirdweb API to fetch any x402 compatible endpoint and pay for it with ...
(QB_NEW_EN_HYPHEN)
[grammar] ~53-~53: Use a hyphen to join words.
Context: ...he authenticated wallet. See the client side docs for more detail...
(QB_NEW_EN_HYPHEN)
[grammar] ~99-~99: Use a hyphen to join words.
Context: ... for multiple endpoints, see the server side docs for more detail...
(QB_NEW_EN_HYPHEN)
[grammar] ~99-~99: Ensure spelling is correct
Context: ...cilitator) handles settling the payment onchain using your own server wallet. ## Going...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
⏰ 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). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/portal/src/app/x402/client/page.mdx (1)
78-78: LGTM! Improved heading clarity.The new heading "Fetch with Payment" more accurately describes the functionality and aligns better with the
wrapFetchWithPaymentfunction name used in the TypeScript examples.apps/portal/redirects.mjs (1)
745-746: LGTM! Redirects properly configured.The redirect mappings correctly handle both the base x402 path and all sub-paths, ensuring backward compatibility for existing links to
/payments/x402/*.apps/portal/src/app/page.tsx (1)
186-191: LGTM! Well-integrated navigation card.The new x402 ArticleCardIndex is properly structured with an appropriate description and icon, and is logically positioned among related payment and transaction features.
apps/portal/src/app/Header.tsx (1)
46-49: LGTM! Navigation link properly added.The new x402 navigation item is correctly structured and logically positioned between Payments and Bridge in the main navigation menu.
apps/portal/src/app/x402/facilitator/page.mdx (1)
30-35: LGTM! Improved documentation specificity.The updated chain and token support section provides more specific information with a helpful reference link. The prerequisite structure makes requirements clearer for developers.
apps/portal/src/app/x402/layout.tsx (1)
1-21: LGTM! Properly structured Next.js layout.The layout component correctly integrates the x402 sidebar with DocLayout and provides comprehensive metadata for SEO and social sharing. The async layout pattern is appropriate for Next.js 15.
apps/portal/src/app/x402/server/page.mdx (1)
424-451: Verify example token address validity.The token address
0xf01E52B0BAC3E147f6CAf956a64586865A0aA928is documented only in the file under review and does not appear elsewhere in the codebase (expected for a documentation example). The address format is valid and the 18-decimal precision with the amount1000000000000000(0.001 tokens) are mathematically consistent.However, verification of whether this is an actual token on Arbitrum remains inconclusive. Recommend manually checking Arbiscan to confirm:
- If this should reference a real existing token, or
- If it's intended as a purely illustrative placeholder example
apps/portal/src/app/x402/page.mdx (2)
25-32: Well-structured content addition for chain and token support.The new "Chain and token support" section clearly communicates the protocol's EVM chain support and token requirements (ERC-2612 or ERC-3009), providing important context for users implementing x402.
53-53: Documentation links successfully updated to new x402 paths.All internal documentation links have been consistently updated from the old
/payments/x402/*structure to the new top-level/x402/*paths:
- Client Side:
/x402/client- Server Side:
/x402/server- Facilitator:
/x402/facilitatorNavigation cards in the "Going Further" section match these updated paths. Assuming redirects are in place (as mentioned in PR summary), the migration is coherent.
Confirm that the redirect mappings in
apps/portal/redirects.mjsare correctly configured to handle any legacy links to/payments/x402/*paths.Also applies to: 99-99, 108-108, 114-114, 120-120
| # x402 Payments | ||
|
|
||
| x402 is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents. | ||
| [x402](https://x402.org) is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents. |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Fix hyphenation in compound adjectives and technical terms.
Static analysis flagged several hyphenation issues that should be corrected for consistency and proper English style:
- Line 53: "x402 compatible" → "x402-compatible"
- Line 53: "client side docs" → "client-side docs"
- Line 99: "server side docs" → "server-side docs"
- Line 99: "onchain" → "on-chain"
Apply this diff to fix the hyphenation:
-You can also use the thirdweb API to fetch any x402 compatible endpoint and pay for it with the authenticated wallet. See the [client side docs](/x402/client) for more details.
+You can also use the thirdweb API to fetch any x402-compatible endpoint and pay for it with the authenticated wallet. See the [client-side docs](/x402/client) for more details.-You can also create middlewares to handle payment for multiple endpoints, see the [server side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment onchain using your own server wallet.
+You can also create middlewares to handle payment for multiple endpoints, see the [server-side docs](/x402/server) for more details. The [facilitator](/x402/facilitator) handles settling the payment on-chain using your own server wallet.Also applies to: 25-32, 53-53, 99-99
🤖 Prompt for AI Agents
In apps/portal/src/app/x402/page.mdx (apply changes at lines 25-32, 53, and 99),
fix hyphenation in compound adjectives and technical terms: replace "x402
compatible" with "x402-compatible", "client side docs" with "client-side docs",
"server side docs" with "server-side docs", and "onchain" with "on-chain";
update each occurrence in the specified lines so the phrases use correct
hyphenation and consistent styling throughout the file.
| import { ExternalLinkIcon, ZapIcon } from "lucide-react"; | ||
| import type { SideBar } from "@/components/Layouts/DocLayout"; | ||
| import { EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; | ||
| import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; | ||
|
|
||
| const x402Slug = "/x402"; | ||
|
|
||
| export const sidebar: SideBar = { | ||
| links: [ | ||
| { | ||
| href: x402Slug, | ||
| name: "Get Started", | ||
| icon: <ZapIcon />, | ||
| }, | ||
| { | ||
| href: "https://playground.thirdweb.com/payments/x402", | ||
| icon: <ExternalLinkIcon />, | ||
| name: "Playground", | ||
| }, | ||
| { separator: true }, | ||
| { | ||
| isCollapsible: false, | ||
| links: [ | ||
| { | ||
| href: `${x402Slug}/client`, | ||
| name: "Client Side", | ||
| }, | ||
| { | ||
| href: `${x402Slug}/server`, | ||
| name: "Server Side", | ||
| }, | ||
| { | ||
| href: `${x402Slug}/agents`, | ||
| name: "Agents", | ||
| }, | ||
| { | ||
| href: `${x402Slug}/facilitator`, | ||
| name: "Facilitator", | ||
| }, | ||
| ], | ||
| name: "Guides", | ||
| }, | ||
| { separator: true }, | ||
| { | ||
| isCollapsible: false, | ||
| links: [ | ||
| { | ||
| href: `https://payments.thirdweb.com/reference`, | ||
| icon: <EngineIcon />, | ||
| name: "REST API", | ||
| }, | ||
| { | ||
| href: "/references/typescript/v5", | ||
| icon: <TypeScriptIcon />, | ||
| name: "TypeScript", | ||
| }, | ||
| { | ||
| href: "/references/typescript/v5", | ||
| icon: <ReactIcon />, | ||
| name: "React", | ||
| }, | ||
| { | ||
| href: "/unity", | ||
| icon: <UnityIcon />, | ||
| name: "Unity", | ||
| }, | ||
| { | ||
| href: "/unreal-engine", | ||
| icon: <UnrealEngineIcon />, | ||
| name: "Unreal Engine", | ||
| }, | ||
| ], | ||
| name: "API References", | ||
| }, | ||
| ], | ||
| name: "x402", | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
LGTM! Well-structured sidebar navigation.
The new x402 sidebar provides a clean, organized navigation structure with logical grouping of guides and API references. The use of the x402Slug constant promotes maintainability.
Note the UnrealEngineIcon import uses a different path pattern than other icons (line 4). Verify this path is correct:
🏁 Script executed:
#!/bin/bash
# Check UnrealEngineIcon import paths across the codebase
rg "import.*UnrealEngineIcon" --type tsx --type ts -C 1Length of output: 27
:::
🏁 Script executed:
#!/bin/bash
# Search for UnrealEngineIcon imports with corrected syntax
rg "UnrealEngineIcon" -C 2Length of output: 12367
🏁 Script executed:
#!/bin/bash
# Find the icons barrel export to check what's exported
fd -e ts -e tsx "icons/index" --or -path "*/icons.ts" --or -path "*/icons.tsx"Length of output: 244
🏁 Script executed:
#!/bin/bash
# Check if UnrealEngineIcon exists in the icons directory structure
fd "UnrealEngineIcon" -type fLength of output: 170
Fix import to use consistent barrel export path.
The UnrealEngineIcon is already exported from @/icons (verified in apps/portal/src/icons/index.ts), but the file imports it via a relative path instead. This violates consistency with other icons in the same file and the coding guideline for icon imports.
Update line 4:
import { EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon, UnrealEngineIcon } from "@/icons";Then remove the separate import statement for UnrealEngineIcon.
Note: The same inconsistency exists in wallets/sidebar.tsx, transactions/sidebar.tsx, payments/sidebar.tsx, and bridge/sidebar.tsx.
🤖 Prompt for AI Agents
In apps/portal/src/app/x402/sidebar.tsx around lines 1 to 77, the
UnrealEngineIcon is imported via a relative path while other icons use the
"@/icons" barrel; update the imports to import UnrealEngineIcon from "@/icons"
together with EngineIcon, ReactIcon, TypeScriptIcon, and UnityIcon, and remove
the separate relative import statement so all icons use the consistent barrel
export; apply the same pattern in the other files mentioned if present.
joaquim-verges
force-pushed
the
_Portal_Move_x402_from_payments_to_top-level_section
branch
from
da26cc9 to
7923a8a
Compare
joaquim-verges
deleted the
_Portal_Move_x402_from_payments_to_top-level_section
branch
PR-Codex overview
This PR focuses on restructuring the payment-related sections of the application to introduce a new
x402payment protocol, updating links, descriptions, and sidebar navigation to reflect this change.Detailed summary
hrefandnamefor the Payments section tox402.ArticleCardIndexcomponents.bridgestructure.page.mdxfiles to align withx402.x402related links.x402.Summary by CodeRabbit
New Features
Documentation