Conversation
WalkthroughAdds a Developer Hub: documentation and manifest, RTK Query API for DeveloperApp, form hook, image/validation utils, new React UI (AppsList, AppCard, AppForm, ImageUpload) with tests and styles, page routing, AllowedApps/API shape changes, iframe support for external apps, and related integration updates. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant UI as AppForm
participant W as Wallet
participant API as DeveloperAppsAPI
participant B as Backend
U->>UI: Fill form & submit
UI->>UI: validateForm() / sanitizeAppId()
UI->>W: Request signature
W-->>UI: Signature / error
alt Signature OK
UI->>API: create/update (x-signature header)
API->>B: POST/PUT /developer-apps
B-->>API: 200 OK
API-->>UI: success (cache invalidated)
UI->>U: navigate / show success
else Signature error
UI->>U: show wallet error/alert
end
sequenceDiagram
autonumber
participant U as User
participant L as AppsList
participant RTK as RTK Query
participant API as Backend
L->>RTK: useGetAllDeveloperAppsQuery(eoaAddress)
RTK->>API: GET /developer-apps?eoaAddress=0x...
API-->>RTK: ApiResponse<DeveloperApp[]>
RTK-->>L: data
U->>L: Click Delete
L->>L: confirm dialog
L->>RTK: deleteDeveloperApp mutation
RTK->>API: DELETE /developer-apps/{appId}
alt 200
RTK-->>L: success (cache invalidated)
else 401
RTK-->>L: error -> alert user
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
Deploying x with
|
| Latest commit: |
efc88f7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a2b9f2f6.x-e62.pages.dev |
| Branch Preview URL: | https://feature-px-developers.x-e62.pages.dev |
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (PRO-3824-Update_IntentSDK)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/apps/developer-apps/components/AppForm.tsx (1)
59-64: Navigation paths already flagged in previous review.The navigation to
/developer-appson Lines 64, 84, and 106 has already been identified in a previous review as incorrect. According to that review, these should navigate to/app/developersto match the actual entry route used elsewhere in the codebase.Also applies to: 76-84, 104-106
🧹 Nitpick comments (4)
src/apps/developer-apps/components/AppForm.tsx (4)
63-64: Consider improving post-create UX instead of full page reload.After successfully creating an app, the code triggers a full page reload (Line 64). While the alert explains this is necessary for the app to appear in the Action Bar, a full reload is disruptive to the user experience.
Consider alternatives such as:
- Invalidating relevant RTK Query cache tags to trigger a refetch
- Using a toast notification with a "Refresh" action button instead of auto-reloading
- Navigating to the newly created app's detail page and showing the "reload required" message there
If the reload is truly unavoidable, consider replacing
alert()with a more modern notification pattern (toast/modal).
50-53: Consider replacing alert() with toast notifications.The use of browser
alert()dialogs (Lines 51, 63, 93, 101) provides a poor user experience with blocking modals. Modern web applications typically use non-blocking toast notifications or inline error messages.Consider implementing a toast notification system (e.g., react-hot-toast, react-toastify) for:
- Wallet connection errors
- Form submission success/failure messages
- MetaMask signature rejection guidance
Also applies to: 63-63, 93-93, 101-101
Also applies to: 93-93, 101-101
90-96: Fragile error detection via string matching.Lines 92 checks for 'MetaMask' or 'signature required' in error messages using string matching. This approach is fragile and may break if wallet providers change their error message formats.
Consider:
- Checking for specific error codes if available from the wallet SDK
- Using a more robust error classification system
- Documenting the expected error structure from Privy/MetaMask for future maintainers
280-280: Type assertion suggests FormErrors type could be improved.Line 280 uses a type assertion for the banner error field. Since banner is an optional field in both AppFormData and DeveloperApp, the FormErrors type should naturally support it without needing a type assertion.
Consider reviewing the FormErrors type definition in
useAppForm.tsto ensure it properly includes all optional fields, eliminating the need for this type assertion.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/apps/developer-apps/components/AppForm.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/apps/developer-apps/components/AppForm.tsx
🧬 Code graph analysis (1)
src/apps/developer-apps/components/AppForm.tsx (3)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)src/apps/developer-apps/hooks/useAppForm.ts (1)
useAppForm(55-182)src/apps/developer-apps/utils/validation.ts (1)
sanitizeAppId(40-46)
⏰ 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). (3)
- GitHub Check: build
- GitHub Check: lint
- GitHub Check: unit-tests
🔇 Additional comments (3)
src/apps/developer-apps/components/AppForm.tsx (3)
109-123: LGTM! Clean wallet connection guard.The wallet connection guard provides clear user guidance with appropriate iconography and messaging. The conditional rendering prevents form access without wallet connection, which is the correct security pattern.
174-175: Good input sanitization and edit protection.The appId field correctly applies
sanitizeAppId()on every keystroke (Line 174) to prevent invalid characters, and is appropriately disabled in edit mode (Line 175) since app IDs are immutable after creation. This provides good user feedback and prevents data integrity issues.
140-397: Well-structured form with good UX patterns.The form implementation demonstrates several strong UX patterns:
- Clear section headers with descriptive help text
- Inline validation error messages
- Character counter for length-limited fields (Line 200)
- Visual distinction between required and optional fields
- Disabled state for immutable fields (appId in edit mode)
- Loading states on action buttons
- Appropriate input types (url, email) for better mobile keyboard support
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/apps/developer-apps/components/AppForm.tsx (2)
76-76: Fix navigation path to match the correct route.After a successful update, the code navigates to
/developer-apps, but according to the PR context and past review feedback, the main entry route for the Developer Hub is/app/developers. Navigating to the wrong route will send users to a non-existent page.Apply this diff:
- navigate('/developer-apps'); + navigate('/app/developers');
98-98: Fix navigation path to match the correct route.The cancel button navigates to
/developer-apps, but the correct route for the Developer Hub list view is/app/developers. This mismatch will redirect users to a non-existent route.Apply this diff:
- navigate('/developer-apps'); + navigate('/app/developers');
🧹 Nitpick comments (1)
src/apps/developer-apps/components/AppForm.tsx (1)
40-45: Auto-generation may overwrite manual appId edits.The
useEffectregeneratesappIdwheneverformData.namechanges in create mode, even if the user has manually edited theappIdfield (line 166 allows manual edits). This could be frustrating if a user manually sets an appId and then tweaks the name slightly—the appId would be overwritten.Consider checking whether the appId was manually edited before auto-generating, or only auto-generate if appId is empty or matches the previously generated value.
Example approach:
useEffect(() => { - if (mode === 'create' && formData.name && !formData.appId) { + if (mode === 'create' && formData.name) { const sanitized = sanitizeAppId(formData.name); - setFormData((prev) => ({ ...prev, appId: sanitized })); + // Only auto-fill if appId is empty or unchanged from previous auto-generation + setFormData((prev) => { + if (!prev.appId || prev.appId === sanitizeAppId(prev.name || '')) { + return { ...prev, appId: sanitized }; + } + return prev; + }); } }, [formData.name, formData.appId, mode, setFormData]);Alternatively, disable the auto-sync once the user has manually edited the appId field.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/apps/developer-apps/IMPLEMENTATION.md(1 hunks)src/apps/developer-apps/components/AppForm.tsx(1 hunks)src/apps/developer-apps/components/AppsList.tsx(1 hunks)src/apps/developer-apps/styles/developers.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/apps/developer-apps/styles/developers.css
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/apps/developer-apps/components/AppForm.tsxsrc/apps/developer-apps/components/AppsList.tsx
🧬 Code graph analysis (1)
src/apps/developer-apps/components/AppForm.tsx (3)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)src/apps/developer-apps/hooks/useAppForm.ts (1)
useAppForm(55-182)src/apps/developer-apps/utils/validation.ts (1)
sanitizeAppId(40-46)
🪛 markdownlint-cli2 (0.18.1)
src/apps/developer-apps/IMPLEMENTATION.md
175-175: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ 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). (3)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: build
🔇 Additional comments (3)
src/apps/developer-apps/components/AppForm.tsx (1)
1-395: Overall implementation looks solid.The form component is well-structured with proper validation, error handling, and user feedback. The MetaMask signature rejection handling (lines 82-88) is a nice touch. The UI is comprehensive and includes helpful descriptions for each field.
src/apps/developer-apps/components/AppsList.tsx (2)
14-14: Previous safety issues have been resolved.Great work addressing the past review feedback! The code now:
- Uses optional chaining on
walletsarray:wallets?.[0]?.address(line 14)- Guards against undefined
ownerEoaAddressbefore calling.toLowerCase()(lines 22-25)These changes prevent potential runtime errors when no wallet is connected or when the API returns apps without
ownerEoaAddress.Also applies to: 22-25
1-216: Well-structured component with comprehensive UI states.The component handles all edge cases gracefully:
- Wallet not connected prompt
- Loading state with spinner
- Error state with helpful message
- Empty state with CTA to create first app
- Main state with apps grid
The error handling in
handleDeleteandhandleSendForReviewproperly extracts error messages from the API response. The use ofReact.useMemoformyAppsfiltering is appropriate to avoid unnecessary recalculations.
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/providers/AllowedAppsProvider.tsx (1)
88-88: Remove redundant map operation.The
.map((app: ApiAllowedApp) => app)is an identity function that doesn't transform the data. Since the response is already typed asApiAllowedApp[], the mapping is unnecessary.Apply this diff:
-setAllowed(data?.map((app: ApiAllowedApp) => app)); +setAllowed(data ?? []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/apps/developer-apps/README.md(1 hunks)src/apps/developer-apps/index.tsx(1 hunks)src/providers/AllowedAppsProvider.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/apps/developer-apps/index.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/providers/AllowedAppsProvider.tsx
📚 Learning: 2025-11-04T14:34:00.373Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 445
File: src/containers/Authorized.tsx:63-77
Timestamp: 2025-11-04T14:34:00.373Z
Learning: In src/containers/Authorized.tsx, the tempKit useEffect intentionally excludes chainId from its dependency array because the kit is used by useWalletModeVerification to check wallet mode across all supported chains, regardless of the currently selected chainId. The chainId parameter is only used for initial kit configuration and does not affect the multi-chain verification results.
Applied to files:
src/providers/AllowedAppsProvider.tsx
🧬 Code graph analysis (1)
src/providers/AllowedAppsProvider.tsx (1)
src/utils/blockchain.ts (1)
isTestnet(33-39)
🪛 markdownlint-cli2 (0.18.1)
src/apps/developer-apps/README.md
37-37: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ 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). (3)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: build
🔇 Additional comments (3)
src/apps/developer-apps/README.md (1)
1-410: Comprehensive and well-structured documentation.The README provides excellent coverage of the Developer Hub feature, including clear sections on components, API integration, utilities, styling, wallet integration, and usage examples. The documentation aligns well with the PR objectives and should serve as a solid reference for developers working with this feature.
src/providers/AllowedAppsProvider.tsx (2)
22-42: Well-structured interface for enhanced app metadata.The
ApiAllowedAppinterface appropriately captures the expanded app data model with optional fields for flexibility. This supports the PR's goal of improving typing for complex app objects.
98-98: Verify wallet address dependency behavior.The
useEffectnow depends onuser?.wallet?.address, which means the apps list will be re-fetched whenever the user's wallet address changes. This is a behavioral change from the previous implementation.Ensure this is the intended behavior, especially considering:
- Performance: The effect will re-run on every wallet change
- User experience: Apps list will reload when switching wallets
- API usage: Additional API calls when the user object updates
If the API returns different apps based on the user's address (e.g., developer-owned apps), this dependency is appropriate. Otherwise, consider whether the re-fetching is necessary.
github-actions
bot
temporarily deployed
to
Preview (feature/px-developers)
Deploying pillarx-debug with
|
| Latest commit: |
efc88f7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6cddc011.pillarx-debug.pages.dev |
| Branch Preview URL: | https://feature-px-developers.pillarx-debug.pages.dev |
github-actions
bot
requested a deployment
to
Preview (feature/px-developers)
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/apps/developer-apps/README.md (1)
37-57: Add language specifiers to fenced code blocks.Multiple fenced code blocks throughout the document lack language identifiers. This affects lines 37-57, 142-157, 200-208, 214-229, and 260-265. Adding language specifiers (e.g.,
```typescript,```bash) improves readability and satisfies markdown linting rules.
🧹 Nitpick comments (4)
src/apps/developer-apps/README.md (1)
21-21: Consider hyphenating compound adjective.The phrase "currently logged in wallet" should be hyphenated as "currently logged-in wallet" when used as a compound adjective before a noun.
src/apps/developer-apps/index.tsx (1)
22-31: Prefer useParams for route parameters.The manual URL parsing with regex and useEffect is not idiomatic for React Router. The route is already defined with
:appIdparameter (line 84), so useParams provides direct access.Apply this refactor to simplify the code:
+import { Routes, Route, Navigate, useParams } from 'react-router-dom'; ... const EditAppPage: React.FC = () => { - const [appId, setAppId] = React.useState<string>(''); - - // Extract appId from URL - React.useEffect(() => { - const path = window.location.pathname; - const matches = path.match(/\/edit\/([^/]+)$/); - if (matches && matches[1]) { - setAppId(matches[1]); - } - }, []); + const { appId } = useParams<{ appId: string }>(); - const { data, isLoading, error } = useGetDeveloperAppQuery(appId, { + const { data, isLoading, error } = useGetDeveloperAppQuery(appId || '', { skip: !appId, });This eliminates the state, the effect, and the regex matching, making the code more maintainable.
src/apps/developer-apps/components/AppForm.tsx (1)
254-277: Consider improving type safety for optional form errors.The type assertion on line 273 for
errors.bannersuggests the error types don't fully capture optional fields. While this works, consider updating theFormErrorstype inuseAppFormto explicitly include optional error fields.Otherwise, the Images section is well-implemented with clear required/optional distinctions and helpful sizing recommendations.
src/apps/developer-apps/components/AppCard.tsx (1)
81-91: Consider using tag content as key instead of index.Line 85 uses
key={index}for tag rendering. While this works for static lists, using the tag content as the key would be more robust if tags can be reordered or modified:- {tags.map((tag, index) => ( + {tags.map((tag) => ( <span - key={index} + key={tag} className="px-2 py-1 bg-purple-900/20 border border-purple-700/30 text-purple-300 text-xs rounded" > {tag} </span> ))}This is only a concern if duplicate tags are possible. If tags are guaranteed unique, this change improves React's reconciliation.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
src/apps/developer-apps/assets/icons/close.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/cube.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/error.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/facebook.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/lock.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/telegram.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/tiktok.svgis excluded by!**/*.svgsrc/apps/developer-apps/assets/icons/x-twitter.svgis excluded by!**/*.svgsrc/apps/developer-apps/components/__tests__/__snapshots__/AppCard.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (7)
src/apps/developer-apps/README.md(1 hunks)src/apps/developer-apps/components/AppCard.tsx(1 hunks)src/apps/developer-apps/components/AppForm.tsx(1 hunks)src/apps/developer-apps/components/AppsList.tsx(1 hunks)src/apps/developer-apps/components/ImageUpload.tsx(1 hunks)src/apps/developer-apps/index.tsx(1 hunks)src/test-utils/setupTests.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/apps/developer-apps/components/AppForm.tsxsrc/apps/developer-apps/components/AppsList.tsx
📚 Learning: 2025-10-15T10:31:06.760Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 432
File: src/containers/Main.tsx:135-141
Timestamp: 2025-10-15T10:31:06.760Z
Learning: In src/containers/Main.tsx, the React Native webview messaging setup intentionally only activates when the `devicePlatform` URL parameter is present ('ios' or 'android'). On reloads or direct navigation without URL params, the site should behave normally and not attempt to re-establish RN messaging. This is by design to ensure the site functions properly in both RN webview and standard browser contexts.
Applied to files:
src/apps/developer-apps/components/AppsList.tsx
📚 Learning: 2025-08-20T14:01:31.715Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 387
File: src/apps/leaderboard/components/LeaderboardTab/LeaderboardTab.tsx:118-125
Timestamp: 2025-08-20T14:01:31.715Z
Learning: In src/apps/leaderboard/components/LeaderboardTab/LeaderboardTab.tsx, the "My rank" calculation uses 'trading' context while the list uses 'migration' context when calling calculateFinalPxPoints. This is intentional design to control where the 200-point bonus is applied - the 'trading' context with 'all' timeTab bypasses the bonus while 'migration' context allows it, preventing points from being added in the wrong place.
Applied to files:
src/apps/developer-apps/components/AppsList.tsx
📚 Learning: 2025-11-04T14:34:00.373Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 445
File: src/containers/Authorized.tsx:63-77
Timestamp: 2025-11-04T14:34:00.373Z
Learning: In src/containers/Authorized.tsx, the tempKit useEffect intentionally excludes chainId from its dependency array because the kit is used by useWalletModeVerification to check wallet mode across all supported chains, regardless of the currently selected chainId. The chainId parameter is only used for initial kit configuration and does not affect the multi-chain verification results.
Applied to files:
src/apps/developer-apps/components/AppsList.tsx
🧬 Code graph analysis (3)
src/apps/developer-apps/components/AppForm.tsx (3)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)src/apps/developer-apps/hooks/useAppForm.ts (1)
useAppForm(55-182)src/apps/developer-apps/utils/validation.ts (1)
sanitizeAppId(40-46)
src/apps/developer-apps/components/AppCard.tsx (1)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)
src/apps/developer-apps/components/ImageUpload.tsx (1)
src/apps/developer-apps/utils/imageUtils.ts (2)
validateImageFile(23-43)fileToBase64(4-18)
🪛 Biome (2.1.2)
src/test-utils/setupTests.ts
[error] 344-344: Shouldn't redeclare 'React'. Consider to delete it or rename it.
'React' is defined here:
(lint/suspicious/noRedeclare)
🪛 LanguageTool
src/apps/developer-apps/README.md
[grammar] ~21-~21: Use a hyphen to join words.
Context: ...entication**: Uses your currently logged in wallet - Image Upload: Base64 ima...
(QB_NEW_EN_HYPHEN)
🪛 markdownlint-cli2 (0.18.1)
src/apps/developer-apps/README.md
37-37: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ 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). (4)
- GitHub Check: unit-tests
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: Cloudflare Pages: pillarx-debug
🔇 Additional comments (17)
src/test-utils/setupTests.ts (1)
350-364: LGTM! Clean SVG mocking implementation.The
createSvgMockfactory correctly provides bothReactComponentanddefaultexports to match SVGR's pattern, ensuring compatibility with different import styles used throughout the codebase.src/apps/developer-apps/components/ImageUpload.tsx (3)
9-28: LGTM: Well-structured component interface.The props interface is clear and type-safe, with appropriate optional fields and a clean separation of concerns between external state (value, onChange) and internal processing state (uploading, uploadError).
30-64: LGTM: Robust file handling with proper validation.The event handlers correctly validate files before processing, handle errors appropriately, and maintain proper state management. The separation of concerns between validation, conversion, and state updates is clear.
66-118: LGTM: Clean UI with good user feedback.The render logic provides clear visual feedback for all states (uploading, error, preview). The conditional rendering is well-structured.
src/apps/developer-apps/components/AppForm.tsx (6)
1-40: LGTM: Clean component setup with proper hooks integration.The imports, props interface, and state management are well-organized. The optional chaining on
walletsaccess (line 32) correctly guards against undefined values.
42-48: LGTM: Smart auto-generation logic for appId.The effect correctly auto-generates the appId only in create mode when a name exists and the appId is empty. This prevents overwriting user edits while providing helpful auto-completion.
50-98: LGTM: Comprehensive submit handler with appropriate error handling.The create and update flows are correctly implemented:
- Create mode properly includes the full payload and triggers a reload (necessary for Action Bar integration per the alert message)
- Edit mode correctly excludes immutable fields and navigates back to the list
- Error handling distinguishes MetaMask signature rejections from other errors
The use of native alerts and window.location.reload() is intentional for user feedback and system integration requirements.
100-116: LGTM: Clean cancellation and wallet gating.The cancel handler correctly navigates back to the list, and the wallet-not-connected state provides clear user guidance with appropriate iconography.
118-252: LGTM: Well-structured form sections with helpful guidance.The Basic Information and Launch URL sections provide:
- Clear required field indicators
- Inline validation and formatting (sanitizeAppId)
- Character counters for length-limited fields
- Helpful descriptions explaining each field's purpose
- Proper disabling of immutable fields (appId in edit mode)
279-390: LGTM: Complete form with all required sections and actions.The Contact, Social Links, and Form Actions sections are well-implemented:
- Clear required field marking for support email
- Comprehensive social media platform support
- Appropriate button states and loading indicators
- Good visual hierarchy and spacing
src/apps/developer-apps/components/AppCard.tsx (3)
1-47: LGTM: Clean card header with appropriate defensive checks.The component setup is solid:
- Props interface is clear with well-defined callbacks
- formatDate provides consistent date formatting
- Tag parsing handles trimming whitespace
- Header conditionally renders the logo and uses truncation for long names
49-141: LGTM: Comprehensive status and metadata display.The status indicators, description, tags, and social links are well-implemented:
- Clear visual feedback for app approval status
- Appropriate actions for each state (send for review when applicable)
- Security best practices for external links (noopener noreferrer)
- Good accessibility with title attributes on social links
143-167: LGTM: Clean footer with appropriate action buttons.The footer effectively displays:
- Conditional updated date (only shown if different from created)
- Clear action buttons with appropriate color coding (purple for edit, red for delete)
- Proper callback invocations with appId
src/apps/developer-apps/components/AppsList.tsx (4)
1-31: LGTM: Robust data fetching with defensive filtering.The setup correctly:
- Guards against undefined wallets with optional chaining (line 19)
- Performs case-insensitive address comparison for ownership filtering (line 29)
- Handles missing data gracefully with early returns
- Uses proper memo dependencies
33-88: LGTM: Comprehensive event handlers with proper validation.All handlers correctly:
- Validate wallet connection before actions
- Use appropriate confirmation for destructive operations (delete)
- Handle errors with user feedback
- Navigate to correct routes
90-147: LGTM: Excellent handling of all UI states.Each conditional state provides:
- Appropriate iconography for visual context
- Clear messaging explaining the state
- Actionable next steps where applicable (empty state CTA)
- Consistent styling with the app theme
149-182: LGTM: Clean main render with responsive grid layout.The main state effectively displays:
- Header with dynamic count and proper pluralization
- Appropriately disabled create button during operations
- Responsive grid layout (1/2/3 columns)
- Proper key usage (appId) for list items
- All required callbacks wired to AppCard
RTK Query's mutation handling prevents concurrent operations, so the individual card actions are safe even while
isDeletingis true.
github-actions
bot
requested a deployment
to
Preview (feature/px-developers)
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/apps/developer-apps/index.tsx (1)
56-72: Fix the incorrect navigation path in the error link.The error link on line 65 uses
/app/developer-apps, which is inconsistent with the app's mount point at/developer-apps(as configured in Main.tsx routing). This was flagged in a previous review but remains unfixed. The catch-all redirect on line 85 uses the correct path, but this error link does not.Apply this diff to fix the path:
<a - href="/app/developer-apps" + href="/developer-apps" className="px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-500 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300" >Based on past review comments identifying this routing inconsistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/apps/developer-apps/index.tsx(1 hunks)src/test-utils/setupTests.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/test-utils/setupTests.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-15T10:31:06.760Z
Learnt from: IAmKio
Repo: pillarwallet/x PR: 432
File: src/containers/Main.tsx:135-141
Timestamp: 2025-10-15T10:31:06.760Z
Learning: In src/containers/Main.tsx, the React Native webview messaging setup intentionally only activates when the `devicePlatform` URL parameter is present ('ios' or 'android'). On reloads or direct navigation without URL params, the site should behave normally and not attempt to re-establish RN messaging. This is by design to ensure the site functions properly in both RN webview and standard browser contexts.
Applied to files:
src/apps/developer-apps/index.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). (3)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: build
🔇 Additional comments (1)
src/apps/developer-apps/index.tsx (1)
77-90: Well-structured routing implementation.The routing setup properly leverages React Router v6's nested routes with appropriate paths for list, create, and edit flows. The catch-all redirect correctly uses
/developer-appsas the absolute path (consistent with the app's mount point), and the overall component structure is clean.
github-actions
bot
requested a deployment
to
Preview (feature/px-developers)
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/apps/developer-apps/components/AppForm.tsx (2)
79-79: Fix navigation path to match the actual route/app/developers.After update, the code navigates to
/developer-apps, but the actual entry route used elsewhere in the codebase is/app/developers. This will redirect users to a non-existent route.Apply this diff:
- navigate('/developer-apps'); + navigate('/app/developers');
100-102: Fix navigation path on cancel to match/app/developers.The cancel handler navigates to
/developer-apps, but the actual route is/app/developers. Users will be sent to an incorrect URL.Apply this diff:
const handleCancel = () => { - navigate('/developer-apps'); + navigate('/app/developers'); };
🧹 Nitpick comments (1)
src/apps/developer-apps/components/AppCard.tsx (1)
83-90: Consider using tag content as key instead of array index.While using array index as key works for this static list, using the tag content would be more semantically correct and avoid potential issues if the tags list becomes dynamic.
Apply this diff:
{tags.map((tag, index) => ( <span - key={index} + key={tag} className="px-2 py-1 bg-purple-900/20 border border-purple-700/30 text-purple-300 text-xs rounded" > {tag} </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/apps/developer-apps/components/__tests__/__snapshots__/AppCard.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (7)
src/apps/developer-apps/components/AppCard.tsx(1 hunks)src/apps/developer-apps/components/AppForm.tsx(1 hunks)src/apps/developer-apps/components/AppsList.tsx(1 hunks)src/apps/developer-apps/components/ImageUpload.tsx(1 hunks)src/apps/developer-apps/index.tsx(1 hunks)src/components/AnimatedShape.tsx(1 hunks)vite.config.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/apps/developer-apps/components/AppsList.tsx
- src/apps/developer-apps/index.tsx
- src/apps/developer-apps/components/ImageUpload.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-20T09:14:16.888Z
Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.
Applied to files:
src/apps/developer-apps/components/AppForm.tsx
🧬 Code graph analysis (2)
src/apps/developer-apps/components/AppCard.tsx (1)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)
src/apps/developer-apps/components/AppForm.tsx (3)
src/apps/developer-apps/api/developerAppsApi.ts (1)
DeveloperApp(6-25)src/apps/developer-apps/hooks/useAppForm.ts (1)
useAppForm(55-182)src/apps/developer-apps/utils/validation.ts (1)
sanitizeAppId(40-46)
⏰ 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). (4)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: build
- GitHub Check: Cloudflare Pages: pillarx-debug
🔇 Additional comments (7)
vite.config.js (1)
9-9: Simplified SVGR plugin invocation is correct.vite-plugin-svgr 4.3.0 documents the basic usage pattern as
svgr()without options. Removing the empty options object aligns with the standard configuration and the ?react query pattern for importing SVGs as React components. The change is clean and follows documented best practices for this version.src/apps/developer-apps/components/AppForm.tsx (3)
43-48: LGTM: Auto-generate appId logic is well implemented.The effect correctly auto-generates the appId from the name in create mode, only when the appId is empty. The dependencies and sanitization are appropriate.
104-116: LGTM: Wallet guard provides clear UX.The wallet connection guard properly prevents form access without a connected wallet and provides clear, user-friendly messaging with visual cues.
118-392: LGTM: Comprehensive form structure with good UX.The form is well-organized with clear sections, proper validation feedback, character counters, and appropriate field restrictions (e.g., disabled appId in edit mode). The use of ImageUpload components and clear labeling enhances usability.
src/apps/developer-apps/components/AppCard.tsx (3)
49-76: LGTM: Status indicator logic is clear and intuitive.The status display correctly handles the three states (approved/live, unpublished, in review) with appropriate color coding and actionable UI when the app can be sent for review.
94-141: LGTM: Social links properly secured and rendered.The social links are conditionally rendered with proper security attributes (
noopener noreferrer), consistent styling, and clear titles. Good implementation.
143-165: LGTM: Footer displays timestamps and actions clearly.The footer appropriately shows creation/update timestamps and provides clearly styled Edit/Delete buttons with distinct visual treatment. The conditional display of the updated timestamp avoids redundancy.
2 participants
Description
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Summary by CodeRabbit
New Features
Documentation
Tests
Style
✏️ Tip: You can customize this high-level summary in your review settings.