Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
📝 WalkthroughWalkthroughAdds ENS-aware input and display components, integrates ENS handling into wallet/payment/airdrop UIs, and extends memes submission metadata with Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant EnsInput as EnsAddressInput
participant ResolverHook as useEnsResolution
participant ENS as ENS Resolver
participant Parent as Parent Component
User->>EnsInput: Type address or ENS name
EnsInput->>EnsInput: update inputValue
EnsInput->>Parent: onValueChange(inputValue)
alt input ends with .eth
EnsInput->>ResolverHook: trigger lookup
ResolverHook->>ENS: network lookup
ENS-->>ResolverHook: resolved address or error
ResolverHook-->>EnsInput: address, loading, error
EnsInput->>Parent: onLoadingChange(isLoading)
alt resolved
EnsInput->>Parent: onAddressChange(resolvedAddress)
EnsInput->>Parent: onError(false)
else failed
EnsInput->>Parent: onError(true)
end
else raw 0x address
EnsInput->>Parent: onAddressChange(rawAddress)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 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
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: 4
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/components/AllowlistBatchManager.tsx (1)
99-99: Typo:tw-truncatshould betw-truncate.This will prevent the text truncation styling from being applied to the Token IDs input.
🔧 Proposed fix
- className={`tw-truncat tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 ${ + className={`tw-truncate tw-form-input tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-3 tw-pl-4 tw-pr-11 tw-text-sm tw-text-iron-100 tw-outline-none tw-ring-1 ${
🤖 Fix all issues with AI agents
In
@__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx:
- Line 14: The test is querying for a placeholder that doesn't match what
PaymentConfig passes to EnsAddressInput; update the three assertions in
PaymentConfig.test.tsx that call screen.getByPlaceholderText("0x...") to use the
actual placeholder string used by the component (e.g., "0x... or ENS") or
otherwise match it (e.g., a partial/regex match) so the queries align with
PaymentConfig -> EnsAddressInput.
In
@__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx:
- Around line 67-72: The object literal in the test setup for
MemesArtSubmissionContainer has a duplicated property named setPaymentInfo
(defined twice), so remove the redundant second setPaymentInfo entry from the
props object used in
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx
so only one mock function remains (keep a single jest.fn() for setPaymentInfo
alongside the other setters like setAllowlistBatches, setAdditionalMedia,
setCommentary, and setAboutArtist).
In @components/utils/input/ens-address/EnsAddressInput.tsx:
- Around line 41-43: The useEffect block that calls setInputValue(value) is
redundant because the useEnsResolution hook already syncs initialValue/value to
inputValue; remove the useEffect that depends on [value, setInputInputValue]
(the effect that calls setInputValue) so state updates are driven solely by
useEnsResolution and avoid duplicate updates to inputValue.
🧹 Nitpick comments (17)
components/waves/memes/submission/components/AllowlistBatchManager.tsx (2)
3-3: Prefer direct named imports from React over namespace usage.As per coding guidelines, use direct named imports instead of
React.namespace.♻️ Proposed refactor
-import React, { useCallback } from "react"; +import { FC, memo, useCallback } from "react";Then update the component definition:
-const AllowlistBatchManager: React.FC<AllowlistBatchManagerProps> = ({ +const AllowlistBatchManager: FC<AllowlistBatchManagerProps> = ({And the export:
-export default React.memo(AllowlistBatchManager); +export default memo(AllowlistBatchManager);Also applies to: 17-17, 134-134
59-59: Remove inline comments per coding guidelines.The coding guidelines specify that code should be self-explanatory without comments. The component structure and variable names already convey the purpose clearly.
Also applies to: 82-82, 107-107, 121-121
__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx (1)
30-200: Good test coverage with one optional callback not tested.The test suite thoroughly covers rendering, input handling, and all major callbacks (
onAddressChange,onLoadingChange,onError). Tests follow the AAA pattern and are well-isolated.Consider adding a test for the
onValueChangeoptional callback if it's used in production code.components/delegation/walletChecker/WalletChecker.tsx (1)
67-69: State management could drift if input value synchronization is needed elsewhere.
walletInputValueis initialized but never updated when the user types (noonValueChangehandler). This is fine if you only need the resolved address for form submission, but if other parts of the component need the current input text, consider adding:onValueChange={setWalletInputValue}The Clear button works correctly because the
valueprop change triggers the internalsetInputValueinEnsAddressInput.components/waves/drop/SingleWaveDropTechnicalDetails.tsx (1)
297-299: Consider usingEnsAddressDisplayfor contract addresses for consistency.Payment addresses and airdrop addresses now use
EnsAddressDisplay, but allowlist contract addresses still render raw text. While contracts typically don't have ENS names, some do (e.g.,uniswap.eth). Consider wrapping withEnsAddressDisplayfor consistency, as it gracefully falls back to the raw address when no ENS name exists.♻️ Optional: Use EnsAddressDisplay for contract addresses
- <div className="tw-line-clamp-1 tw-break-all tw-font-mono tw-text-xs tw-font-medium tw-text-iron-200"> - {batch.contract} - </div> + <div className="tw-line-clamp-1 tw-break-all tw-font-mono tw-text-xs tw-font-medium tw-text-iron-200"> + <EnsAddressDisplay address={batch.contract} /> + </div>components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (2)
90-93: Empty payment_info will be serialized to metadata.
payment_infois now unconditionally pushed whenoperationalDataexists. Ifpayment_addressis empty, the metadata will contain{"payment_address":""}. Consider adding a guard to avoid storing empty payment info.♻️ Add conditional check for non-empty payment address
- metadata.push({ - data_key: "payment_info", - data_value: JSON.stringify(operationalData.payment_info), - }); + if (operationalData.payment_info?.payment_address?.trim()) { + metadata.push({ + data_key: "payment_info", + data_value: JSON.stringify(operationalData.payment_info), + }); + }
118-126: Empty commentary and about_artist will be stored in metadata.Both fields are pushed unconditionally when
operationalDataexists. This stores empty strings in metadata when users don't provide values. Consider guarding against empty values for consistency with howairdrop_configandallowlist_batchesare handled.♻️ Add guards for non-empty values
- metadata.push({ - data_key: "commentary", - data_value: operationalData.commentary, - }); - - metadata.push({ - data_key: "about_artist", - data_value: operationalData.about_artist, - }); + if (operationalData.commentary?.trim()) { + metadata.push({ + data_key: "commentary", + data_value: operationalData.commentary, + }); + } + + if (operationalData.about_artist?.trim()) { + metadata.push({ + data_key: "about_artist", + data_value: operationalData.about_artist, + }); + }components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts (1)
623-646: Bio fetch may overwrite user edits if profile changes or component remounts.This effect fetches the user's bio statement and sets
about_artistwheneverconnectedProfile.handlechanges. If a user has already edited the about_artist field and then disconnects/reconnects their wallet, their edits could be overwritten by the fetched bio.Consider tracking whether the user has manually edited the field and only auto-populate if untouched.
♻️ Track manual edits to prevent overwriting
+ const hasManuallyEditedAboutArtist = useRef(false); + useEffect(() => { const handle = connectedProfile?.handle; - if (!handle) return; + if (!handle || hasManuallyEditedAboutArtist.current) return; commonApiFetch<CicStatement[]>({ endpoint: `profiles/${handle}/cic/statements`, }) .then((statements) => { // ... existing logic ... }) .catch((error) => { console.error("[useArtworkSubmissionForm] Failed to fetch bio", error); }); }, [connectedProfile?.handle]); + const setAboutArtist = useCallback( + (aboutArtist: string) => { + hasManuallyEditedAboutArtist.current = true; + dispatch({ type: "SET_ABOUT_ARTIST", payload: aboutArtist }); + }, + [dispatch] + );__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx (1)
5-9: Consider resetting mock between tests.The
defaultProps.onPaymentInfoChangemock is shared across tests but never cleared. If test order matters or tests are added later, stale call counts could cause false positives/negatives.Proposed fix
describe("PaymentConfig", () => { const defaultProps = { paymentInfo: { payment_address: "" }, onPaymentInfoChange: jest.fn(), }; + beforeEach(() => { + jest.clearAllMocks(); + });components/waves/memes/submission/components/PaymentConfig.tsx (1)
30-35:paymentInfodependency may cause stale closure or excessive callback recreation.Including
paymentInfoin the dependency array meanshandleAddressChangeis recreated whenever the address changes. SinceEnsAddressInputreceives this callback viaonAddressChange, it could trigger unnecessary effects. Consider using a functional update pattern or removingpaymentInfofrom dependencies if onlypayment_addressis being set.Proposed fix using callback ref pattern
const handleAddressChange = useCallback( (resolvedAddress: string) => { - onPaymentInfoChange({ ...paymentInfo, payment_address: resolvedAddress }); + onPaymentInfoChange((prev) => ({ ...prev, payment_address: resolvedAddress })); }, - [paymentInfo, onPaymentInfoChange] + [onPaymentInfoChange] );This requires the parent to support functional updates in
onPaymentInfoChange. Alternatively, ifPaymentInfoonly haspayment_address, simply pass the object directly without spreading.components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (1)
294-300: Replace<img>with<Image />fromnext/image.As per coding guidelines,
<img>elements should be replaced with Next.js<Image />component for optimization benefits and ESLint compliance (@next/next/no-img-element).Proposed 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} - className="tw-max-h-full tw-max-w-full tw-object-contain" + fill + className="tw-object-contain" + sizes="100vw" /> </div>Note: The parent
divmay needtw-relativefor thefillprop to work correctly.__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx (1)
40-56: Consider adding test foronAboutArtistChangecallback.The test suite covers
onArtworkCommentaryChangebut doesn't test the newonAboutArtistChangecallback. For completeness, consider adding a similar test.components/waves/drop/WaveDropAdditionalInfo.tsx (1)
165-170: Empty caption track is a workaround, not actual accessibility.The inline VTT track (
data:text/vtt,WEBVTT) satisfies linting rules but provides no meaningful captions for users who need them. If actual captions aren't available, consider adding a comment noting this is intentional, or plan to support real captions in the future.Is there a plan to support actual video captions for uploaded media? If not, this workaround is acceptable but worth documenting.
components/waves/memes/submission/MemesArtSubmissionContainer.tsx (2)
80-84: Useconsole.logor remove debug logging.
console.warnis typically reserved for warnings. Phase change logging is informational and should useconsole.log, or be removed entirely if it's debug code.Suggested fix
const handlePhaseChange = useCallback((phase: SubmissionPhase) => { - console.warn(`Submission phase changed to: ${phase}`); + console.log(`Submission phase changed to: ${phase}`); }, []);
143-160: Extract IIFE intouseMemofor clarity and to avoid recalculating on every render.The IIFE computes derived state and runs on every render. Using
useMemomakes the intent clearer and avoids unnecessary recalculation when dependencies haven't changed. As per coding guidelines, preferuseMemofor deriving state.Suggested refactor
- const previewRequiredMediaType = (() => { - const getMediaTypeLabel = (mimeType: string): string | null => { - if (mimeType.startsWith("video/")) return "Video"; - if (mimeType === "text/html") return "HTML"; - if (mimeType === "model/gltf-binary") return "GLB"; - return null; - }; - - if (form.mediaSource === "upload" && form.selectedFile) { - return getMediaTypeLabel(form.selectedFile.type); - } - if (form.mediaSource === "url" && form.isExternalMediaValid) { - return getMediaTypeLabel(form.externalMediaMimeType); - } - return null; - })(); + const previewRequiredMediaType = useMemo(() => { + const getMediaTypeLabel = (mimeType: string): string | null => { + if (mimeType.startsWith("video/")) return "Video"; + if (mimeType === "text/html") return "HTML"; + if (mimeType === "model/gltf-binary") return "GLB"; + return null; + }; + + if (form.mediaSource === "upload" && form.selectedFile) { + return getMediaTypeLabel(form.selectedFile.type); + } + if (form.mediaSource === "url" && form.isExternalMediaValid) { + return getMediaTypeLabel(form.externalMediaMimeType); + } + return null; + }, [ + form.mediaSource, + form.selectedFile, + form.isExternalMediaValid, + form.externalMediaMimeType, + ]);Also add
useMemoto the imports on line 9:-import { useCallback, useEffect } from "react"; +import { useCallback, useEffect, useMemo } from "react";components/waves/memes/submission/components/AdditionalMediaUpload.tsx (2)
33-44: Unused propssupportingMediaandpreviewImage— consider removing or implementing initialization.The
supportingMediaprop is received but never used, andpreviewImageis aliased to_previewImagebut also unused. The component manages its own upload state internally and syncs back to the parent via callbacks. If pre-population from existing values isn't needed, consider removing these props from the interface to avoid confusion.If props should be removed
interface AdditionalMediaUploadProps { - readonly supportingMedia: string[]; readonly artworkCommentary: string; readonly aboutArtist: string; - readonly previewImage: string; readonly requiresPreviewImage: boolean; readonly previewRequiredMediaType: string | null; readonly onSupportingMediaChange: (media: string[]) => void; readonly onPreviewImageChange: (url: string) => void; readonly onArtworkCommentaryChange: (commentary: string) => void; readonly onAboutArtistChange: (aboutArtist: string) => void; readonly errors?: { - supportingMedia?: string; - previewImage?: string; artworkCommentary?: string; aboutArtist?: string; }; }And remove from destructuring:
const AdditionalMediaUpload: FC<AdditionalMediaUploadProps> = ({ artworkCommentary, aboutArtist, - previewImage: _previewImage, requiresPreviewImage, previewRequiredMediaType, onSupportingMediaChange, onPreviewImageChange, onArtworkCommentaryChange, onAboutArtistChange, errors, }) => {Please verify whether initialization from existing media URLs is a planned feature. If so, the component would need logic to populate the upload hooks with pre-existing items on mount.
54-77: Consider calling parent callbacks directly in upload completion instead of syncing via Effects.Per coding guidelines, Effects that only sync derived state should be avoided. The current pattern uses
useEffectto syncmediaServerUrlsandpreviewServerUrlto the parent. This works but adds indirection. Consider modifyinguseMediaUploadto accept anonCompletecallback, or callingonSupportingMediaChange/onPreviewImageChangedirectly when uploads finish.That said, if modifying the hook is out of scope for this PR, the current implementation with refs to prevent duplicate calls is acceptable.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/delegation/walletChecker/WalletChecker.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsxcomponents/waves/memes/submission/components/AllowlistBatchManager.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/waves/memes/traits/TraitWrapper.tsx
🧰 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:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.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:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/waves/memes/submission/components/AllowlistBatchManager.tsx__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsxcomponents/waves/drop/MemesSingleWaveDropInfoPanel.tsxcomponents/waves/memes/submission/types/OperationalData.tscomponents/utils/input/ens-address/EnsAddressInput.tsxcomponents/waves/memes/submission/components/AirdropConfig.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsxcomponents/waves/drop/SingleWaveDropTechnicalDetails.tsxcomponents/utils/input/ens-address/EnsAddressDisplay.tsxcomponents/waves/memes/traits/TraitWrapper.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsxcomponents/waves/drop/WaveDropAdditionalInfo.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/steps/AdditionalInfoStep.tsxcomponents/delegation/walletChecker/WalletChecker.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/components/PaymentConfig.tsxcomponents/waves/memes/submission/components/AdditionalMediaUpload.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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/hooks/useArtworkSubmissionMutation.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.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/hooks/useArtworkSubmissionMutation.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.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/types/OperationalData.tscomponents/waves/memes/submission/hooks/useArtworkSubmissionForm.tscomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
🧠 Learnings (13)
📚 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: Fix issues with modernization aligned to React 19.2, React Compiler, and Next.js 16 conventions. Do not add `// eslint-disable` comments unless explicitly instructed.
Applied to files:
components/waves/memes/submission/components/AllowlistBatchManager.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/memes/submission/components/AirdropConfig.tsxcomponents/waves/memes/submission/MemesArtSubmissionContainer.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 **/__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.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.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__tests__/components/utils/input/ens-address/EnsAddressInput.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 **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.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__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.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/utils/input/ens-address/EnsAddressInput.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} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use FontAwesome for icons in React components
Applied to files:
components/waves/drop/SingleWaveDropTechnicalDetails.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:
components/waves/memes/traits/TraitWrapper.tsx__tests__/components/utils/input/ens-address/EnsAddressInput.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} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/utils/input/ens-address/EnsAddressInput.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} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/utils/input/ens-address/EnsAddressInput.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__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Avoid double negatives in code; prefer explicit statements and use optional chaining (`?.`)
Applied to files:
__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx
🧬 Code graph analysis (8)
components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (3)
helpers/Helpers.ts (1)
parseIpfsUrl(290-298)helpers/file.helpers.ts (1)
getFileInfoFromUrl(1-23)components/download/Download.tsx (1)
Download(24-132)
components/utils/input/ens-address/EnsAddressInput.tsx (1)
hooks/useEnsResolution.ts (1)
useEnsResolution(13-97)
__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx (2)
hooks/useEnsResolution.ts (1)
useEnsResolution(13-97)components/utils/input/ens-address/EnsAddressInput.tsx (1)
EnsAddressInput(20-80)
components/waves/drop/WaveDropAdditionalInfo.tsx (2)
helpers/Helpers.ts (1)
parseIpfsUrl(290-298)helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts (3)
components/waves/memes/submission/types/OperationalData.ts (4)
PaymentInfo(21-23)AllowlistBatchRaw(30-34)AdditionalMedia(36-40)AIRDROP_TOTAL(19-19)__tests__/services/websocket/useWebSocketHealth.test.ts (1)
dispatch(45-57)entities/IProfile.ts (1)
CicStatement(58-67)
components/waves/memes/submission/components/PaymentConfig.tsx (4)
components/waves/memes/submission/types/OperationalData.ts (1)
PaymentInfo(21-23)components/waves/memes/submission/utils/addressValidation.ts (1)
validateStrictAddress(8-19)components/waves/memes/traits/TraitWrapper.tsx (1)
TraitWrapper(16-98)components/utils/input/ens-address/EnsAddressInput.tsx (1)
EnsAddressInput(20-80)
components/waves/memes/submission/components/AdditionalMediaUpload.tsx (2)
components/waves/memes/submission/hooks/useMediaUpload.ts (1)
useMediaUpload(28-136)components/waves/memes/traits/TraitWrapper.tsx (1)
TraitWrapper(16-98)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (1)
components/waves/memes/submission/utils/addressValidation.ts (1)
validateStrictAddress(8-19)
🪛 Biome (2.1.2)
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx
[error] 67-67: This property is later overwritten by an object member with the same name.
Overwritten with this property.
If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property.
(lint/suspicious/noDuplicateObjectKeys)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (35)
components/waves/memes/submission/components/AllowlistBatchManager.tsx (1)
51-51: LGTM on the styling and UX changes.The increased vertical spacing (
gap-y-6), required field indicator on Contract Address, and padding overrides (tw-pb-0) align well with the broader styling strategy updates mentioned in the PR.Also applies to: 61-61, 65-65, 90-90
components/waves/memes/submission/types/OperationalData.ts (1)
7-7: LGTM!The new
ABOUT_ARTISTenum member,preview_imagefield inAdditionalMedia, andabout_artistfield inOperationalDataare well-structured and consistent with existing patterns. The enum value will automatically be included inMEMES_SUBMISSION_ADDITIONAL_INFO_KEYS.Also applies to: 39-39, 48-48
components/waves/memes/traits/TraitWrapper.tsx (2)
55-59: Padding override detection works but relies on class name heuristics.The
includes("tw-pb-")check is a reasonable approach for detecting explicit bottom padding overrides. Be aware this could match unintended patterns if a class name containstw-pb-as a substring (though unlikely with Tailwind conventions).
89-95: LGTM!The conditional ValidationError placement correctly handles both scenarios: inline with reduced margin when padding is overridden, and absolutely positioned at the bottom otherwise.
__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx (1)
1-28: LGTM!The mock setup is well-structured. The Form.Control mock correctly passes through props for testing, and the useEnsResolution mock provides controllable return values. The import after
jest.mockis intentional for proper Jest hoisting.components/utils/input/ens-address/EnsAddressDisplay.tsx (1)
11-42: LGTM!The component correctly handles ENS resolution states: loading (with pulse animation), resolved (ENS name + address), and fallback (raw address). The address validation and conditional hook invocation follow wagmi best practices.
components/delegation/walletChecker/WalletChecker.tsx (2)
446-458: LGTM!The integration of
EnsAddressInputis clean. The callbacks properly wire up address resolution (onAddressChange), loading state (onLoadingChange), and error handling (onError). Thedisabledprop correctly prevents input after data is loaded.
386-388: LGTM!The early return during ENS loading prevents premature validation errors, and
ensLoadingis correctly included in the effect's dependency array.Also applies to: 410-410
components/waves/drop/SingleWaveDropTechnicalDetails.tsx (2)
226-229: LGTM! Payment address now displays ENS names when available.The integration of
EnsAddressDisplayfor payment addresses provides a better UX by showing resolved ENS names alongside raw addresses.
256-258: LGTM! Airdrop entries now display ENS-resolved addresses.Consistent use of
EnsAddressDisplayfor airdrop wallet addresses.components/waves/memes/submission/components/AirdropConfig.tsx (3)
20-25: LGTM! Good state management pattern for per-entry loading and error states.Using
Record<string, boolean>maps keyed by entry ID is a clean approach for tracking per-entry states without complex nested structures.
52-74: Good cleanup of per-entry state on removal.Properly removing the entry's loading and error states prevents memory leaks and stale state issues.
175-186: Verify: Input value displays resolved address, not user's ENS input.When a user types an ENS name (e.g.,
vitalik.eth),onAddressChangeupdatesentry.addressto the resolved0x...address. Sincevalue={entry.address}, the input will show the resolved address rather than preserving the ENS name the user typed.This may be intentional for clarity (showing what will be stored), but differs from the
EnsAddressDisplaypattern where both ENS name and address are shown.__tests__/components/waves/memes/submission/hooks/useArtworkSubmissionMutation.test.tsx (3)
28-29: LGTM! Test data includes the newabout_artistfield.Good coverage for the new metadata field.
57-58: LGTM! Assertion validatesABOUT_ARTISTmetadata key presence.
79-80: LGTM! ValidatesABOUT_ARTISTis absent whenoperationalDatais not provided.components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts (2)
377-384: LGTM! Clean reducer case forSET_ABOUT_ARTIST.Follows the established pattern for operational data updates.
608-620: LGTM! Good UX - auto-populates payment and airdrop addresses from connected wallet.Pre-filling the user's primary wallet as the default payment and airdrop address reduces friction.
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx (1)
61-64: LGTM! Test data updated with new fields.Properly reflects the expanded
operationalDatastructure.components/waves/memes/submission/components/PaymentConfig.tsx (1)
41-65: LGTM!The component structure is clean with proper use of
FormSection,TraitWrapper, andEnsAddressInput. Error handling covers both ENS resolution failures and invalid address formats. The conditional ring styling based on error state provides good visual feedback.components/waves/drop/MemesSingleWaveDropInfoPanel.tsx (2)
76-96: LGTM!The
previewImageDataderivation handles edge cases well: checks for missing metadata entry, catches JSON parse errors, validates the parsed structure, and ensures file info extraction succeeds before returning data. The null-safe approach prevents runtime errors.
209-248: LGTM!The conditional rendering logic correctly displays either the main artwork media or the preview image (or both), with appropriate labels and download functionality for each. The grid layout cleanly organizes the media type and download options.
__tests__/components/waves/memes/submission/components/AdditionalMediaUpload.test.tsx (2)
5-17: LGTM!The
defaultPropscorrectly reflect the updated component API with the new fields (supportingMedia,aboutArtist,previewImage,requiresPreviewImage,previewRequiredMediaType) and their corresponding change handlers. The default values are appropriate for testing.
27-38: Good coverage of conditional rendering.The tests properly verify that the Preview Image section appears only when
requiresPreviewImageis true with the appropriate media type, and is hidden otherwise. This covers the key conditional logic.components/waves/drop/WaveDropAdditionalInfo.tsx (3)
17-21: LGTM!The
emptyAdditionalMediaconstant is correctly extended with the newpreview_imagefield, maintaining consistency with theAdditionalMediatype.
64-109: Clean metadata extraction pattern.The
useMemoconsolidates all metadata parsing into a single computation, extracting commentary, aboutArtist, previewImage, and mediaItems efficiently. The helper functiongetMetadataValuereduces repetition, and the null-safe chaining throughout prevents runtime errors.
122-208: LGTM!The rendering structure is well-organized with clear section separation. The use of Next.js
<Image>components with appropriatesizesprops, proper aspect ratio containers, and conditional rendering based onhasContentfollows best practices.components/waves/memes/submission/MemesArtSubmissionContainer.tsx (1)
204-228: LGTM!The prop wiring for
AdditionalInfoStepis correctly aligned with the new form state and handlers.components/waves/memes/submission/steps/AdditionalInfoStep.tsx (4)
21-41: LGTM!Interface is well-defined with all props marked
readonlyper coding guidelines.
76-141: Validation logic is comprehensive and correct.The
isFormValid()function properly validates all required fields including the new payment address, about artist, and conditional preview image requirements.
161-164: LGTM!Good addition of the
PaymentConfigcomponent with proper prop bindings.
179-190: LGTM!Props are correctly wired to
AdditionalMediaUploadwith the renamedsupportingMediaand new handlers.components/waves/memes/submission/components/AdditionalMediaUpload.tsx (3)
185-231: LGTM!The
renderMediaSectionhelper is well-structured with configurablemaxItems,acceptTypes, and optionaldescription. The conditional button text and multiple attribute handling are correct.
236-248: LGTM!The conditional preview image section correctly renders only when
requiresPreviewImageis true, with clear helper text explaining why it's needed.
261-295: LGTM!The new "About the Artist" field is properly integrated using
TraitWrapperwith consistent styling and error handling alongside the existing "Artwork Commentary" field.
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/useArtworkSubmissionMutation.ts (1)
394-406: Incorrect use of nullish coalescing (??) for boolean OR logic.
isPendingandisErrorare boolean values (not nullable). The??operator only continues to the next operand if the left side isnullorundefined. WhenuploadMutation.isPendingisfalse,??returnsfalsewithout checkingisSigningDroporsubmissionMutation.isPending.This means
isSubmittingwill incorrectly befalsewhen only signing or processing is in progress.🐛 Proposed fix
return { submitArtwork, isSubmitting: - uploadMutation.isPending ?? isSigningDrop ?? submissionMutation.isPending, + uploadMutation.isPending || isSigningDrop || submissionMutation.isPending, isUploading: uploadMutation.isPending, isSigning: isSigningDrop, isProcessing: submissionMutation.isPending, uploadProgress, submissionPhase, submissionError, isSuccess: submissionMutation.isSuccess, - isError: uploadMutation.isError ?? submissionMutation.isError, + isError: uploadMutation.isError || submissionMutation.isError, error: uploadMutation.error ?? submissionMutation.error,
🧹 Nitpick comments (3)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (3)
73-86: Potential undefined values in metadata entries.If
operationalData.commentary,operationalData.about_artist, oroperationalData.payment_infois undefined, the correspondingdata_valuewill be undefined (note:JSON.stringify(undefined)returnsundefined, not a string). This violates theApiDropMetadatatype contract wheredata_valueshould be a string.Consider filtering out entries with undefined/empty values or providing defaults:
♻️ Suggested fix
const operationalMetadata: ApiDropMetadata[] = [ - { - data_key: "payment_info", - data_value: JSON.stringify(operationalData.payment_info), - }, - { - data_key: "commentary", - data_value: operationalData.commentary, - }, - { - data_key: "about_artist", - data_value: operationalData.about_artist, - }, - ]; + operationalData.payment_info && { + data_key: "payment_info", + data_value: JSON.stringify(operationalData.payment_info), + }, + operationalData.commentary && { + data_key: "commentary", + data_value: operationalData.commentary, + }, + operationalData.about_artist && { + data_key: "about_artist", + data_value: operationalData.about_artist, + }, + ].filter((entry): entry is ApiDropMetadata => Boolean(entry));
160-165: Redundant| undefinedin type annotation.The type has
| undefined | undefinedwhich is redundant.♻️ Suggested fix
interface PhaseChangeCallbacks { onPhaseChange?: - | ((phase: SubmissionPhase, error?: string) => void) - | undefined - | undefined; + | ((phase: SubmissionPhase, error?: string) => void) + | undefined; }
284-291: Same redundant| undefinedas above.♻️ Suggested fix
onPhaseChange?: - | ((phase: SubmissionPhase, error?: string) => void) - | undefined - | undefined; + | ((phase: SubmissionPhase, error?: string) => void) + | undefined;
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
__tests__/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsxcomponents/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- tests/components/waves/memes/submission/MemesArtSubmissionContainer.test.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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/useArtworkSubmissionMutation.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
🧬 Code graph analysis (1)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (2)
generated/models/ApiDropMetadata.ts (1)
ApiDropMetadata(16-44)components/waves/memes/submission/utils/addressValidation.ts (1)
validateStrictAddress(8-19)
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx (2)
4-5: Unused module-level variables.
mockOnAddressChangeandmockValueare assigned inside the mock but never referenced in any test. Remove them to avoid confusion.🧹 Suggested cleanup
-let mockOnAddressChange: ((address: string) => void) | undefined; -let mockValue: string | undefined; - jest.mock( "@/components/utils/input/ens-address/EnsAddressInput", () => function MockEnsAddressInput(props: { value?: string; placeholder?: string; onAddressChange: (address: string) => void; className?: string; }) { - mockOnAddressChange = props.onAddressChange; - mockValue = props.value; return ( <input data-testid="ens-address-input" placeholder={props.placeholder} value={props.value ?? ""} onChange={(e) => props.onAddressChange(e.target.value)} - className={props.className} /> ); } );
30-34: Consider resetting mocks between tests.The
defaultProps.onPaymentInfoChangemock is shared across tests. While not causing issues currently, addingbeforeEachto reset mocks ensures test isolation and prevents flaky tests if assertions on this mock are added later. Based on learnings, tests should follow Arrange-Act-Assert pattern with proper isolation.🧹 Suggested improvement
describe("PaymentConfig", () => { + const mockOnPaymentInfoChange = jest.fn(); + const defaultProps = { paymentInfo: { payment_address: "" }, - onPaymentInfoChange: jest.fn(), + onPaymentInfoChange: mockOnPaymentInfoChange, }; + + beforeEach(() => { + jest.clearAllMocks(); + });__tests__/components/walletChecker.test.tsx (2)
87-108: Unnecessaryasynckeyword.The test function is declared
asyncbut doesn't useawait. Since the test doesn't wait for any promises, theasyncmodifier is superfluous.🔧 Suggested fix
- it("fetches data for valid address", async () => { + it("fetches data for valid address", () => {
112-128: Unnecessaryasynckeyword.Same as above - no
awaitis used in this test.🔧 Suggested fix
- it("clears input after clicking clear", async () => { + it("clears input after clicking clear", () => {
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
__tests__/components/utils/input/ens-address/EnsAddressInput.test.tsx__tests__/components/walletChecker.test.tsx__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- tests/components/utils/input/ens-address/EnsAddressInput.test.tsx
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/walletChecker.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/components/PaymentConfig.test.tsx__tests__/components/walletChecker.test.tsx
🧠 Learnings (9)
📚 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.tsx__tests__/components/walletChecker.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 **/{__tests__,*.test.{tsx,ts}} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside the component
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.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__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx__tests__/components/walletChecker.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/walletChecker.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} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.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} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
__tests__/components/waves/memes/submission/components/PaymentConfig.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__/**/__mocks__/**/*.{ts,tsx,js} : Jest automatically picks up mocks from `__mocks__` directory
Applied to files:
__tests__/components/walletChecker.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} : Use realistic production-like data in tests
Applied to files:
__tests__/components/walletChecker.test.tsx
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
__tests__/components/waves/memes/submission/components/PaymentConfig.test.tsx (1)
36-79: LGTM!The test cases are well-structured with clear, descriptive names and follow the Arrange-Act-Assert pattern. Good coverage of:
- Label and placeholder rendering
- Helper text presence
- Callback invocation on user input
- Pre-populated value display
__tests__/components/walletChecker.test.tsx (1)
29-52: LGTM! Well-structured mock for the EnsAddressInput component.The mock correctly simulates the component behavior by:
- Rendering a standard input with appropriate props pass-through
- Wiring
onChangeto theonAddressChangecallback- Handling optional
valuewith nullish coalescing to prevent React warningsBased on learnings, this follows the pattern of mocking external dependencies in tests.
Signed-off-by: prxt6529 <prxt@6529.io>
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 (2)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (2)
394-395: Incorrect use of nullish coalescing (??) for boolean composition.
isPendingis a boolean (true/false), nevernull/undefined. The??operator only falls through on nullish values, so ifuploadMutation.isPendingisfalse, the expression short-circuits and returnsfalseimmediately—ignoringisSigningDropandsubmissionMutation.isPending.Use logical OR (
||) to correctly indicate "submitting if any phase is pending":🐛 Proposed fix
- isSubmitting: - uploadMutation.isPending ?? isSigningDrop ?? submissionMutation.isPending, + isSubmitting: + uploadMutation.isPending || isSigningDrop || submissionMutation.isPending,
403-403: Same nullish coalescing issue forisError.This has the same problem as
isSubmitting—use||to correctly capture errors from either mutation.🐛 Proposed fix
- isError: uploadMutation.isError ?? submissionMutation.isError, + isError: uploadMutation.isError || submissionMutation.isError,
🧹 Nitpick comments (2)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (2)
73-86: Empty or undefined values forcommentaryandabout_artistbypass filtering.Unlike trait metadata (filtered on lines 66-69 for non-empty values),
commentaryandabout_artistare unconditionally added to the metadata array. If either is undefined or an empty string, it will be included in the API request payload with a potentially invaliddata_value.Consider applying consistent filtering:
♻️ Suggested approach
const operationalMetadata: ApiDropMetadata[] = [ { data_key: "payment_info", data_value: JSON.stringify(operationalData.payment_info), }, - { - data_key: "commentary", - data_value: operationalData.commentary, - }, - { - data_key: "about_artist", - data_value: operationalData.about_artist, - }, ]; + + if (operationalData.commentary) { + operationalMetadata.push({ + data_key: "commentary", + data_value: operationalData.commentary, + }); + } + + if (operationalData.about_artist) { + operationalMetadata.push({ + data_key: "about_artist", + data_value: operationalData.about_artist, + }); + }
104-118: Consider filtering empty allowlist batches.Unlike
airdrop_configwhich filters out invalid entries,allowlist_batchesincludes all batches even whentoken_ids_rawis empty. If empty batches aren't meaningful to the API, consider filtering them similarly.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
**/*.{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/useArtworkSubmissionMutation.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts
⏰ 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). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
components/waves/memes/submission/hooks/useArtworkSubmissionMutation.ts (2)
1-20: LGTM!Import reorganization is clean. Named imports from React (
useCallback,useState) align with coding guidelines.
50-58: LGTM!Clean destructuring of input parameters improves readability.
Signed-off-by: prxt6529 <prxt@6529.io>
|
2 participants
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.