feat(deployment): implement trial deployment badge#1764
Conversation
WalkthroughThis change introduces a "Trial Deployment Badge" feature across the deployment web app. It adds a reusable badge and tooltip component, a custom hook for calculating trial time remaining, and integrates them into various UI locations, conditionally displaying the badge based on a feature flag and wallet trial status. Supporting tests, environment configuration, and minor UI adjustments are also included. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant useFlag
participant useWallet
participant TrialDeploymentBadge
participant useTrialDeploymentTimeRemaining
participant TrialDeploymentTooltip
User->>UI_Component: Loads deployment/account UI
UI_Component->>useFlag: Get "anonymous_free_trial" flag
UI_Component->>useWallet: Get isTrialing status
alt !anonymous_free_trial && isTrialing
UI_Component->>TrialDeploymentBadge: Render with createdHeight
TrialDeploymentBadge->>useTrialDeploymentTimeRemaining: Calculate trial time left
TrialDeploymentBadge->>TrialDeploymentTooltip: Show tooltip with trial info
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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 (
|
❌ 2 Tests Failed:
View the top 2 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.ts (1)
65-91: Consider making refetch interval configurable.The hook implementation is excellent with proper memoization and dependency injection. However, the hardcoded 30-second refetch interval could benefit from being configurable.
Consider making the refetch interval a parameter:
export function useTrialDeploymentTimeRemaining({ createdHeight, trialDurationHours, averageBlockTime = 6, + refetchInterval = 30000, dependencies: d = DEPENDENCIES }: UseTrialDeploymentTimeRemainingProps) { const { data: latestBlock } = d.useBlock("latest", { - refetchInterval: 30000 + refetchInterval });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
apps/deploy-web/src/components/deployments/DeploymentListRow.tsx(5 hunks)apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx(3 hunks)apps/deploy-web/src/components/home/YourAccount.tsx(6 hunks)apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx(2 hunks)apps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx(1 hunks)apps/deploy-web/src/components/shared/TrialDeploymentBadge.tsx(1 hunks)apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsx(1 hunks)apps/deploy-web/src/components/shared/TrialDeploymentTooltip.tsx(1 hunks)apps/deploy-web/src/components/shared/index.ts(1 hunks)apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx(1 hunks)apps/deploy-web/src/config/browser-env.config.ts(1 hunks)apps/deploy-web/src/config/env-config.schema.ts(1 hunks)apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.ts(1 hunks)apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.ts(1 hunks)packages/ui/components/pagination.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/general.mdc)
Never use type any or cast to type any. Always define the proper TypeScript types.
Files:
packages/ui/components/pagination.tsxapps/deploy-web/src/components/shared/index.tsapps/deploy-web/src/components/new-deployment/ManifestEdit.tsxapps/deploy-web/src/config/env-config.schema.tsapps/deploy-web/src/config/browser-env.config.tsapps/deploy-web/src/components/shared/TrialDeploymentTooltip.tsxapps/deploy-web/src/components/deployments/DeploymentSubHeader.tsxapps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/wallet/ManagedWalletPopup.tsxapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsxapps/deploy-web/src/components/deployments/DeploymentListRow.tsxapps/deploy-web/src/components/shared/TrialDeploymentBadge.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.tsapps/deploy-web/src/components/home/YourAccount.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/general.mdc)
**/*.{js,ts,tsx}: Never use deprecated methods from libraries.
Don't add unnecessary comments to the code
Files:
packages/ui/components/pagination.tsxapps/deploy-web/src/components/shared/index.tsapps/deploy-web/src/components/new-deployment/ManifestEdit.tsxapps/deploy-web/src/config/env-config.schema.tsapps/deploy-web/src/config/browser-env.config.tsapps/deploy-web/src/components/shared/TrialDeploymentTooltip.tsxapps/deploy-web/src/components/deployments/DeploymentSubHeader.tsxapps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/wallet/ManagedWalletPopup.tsxapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsxapps/deploy-web/src/components/deployments/DeploymentListRow.tsxapps/deploy-web/src/components/shared/TrialDeploymentBadge.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.tsapps/deploy-web/src/components/home/YourAccount.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/no-jest-mock.mdc)
Don't use
jest.mock()to mock dependencies in test files. Instead, usejest-mock-extendedto create mocks and pass mocks as dependencies to the service under test.
**/*.spec.{ts,tsx}: Usesetupfunction instead ofbeforeEachin test files
setupfunction must be at the bottom of the rootdescribeblock in test files
setupfunction creates an object under test and returns it
setupfunction should accept a single parameter with inline type definition
Don't use shared state insetupfunction
Don't specify return type ofsetupfunction
Files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
apps/{deploy-web,provider-console}/**/*.spec.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/query-by-in-tests.mdc)
Use
queryBymethods instead ofgetBymethods in test expectations in.spec.tsxfiles
Files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
🧠 Learnings (14)
📓 Common learnings
Learnt from: baktun14
PR: akash-network/console#1725
File: apps/api/src/utils/constants.ts:5-5
Timestamp: 2025-07-24T17:00:52.361Z
Learning: In the Akash Network Console project, when cross-cutting concerns or broader refactoring issues are identified during PR review, the preferred approach is to create a separate GitHub issue to track the work rather than expanding the scope of the current PR. This maintains focus and allows for proper planning of architectural improvements.
📚 Learning: in the akash network console project, backend-specific feature flags are intentional and acceptable....
Learnt from: stalniy
PR: akash-network/console#1480
File: apps/deploy-web/src/hooks/useFlag.tsx:0-0
Timestamp: 2025-07-28T10:40:13.595Z
Learning: In the Akash Network Console project, backend-specific feature flags are intentional and acceptable. The frontend FeatureFlag union type should only include flags that are actually used by the frontend, not all flags defined in the backend. Backend can have internal feature flags for backend-only functionality without requiring frontend synchronization.
Applied to files:
apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsxapps/deploy-web/src/components/deployments/DeploymentListRow.tsxapps/deploy-web/src/components/home/YourAccount.tsx
📚 Learning: the contactpointselect component in apps/deploy-web/src/components/alerts/contactpointselectform/con...
Learnt from: baktun14
PR: akash-network/console#1432
File: apps/deploy-web/src/components/deployments/DeploymentAlerts/DeploymentCloseAlert.tsx:38-38
Timestamp: 2025-06-05T21:07:51.985Z
Learning: The ContactPointSelect component in apps/deploy-web/src/components/alerts/ContactPointSelectForm/ContactPointSelect.tsx uses the useFormContext hook internally to connect to React Hook Form, so it doesn't need to be wrapped in a FormField component.
Applied to files:
apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsxapps/deploy-web/src/components/deployments/DeploymentListRow.tsxapps/deploy-web/src/components/home/YourAccount.tsx
📚 Learning: applies to apps/{deploy-web,provider-console}/**/*.spec.tsx : use `queryby` methods instead of `getb...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/query-by-in-tests.mdc:0-0
Timestamp: 2025-07-21T08:24:27.953Z
Learning: Applies to apps/{deploy-web,provider-console}/**/*.spec.tsx : Use `queryBy` methods instead of `getBy` methods in test expectations in `.spec.tsx` files
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: in apps/{deploy-web,provider-console}/**/*.spec.tsx files: use `getby` methods instead of `queryby` ...
Learnt from: stalniy
PR: akash-network/console#1660
File: apps/deploy-web/src/components/alerts/DeploymentAlertsContainer/DeploymentAlertsContainer.spec.tsx:54-56
Timestamp: 2025-07-11T10:46:43.711Z
Learning: In apps/{deploy-web,provider-console}/**/*.spec.tsx files: Use `getBy` methods instead of `queryBy` methods when testing element presence with `toBeInTheDocument()` because `getBy` throws an error and shows DOM state when element is not found, providing better debugging information than `queryBy` which returns null.
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : use `setup` function instead of `beforeeach` in test files...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Use `setup` function instead of `beforeEach` in test files
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : don't use shared state in `setup` function...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't use shared state in `setup` function
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : `setup` function creates an object under test and returns it...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : `setup` function creates an object under test and returns it
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : don't use `jest.mock()` to mock dependencies in test files. instead,...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/no-jest-mock.mdc:0-0
Timestamp: 2025-07-21T08:24:24.269Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't use `jest.mock()` to mock dependencies in test files. Instead, use `jest-mock-extended` to create mocks and pass mocks as dependencies to the service under test.
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : `setup` function must be at the bottom of the root `describe` block ...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : `setup` function must be at the bottom of the root `describe` block in test files
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.tsapps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : `setup` function should accept a single parameter with inline type d...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : `setup` function should accept a single parameter with inline type definition
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsx
📚 Learning: applies to **/*.spec.{ts,tsx} : don't specify return type of `setup` function...
Learnt from: CR
PR: akash-network/console#0
File: .cursor/rules/setup-instead-of-before-each.mdc:0-0
Timestamp: 2025-07-21T08:25:07.474Z
Learning: Applies to **/*.spec.{ts,tsx} : Don't specify return type of `setup` function
Applied to files:
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsxapps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.ts
📚 Learning: in react hook form setups with zod validation, child components using useformcontext() can rely on p...
Learnt from: ygrishajev
PR: akash-network/console#1512
File: apps/deploy-web/src/components/deployments/DeploymentBalanceAlert/DeploymentBalanceAlert.tsx:47-68
Timestamp: 2025-06-19T16:00:05.428Z
Learning: In React Hook Form setups with zod validation, child components using useFormContext() can rely on parent form validation rather than implementing local input validation. Invalid inputs like NaN from parseFloat() are handled by the parent schema validation, eliminating the need for additional local validation in child components.
Applied to files:
apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
📚 Learning: the `getproviderearningsatheight` function in `apps/api/src/services/db/statsservice.ts` is designed...
Learnt from: devalpatel67
PR: akash-network/console#1646
File: apps/api/src/provider/services/provider-earnings/provider-earnings.service.ts:41-41
Timestamp: 2025-07-09T03:30:51.075Z
Learning: The `getProviderEarningsAtHeight` function in `apps/api/src/services/db/statsService.ts` is designed to be flexible and can be used for different earnings calculations: (1) For total lifetime earnings, pass `provider.createdHeight` as the second parameter, (2) For date-range earnings, pass `fromBlock.height` as the second parameter. The second parameter acts as a lower bound and the third parameter as an upper bound for the earnings calculation.
Applied to files:
apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.ts
🧬 Code Graph Analysis (3)
apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx (2)
apps/deploy-web/src/components/shared/TrialDeploymentBadge.tsx (1)
TrialDeploymentBadge(26-49)apps/deploy-web/src/components/shared/index.ts (1)
TrialDeploymentBadge(4-4)
apps/deploy-web/src/components/shared/TrialDeploymentTooltip.tsx (4)
apps/deploy-web/src/components/shared/TrialDeploymentBadge.tsx (1)
DEPENDENCIES(19-24)apps/deploy-web/src/context/ServicesProvider/ServicesProvider.tsx (1)
useServices(28-30)apps/provider-console/src/utils/styleUtils.ts (1)
cn(4-6)packages/ui/components/button.tsx (1)
buttonVariants(46-46)
apps/deploy-web/src/components/home/YourAccount.tsx (7)
apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx (1)
useWallet(355-357)apps/deploy-web/src/hooks/useFlag.tsx (1)
useFlag(13-13)apps/deploy-web/src/components/shared/TrialDeploymentBadge.tsx (1)
TrialDeploymentBadge(26-49)apps/deploy-web/src/components/user/AddFundsLink.tsx (1)
AddFundsLink(10-32)apps/provider-console/src/utils/styleUtils.ts (1)
cn(4-6)packages/ui/components/button.tsx (1)
buttonVariants(46-46)apps/deploy-web/src/utils/urlUtils.ts (1)
UrlService(16-81)
⏰ 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: test-build
- GitHub Check: test-build
🔇 Additional comments (33)
apps/deploy-web/src/config/browser-env.config.ts (1)
17-17: LGTM!The environment variable addition follows the established naming convention and is properly placed within the configuration object.
apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.ts (1)
26-48: Well-structured calculation function.The
calculateTrialTimeRemainingfunction properly handles edge cases and provides clear return types. The logic for calculating blocks and time remaining is sound.apps/deploy-web/src/components/shared/index.ts (1)
4-4: LGTM!The export statement follows the established pattern and makes the TrialDeploymentBadge component available through the shared components index.
apps/deploy-web/src/config/env-config.schema.ts (1)
21-21: LGTM!The environment variable schema addition follows established patterns with proper type coercion and a sensible default value of 24 hours.
apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx (2)
40-40: LGTM!The import follows the established pattern for shared components.
457-461: Consistent conditional rendering implementation.The trial badge is properly conditionally rendered based on the feature flag and trial status, consistent with the pattern used in other components. The placement within the modal's info text is appropriate.
apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx (1)
73-74: LGTM! UI consistency improvement.The reordering of the "Add Funds" text and HandCard icon with proper spacing enhances visual consistency across the application. The
whitespace-nowrapclass prevents awkward text wrapping.packages/ui/components/pagination.tsx (1)
37-44: LGTM! Enhanced pagination styling.The changes improve the visual distinction between active and inactive pagination links:
- Using "text" variant for better contrast
- Clear active state styling with background colors
- Consistent cursor behavior
apps/deploy-web/src/components/deployments/DeploymentSubHeader.tsx (4)
14-14: LGTM! Feature flag hook import.The
useFlaghook import is properly added to support the trial deployment badge feature.
19-19: LGTM! Component import.The
TrialDeploymentBadgeimport is correctly added from the shared components.
35-36: LGTM! Consistent pattern implementation.The feature flag check and wallet context usage follow the established pattern across the codebase. The logic correctly shows the badge only when the anonymous free trial is disabled and the user is trialing.
133-133: LGTM! Proper conditional rendering.The trial deployment badge is conditionally rendered with the correct props. The
createdHeightprop fromdeployment.createdAtis appropriate for calculating trial timing.apps/deploy-web/src/components/deployments/DeploymentListRow.tsx (5)
26-26: LGTM! Feature flag hook import.The
useFlaghook import is properly added to support the trial deployment badge feature.
39-39: LGTM! Component import.The
TrialDeploymentBadgeimport is correctly added from the shared components.
65-65: LGTM! Consistent wallet context usage.The
isTrialingproperty is properly extracted from the wallet context, maintaining consistency with other components.
89-89: LGTM! Consistent feature flag usage.The feature flag check follows the established pattern across the codebase.
186-190: LGTM! Well-positioned trial badge.The trial deployment badge is appropriately placed within the deployment name cell with proper spacing (
mt-2). The conditional logic and props are correct.apps/deploy-web/src/components/home/YourAccount.tsx (6)
18-18: LGTM! Feature flag hook import.The
useFlaghook import is properly added to support the trial deployment badge feature.
29-29: LGTM! Component import.The
TrialDeploymentBadgeimport is correctly added from the shared components.
46-46: LGTM! Consistent wallet context usage.The
isTrialingproperty is properly extracted from the wallet context, maintaining consistency with other components.
60-60: LGTM! Consistent feature flag usage.The feature flag check follows the established pattern across the codebase.
162-162: LGTM! Appropriate badge placement.The trial deployment badge is well-positioned in the CardHeader, providing clear trial status visibility in the account overview. The conditional logic is consistent with other components.
234-240: LGTM! Consistent UI refinements.The icon positioning and text wrapping improvements align with similar changes in
ManagedWalletPopup.tsx, ensuring consistent visual design across the application.apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.ts (1)
28-258: Excellent test coverage and logic.The test suite comprehensively covers all scenarios including edge cases, different block times, trial durations, and missing parameters. The assertions properly verify the hook's behavior in various states.
apps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx (2)
9-147: Excellent test coverage for component behavior.The test suite comprehensively covers various scenarios including expired/active states, custom configurations, edge cases, and proper rendering verification.
12-12: Use getBy methods for toBeInTheDocument() assertions.According to coding guidelines, use
getBymethods instead ofqueryBymethods when testing element presence withtoBeInTheDocument()becausegetBythrows an error and shows DOM state when element is not found, providing better debugging information.- expect(screen.queryByText("Trial")).toBeInTheDocument(); + expect(screen.getByText("Trial")).toBeInTheDocument();Apply this pattern to all similar assertions in the file.
Also applies to: 18-19, 27-28
⛔ Skipped due to learnings
Learnt from: stalniy PR: akash-network/console#1660 File: apps/deploy-web/src/components/alerts/DeploymentAlertsContainer/DeploymentAlertsContainer.spec.tsx:54-56 Timestamp: 2025-07-11T10:46:43.711Z Learning: In apps/{deploy-web,provider-console}/**/*.spec.tsx files: Use `getBy` methods instead of `queryBy` methods when testing element presence with `toBeInTheDocument()` because `getBy` throws an error and shows DOM state when element is not found, providing better debugging information than `queryBy` which returns null.Learnt from: CR PR: akash-network/console#0 File: .cursor/rules/query-by-in-tests.mdc:0-0 Timestamp: 2025-07-21T08:24:27.953Z Learning: Applies to apps/{deploy-web,provider-console}/**/*.spec.tsx : Use `queryBy` methods instead of `getBy` methods in test expectations in `.spec.tsx` filesLearnt from: CR PR: akash-network/console#0 File: .cursor/rules/setup-instead-of-before-each.mdc:0-0 Timestamp: 2025-07-21T08:25:07.474Z Learning: Applies to **/*.spec.{ts,tsx} : Use `setup` function instead of `beforeEach` in test filesLearnt from: CR PR: akash-network/console#0 File: .cursor/rules/no-jest-mock.mdc:0-0 Timestamp: 2025-07-21T08:24:24.269Z Learning: Applies to **/*.spec.{ts,tsx} : Don't use `jest.mock()` to mock dependencies in test files. Instead, use `jest-mock-extended` to create mocks and pass mocks as dependencies to the service under test.Learnt from: CR PR: akash-network/console#0 File: .cursor/rules/setup-instead-of-before-each.mdc:0-0 Timestamp: 2025-07-21T08:25:07.474Z Learning: Applies to **/*.spec.{ts,tsx} : `setup` function must be at the bottom of the root `describe` block in test filesapps/deploy-web/src/components/shared/TrialDeploymentTooltip.spec.tsx (1)
9-132: Excellent test implementation following coding guidelines.The test suite properly uses
getBymethods fortoBeInTheDocument()assertions, follows the setup function pattern, uses appropriate mocking withComponentMock, and provides comprehensive coverage of all tooltip states and edge cases.apps/deploy-web/src/components/shared/TrialDeploymentTooltip.tsx (3)
10-28: Well-structured component with proper TypeScript and dependency injection.The component uses clear TypeScript types, implements dependency injection for testability, and has a clean props interface. The structure follows React best practices.
29-64: Clear and logical conditional rendering.The component properly handles three distinct states (no creation height, expired trial, active trial) with appropriate content for each scenario. The logic is easy to follow and maintainable.
66-77: Well-implemented AddFunds component with proper service integration.The AddFunds component correctly uses the services context to get the payment URL, applies proper styling, includes an appropriate icon, and follows the dependency injection pattern consistently.
apps/deploy-web/src/components/shared/TrialDeploymentBadge.tsx (3)
11-17: Well-designed props interface with appropriate optional parameters.The props interface uses proper TypeScript types, implements dependency injection correctly, and provides reasonable defaults for optional parameters.
26-33: Proper hook integration with environment config fallback.The component correctly integrates with the custom hook, provides appropriate fallback to environment configuration for trial duration, and cleanly destructures the needed values.
35-49: Excellent UI implementation with proper accessibility and conditional styling.The component properly integrates tooltip functionality, uses conditional styling based on trial state, includes appropriate accessibility features (cursor-help), and implements clean styling with utility functions.
apps/deploy-web/src/components/shared/TrialDeploymentBadge.spec.tsx
Outdated
Show resolved
Hide resolved
apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.ts
Outdated
Show resolved
Hide resolved
apps/deploy-web/src/hooks/useTrialDeploymentTimeRemaining.spec.ts
Outdated
Show resolved
Hide resolved
| averageBlockTime?: number; | ||
| }) { | ||
| return withTimers(() => { | ||
| const mockUseBlock = mockFn<() => UseQueryResult<BlockResponse, Error>>(); |
There was a problem hiding this comment.
question(non-blocking): what is the purpose of using mockFn instead of jest.fn()?
There was a problem hiding this comment.
Going to revert in next another or thanks
| trialDurationHours: input.trialDurationHours, | ||
| averageBlockTime: input.averageBlockTime, | ||
| dependencies: { | ||
| useBlock: mockUseBlock |
There was a problem hiding this comment.
suggestion(non-blocking): I'd recommend whenever possible to use hook implementation and mock only service because then we do a little bigger scope with no additional efforts.
We have setupQuery testing helper which encapsulates tests setup for hooks. It also includes built-in support for dependency injection (ie., passing mocks for services) and configuring queryClient specifically for testing
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/api/env/.env (1)
3-3: Re-order the key to satisfydotenv-linterand keep the.envalphabetized.The linter warns that
TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNTshould precedeWEBSITE_URL. While ordering has no runtime impact, leaving the warning unattended can break CI in repos that treat linter output as hard-fail.
Apply the one-line move:-CORS_WEBSITE_URLS=… -WEBSITE_URL=https://console-beta.akash.network -TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNT=10000000 +CORS_WEBSITE_URLS=… +TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNT=10000000 +WEBSITE_URL=https://console-beta.akash.networkPlease confirm that all environments (staging, prod, etc.) are updated with the new
10 000 000value so the frontend’s trial-badge logic aligns with the API limits. If any infra still points to the old100 000 000, users could receive inconsistent allowance errors.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/api/env/.env(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: baktun14
PR: akash-network/console#1725
File: apps/api/src/utils/constants.ts:5-5
Timestamp: 2025-07-24T17:00:52.361Z
Learning: In the Akash Network Console project, when cross-cutting concerns or broader refactoring issues are identified during PR review, the preferred approach is to create a separate GitHub issue to track the work rather than expanding the scope of the current PR. This maintains focus and allows for proper planning of architectural improvements.
📚 Learning: the alert.console_web_url environment variable in the notifications app is controlled and configured...
Learnt from: ygrishajev
PR: akash-network/console#1461
File: apps/notifications/src/modules/alert/services/deployment-alert/deployment-alert.service.ts:194-197
Timestamp: 2025-06-10T14:19:14.122Z
Learning: The alert.CONSOLE_WEB_URL environment variable in the notifications app is controlled and configured by the Akash team, reducing XSS concerns for HTML link generation in alert messages.
Applied to files:
apps/api/env/.env
🪛 dotenv-linter (3.3.0)
apps/api/env/.env
[warning] 3-3: [UnorderedKey] The TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNT key should go before the WEBSITE_URL key
⏰ 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)
- GitHub Check: validate / validate-app
- GitHub Check: test-build
- GitHub Check: test-build
- GitHub Check: validate / validate-app
- GitHub Check: test-build
- GitHub Check: test-build
- GitHub Check: Validate local packages
* feat(deployment): implement trial deployment badge * test(deployment): fix tests * fix(billing): trial deployment time remaining * fix: pr fix * fix: remove comments * fix: pr fixes * fix: revert trial amount to 10
2 participants
#1700
Summary by CodeRabbit
New Features
Bug Fixes / Style
Tests
Documentation