[Playground] Fix bridge/payments documentation links

[eabdelmoneim]

https://linear.app/thirdweb/issue/PRO-148/fix-playground-doc-links-for-bridge-components

Update documentation links for bridge/payments widgets to follow consistent naming convention:

• Buy Widget: wallets/sponsor-gas → references/typescript/v5/BuyWidget
• Checkout Widget: payments → references/typescript/v5/CheckoutWidget
• Transaction Widget: wallets/sponsor-gas → references/typescript/v5/TransactionWidget
• Transaction Button: Add missing utm_source=playground parameter

All links now point to /references/typescript/v5/{WidgetName} with utm_source tracking.

🤖 Generated with Claude Code

---

PR-Codex overview

This PR updates the docsLink properties in several components to point to more specific documentation pages related to the BuyWidget, CheckoutWidget, TransactionButton, and TransactionWidget.

Detailed summary

• Updated docsLink in buy-widget/page.tsx to point to BuyWidget documentation.
• Updated docsLink in checkout-widget/page.tsx to point to CheckoutWidget documentation.
• Updated docsLink in transaction-button/page.tsx to include ?utm_source=playground for TransactionButton.
• Updated docsLink in transaction-widget/page.tsx to point to TransactionWidget documentation.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• Documentation
  • Updated documentation links in playground widgets to point to the current TypeScript v5 references for Buy, Checkout, Transaction, and Transaction Widget.
  • Adjusted the Transaction Button documentation link to include a playground utm_source parameter for tracking.
  • No UI or functional behavior changes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: e281ed1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thirdweb_playground	Ready	Preview	Comment	Dec 12, 2025 5:56pm

4 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
docs-v2	Skipped			Dec 12, 2025 5:56pm
nebula	Skipped			Dec 12, 2025 5:56pm
thirdweb-www	Skipped			Dec 12, 2025 5:56pm
wallet-ui	Skipped			Dec 12, 2025 5:56pm

[coderabbitai]

Walkthrough

This PR updates documentation link targets in four Bridge playground pages by changing their docsLink props; there are no logic, UI, or exported-API changes.

Changes

Cohort / File(s)	Summary
Bridge Widget Documentation Links apps/playground-web/src/app/bridge/buy-widget/page.tsx, apps/playground-web/src/app/bridge/checkout-widget/page.tsx, apps/playground-web/src/app/bridge/transaction-button/page.tsx, apps/playground-web/src/app/bridge/transaction-widget/page.tsx	Updated docsLink props to point to the correct TypeScript v5 reference documentation URLs for the respective components. The TransactionButton link now includes a utm_source=playground query parameter. No logic or UI changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Focus review on the updated URL strings in the four files to confirm correctness and encoding (utm parameter).

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing documentation links for bridge/payments components in the playground.
Description check	✅ Passed	The description comprehensively covers the changes with a Linear issue reference, specific before/after link mappings, and explains the utm_source tracking addition.
Linked Issues check	✅ Passed	The PR successfully addresses PRO-148 objectives: corrects incorrect documentation links, points to correct reference pages, standardizes to /references/typescript/v5/{WidgetName} pattern, and adds utm_source tracking.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing documentation links in four bridge widget pages as specified in PRO-148; no unrelated modifications detected.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch eiman/bridge-playground-doc-links

---

📜 Recent 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.

📥 Commits

Reviewing files that changed from the base of the PR and between bededbf and e281ed1.

📒 Files selected for processing (4)

• apps/playground-web/src/app/bridge/buy-widget/page.tsx (1 hunks)
• apps/playground-web/src/app/bridge/checkout-widget/page.tsx (1 hunks)
• apps/playground-web/src/app/bridge/transaction-button/page.tsx (1 hunks)
• apps/playground-web/src/app/bridge/transaction-widget/page.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/playground-web/src/app/bridge/buy-widget/page.tsx
• apps/playground-web/src/app/bridge/transaction-button/page.tsx
• apps/playground-web/src/app/bridge/transaction-widget/page.tsx

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoid any and unknown in TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.) in TypeScript

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose

Files:

• apps/playground-web/src/app/bridge/checkout-widget/page.tsx

apps/{dashboard,playground-web}/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Use cn() from @/lib/utils for conditional Tailwind class merging
Use design system tokens for styling (backgrounds: bg-card, borders: border-border, muted text: text-muted-foreground)
Expose className prop on root element for component overrides

Files:

• apps/playground-web/src/app/bridge/checkout-widget/page.tsx

**/*.{js,jsx,ts,tsx,json}

📄 CodeRabbit inference engine (AGENTS.md)

Biome governs formatting and linting; its rules live in biome.json. Run pnpm fix & pnpm lint before committing, ensure there are no linting errors

Files:

• apps/playground-web/src/app/bridge/checkout-widget/page.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Lazy-import optional features; avoid top-level side-effects

Files:

• apps/playground-web/src/app/bridge/checkout-widget/page.tsx

⏰ 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: Lint Packages
• GitHub Check: Size
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

apps/playground-web/src/app/bridge/checkout-widget/page.tsx (1)

25-32: Docs link URL is valid. The path https://portal.thirdweb.com/references/typescript/v5/CheckoutWidget?utm_source=playground resolves correctly with proper path/casing. The utm_source parameter addition aligns with the standardization effort.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• TEAM-0000: Entity not found: Issue - Could not find referenced Issue.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

size-limit report 📦

Path	Size
@thirdweb-dev/nexus (esm)	105.66 KB (0%)
@thirdweb-dev/nexus (cjs)	319.47 KB (0%)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.64%. Comparing base (1169752) to head (e281ed1).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8549   +/-   ##
=======================================
  Coverage   54.64%   54.64%           
=======================================
  Files         921      921           
  Lines       61181    61181           
  Branches     4151     4151           
=======================================
  Hits        33434    33434           
  Misses      27645    27645           
  Partials      102      102           

Flag	Coverage Δ
packages	54.64% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[graphite-app]

Merge activity

• Dec 12, 5:51 PM UTC: MananTank added this pull request to the Graphite merge queue.
• Dec 12, 5:56 PM UTC: Merged by the Graphite merge queue.