Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
📝 WalkthroughWalkthroughAdds designated-payee fields and UI to meme submission flows, introduces preview-image extraction and consumption for drops, refactors artwork submission layout to a two-column design, and updates related tests and helpers; includes several public-type and component-prop adjustments. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (7)**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.{tsx,jsx}📄 CodeRabbit inference engine (.cursorrules)
Files:
**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (GEMINI.md)
Files:
**/*.{jsx,tsx}📄 CodeRabbit inference engine (GEMINI.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (GEMINI.md)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{tsx,ts,jsx,js}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (1)components/waves/memes/submission/components/PaymentConfig.tsx (1)
🔇 Additional comments (7)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts (1)
612-616: Partial update may reset designated payee fields.When
connectedProfile.primary_walletchanges,SET_PAYMENT_INFOdispatches only{ payment_address: primaryWallet }. The reducer at line 338-345 replaces the entirepayment_infoobject, which will resethas_designated_payeeanddesignated_payee_nametoundefined.Consider spreading the existing payment_info to preserve the designated payee fields:
Proposed fix
if (primaryWallet) { dispatch({ type: "SET_PAYMENT_INFO", - payload: { payment_address: primaryWallet }, + payload: { + ...state.operationalData.payment_info, + payment_address: primaryWallet + }, });Note: This requires accessing current state, which may need restructuring the effect or using a different action type for partial updates.
🧹 Nitpick comments (7)
components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsx (1)
46-53: Replace<img>with<Image />fromnext/image.Per coding guidelines, use Next.js
<Image />component instead of raw<img>elements to comply with@next/next/no-img-elementESLint rule.♻️ Suggested fix
+import Image from "next/image";{previewImageUrl ? ( <div className="tw-w-full tw-flex tw-justify-center"> - <img + <Image src={getScaledImageUri(previewImageUrl, ImageScale.AUTOx450)} alt="Preview" - className="tw-max-w-full tw-max-h-48 tw-object-contain tw-rounded-lg" + width={450} + height={192} + className="tw-max-w-full tw-max-h-48 tw-object-contain tw-rounded-lg" + unoptimized /> </div>components/waves/memes/submission/components/PaymentConfig.tsx (1)
103-113: Consider removingautoFocusfor better accessibility.The
autoFocusattribute on line 108 may cause unexpected page scrolling and can be disorienting for screen reader users. Consider relying on natural tab flow instead.components/waves/memes/submission/steps/ArtworkStep.tsx (3)
47-49: Avoidas anytype assertion.The
as anycast bypasses type safety. Consider using proper type guards or expandingREAD_ONLY_FIELDStype.♻️ Suggested fix
-const READ_ONLY_FIELDS = ["seizeArtistProfile"] as const; +const READ_ONLY_FIELDS: ReadonlyArray<keyof TraitsData> = ["seizeArtistProfile"];Then remove the
as anycasts:- if (READ_ONLY_FIELDS.includes(field as any)) continue; + if ((READ_ONLY_FIELDS as readonly string[]).includes(field)) continue;
65-75: Remove redundant null/undefined checks aftertypeof.After
typeof value === "number", the value cannot benullorundefined(sincetypeof null === "object"andtypeof undefined === "undefined"). Same applies to the boolean check.♻️ Suggested fix for getSubmitButtonTooltip
// Number fields else if (typeof value === "number") { - if (value === null || value === undefined || isNaN(value)) { + if (isNaN(value)) { return `Please enter ${fieldName}`; } } // Boolean fields need explicit value else if (typeof value === "boolean") { - if (value === null || value === undefined) { - return `Please set ${fieldName}`; - } + // Boolean is valid if we reach here (typeof already confirmed) }
17-31: Consider removing comments per coding guidelines.Per coding guidelines, code should be self-explanatory without comments. The function names
getSubmitButtonTooltipandcheckFormCompletenessare already descriptive.components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (1)
283-289: Consider replacing<img>with<Image />fromnext/image.Per coding guidelines, use Next.js
<Image />component. For fullscreen artwork display where optimization may not be desired, useunoptimizedprop.♻️ Suggested fix
+import Image from "next/image";<div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center"> - <img + <Image src={artworkMedia.url} alt={title} + fill + unoptimized className="tw-max-h-full tw-max-w-full tw-object-contain" /> </div>helpers/waves/drop.helpers.ts (1)
73-108: Dead code: theclosest?.type === DropSize.LIGHTcheck can never be true.Since LIGHT drops are skipped at lines 75-77 and
closestis initialized tonull, the accumulator can only ever benullor a FULL drop. The condition at line 87 is unreachable.♻️ Suggested simplification
if ( current.author.handle === newDrop.author.handle && current.parts.map((p) => p.content).join("") === newDrop.parts.map((p) => p.content).join("") && Math.abs( new Date(current.created_at).getTime() - new Date(newDrop.created_at).getTime() ) < MAX_TIME_DIFFERENCE ) { - if (closest?.type === DropSize.LIGHT) { - return current; - } - if ( !closest || Math.abs( new Date(current.created_at).getTime() - new Date(newDrop.created_at).getTime() ) < Math.abs( new Date(closest.created_at).getTime() - new Date(newDrop.created_at).getTime() ) ) { return current; } }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx__tests__/helpers/waves/drop.helpers.test.tscomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tspackage.json
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tscomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tscomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tscomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tscomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.ts__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/drops/view/item/content/media/MediaDisplay.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsxhelpers/waves/drop.helpers.tscomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/memes/submission/steps/ArtworkStep.tsxcomponents/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
**/*.{ts,js}
📄 CodeRabbit inference engine (AGENTS.md)
When parsing Seize URLs or similar, fail fast if base origin is unavailable instead of falling back to placeholder origins
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts__tests__/helpers/waves/drop.helpers.test.tscomponents/waves/memes/submission/types/OperationalData.tshelpers/waves/drop.helpers.ts
🧠 Learnings (12)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxpackage.json__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Every form control must have an associated label element
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{test,spec}.{js,ts,jsx,tsx} : Run `npm run test` to execute all Jest tests and enforce ≥80% line coverage for files changed since `main`. Tests must pass and coverage threshold must be met before completing any task.
Applied to files:
package.json
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{js,ts,jsx,tsx} : Enforce ≥ 80% line coverage for files changed since `main` by running `npm run test`
Applied to files:
package.json
📚 Learning: 2025-12-30T14:32:44.885Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: app/api/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:44.885Z
Learning: Applies to app/api/**/*.{ts,tsx} : All changes to API routes must pass the commands listed in the top-level AGENTS.md: `npm run test` and `npm run lint`.
Applied to files:
package.json
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by running `npm run lint`
Applied to files:
package.json
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Run `npm run lint` to ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
Applied to files:
package.json
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage
Applied to files:
components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx
🧬 Code graph analysis (8)
__tests__/helpers/waves/drop.helpers.test.ts (1)
helpers/waves/drop.helpers.ts (1)
getDropPreviewImageUrl(168-185)
__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx (1)
components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsx (1)
WaveSmallLeaderboardItemContent(18-171)
components/waves/drop/SingleWaveDropTechnicalDetails.tsx (1)
components/utils/input/ens-address/EnsAddressDisplay.tsx (1)
EnsAddressDisplay(11-42)
components/waves/memes/submission/components/PaymentConfig.tsx (1)
components/waves/memes/traits/TraitWrapper.tsx (1)
TraitWrapper(16-98)
components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsx (2)
helpers/waves/drop.helpers.ts (1)
getDropPreviewImageUrl(168-185)helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
helpers/waves/drop.helpers.ts (2)
generated/models/ApiDropMetadata.ts (1)
ApiDropMetadata(16-44)helpers/Helpers.ts (1)
parseIpfsUrl(290-298)
components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (2)
helpers/waves/drop.helpers.ts (1)
getDropPreviewImageUrl(168-185)helpers/file.helpers.ts (1)
getFileInfoFromUrl(1-23)
components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx (1)
helpers/waves/drop.helpers.ts (1)
getDropPreviewImageUrl(168-185)
🔇 Additional comments (23)
__tests__/components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.test.tsx (2)
4-4: LGTM!Import correctly references the enum used to construct metadata keys for the preview image test case.
20-42: LGTM! Good test coverage for preview image behavior.Both test cases properly verify the branching logic:
- When
ADDITIONAL_MEDIAmetadata contains apreview_image, the component renders an<img>with alt "Preview" and skips the media placeholder.- When no preview image exists, the original media is rendered via the mocked
WaveDropPartContentMedias.The tests align with the component's
getDropPreviewImageUrlintegration described in the relevant code snippets.components/waves/memes/submission/types/OperationalData.ts (1)
21-25: LGTM!The
PaymentInfointerface extension is clean. The boolean toggle + name string pattern properly supports the designated payee UI flow.package.json (1)
18-18: Verify coverage enforcement alignment.The
test-json-changedscript now explicitly disables coverage with--coverage=false. Per coding guidelines, ≥80% line coverage is required for files changed sincemain.Confirm this is intentional and that coverage enforcement is handled by a separate CI step or the base
testscript.components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts (1)
419-420: LGTM!Initial state correctly sets sensible defaults for the new designated payee fields.
components/drops/view/item/content/media/MediaDisplay.tsx (2)
27-43: LGTM!The documentation clearly explains the preview image behavior, and the prop typing correctly allows for nullable/undefined values from upstream callers.
71-73: LGTM! Clean short-circuit for preview images.The logic correctly bypasses non-image media rendering when a preview image is available, while preserving normal behavior for actual image media types.
components/waves/small-leaderboard/WaveSmallLeaderboardItemContent.tsx (1)
30-62: LGTM on the preview image logic.The conditional rendering correctly prioritizes the preview image URL when available and falls back to the existing media rendering. The
useMemodependency is appropriate.components/waves/memes/submission/components/PaymentConfig.tsx (2)
37-59: LGTM on the designated payee handlers.The toggle and name change handlers are properly memoized with
useCallbackand correct dependency arrays. The toggle appropriately clears the payee name when unchecked.
61-70: LGTM on the derived state and validation logic.The validation correctly requires the designated payee name when the toggle is enabled, and the address validation combines ENS error state with format validation properly.
components/waves/memes/submission/steps/ArtworkStep.tsx (1)
301-353: LGTM on the two-column responsive layout.The layout correctly implements independent scrolling for each column with appropriate responsive breakpoints. The scrollbar styling is consistent with the design system.
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx (1)
54-58: LGTM on the test data update.The test data correctly includes the new
has_designated_payeeanddesignated_payee_namefields with appropriate default values, aligning with the expandedPaymentInfotype.__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx (1)
17-29: LGTM on the test data expansion.The mock data correctly includes the new designated payee fields and preview image. The existing test at line 54 will verify these fields are serialized in the metadata.
Consider adding a test case that verifies behavior when
has_designated_payee: trueanddesignated_payee_namecontains a value, to ensure the enabled state is properly serialized.components/waves/drop/SingleWaveDropTechnicalDetails.tsx (2)
64-89: LGTM on the PaymentDetails parsing implementation.The new
parsePaymentDetailsfunction properly handles JSON parsing with appropriate fallbacks, validates thehas_designated_payeeflag with strict equality, and safely extracts the designated payee name only when applicable.
238-265: LGTM on the designated payee UI rendering.The payment address section correctly displays the designated payee name when available, and the copy functionality properly copies the address. The inline display with the label is a clean UX choice.
components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (2)
77-85: LGTM on the preview image data extraction.The
useMemocorrectly uses the sharedgetDropPreviewImageUrlhelper and derives file info from the URL. The null checks ensure safe rendering.
87-96: LGTM on the fileName composition.The
useMemocorrectly incorporates the wave name and author handle into the filename with proper null checks using optional chaining.__tests__/helpers/waves/drop.helpers.test.ts (1)
35-74: LGTM!The test suite comprehensively covers all edge cases for
getDropPreviewImageUrl: undefined/empty metadata, missing entries, invalid JSON, and valid IPFS URL parsing. Good use of theMemesSubmissionAdditionalInfoKey.ADDITIONAL_MEDIAconstant for consistency with the implementation.components/waves/leaderboard/gallery/WaveLeaderboardGalleryItem.tsx (1)
48-51: LGTM!Good use of
useMemoto cache the preview image URL computation, which involves JSON parsing. The dependency ondrop.metadatais correct.__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx (3)
35-37: Good addition ofbeforeEachto clear mocks.This ensures test isolation and prevents mock state from leaking between tests.
52-126: LGTM!Comprehensive test coverage for the designated payee feature:
- Checkbox rendering and default state
- Conditional visibility of the name field
- State changes on user interactions
- Proper verification of callback invocations with full expected payloads
170-191: LGTM!Good test for the clearing behavior when unchecking the designated payee checkbox—verifies that
designated_payee_nameis reset to an empty string.helpers/waves/drop.helpers.ts (1)
168-185: LGTM!Well-implemented utility with proper defensive coding:
- Handles undefined/empty metadata
- Graceful error handling for JSON parse failures
- Checks for missing
preview_imagebefore URL transformation- Clean integration with existing
parseIpfsUrlhelper
|
2 participants
Summary by CodeRabbit
New Features
UI Improvements
Tests
✏️ Tip: You can customize this high-level summary in your review settings.