[MNY-139] Dashboard, Portal, Playground: Add Bridge Product #7984
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds a Bridge area (icon, sidebar link, server Bridge page, RouteDiscovery, QuickStartSection) and Webhooks layout; refactors Payments UI/components and playgrounds; updates several component APIs/props; removes the Playground "UI Components" page and adds a redirect. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Next as Next.js Server
participant Auth as Auth Service
participant Projects as Projects Service
participant Third as Thirdweb Client
participant Page as Bridge Page
User->>Next: GET /team/:team_slug/:project_slug/.../bridge
Next->>Auth: getAuthToken()
Next->>Projects: getProject(team_slug, project_slug)
alt missing auth
Next-->>User: redirect to login
else if project not found
Next-->>User: redirect to team page / notFound
else
Next->>Third: getClientThirdwebClient(jwt, project.teamId)
Next->>Page: render Bridge Page (header, analytics, route discovery, quickstart)
Page-->>User: HTML/JS for Bridge UI
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Assessment against linked issues
Out-of-scope changes
Possibly related PRs
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
Comment |
github-actions
bot
added
Dashboard
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7984 +/- ##
=======================================
Coverage 56.63% 56.63%
=======================================
Files 904 904
Lines 58677 58677
Branches 4161 4161
=======================================
Hits 33231 33231
Misses 25340 25340
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
MananTank
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
8226c74 to
4b84bb3
Compare
graphite-app
bot
changed the base branch from
mnn/fix-bridge-crash
to
graphite-base/7984
graphite-app
bot
force-pushed
the
graphite-base/7984
branch
from
29be72e to
17d40af
Compare
graphite-app
bot
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
4b84bb3 to
965d8c7
Compare
graphite-app
bot
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
965d8c7 to
f1534fe
Compare
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the user interface and functionality of the payments and bridge components within the application. It includes updates to various components, new features, and improvements in the overall layout.
### Detailed summary
- Removed `page.tsx` from `apps/playground-web/src/app/payments/ui-components`.
- Exported `BringToFrontIcon` as `BridgeIcon` in `BridgeIcon.tsx`.
- Added URL rewrites for `/payments/ui-components`.
- Updated navigation links in `navLinks.ts`.
- Modified `useTokensData.ts` to include prices.
- Changed `CreatePaymentWebhookButton` to a plain function.
- Adjusted styles in `code-example.tsx` for headers and paragraphs.
- Updated `paymentsFeatureCards` to remove UI Components and rename title.
- Simplified `TransactionButton` rendering in `transaction-button.tsx`.
- Added new `ProjectSettingsBreadcrumb` component for breadcrumbs in settings.
- Introduced `RouteDiscovery` component for token addition in bridge.
- Enhanced layout and structure in various settings and payments components.
- Updated `PaymentLinksTable` to improve the display of payment information.
- Introduced new `CheckoutPlayground` and `TransactionPlayground` components.
- Improved user feedback mechanisms and error handling across components.
> The following files were skipped due to too many changes: `apps/playground-web/src/app/payments/transactions/page.tsx`
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- New Features
- Introduced Bridge page with analytics, route discovery, and quickstart.
- Added CSV export in Payment History.
- Added dedicated Buy, Checkout, and Transaction playgrounds.
- Navigation
- Added “Bridge” to the project sidebar.
- Webhooks now has a unified layout with tabs for “Contracts” and “Payments & Bridge”.
- Payments page simplified with a Webhooks quick action.
- Removed “UI Components” page; redirect /payments/ui-components → /payments; updated playground nav/cards.
- UI/UX Improvements
- Redesigned analytics layout and Payment History table.
- Updated FeatureCard and EmptyState visuals; removed “Swap Tokens” card.
- Settings pages now use breadcrumbs.
- Various copy and spacing refinements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
4f1f5ec to
11303a6
Compare
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the user interface and functionality of the payments and bridge components within the application. It includes updates to various components, new features, and improvements in the overall layout.
### Detailed summary
- Removed `page.tsx` from `apps/playground-web/src/app/payments/ui-components`.
- Exported `BringToFrontIcon` as `BridgeIcon` in `BridgeIcon.tsx`.
- Added URL rewrites for `/payments/ui-components`.
- Updated navigation links in `navLinks.ts`.
- Modified `useTokensData.ts` to include prices.
- Changed `CreatePaymentWebhookButton` to a plain function.
- Adjusted styles in `code-example.tsx` for headers and paragraphs.
- Updated `paymentsFeatureCards` to remove UI Components and rename title.
- Simplified `TransactionButton` rendering in `transaction-button.tsx`.
- Added new `ProjectSettingsBreadcrumb` component for breadcrumbs in settings.
- Introduced `RouteDiscovery` component for token addition in bridge.
- Enhanced layout and structure in various settings and payments components.
- Updated `PaymentLinksTable` to improve the display of payment information.
- Introduced new `CheckoutPlayground` and `TransactionPlayground` components.
- Improved user feedback mechanisms and error handling across components.
> The following files were skipped due to too many changes: `apps/playground-web/src/app/payments/transactions/page.tsx`
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- New Features
- Introduced Bridge page with analytics, route discovery, and quickstart.
- Added CSV export in Payment History.
- Added dedicated Buy, Checkout, and Transaction playgrounds.
- Navigation
- Added “Bridge” to the project sidebar.
- Webhooks now has a unified layout with tabs for “Contracts” and “Payments & Bridge”.
- Payments page simplified with a Webhooks quick action.
- Removed “UI Components” page; redirect /payments/ui-components → /payments; updated playground nav/cards.
- UI/UX Improvements
- Redesigned analytics layout and Payment History table.
- Updated FeatureCard and EmptyState visuals; removed “Swap Tokens” card.
- Settings pages now use breadcrumbs.
- Various copy and spacing refinements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MananTank
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
11303a6 to
24b5735
Compare
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the payment and bridge functionalities in the dashboard and playground applications. It includes UI improvements, new components, and refactoring for better organization and usability.
### Detailed summary
- Deleted `RouteDiscoveryCard.tsx`.
- Replaced `BridgeIcon` export.
- Added route rewrites in `next.config.mjs`.
- Updated navigation links in `navLinks.ts`.
- Modified `useTokensData.ts` to include price parameters.
- Refactored `CreatePaymentWebhookButton` to a function.
- Enhanced layout and styling in various components, including `ProjectSidebarLayout`, `EmptyState`, and `QuickstartSection`.
- Introduced `ProjectSettingsBreadcrumb` for better navigation.
- Added support for locked widgets in payment components.
- Improved `PaymentLinksTable` and `PaymentHistory` components with new table structures.
- Enhanced `FeatureCard` and `PayAnalytics` with updated styling and structure.
- Created `CheckoutPlayground` and `TransactionPlayground` components for better payment handling.
- Reorganized the bridge section with improved UI and functionality.
> The following files were skipped due to too many changes: `apps/playground-web/src/app/payments/transactions/page.tsx`
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Bridge page with analytics, route discovery, and Quickstart; CSV export for payment history; new Buy, Checkout, and Transaction playgrounds.
* **Navigation**
* Added "Bridge" to project sidebar; Webhooks consolidated with tabs; Payments page streamlined; redirect from /payments/ui-components → /payments and removed UI Components page.
* **UI/UX Improvements**
* Redesigned analytics and payment history table; updated FeatureCard and EmptyState visuals; removed "Swap Tokens" card; settings pages use breadcrumbs; assorted copy and spacing tweaks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
09-04-dashboard_portal_playground_add_bridge_product
branch
from
24b5735 to
4ca407d
Compare
graphite-app
bot
deleted the
09-04-dashboard_portal_playground_add_bridge_product
branch
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
apps/playground-web/src/app/payments/components/LeftSection.tsx (2)
258-277: Handle tri-state Checkbox correctly and dedupe toggle logic.shadcn Checkbox onCheckedChange can emit "indeterminate" which is truthy; compare with === true to avoid accidental additions. Also, the crypto/card toggles are duplicated between Buy and Checkout; extract a small helper to reduce drift.
Apply this diff for the boolean guard (repeat for both crypto/card and both modes):
- paymentMethods: checked + paymentMethods: checked === true ? [ ...v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ), "crypto", ] : v.payOptions.paymentMethods.filter( (m) => m !== "crypto", ),Optional: extract a local helper
const toggleMethod = ( methods: ("crypto" | "card")[], method: "crypto" | "card", checked: boolean | "indeterminate", ) => (checked === true ? [...methods.filter((m) => m !== method), method] : methods.filter((m) => m !== method));Then use:
paymentMethods: toggleMethod(v.payOptions.paymentMethods, "crypto", checked)Also applies to: 283-302, 361-377, 388-404
441-447: Fix stale-closure risk in setOptions merges.Inside functional setState, spreading outer-scoped payOptions can drop concurrent updates. Spread v.payOptions instead.
Apply this diff:
- payOptions: { - ...payOptions, + payOptions: { + ...v.payOptions, title: e.target.value, },- payOptions: { - ...payOptions, + payOptions: { + ...v.payOptions, image: e.target.value, },- payOptions: { - ...payOptions, + payOptions: { + ...v.payOptions, description: e.target.value, },- payOptions: { - ...payOptions, + payOptions: { + ...v.payOptions, buttonLabel: e.target.value, },Also applies to: 461-467, 481-489, 501-509
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (1)
32-35: Renamethirdweb-client.client.tsto a server module
The.client.tssuffix forces this helper to be treated as a Client Component, so importing it inapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx(a Server Component) will break under Next’s RSC rules. SincegetClientThirdwebClientwraps a server‐only import (./thirdweb.server), rename the file tothirdweb-client.server.ts(or remove the.clientsuffix) and update the import accordingly.apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (2)
96-107: Fix invalid anchor > button nesting (accessibility/semantics).Use Button asChild to avoid interactive-element nesting and ensure correct focus/activation behavior.
- {props.settings && ( - <Link href={props.settings.href}> - <Button - variant="outline" - size="sm" - className="rounded-full gap-2 bg-card" - > - <Settings2Icon className="size-4 text-muted-foreground" /> - Settings - </Button> - </Link> - )} + {props.settings && ( + <Button asChild variant="outline" size="sm" className="rounded-full gap-2 bg-card"> + <Link href={props.settings.href}> + <Settings2Icon className="size-4 text-muted-foreground" /> + Settings + </Link> + </Button> + )}
1-1: Replace direct @workspace/ui import with local UI wrapper
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx:1 – import Button from"@/components/ui/button"instead of"@workspace/ui/components/button"to align with dashboard app conventions.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx (1)
132-171: CSV header/order mismatch (and date format)Header says ["Type","Bought","Paid",...] but rows start with Bought, then Paid, then Type. This misaligns exported columns. Also, the date format lacks a comma after the day (inconsistent with the table).
- const header = ["Type", "Bought", "Paid", "Status", "Recipient", "Date"]; + const header = ["Type", "Bought", "Paid", "Status", "Sender", "Date"]; ... - return [ - // bought - `${formatTokenAmount(toAmount)} ${purchase.destinationToken.symbol}`, - // paid - `${formatTokenAmount(fromAmount)} ${purchase.originToken.symbol}`, - // type - type, - // status - purchase.status, - // sender - purchase.sender, - // date - format(new Date(purchase.createdAt), "LLL dd y h:mm a"), - ]; + return [ + // type + type, + // bought + `${formatTokenAmount(toAmount)} ${purchase.destinationToken.symbol}`, + // paid + `${formatTokenAmount(fromAmount)} ${purchase.originToken.symbol}`, + // status + purchase.status, + // sender + purchase.sender, + // date + format(new Date(purchase.createdAt), "LLL dd, y h:mm a"), + ];
♻️ Duplicate comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (1)
1-1: Use local UI primitive and add server-only pragmaPages under dashboard should import UI from "@/components/ui/*" and start with
import "server-only";to keep this route a Server Component and avoid pulling client bundles.+import "server-only"; -import { Button } from "@workspace/ui/components/button"; +import { Button } from "@/components/ui/button";
🧹 Nitpick comments (21)
apps/playground-web/src/app/payments/components/LeftSection.tsx (5)
34-41: Add an explicit return type to the component.Coding guideline requires explicit return types for TSX. Add React.ReactElement to the signature.
Apply this diff:
-export function LeftSection(props: { +export function LeftSection(props: { options: BridgeComponentsPlaygroundOptions; setOptions: React.Dispatch< React.SetStateAction<BridgeComponentsPlaygroundOptions> >; lockedWidget?: "buy" | "checkout" | "transaction"; -}) { +}): React.ReactElement {
43-43: Type-safe and nullish-coalesced effectiveWidget.Prefer ?? over || and annotate to the exact union type for clarity.
Apply this diff:
- const effectiveWidget = props.lockedWidget || payOptions.widget || "buy"; + const effectiveWidget = + (props.lockedWidget ?? payOptions.widget ?? "buy") as NonNullable< + BridgeComponentsPlaygroundOptions["payOptions"]["widget"] + >;
122-147: Widget selector gating is correct; use effectiveWidget for value.Minor consistency: bind the radio group’s value to effectiveWidget.
Apply this diff:
- value={payOptions.widget || "buy"} + value={effectiveWidget}
151-166: Narrow Select value type for currency.onValueChange provides string; BridgeComponentsPlaygroundOptions expects a SupportedFiatCurrency union. Add a precise cast to avoid type widening.
Apply this diff:
<Select value={payOptions.currency || "USD"} onValueChange={(value) => { setOptions((v) => ({ ...v, payOptions: { ...v.payOptions, - currency: value, + currency: + value as BridgeComponentsPlaygroundOptions["payOptions"]["currency"], }, })); }} >
418-423: User-facing text: article and hyphenation.“a ERC1155” → “an ERC-1155” for correctness.
Apply this diff:
- This demo uses a ERC1155 NFT claim transaction. Check the + This demo uses an ERC-1155 NFT claim transaction. Check theapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (4)
24-26: EnsureloginRedirectshort-circuits (return/never) to satisfy narrowingIf
loginRedirectdoes not returnnever, the type ofauthTokenmay remainstring | null, risking misuse below and potential runtime issues. Either makeloginRedirectreturnnever(internally callsredirect()) or explicitlyreturnhere.- if (!authToken) { - loginRedirect(`/team/${params.team_slug}/${params.project_slug}/payments`); - } + if (!authToken) { + return loginRedirect( + `/team/${params.team_slug}/${params.project_slug}/payments`, + ); + }
91-94: Nit: pluralize label to match destinationDestination is “ui-components”; label should be plural for consistency.
- label: "UI Component", + label: "UI Components",
15-20: Add explicit return type for PageKeep to repo TS conventions by annotating the return type.
-export default async function Page(props: { +export default async function Page(props: { params: Promise<{ team_slug: string; project_slug: string; }>; -}) { +}): Promise<JSX.Element> {
141-157: Optional: add Suspense fallbacks for client sectionsThese client components fetch/render data; a lightweight fallback improves perceived performance.
+import { Suspense } from "react"; @@ - <div className="flex flex-col gap-12"> - <PaymentLinksTable + <div className="flex flex-col gap-12"> + <Suspense fallback={<div className="text-sm text-muted-foreground">Loading payment links…</div>}> + <PaymentLinksTable clientId={project.publishableKey} teamId={project.teamId} - /> - <QuickStartSection + /> + </Suspense> + <Suspense fallback={<div className="text-sm text-muted-foreground">Loading quick start…</div>}> + <QuickStartSection projectSlug={params.project_slug} teamSlug={params.team_slug} clientId={project.publishableKey} teamId={project.teamId} - /> + /> + </Suspense> @@ - <AdvancedSection + <Suspense fallback={<div className="text-sm text-muted-foreground">Loading advanced features…</div>}> + <AdvancedSection teamSlug={params.team_slug} projectSlug={params.project_slug} - /> + /> + </Suspense> </div>apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (3)
26-37: Add explicit return type to Action.Keeps types tight and matches guidelines for explicit return types.
-function Action(props: { action: Action; variant?: "default" | "outline" }) { +function Action( + props: { action: Action; variant?: "default" | "outline" }, +): ReactNode {Add supporting type import at top:
import type { ReactNode } from "react";
52-71: Expose className on ProjectPageHeader and merge with cn().Improves composability and aligns with app component conventions.
export type ProjectPageHeaderProps = { client: ThirdwebClient; title: string; description?: React.ReactNode; imageUrl?: string | null; icon: React.FC<{ className?: string }>; isProjectIcon?: boolean; actions: { primary?: Action; secondary?: Action; } | null; links?: ActionLink[]; settings?: { href: string; }; // TODO: add task card component task?: never; + className?: string; }; -export function ProjectPageHeader(props: ProjectPageHeaderProps) { +export function ProjectPageHeader(props: ProjectPageHeaderProps) { return ( - <header className="container max-w-7xl py-6 relative"> + <header className={cn("container max-w-7xl py-6 relative", props.className)}>Also applies to: 73-76
132-134: Confirm removal of line clamp is intentional; consider responsive clamp.Long descriptions may overflow on small screens. Optionally clamp on small breakpoints.
- <p className="text-sm text-muted-foreground text-pretty"> + <p className="text-sm text-muted-foreground text-pretty sm:line-clamp-3">apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx (3)
37-40: Remove redundant key on inner rowThe list key is already applied at the callsite when mapping . The key on the inner is unnecessary.
Apply:
- <TableRowComponent - className="fade-in-0 border-border border-b duration-300" - key={purchase.id} - > + <TableRowComponent className="fade-in-0 border-border border-b duration-300">
6-9: Mark as client componentThis component is rendered from a client component and uses interactive child components. Add 'use client' for clarity and to satisfy repo guidelines.
+ 'use client'; import { format } from "date-fns";
86-89: Timezone consistency with chartsCharts format dates in UTC while the table uses local time. Consider standardizing (UTC or project tz) to avoid confusion across views.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx (3)
111-116: Filter once, reuseYou filter to completed three times. Compute once to reduce duplication.
- <TotalVolumePieChart - data={ - volumeData?.filter((x) => x.status === "completed") || [] - } - /> + {/* + Compute once above: + const completedVolume = volumeData?.filter((x) => x.status === "completed") || []; + */} + <TotalVolumePieChart data={completedVolume} /> ... - <TotalPayVolume - data={volumeData?.filter((x) => x.status === "completed") || []} - dateFormat={dateFormat} - /> + <TotalPayVolume data={completedVolume} dateFormat={dateFormat} /> ... - <Payouts - data={ - volumeData?.filter((x) => x.status === "completed") || [] - } - dateFormat={dateFormat} - /> + <Payouts data={completedVolume} dateFormat={dateFormat} />Also applies to: 118-121, 125-134
92-106: Fallback skeleton still includes history blockPaymentHistory moved below and outside this suspense but the fallback retains a large (500px) skeleton likely intended for history. Trim it to only cover the analytics grid.
- <div className="grid grid-cols-1 gap-6 xl:grid-cols-2"> - <Skeleton className="h-[350px] border rounded-xl" /> - <Skeleton className="h-[350px] border rounded-xl" /> - </div> - <Skeleton className="h-[500px] border rounded-xl" /> + <div className="grid grid-cols-1 gap-6 xl:grid-cols-2"> + <Skeleton className="h-[350px] border rounded-xl" /> + <Skeleton className="h-[350px] border rounded-xl" /> + </div>
79-81: Expose className on rootRepo guideline: components should accept className on the root. Add an optional prop and merge with cn().
-export async function PayAnalytics(props: { +export async function PayAnalytics(props: { projectClientId: string; client: ThirdwebClient; projectId: string; teamId: string; range: Range; interval: "day" | "week"; authToken: string; + className?: string; }) { ... - return ( - <div> + return ( + <div className={props.className}>apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx (3)
46-48: Include teamId in the query keyAvoid cross-team cache bleed by keying queries on teamId as well.
- queryKey: ["payments", props.projectClientId, page], + queryKey: ["payments", props.teamId, props.projectClientId, page],
58-63: Add className passthrough on rootTo match repo convention, allow callers to style the wrapper.
-export function PaymentHistory(props: { +export function PaymentHistory(props: { client: ThirdwebClient; projectClientId: string; teamId: string; + className?: string; }) { ... - return ( - <div className="w-full"> + return ( + <div className={cn("w-full", props.className)}>Note: add
cnimport from "@/lib/utils".
77-123: Minor: consistent empty/loading UXYou already gate the body with isEmpty/isLoading. Consider also disabling the Export button while loading to avoid exporting partial data.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (38)
apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx(5 hunks)apps/dashboard/src/@/icons/BridgeIcon.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/QuickstartSection.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/RouteDiscovery.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/EmptyState.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/_components/project-settings-breadcrumb.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/account-abstraction/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/layout.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx(2 hunks)apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/src/app/data/pages-metadata.ts(1 hunks)apps/playground-web/src/app/navLinks.ts(0 hunks)apps/playground-web/src/app/payments/commerce/CheckoutPlayground.tsx(1 hunks)apps/playground-web/src/app/payments/commerce/page.tsx(2 hunks)apps/playground-web/src/app/payments/components/LeftSection.tsx(9 hunks)apps/playground-web/src/app/payments/components/RightSection.tsx(4 hunks)apps/playground-web/src/app/payments/fund-wallet/BuyPlayground.tsx(2 hunks)apps/playground-web/src/app/payments/fund-wallet/page.tsx(2 hunks)apps/playground-web/src/app/payments/transactions/TransactionPlayground.tsx(1 hunks)apps/playground-web/src/app/payments/transactions/page.tsx(2 hunks)apps/playground-web/src/app/payments/ui-components/page.tsx(0 hunks)apps/playground-web/src/components/code/code-example.tsx(1 hunks)apps/playground-web/src/components/pay/transaction-button.tsx(1 hunks)apps/playground-web/src/hooks/useTokensData.ts(1 hunks)
💤 Files with no reviewable changes (2)
- apps/playground-web/src/app/payments/ui-components/page.tsx
- apps/playground-web/src/app/navLinks.ts
🚧 Files skipped from review as they are similar to previous changes (30)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx
- apps/dashboard/src/@/icons/BridgeIcon.tsx
- apps/playground-web/src/app/data/pages-metadata.ts
- apps/playground-web/src/components/code/code-example.tsx
- apps/playground-web/src/app/payments/components/RightSection.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/EmptyState.tsx
- apps/playground-web/src/app/payments/transactions/TransactionPlayground.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/_components/project-settings-breadcrumb.tsx
- apps/playground-web/src/hooks/useTokensData.ts
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/webhooks/components/webhooks.client.tsx
- apps/playground-web/src/app/payments/commerce/CheckoutPlayground.tsx
- apps/playground-web/next.config.mjs
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/QuickstartSection.client.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx
- apps/playground-web/src/components/pay/transaction-button.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx
- apps/playground-web/src/app/payments/fund-wallet/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/payments/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/wallets/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/account-abstraction/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx
- apps/playground-web/src/app/payments/transactions/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/FeatureCard.client.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/layout.tsx
- apps/playground-web/src/app/payments/commerce/page.tsx
- apps/playground-web/src/app/payments/fund-wallet/BuyPlayground.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/bridge/RouteDiscovery.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/playground-web/src/app/payments/components/LeftSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/playground-web/src/app/payments/components/LeftSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
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
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/playground-web/src/app/payments/components/LeftSection.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/@/components/blocks/project-page/project-page-header.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
🧠 Learnings (17)
📓 Common learnings
Learnt from: jnsdls
PR: thirdweb-dev/js#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.
Learnt from: jnsdls
PR: thirdweb-dev/js#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.
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Server Components must start with `import "server-only"`; use `next/headers`, server‑only env, heavy data fetching, and `redirect()` where appropriate
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Prefix files with `import "server-only";` so they never end up in the client bundle.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Co-locate data helpers under `@/api/**` and mark them with "server-only".
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#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/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
🧬 Code graph analysis (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/format.ts (1)
formatTokenAmount(1-9)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx (8)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalyticsFilter.tsx (1)
PayAnalyticsFilter(29-126)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/TotalVolumePieChart.tsx (1)
TotalVolumePieChart(15-129)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/TotalPayVolume.tsx (1)
TotalPayVolume(19-159)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/Payouts.tsx (1)
Payouts(14-136)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsSuccessRate.tsx (1)
PaymentsSuccessRate(18-109)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayNewCustomers.tsx (1)
PayNewCustomers(13-138)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayCustomersTable.tsx (1)
PayCustomersTable(22-81)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx (1)
PaymentHistory(27-126)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx (1)
PaymentLinksTable(43-55)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/QuickstartSection.client.tsx (1)
QuickStartSection(13-93)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx (1)
AdvancedSection(6-49)
apps/playground-web/src/app/payments/components/LeftSection.tsx (1)
apps/playground-web/src/app/payments/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-62)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx (3)
apps/portal/src/components/Document/Table.tsx (1)
Table(3-13)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/common.tsx (2)
TableHeadingRow(17-19)TableHeading(21-27)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx (1)
TableRow(13-93)
⏰ 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: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
apps/playground-web/src/app/payments/components/LeftSection.tsx (4)
32-32: Import path update looks good.Using a local types barrel for BridgeComponentsPlaygroundOptions improves cohesion with the co-located playground components.
195-227: Shared chain/token section looks good.Conditional rendering on effectiveWidget is correct, and resetting token on chain change is handled.
313-349: Reuse of buyTokenAmount for Checkout “Price”.If intentional, fine. If a distinct field is desired for checkout price vs buy amount, consider separating for clarity.
Would you like me to split this into payOptions.checkoutAmount to avoid cross-mode state coupling?
545-561: Branding checkbox uses the safe boolean guard—nice.Pattern checked === true avoids tri-state surprises.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx (3)
2-2: Icon imports are correct with Icon-suffix
PlusIconandWebhookIconfollow the repo’s lint rule for lucide-react icon names. LGTM.
63-67: Webhooks secondary action: path looks correctLinking to
/webhooks/paymentsmatches the established route in this layout. Good addition for discoverability.
72-85: No updates needed for external docs/playground URLs All verified links remain under /payments; no slug changes required.apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx (3)
60-62: Primary action optionality — LGTM.Rendering guards handle absence correctly across desktop/mobile.
114-115: Use outline for secondary actions — consistent and good.Matches the updated design tokens and button variants.
145-146: Mobile secondary as outline — LGTM.Consistent with desktop variant and design guidance.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx (1)
6-9: UI table migration looks goodSwapping to the shared Table components and aliasing TableRow avoids naming conflicts and aligns with the design system.
Also applies to: 37-91
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PayAnalytics.tsx (1)
79-91: Header-first layout is a UX improvementPlacing the Analytics header above filters reads better and matches other sections.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx (1)
15-20: Migration to shared Table UI looks consistentTableContainer/Table/TableHeader/TableBody adoption is consistent with the design system. Skeleton rows also fit well.
Also applies to: 77-109
| <TableHeading> Sent </TableHeading> | ||
| <TableHeading> Received </TableHeading> | ||
| <TableHeading>Type</TableHeading> | ||
| <TableHeading>Status</TableHeading> | ||
| <TableHeading>Recipient</TableHeading> | ||
| <TableHeading>Date</TableHeading> | ||
| </TableHeadingRow> |
There was a problem hiding this comment.
Column label is “Recipient” but you render the sender address
UI shows sender (purchase.sender). Rename column to “Sender” to avoid misleading users, or switch to the recipient field if available.
- <TableHeading>Recipient</TableHeading>
+ <TableHeading>Sender</TableHeading>If you intended the recipient, update PaymentsTableRow to use that field instead. Happy to provide a follow-up diff.
📝 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.
| <TableHeading> Sent </TableHeading> | |
| <TableHeading> Received </TableHeading> | |
| <TableHeading>Type</TableHeading> | |
| <TableHeading>Status</TableHeading> | |
| <TableHeading>Recipient</TableHeading> | |
| <TableHeading>Date</TableHeading> | |
| </TableHeadingRow> | |
| <TableHeadingRow> | |
| <TableHeading> Sent </TableHeading> | |
| <TableHeading> Received </TableHeading> | |
| <TableHeading>Type</TableHeading> | |
| <TableHeading>Status</TableHeading> | |
| <TableHeading>Sender</TableHeading> | |
| - <TableHeading>Recipient</TableHeading> | |
| <TableHeading>Date</TableHeading> | |
| </TableHeadingRow> |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx
around lines 81-87, the table column label reads "Recipient" but the row renders
the sender address; either rename this TableHeading to "Sender" to match the
rendered value, or update the PaymentsTableRow to render the actual recipient
field (e.g., purchase.recipient) instead of purchase.sender; make the
corresponding change in the TableHeading or the row rendering so label and value
match and ensure the used field exists on the data type.
| Payments allows developers accept crypto payments for goods and | ||
| services | ||
| </> |
There was a problem hiding this comment.
Fix user-facing grammar in header description
Add “to” and end with a period.
- Payments allows developers accept crypto payments for goods and
- services
+ Payments allows developers to accept crypto payments for goods and
+ services.📝 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.
| Payments allows developers accept crypto payments for goods and | |
| services | |
| </> | |
| Payments allows developers to accept crypto payments for goods and | |
| services. | |
| </> |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
around lines 45 to 47, the header description currently reads "Payments allows
developers accept crypto payments for goods and services"; update the text to
"Payments allows developers to accept crypto payments for goods and services."
by inserting the missing "to" after "developers" and adding a period at the end
to fix the grammar and punctuation.
PR-Codex overview
This PR focuses on enhancing the payment components and bridge functionality within the application, including UI updates, new features, and code refactoring for better maintainability.
Detailed summary
RouteDiscoveryCard.tsx.BridgeIconfromlucide-react.next.config.mjs.navLinks.ts.useTokensData.ts.CreatePaymentWebhookButtonto a regular function.code-example.tsx.transaction-button.tsxfor better account handling.ProjectSettingsBreadcrumbfor better navigation.QuickStartSectionandRouteDiscoverycomponents.PaymentHistoryto use new table components.FeatureCardfor improved layout and styling.Summary by CodeRabbit
New Features
Navigation
UI/UX Improvements