feat(billing): account balance overview and settings sidebar - #3583
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe change centralizes settings navigation, replaces legacy alert and billing layouts, adds balance and automatic top-up components, moves payment actions into a provider, updates billing history loading, redirects legacy routes, and adds tests. ChangesSettings navigation and page integration
Billing balance and actions
Billing history and payment methods
Estimated code review effort: 5 (Critical) | ~120 minutes Possibly related PRs
Suggested reviewers: ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
d2b569c to
36d6385
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts (1)
120-135: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace unsafe dependency casts with typed mocks.
as unknown as typeof DEPENDENCIESdisables type checking for test dependency contracts. Usemock<typeof DEPENDENCIES>()andMockProxy<typeof DEPENDENCIES>to configure the required hook and component behavior.
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts#L120-L135: Createdependencieswithmock<typeof DEPENDENCIES>()and configure each hook return value.apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsx#L120-L126: Create the dependency overrides withmock<typeof DEPENDENCIES>()instead of the double cast.Run the affected specs and the TypeScript check after this change. As per coding guidelines, use
vitest-mock-extendedhelpers such asmock()andMockProxy<T>, and usemock<T>()instead ofas unknown as <Type>for creating mocks.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts` around lines 120 - 135, Replace the unsafe dependency casts with typed vitest-mock-extended mocks: in apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts lines 120-135, create dependencies via mock<typeof DEPENDENCIES>() (typed as MockProxy<typeof DEPENDENCIES> if needed) and configure each hook return value; apply the same mock<typeof DEPENDENCIES>() approach to the dependency overrides in apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsx lines 120-126. Remove the as unknown as casts, then run both affected specs and the TypeScript check.Source: Coding guidelines
apps/deploy-web/src/components/billing-usage/AddToBalanceButton/AddToBalanceButton.spec.tsx (1)
73-100: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the unsafe dependency cast.
CLAUDE.mdrequiresmock<T>()instead ofas unknown as <Type>in tests. Usemock<typeof DEPENDENCIES>({...})so incompatible dependency overrides fail during type checking.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/AddToBalanceButton/AddToBalanceButton.spec.tsx` around lines 73 - 100, Replace the unsafe `as unknown as typeof DEPENDENCIES` cast in `setup` with `mock<typeof DEPENDENCIES>(...)`, preserving the existing dependency overrides while ensuring incompatible mocks are caught by type checking.Source: Coding guidelines
apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsx (1)
2-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider injecting the
Plusicon.
PaymentMethodsRowinjectsCreditCardthroughDEPENDENCIES, butPlusis used directly here. Add it toDEPENDENCIESfor consistency with the injection pattern used in this directory.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsx` around lines 2 - 16, Add the imported Plus icon to the PaymentMethodsView DEPENDENCIES object and update the component to use the injected dependency instead of the direct Plus reference, matching the existing PaymentMethodsRow injection pattern.apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.tsx (1)
59-111: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueAlign the
useCallbackdependency lists.
toggleAutoReloadreadsd.Snackbarbut omitsdfrom its dependency array.disableAutoTopUpincludesd. Use the same dependency list in both callbacks so the lint rule and behavior stay consistent.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.tsx` around lines 59 - 111, Update the dependency array for toggleAutoReload to include d, matching disableAutoTopUp, because the callback renders d.Snackbar. Keep the existing dependencies unchanged and align both useCallback dependency lists.apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsx (2)
164-176: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a test for the next-top-up estimate.
setupacceptsperHourandavailable, but no test supplies them. ThenextTopUpDaysbranch inAutoTopUpSection.tsx(lines 134-138 and 211-217) stays uncovered, including the singular/plural label. Add one case with a spend rate and an available balance above the threshold.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsx` around lines 164 - 176, Add a test case using the setup helper with perHour and available values that produce a nextTopUpDays estimate while the available balance exceeds the configured threshold. Assert the rendered estimate and cover both the calculated timing and the correct singular/plural day label in AutoTopUpSection.
187-201: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTest dependency objects bypass type checking. All three specs build the injected
DEPENDENCIESobject without type safety, so a change to a component'sDEPENDENCIEScontract will not fail compilation in these tests. The coding guidelines requiremock<T>()fromvitest-mock-extended.
apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsx#L187-L201: replaceas unknown as typeof DEPENDENCIESwithmock<typeof DEPENDENCIES>({ ... }).apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsx#L77-L82: replaceas unknown as typeof DEPENDENCIESwithmock<typeof DEPENDENCIES>({ ... }).apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.spec.tsx#L114-L122: replaceconst dependencies: anywithmock<typeof DEPENDENCIES>({ ... })and importDEPENDENCIESfrom./PaymentMethodsView.As per coding guidelines: "In tests, use
mock<T>()instead ofas unknown as <Type>for creating mocks."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsx` around lines 187 - 201, Replace the untyped dependency mocks with vitest-mock-extended mock<typeof DEPENDENCIES> objects: update AutoTopUpSection/AutoTopUpSection.spec.tsx lines 187-201 and BillingActionsProvider/BillingActionsProvider.spec.tsx lines 77-82 instead of using as unknown as typeof DEPENDENCIES; update PaymentMethodsView/PaymentMethodsView.spec.tsx lines 114-122 instead of const dependencies: any, and import DEPENDENCIES from ./PaymentMethodsView there. Preserve each existing mock implementation and dependency values.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/deploy-web/src/components/alerts/AlertsPage.tsx`:
- Around line 21-24: Make the AlertsPage Tabs selection URL-addressable,
preserving the alerts default while rendering Notification Channels when the
channels state is requested; update
apps/deploy-web/src/components/alerts/CreateNotificationChannelPage.tsx:15 and
apps/deploy-web/src/components/alerts/EditNotificationChannelPage.tsx:20 to use
that channels-selecting URL for fallbacks, and update
apps/deploy-web/src/pages/alerts/notification-channels/index.tsx:7-9 to redirect
there.
In
`@apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsx`:
- Around line 31-53: Update BillingActionsProvider to read the setup-intent
mutation’s isError state and handle failed createSetupIntent requests; when the
request fails, prevent the popup from remaining open without a clientSecret by
closing it or rendering an error state with a retry action, while preserving the
existing successful flow.
In
`@apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsx`:
- Around line 45-73: Propagate isInProgress from PaymentMethodsView into each
d.PaymentMethodsRow as its disabled state, and update PaymentMethodsRowProps to
accept the matching optional isDisabled field. Apply isDisabled to the row’s
actions trigger so remove and set-default actions cannot be invoked during an
active mutation.
In
`@apps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.spec.tsx`:
- Around line 50-60: Replace the dependency cast in SettingsLayout.spec.tsx
around useSettingsNavLinks, Link, and Title with mock<typeof
DEPENDENCIES>({...}) from vitest-mock-extended. Also update
apps/deploy-web/src/hooks/useSettingsNavLinks.spec.ts lines 34-38 to use the
same typed mock pattern for useFlag and usePathname, removing both as unknown as
typeof DEPENDENCIES casts.
---
Nitpick comments:
In
`@apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts`:
- Around line 120-135: Replace the unsafe dependency casts with typed
vitest-mock-extended mocks: in
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts
lines 120-135, create dependencies via mock<typeof DEPENDENCIES>() (typed as
MockProxy<typeof DEPENDENCIES> if needed) and configure each hook return value;
apply the same mock<typeof DEPENDENCIES>() approach to the dependency overrides
in
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsx
lines 120-126. Remove the as unknown as casts, then run both affected specs and
the TypeScript check.
In
`@apps/deploy-web/src/components/billing-usage/AddToBalanceButton/AddToBalanceButton.spec.tsx`:
- Around line 73-100: Replace the unsafe `as unknown as typeof DEPENDENCIES`
cast in `setup` with `mock<typeof DEPENDENCIES>(...)`, preserving the existing
dependency overrides while ensuring incompatible mocks are caught by type
checking.
In
`@apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsx`:
- Around line 164-176: Add a test case using the setup helper with perHour and
available values that produce a nextTopUpDays estimate while the available
balance exceeds the configured threshold. Assert the rendered estimate and cover
both the calculated timing and the correct singular/plural day label in
AutoTopUpSection.
- Around line 187-201: Replace the untyped dependency mocks with
vitest-mock-extended mock<typeof DEPENDENCIES> objects: update
AutoTopUpSection/AutoTopUpSection.spec.tsx lines 187-201 and
BillingActionsProvider/BillingActionsProvider.spec.tsx lines 77-82 instead of
using as unknown as typeof DEPENDENCIES; update
PaymentMethodsView/PaymentMethodsView.spec.tsx lines 114-122 instead of const
dependencies: any, and import DEPENDENCIES from ./PaymentMethodsView there.
Preserve each existing mock implementation and dependency values.
In
`@apps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.tsx`:
- Around line 59-111: Update the dependency array for toggleAutoReload to
include d, matching disableAutoTopUp, because the callback renders d.Snackbar.
Keep the existing dependencies unchanged and align both useCallback dependency
lists.
In
`@apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsx`:
- Around line 2-16: Add the imported Plus icon to the PaymentMethodsView
DEPENDENCIES object and update the component to use the injected dependency
instead of the direct Plus reference, matching the existing PaymentMethodsRow
injection pattern.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 316b3c5c-393e-4c1d-8243-4709e823f38a
📒 Files selected for processing (44)
apps/deploy-web/src/components/alerts/AlertsLayout.tsxapps/deploy-web/src/components/alerts/AlertsPage.tsxapps/deploy-web/src/components/alerts/CreateNotificationChannelPage.tsxapps/deploy-web/src/components/alerts/EditNotificationChannelPage.tsxapps/deploy-web/src/components/alerts/NotificationChannelsPage.tsxapps/deploy-web/src/components/api-keys/ApiKeysPage/ApiKeysPage.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/BalanceBreakdownBar.spec.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/BalanceBreakdownBar.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.tsapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.tsapps/deploy-web/src/components/billing-usage/AccountOverview/AccountOverview.spec.tsxapps/deploy-web/src/components/billing-usage/AccountOverview/AccountOverview.tsxapps/deploy-web/src/components/billing-usage/AddToBalanceButton/AddToBalanceButton.spec.tsxapps/deploy-web/src/components/billing-usage/AddToBalanceButton/AddToBalanceButton.tsxapps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.spec.tsxapps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.tsxapps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsxapps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsxapps/deploy-web/src/components/billing-usage/BillingContainer/BillingContainer.spec.tsxapps/deploy-web/src/components/billing-usage/BillingContainer/BillingContainer.tsxapps/deploy-web/src/components/billing-usage/BillingPage.tsxapps/deploy-web/src/components/billing-usage/BillingUsageLayout.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.spec.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsContainer/PaymentMethodsContainer.spec.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsContainer/PaymentMethodsContainer.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsPage.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.spec.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.spec.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsxapps/deploy-web/src/components/billing-usage/UsagePage.tsxapps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.tsapps/deploy-web/src/components/home/YourAccount/YourAccount.tsxapps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.spec.tsxapps/deploy-web/src/components/layout/SettingsLayout/SettingsLayout.tsxapps/deploy-web/src/components/layout/TopNav/TopNav.tsxapps/deploy-web/src/hooks/useSettingsNavLinks.spec.tsapps/deploy-web/src/hooks/useSettingsNavLinks.tsapps/deploy-web/src/pages/alerts/notification-channels/index.tsxapps/deploy-web/src/pages/payment-methods/index.tsxapps/deploy-web/src/utils/priceUtils.ts
💤 Files with no reviewable changes (6)
- apps/deploy-web/src/components/alerts/NotificationChannelsPage.tsx
- apps/deploy-web/src/components/billing-usage/PaymentMethodsPage.tsx
- apps/deploy-web/src/components/billing-usage/AccountOverview/AccountOverview.tsx
- apps/deploy-web/src/components/billing-usage/BillingUsageLayout.tsx
- apps/deploy-web/src/components/billing-usage/AccountOverview/AccountOverview.spec.tsx
- apps/deploy-web/src/components/alerts/AlertsLayout.tsx
There was a problem hiding this comment.
Beyond the two inline nits, I also checked the candidate that disabling PaymentMethodsRow's trigger might fail to disable an already-open dropdown's action items — verified this isn't a real issue (the dropdown closes/re-renders with the disabled state applied), so ruling it out.
Extended reasoning...
This run re-examined PaymentMethodsView/PaymentMethodsRow for a race where an already-open row dropdown's Set-as-default/Remove items could remain clickable after isInProgress flips true, bypassing the isDisabled prop added in the prior review round. Verifiers confirmed the dropdown menu content is unmounted/remounted with the row (DropdownMenuTrigger's disabled Button prevents reopening, and the menu closes on the mutation-triggered re-render), so this is not exploitable. No new blocking issues were found this run beyond the two inline nits already posted.
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsx (1)
30-38: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winPrevent concurrent setup-intent creation.
Line 36 creates a SetupIntent for every action invocation. A double activation before the popup opens can create multiple unused SetupIntents. Guard
openAddPaymentMethodwhen the popup is open or the mutation is pending.Proposed fix
- const { data: setupIntent, mutate: createSetupIntent, reset: resetSetupIntent, isError: isSetupIntentError } = d.useSetupIntentMutation(); + const { + data: setupIntent, + mutate: createSetupIntent, + reset: resetSetupIntent, + isError: isSetupIntentError, + isPending: isCreatingSetupIntent + } = d.useSetupIntentMutation(); const openAddPaymentMethod = useCallback(() => { + if (isOpen || isCreatingSetupIntent) return; resetSetupIntent(); createSetupIntent(); setIsOpen(true); - }, [createSetupIntent, resetSetupIntent]); + }, [createSetupIntent, isCreatingSetupIntent, isOpen, resetSetupIntent]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsx` around lines 30 - 38, Update openAddPaymentMethod to return without creating another SetupIntent when isOpen is true or the setup-intent mutation is pending; include the mutation’s pending state in the callback dependencies, while preserving the existing reset, create, and open sequence for allowed invocations.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsx`:
- Around line 87-93: Update the dependencies fixture in the test setup to use
mock<typeof DEPENDENCIES> from vitest-mock-extended instead of the unknown cast,
preserving the existing partial overrides for useTheme, useToast,
useSetupIntentMutation, useRefreshPaymentMethods, and AddPaymentMethodPopup.
In `@apps/deploy-web/src/components/home/YourAccount/YourAccount.spec.tsx`:
- Around line 127-128: Update YourAccount cost calculation to avoid returning
early solely because price is absent or isAktPriceLoaded is false; calculate
UACT and USDC lease costs whenever leases are available without requiring AKT
market data. Extend YourAccount.spec.tsx with a test covering unavailable
pricing data and asserting the valid lease costs remain calculated.
In `@apps/deploy-web/src/utils/priceUtils.ts`:
- Around line 71-76: Update getLeasesCostPerBlockUsd so both UACT_DENOM and
usdcDenom amounts are converted with the 6-decimal atomic-unit precision used by
usePricing.udenomToUsd, replacing the current 10-decimal conversion while
preserving the existing denomination handling.
---
Outside diff comments:
In
`@apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsx`:
- Around line 30-38: Update openAddPaymentMethod to return without creating
another SetupIntent when isOpen is true or the setup-intent mutation is pending;
include the mutation’s pending state in the callback dependencies, while
preserving the existing reset, create, and open sequence for allowed
invocations.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7b39f231-4131-4b30-8217-91de7f9f37e1
📒 Files selected for processing (15)
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.tsapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.tsapps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsxapps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.tsxapps/deploy-web/src/components/billing-usage/BillingContainer/BillingContainer.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.spec.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.spec.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.spec.tsxapps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsxapps/deploy-web/src/components/home/YourAccount/YourAccount.spec.tsxapps/deploy-web/src/components/home/YourAccount/YourAccount.tsxapps/deploy-web/src/utils/priceUtils.spec.tsapps/deploy-web/src/utils/priceUtils.ts
🚧 Files skipped from review as they are similar to previous changes (8)
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts
- apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.spec.tsx
- apps/deploy-web/src/components/home/YourAccount/YourAccount.tsx
- apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.spec.tsx
- apps/deploy-web/src/components/billing-usage/BillingView/BillingView.spec.tsx
- apps/deploy-web/src/components/billing-usage/BillingView/BillingView.tsx
- apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsRow.tsx
- apps/deploy-web/src/components/billing-usage/PaymentMethodsView/PaymentMethodsView.tsx
There was a problem hiding this comment.
Beyond the inline finding, I also checked whether getLeasesCostPerBlockUsd silently drops USDC-priced leases from spend/runway calculations. It does, but that matches this PR's stated intent that deployments are now funded in ACT only, so treating other denoms (including USDC) as zero-cost is expected rather than a bug.
Extended reasoning...
This run's only new inline finding is the stale AKT-price guard in YourAccount.tsx (nit). Beyond that, the bug-hunting pass also considered whether getLeasesCostPerBlockUsd (apps/deploy-web/src/utils/priceUtils.ts) incorrectly ignores USDC-denominated lease prices when summing spend, since the type still allows a USDC denom. Verifiers confirmed this is intentional given the PR's premise that deployments are ACT-only going forward, not a functional regression, so it was ruled out. I'm not submitting an approval or a broader deferral note here since this PR already has an unresolved author comment (Type/Description columns in BillingView) from an earlier round that a human should confirm before merge.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.spec.ts (1)
46-61: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse typed
vitest-mock-extendedmocks.Lines 46-61 bypass the dependency contracts with
as unknown as. Create the dependency registry and its integrations withmock()andMockProxy<T>instead. This keeps the test aligned with changes toDEPENDENCIES.As per coding guidelines, tests must use
vitest-mock-extendedhelpers and usemock<T>()instead ofas unknown as <Type>for mocks.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.spec.ts` around lines 46 - 61, Replace the cast-based dependencies object with typed vitest-mock-extended mocks: create the registry and integrations using mock<T>() and MockProxy<T>, including the useServices, useWallet, and useIsFetching dependencies. Preserve the existing mocked API keys, wallet address, and predicate capture behavior while keeping the setup aligned with DEPENDENCIES.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@apps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.spec.ts`:
- Around line 46-61: Replace the cast-based dependencies object with typed
vitest-mock-extended mocks: create the registry and integrations using mock<T>()
and MockProxy<T>, including the useServices, useWallet, and useIsFetching
dependencies. Preserve the existing mocked API keys, wallet address, and
predicate capture behavior while keeping the setup aligned with DEPENDENCIES.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b633e934-1602-4df5-ba14-db181123af69
📒 Files selected for processing (27)
apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/BalanceBreakdownBar.spec.tsxapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.tsapps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.tsapps/deploy-web/src/components/billing-usage/AutoTopUpSection/AutoTopUpSection.tsxapps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.spec.tsxapps/deploy-web/src/components/billing-usage/BillingView/BillingView.tsxapps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.spec.tsapps/deploy-web/src/components/billing-usage/useBillingBackgroundLoading.tsapps/deploy-web/src/components/deployments/DeploymentDetail.tsxapps/deploy-web/src/components/home/YourAccount/YourAccount.spec.tsxapps/deploy-web/src/components/home/YourAccount/YourAccount.tsxapps/deploy-web/src/components/layout/AccountMenu.spec.tsxapps/deploy-web/src/components/layout/AccountMenu.tsxapps/deploy-web/src/components/layout/TopNav/TopNav.spec.tsxapps/deploy-web/src/components/layout/TopNav/TopNav.tsxapps/deploy-web/src/hooks/useSettingsNavLinks.spec.tsapps/deploy-web/src/hooks/useSettingsNavLinks.tsapps/deploy-web/src/hooks/useWalletBalance.tsapps/deploy-web/src/pages/alerts/index.tsxapps/deploy-web/src/pages/alerts/notification-channels/[id]/index.tsxapps/deploy-web/src/pages/alerts/notification-channels/new.tsxapps/deploy-web/src/pages/billing/index.tsxapps/deploy-web/src/pages/usage/index.tsxapps/deploy-web/src/types/feature-flags.ts
💤 Files with no reviewable changes (3)
- apps/deploy-web/src/types/feature-flags.ts
- apps/deploy-web/src/pages/alerts/notification-channels/[id]/index.tsx
- apps/deploy-web/src/components/home/YourAccount/YourAccount.spec.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/BalanceBreakdownBar.spec.tsx
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.spec.tsx
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/AccountBalanceOverview.tsx
- apps/deploy-web/src/components/billing-usage/BillingActionsProvider/BillingActionsProvider.spec.tsx
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.spec.ts
- apps/deploy-web/src/components/billing-usage/AccountBalanceOverview/useAccountBalanceOverview.ts
- apps/deploy-web/src/components/home/YourAccount/YourAccount.tsx
- apps/deploy-web/src/components/billing-usage/BillingView/BillingView.tsx
- apps/deploy-web/src/components/layout/TopNav/TopNav.tsx
Summing deployments[].reservedUsd makes the card total and its badges agree by construction instead of relying on two identical reduces.
- useWalletBalance now computes with price ?? 0 so the Home dashboard shows real ACT/USDC totals during an AKT market-data outage, matching the billing overview behavior - share the isRouteActive predicate between TopNav and useSettingsNavLinks - move the navLink helper above setup in SettingsLayout spec per convention - act-wrap generateToken in useProviderJwt spec to fix a flush race flake
…rd methods - drop the unbacked 'at most once per hour' claim; the reload check has no time-based throttle, it charges when balance crosses the threshold - render the summary and next-top-up estimate even when the default payment method has no card (e.g. Stripe Link), with generic wording
…ehavior - the reserve window is a steady-state target, not a floor, so the caption says 'around 48 hours' instead of 'a minimum of' - show threshold and top-up stats with cents so they match the bar marker for values like 19.99
placeholderData: keepPreviousData stops pagination clicks from swapping the history table for a skeleton; the controls disable via isFetching as intended
keepPreviousData shows the prior page or date range until fresh rows arrive; the opacity cue marks that data as stale in the meantime
ed563e8 to
3637431
Compare
There was a problem hiding this comment.
Beyond the inline finding, I also checked the PR description's claim that pages stay gated by the billing_usage and alerts flags: this PR actually removes both flags from FeatureFlag and drops the isFeatureEnabled guard from /billing, /alerts, and /usage. That's not an access-control gap, though — defineServerSideProps gates every non-public route behind requireAuth by default, so those pages still require a signed-in session; the description line is just stale relative to the diff.
Extended reasoning...
The candidate issue raised this run was that the PR description says billing/alerts/usage pages are "still gated by the existing auto_credit_reload, billing_usage, and alerts flags," while the diff removes billing_usage and alerts from the FeatureFlag union and deletes the isFeatureEnabled(...) guard from those three pages' getServerSideProps. I traced defineServerSideProps.ts and confirmed every route is gated by requireAuth (redirect to /login) by default unless public:true is set, and none of these routes opt out — so removing the two feature flags only removes a rollout gate, not the authentication gate. This is a description/diff mismatch, not a security regression, so I'm not raising it as a bug.
There was a problem hiding this comment.
Beyond the inline nit, I also checked the removal of the billing_usage/alerts feature-flag gating at the page level (feature-flags.ts, pages/billing, pages/usage, pages/alerts) against the PR description's claim of "still gated by the existing flags" — this was examined and ruled out as an intentional flag cleanup rather than a functional regression.
Extended reasoning...
This PR is large (67 files, XL) and touches financially-sensitive billing/wallet-balance code, so it clearly warrants human review regardless of bug severity — this note is informational only, not a full review. A finder flagged that billing_usage, alerts, and auto_credit_reload route guards were dropped from the settings pages, seemingly contradicting the PR description's claim that access is "still gated by the existing flags"; a verifier examined the current routing (the pages no longer call isFeatureEnabled for those flags, and billing_usage/alerts were removed from the FeatureFlag union entirely) and concluded this reflects an intentional retirement of those flags (with auto_credit_reload still gating the balance/auto-top-up UI itself) rather than an access-control regression.
… rest of the card
There was a problem hiding this comment.
I reviewed this PR and did not find any bugs in this run. Given the size of this change (67 files) and that it touches new financial balance/runway/reserve calculations plus a settings-navigation restructuring used across Billing, API Keys, Usage, and Alerts, a human look would still be worthwhile before merging.
What was reviewed:
- Balance/reserved/available/runway math in useAccountBalanceOverview and the balance breakdown bar's segment shading.
- Auto top-up threshold and next-top-up display, and its independence from default-payment-method card presence.
- Billing history pagination and date-range loading states (keepPreviousData usage, background-fetch dimming).
- Checked SettingsLayout's single ErrorBoundary wrapping the whole tab bar on the Alerts page — ruled out as a functional issue since the tabbed content doesn't do anything that would throw during render.
Extended reasoning...
Overview
This PR (XL, 67 files) adds a new Account Balance Overview to the Billing page (total/reserved/available split, runway estimate, per-deployment reserve breakdown bar with an auto-top-up threshold marker) and restructures Settings from per-area tabbed layouts into a single shared left-sidebar SettingsLayout used by Billing, API Keys, Usage, and Alerts. It also introduces a BillingActionsProvider for the add-payment-method flow, a shared UsdValue formatter, a background-loading indicator for billing queries, and removes the now-unused alerts/billing_usage feature flags (these pages now render unconditionally, gated only by auth).
Security risks
No new auth, crypto, or permission logic is introduced. The main risk surface is financial display correctness (balance/reserve/runway math, auto-top-up threshold copy) rather than security — an incorrect number here could mislead a user about their spendable balance, but it does not affect what is actually charged, since all mutation paths (auto top-up settings, payment methods, setup intents) go through existing, unchanged backend endpoints.
Level of scrutiny
Given the size of the diff, the financial nature of the new balance/runway calculations, and the number of real correctness issues already found and fixed across this PR's review history (loading/error-state regressions, USD formatting drift between components, a pagination-flicker bug, a stale feature-flag type error, drained-deployment color skew), this still warrants a human look even though the current run found no new issues.
Other factors
Test coverage is extensive (63 new/updated specs), and prior review rounds already surfaced and got fixes for multiple substantive issues. This run re-examined one previously-raised design question — SettingsLayout's single ErrorBoundary wrapping the whole tab bar on the Alerts page — and concluded it is not a functional problem in the current code.
2 participants
Why
Once escrow is hidden (CON-733), the balance a user sees isn't all spendable: part is committed to keeping running deployments alive. Billing now shows that split so the number makes sense. This PR also restructures Settings from per-area tabs into a single left sidebar, following the design mockups.
Closes CON-739. Part of CON-733.
What
Screen.Recording.2026-08-12.at.2.08.13.AM.mov
Two commits.
feat(billing): account balance overview. Total = Available + Reserved, shown as a segmented bar broken down per running deployment plus a green Available slice, with a runway line (days left and "lasts until", or an Auto Recharge reassurance when it's on). Wording avoids "escrow" and "deposit". Every value comes from data the client already has (
useWalletBalanceplus live leases), so there's no API change. The oldAccountOverviewsplits intoAddToBalanceButtonandAutoTopUpSection, and the per-block spend math is now shared with the home dashboard.refactor(billing): settings sidebar. A shared
SettingsLayoutrenders a left nav (Billing, API Keys, Usage, Alerts) backed by oneuseSettingsNavLinksthat the top-nav dropdown also reuses. Payment Methods becomes a section on Billing and Notification Channels a section on Alerts; the per-area tab layouts are removed and the old/payment-methodsand/alerts/notification-channelsroutes redirect to their new homes.Still gated by the existing
auto_credit_reload,billing_usage, andalertsflags. No new flag.Testing
tsc --noEmitandlint --quietreport nothing new against the repo's existing baseline.I couldn't drive the authenticated page render headlessly (SSR auth needs a real session), so the visual is worth a quick local check against the mockups.
Summary by CodeRabbit
New Features
Updates
Tests