Conversation
WalkthroughExtended image scaling support across the component hierarchy by introducing Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
generated/models/ApiCreateTdhGrant.tsis excluded by!**/generated/**generated/models/ApiPageSortDirection.tsis excluded by!**/generated/**generated/models/ApiTdhEdition.tsis excluded by!**/generated/**generated/models/ApiTdhEditionsPage.tsis excluded by!**/generated/**generated/models/ApiTdhGrant.tsis excluded by!**/generated/**generated/models/ApiTdhGrantStatus.tsis excluded by!**/generated/**generated/models/ApiTdhGrantTargetChain.tsis excluded by!**/generated/**generated/models/ApiTdhGrantsPage.tsis excluded by!**/generated/**generated/models/ObjectSerializer.tsis excluded by!**/generated/**
📒 Files selected for processing (12)
__tests__/components/DropListItemContentMediaImage.test.tsx(1 hunks)components/drops/view/item/content/media/DropListItemContentMedia.tsx(3 hunks)components/drops/view/item/content/media/DropListItemContentMediaImage.tsx(5 hunks)components/waves/drop/MemesSingleWaveDropInfoPanel.tsx(2 hunks)components/waves/drop/SingleWaveDropContent.tsx(2 hunks)components/waves/drops/WaveDropContent.tsx(4 hunks)components/waves/drops/WaveDropPart.tsx(4 hunks)components/waves/drops/WaveDropPartContent.tsx(4 hunks)components/waves/drops/WaveDropPartContentMedias.tsx(2 hunks)components/waves/drops/WaveDropPartDrop.tsx(4 hunks)helpers/image.helpers.ts(1 hunks)openapi.yaml(7 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before propsUse TypeScript across the codebase
Files:
components/waves/drops/WaveDropPartContent.tsxcomponents/waves/drops/WaveDropPartContentMedias.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/drops/WaveDropPart.tsxcomponents/drops/view/item/content/media/DropListItemContentMedia.tsxhelpers/image.helpers.tscomponents/drops/view/item/content/media/DropListItemContentMediaImage.tsxcomponents/waves/drops/WaveDropPartDrop.tsxcomponents/waves/drops/WaveDropContent.tsxcomponents/waves/drop/SingleWaveDropContent.tsx__tests__/components/DropListItemContentMediaImage.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for stylingUse React functional components with hooks for UI components
Files:
components/waves/drops/WaveDropPartContent.tsxcomponents/waves/drops/WaveDropPartContentMedias.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/drops/WaveDropPart.tsxcomponents/drops/view/item/content/media/DropListItemContentMedia.tsxcomponents/drops/view/item/content/media/DropListItemContentMediaImage.tsxcomponents/waves/drops/WaveDropPartDrop.tsxcomponents/waves/drops/WaveDropContent.tsxcomponents/waves/drop/SingleWaveDropContent.tsx__tests__/components/DropListItemContentMediaImage.test.tsx
__tests__/**
📄 CodeRabbit inference engine (tests/AGENTS.md)
Place Jest test suites under the
__tests__directory mirroring source folders (e.g., components, contexts, hooks, utils)
Files:
__tests__/components/DropListItemContentMediaImage.test.tsx
__tests__/components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (tests/AGENTS.md)
Use
@testing-library/reactand@testing-library/user-eventfor React component tests
Files:
__tests__/components/DropListItemContentMediaImage.test.tsx
**/__tests__/**
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__directories when organizing test suites
Files:
__tests__/components/DropListItemContentMediaImage.test.tsx
**/*.test.tsx
📄 CodeRabbit inference engine (AGENTS.md)
When colocating tests with components, name them
ComponentName.test.tsx
Files:
__tests__/components/DropListItemContentMediaImage.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/DropListItemContentMediaImage.test.tsx
🧠 Learnings (12)
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Keep mocks up to date with the real implementations they represent
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Keep mock implementations minimal—only what’s necessary for the test scenarios
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Document non-obvious expected behaviour directly in the mock file
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-10-23T06:36:34.125Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: AGENTS.md:0-0
Timestamp: 2025-10-23T06:36:34.125Z
Learning: Applies to **/*.test.{ts,tsx} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Mock only external dependencies or heavy functionality; avoid over-mocking internal logic
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:30.950Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:30.950Z
Learning: Applies to __tests__/components/**/*.{ts,tsx,js,jsx} : Use `testing-library/react` and `testing-library/user-event` for React component tests
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Review mocks periodically and remove unused mock modules
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Name mock files to mirror the real module names so jest.mock('module') can pick them up automatically
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Organise mocks to mirror the real module structure so import paths remain consistent
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Use Jest’s built-in mocking for module replacement; keep manual mocks simple and lightweight
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/*.{test,spec}.{js,jsx,ts,tsx} : In tests, use jest.mock('module') with a bare module specifier to load the corresponding manual mock
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
📚 Learning: 2025-09-28T12:33:07.561Z
Learnt from: CR
PR: 6529-Collections/6529seize-frontend#0
File: __mocks__/AGENTS.md:0-0
Timestamp: 2025-09-28T12:33:07.561Z
Learning: Applies to __mocks__/**/__mocks__/**/*.{js,jsx,ts,tsx} : Place manual mock modules under a __mocks__ directory so Jest can auto-resolve them
Applied to files:
__tests__/components/DropListItemContentMediaImage.test.tsx
🧬 Code graph analysis (2)
components/waves/drops/WaveDropPartContentMedias.tsx (1)
generated/models/ApiDropPart.ts (1)
ApiDropPart(17-60)
components/drops/view/item/content/media/DropListItemContentMediaImage.tsx (1)
helpers/image.helpers.ts (1)
getScaledImageUri(16-44)
🔇 Additional comments (17)
openapi.yaml (5)
5782-5786: Good addition: ApiPageSortDirection enum for consistency.The new
ApiPageSortDirectionenum (ASC/DESC) properly standardizes sort direction handling across paginated endpoints. This aligns well with existing paging conventions used in other endpoints like/aggregated-activityand/waves/{id}/leaderboard.
2230-2303: TDH Edition endpoints well-structured with consistent parameter patterns.The three new TDH Edition endpoints (
/tdh-editions/wallet/{wallet},/tdh-editions/consolidation/{consolidation_key},/tdh-editions/identity/{identity}) follow established API patterns:
- Consistent filtering by contract, token_id, edition_id
- Proper pagination with page, page_size defaults (50 max)
- Sorting support with reasonable defaults
- Appropriate error responses (400 for wallet validation, 404 for not found)
6308-6338: ApiCreateTdhGrant schema properly defined with required fields.The
ApiCreateTdhGrantschema correctly specifies required creation fields (target_chain, target_contract, target_tokens, valid_to, tdh_rate, is_irrevocable) and includes helpful descriptions for token ranges and irrevocable flag semantics. Consistent with other creation request schemas in the spec.
6158-6205: TDH Edition schemas align with existing patterns for paged responses.
ApiTdhEditionandApiTdhEditionsPagefollow the established pattern used byApiNftOwner/ApiNftOwnerPageand other paged entities. Proper inclusion of optional fields (wallet, consolidation_key, profile) and required core fields (contract, id, edition_id, balance, hodl_rate, days_held).
6205-6276: TDH Grant schemas properly structured with status enum and page wrapper.
ApiTdhGrantincludes appropriate required fields and properly referencesApiTdhGrantStatusenum (PENDING/FAILED/GRANTED) andApiTdhGrantTargetChainenum (ETHEREUM_MAINNET).ApiTdhGrantsPagecorrectly wraps results usingApiPageBasefor pagination metadata consistency.components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (1)
24-24: LGTM! Image scale integration looks good.The import and prop passing are clean. Using
AUTOx1080for the info panel makes sense for displaying higher-quality images in the detail view.Also applies to: 90-90
components/waves/drop/SingleWaveDropContent.tsx (1)
7-7: LGTM! Consistent image scale usage.The changes correctly integrate the image scale prop and consistently use
AUTOx1080for single wave drop content.Also applies to: 26-26
components/waves/drops/WaveDropPart.tsx (1)
7-7: LGTM! Proper prop threading with sensible defaults.The changes correctly add and forward the
mediaImageScaleprop with a sensible default ofAUTOx450, maintaining backward compatibility.Also applies to: 22-22, 42-42, 135-135
helpers/image.helpers.ts (1)
5-6: LGTM! Clean enum extension.The new
AUTOx800andAUTOx1080values follow the existing naming pattern and integrate seamlessly with the existinggetScaledImageUrifunction.components/waves/drops/WaveDropPartContent.tsx (1)
11-11: LGTM! Consistent prop threading.The changes properly add the
mediaImageScaleprop with a default value and forward it correctly toWaveDropPartContentMedias.Also applies to: 30-30, 50-50, 136-140
components/drops/view/item/content/media/DropListItemContentMedia.tsx (1)
4-4: LGTM! Proper image scale integration.The changes correctly add the
imageScaleprop with a sensible default and forward it only to the image media component, which is appropriate since scaling is image-specific.Also applies to: 28-29, 35-35, 66-66
components/waves/drops/WaveDropPartDrop.tsx (1)
6-6: LGTM! Proper prop addition and forwarding.The changes correctly add the
mediaImageScaleprop with a default value and forward it toWaveDropPartContent, following the established pattern in this file.Also applies to: 22-22, 39-39, 63-63
components/waves/drops/WaveDropPartContentMedias.tsx (1)
5-5: LGTM! Clean prop threading for image scaling.The imageScale prop is properly integrated with appropriate typing, readonly modifier, and sensible default value. The prop is correctly passed down to DropListItemContentMedia only in the interactive path.
Also applies to: 11-11, 18-18, 44-44
components/waves/drops/WaveDropContent.tsx (1)
5-5: LGTM! Consistent prop forwarding pattern.The mediaImageScale prop follows the same clean pattern as related components, with proper TypeScript typing, readonly modifier, and consistent default value.
Also applies to: 21-21, 38-38, 54-54
components/drops/view/item/content/media/DropListItemContentMediaImage.tsx (3)
35-35: LGTM! ImageScale prop properly integrated.The imageScale prop is correctly typed with readonly modifier and given a sensible default value matching the other components in this PR.
Also applies to: 41-41
50-50: LGTM! Modal image fullscreen integration is correct.The addition of
modalImageRefand its integration with the fullscreen handler is well-implemented. The fallback chainmodalImageRef.current ?? imgRef.currentensures fullscreen works correctly whether the modal is open or not. The change to an empty dependency array[]is appropriate since refs are stable objects.Also applies to: 97-102, 149-149
278-278: LGTM! Key functional improvement implemented.Replacing the hardcoded
ImageScale.AUTOx450with the configurableimageScaleprop enables the scaling flexibility that is the core objective of this PR.
| jest.mock('@/helpers/image.helpers', () => ({ | ||
| getScaledImageUri: (_src: string) => _src, | ||
| ImageScale: { AUTOx450: 'AUTOx450' }, | ||
| ImageScale: { AUTOx450: 'AUTOx450', AUTOx1080: 'AUTOx1080' }, | ||
| })); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Update mock to include all ImageScale enum values.
The mock is missing AUTOx800 from the ImageScale enum. For completeness and to prevent future test issues, include all enum values from the real implementation.
Apply this diff:
jest.mock('@/helpers/image.helpers', () => ({
getScaledImageUri: (_src: string) => _src,
- ImageScale: { AUTOx450: 'AUTOx450', AUTOx1080: 'AUTOx1080' },
+ ImageScale: {
+ W_AUTO_H_50: 'AUTOx50',
+ W_200_H_200: '200x200',
+ AUTOx450: 'AUTOx450',
+ AUTOx800: 'AUTOx800',
+ AUTOx1080: 'AUTOx1080'
+ },
}));Based on learnings
📝 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.
| jest.mock('@/helpers/image.helpers', () => ({ | |
| getScaledImageUri: (_src: string) => _src, | |
| ImageScale: { AUTOx450: 'AUTOx450' }, | |
| ImageScale: { AUTOx450: 'AUTOx450', AUTOx1080: 'AUTOx1080' }, | |
| })); | |
| jest.mock('@/helpers/image.helpers', () => ({ | |
| getScaledImageUri: (_src: string) => _src, | |
| ImageScale: { | |
| W_AUTO_H_50: 'AUTOx50', | |
| W_200_H_200: '200x200', | |
| AUTOx450: 'AUTOx450', | |
| AUTOx800: 'AUTOx800', | |
| AUTOx1080: 'AUTOx1080' | |
| }, | |
| })); |
🤖 Prompt for AI Agents
In __tests__/components/DropListItemContentMediaImage.test.tsx around lines 5 to
8, the jest mock for '@/helpers/image.helpers' omits the ImageScale.AUTOx800
enum value; update the mock to include AUTOx800 alongside AUTOx450 and AUTOx1080
so the mocked ImageScale matches the real implementation and prevents
missing-enum test failures.
| get: | ||
| tags: | ||
| - TdhGrants | ||
| summary: Get TDH grants | ||
| operationId: getTdhGrants | ||
| parameters: | ||
| - name: grantor | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: string | ||
| - name: target_contract | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: string | ||
| - name: target_chain | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: string | ||
| - name: status | ||
| in: query | ||
| required: false | ||
| schema: | ||
| $ref: "#/components/schemas/ApiTdhGrantStatus" | ||
| - name: sort_direction | ||
| in: query | ||
| required: false | ||
| schema: | ||
| $ref: "#/components/schemas/ApiPageSortDirection" | ||
| - name: sort | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: string | ||
| enum: | ||
| - created_at | ||
| - valid_from | ||
| - valid_to | ||
| - tdh_rate | ||
| default: created_at | ||
| - name: page | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: integer | ||
| format: int64 | ||
| minimum: 1 | ||
| default: 1 | ||
| - name: page_size | ||
| in: query | ||
| required: false | ||
| schema: | ||
| type: integer | ||
| format: int64 | ||
| minimum: 1 | ||
| maximum: 2000 | ||
| default: 100 | ||
| responses: | ||
| "201": | ||
| description: successful operation | ||
| content: | ||
| application/json: | ||
| schema: | ||
| $ref: "#/components/schemas/ApiTdhGrantsPage" | ||
| "400": | ||
| description: Invalid request | ||
| post: |
There was a problem hiding this comment.
Incorrect HTTP response code for GET endpoint at line 2511.
The GET operation at /tdh-grants (line 2451) returns a 201 (Created) response code at line 2511, which violates HTTP semantics. GET requests should return 200 (OK) for successful operations, not 201 (Created). The 201 status code is reserved for POST/PUT operations that create resources.
Apply this diff to fix the response code:
/tdh-grants:
get:
tags:
- TdhGrants
summary: Get TDH grants
operationId: getTdhGrants
parameters:
- name: grantor
in: query
required: false
schema:
type: string
- name: target_contract
in: query
required: false
schema:
type: string
- name: target_chain
in: query
required: false
schema:
type: string
- name: status
in: query
required: false
schema:
$ref: "#/components/schemas/ApiTdhGrantStatus"
- name: sort_direction
in: query
required: false
schema:
$ref: "#/components/schemas/ApiPageSortDirection"
- name: sort
in: query
required: false
schema:
type: string
enum:
- created_at
- valid_from
- valid_to
- tdh_rate
default: created_at
- name: page
in: query
required: false
schema:
type: integer
format: int64
minimum: 1
default: 1
- name: page_size
in: query
required: false
schema:
type: integer
format: int64
minimum: 1
maximum: 2000
default: 100
responses:
- "201":
+ "200":
description: successful operation
content:
application/json:
schema:
$ref: "#/components/schemas/ApiTdhGrantsPage"
"400":
description: Invalid requestCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In openapi.yaml around lines 2451 to 2519, the GET /tdh-grants operation
incorrectly documents a "201" response for success; change the success response
code to "200" and ensure the response schema remains ApiTdhGrantsPage so the GET
returns 200 OK with the same application/json schema.
2 participants
Summary by CodeRabbit