Update credit purchase terminology in billing section #7705
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe changes update user-facing text labels in the credit balance section of the dashboard team billing UI. Headings, tooltips, and button text are revised to use "Credits" and "Buy Credits" instead of "Top Up Credits" and related phrases. No logic or control flow is modified. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (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). (7)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. 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 #7705 +/- ##
=======================================
Coverage 56.18% 56.18%
=======================================
Files 908 908
Lines 58236 58236
Branches 4200 4200
=======================================
Hits 32718 32718
Misses 25410 25410
Partials 108 108
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/credit-balance-section.client.tsx (1)
71-76: Align terminology across the component for consistencyThe section heading now reads “Credits”, but the summary block below (lines 238–259) still uses “Top-up amount”. Consider renaming those labels (and perhaps the
TopUpSummary*component IDs) to avoid mixing the old and new terms.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/credit-balance-section.client.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/credit-balance-section.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]/(team)/~/billing/components/credit-balance-section.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]/(team)/~/billing/components/credit-balance-section.client.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/credit-balance-section.client.tsx (9)
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).
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} : Stick to design-tokens: background (bg-card), borders (border-border), muted text (text-muted-foreground) etc.
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} : Use design system tokens (e.g., bg-card, border-border, text-muted-foreground)
Learnt from: arcoraven
PR: #7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like aria-label and role in its TypeScript interface, causing compilation errors when added.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Surface breaking changes prominently in PR descriptions
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.
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';
Learnt from: MananTank
PR: #7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
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} : For notices & skeletons rely on AnnouncementBanner, GenericLoadingPage, EmptyStateCard.
⏰ 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 (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/credit-balance-section.client.tsx (2)
155-156: Tooltip copy LGTMUpdated copy matches the new wording and the conditional rendering remains intact.
166-173: URL still references/topup– verify backend route before mergingWhile the button text now says “Buy Credits”, the checkout path is unchanged (
/checkout/${teamSlug}/topup).
If the backend route was also renamed, this link will 404; if not, the mixed terminology is harmless but slightly confusing.
Please confirm the route name is still valid or update it alongside the UI wording.- href={`/checkout/${teamSlug}/topup?amount=${selectedAmount}`} + href={`/checkout/${teamSlug}/credits?amount=${selectedAmount}`} // example if backend changed
size-limit report 📦
|
jnsdls
force-pushed
the
Update_credit_purchase_terminology_in_billing_section
branch
from
a3a0e43 to
2bd59dd
Compare
jnsdls
force-pushed
the
Update_credit_purchase_terminology_in_billing_section
branch
from
2bd59dd to
1306047
Compare
jnsdls
force-pushed
the
Update_credit_purchase_terminology_in_billing_section
branch
from
1306047 to
da21ef8
Compare
Merge activity
|
# Update Credit Balance Section UI
This PR updates the UI text in the credit balance section to improve clarity:
- Changed "Top Up Credits" to "Credits" in the section header
- Updated tooltip text from "Only team owners can top up credits" to "Only team owners can purchase credits"
- Changed button text from "Top Up With Crypto" to "Buy Credits"
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **Style**
* Updated text labels in the credit balance section for improved clarity, including changes to headings, tooltips, and button text.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on updating the terminology related to credit purchases in the `CreditBalanceSection` component, making it clearer for users. The changes enhance the user experience by refining the language used in the interface.
### Detailed summary
- Changed heading from `Top Up Credits` to `Credits`.
- Updated tooltip message from `Only team owners can top up credits.` to `Only team owners can purchase credits.`.
- Renamed button text from `Top Up With Crypto` to `Buy Credits`.
- Modified summary label from `Top-up amount:` to `Added credits:` in multiple places.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Update_credit_purchase_terminology_in_billing_section
branch
from
da21ef8 to
2996121
Compare
graphite-app
bot
deleted the
Update_credit_purchase_terminology_in_billing_section
branch
Update Credit Balance Section UI
This PR updates the UI text in the credit balance section to improve clarity:
Summary by CodeRabbit
PR-Codex overview
This PR focuses on renaming various UI elements related to credit transactions in the
CreditBalanceSectioncomponent to enhance clarity and consistency in terminology.Detailed summary
Top Up CreditstoCredits.Only team owners can top up credits.toOnly team owners can purchase credits.Top Up With CryptotoBuy Credits.Top-up amount:toAdded credits:in multiple places.