Refactor: UI changes for developers setting and passkey components.

[pranalidhanavade]

What

• UI changes for developers setting and passkey components.

UI screens

---

Important

Refactor UI for developer settings and passkey components, adding new layouts, icons, and bug fixes.

• UI Enhancements:
  • Refactor AddPasskey.tsx to improve layout and add external link for passkey information.
  • Update DeviceDetails.tsx to use a data table for device management, including edit and delete actions.
  • Enhance DevelopersSetting.tsx with new card layout for client credentials and application version.
• New Components:
  • Add EditIcon.tsx for consistent iconography across the application.
• Bug Fixes:
  • Correct typo in DeleteModal.tsx and EditModal.tsx by renaming onSucess to onSuccess.
• Miscellaneous:
  • Update envConfig.ts to include NEXT_PUBLIC_CURRENT_RELEASE for version tracking.
  • Adjust stepper text in WalletSpinupComponent.tsx and LedgerConfig.tsx for clarity.

^{This description was created by for b68323a. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 38db56d in 2 minutes and 13 seconds. Click for details.

• Reviewed 562 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 12 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. nextjs/src/config/envConfig.ts:44

• Draft comment:
  Added NEXT_PUBLIC_CURRENT_RELEASE in the env destructuring and set as PLATFORM_DATA.version. Confirm that exposing the release info is intended.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. nextjs/src/config/svgs/EditIcon.tsx:1

• Draft comment:
  New EditIcon component added. Consider adding an aria-label for accessibility.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While accessibility is important, this is primarily a UI/styling change. The rules state not to comment on pure frontend UI or styling changes and to assume the author did these correctly. Additionally, accessibility concerns might be handled at a higher level component where this icon is used, such as with aria-label on a button that contains this icon. Accessibility is crucial for web applications and SVG icons should be properly labeled. The comment provides a concrete, actionable suggestion. However, per the rules, we should not comment on pure UI/styling changes and should assume the author handled these aspects correctly. The accessibility implementation could be intentionally handled differently at the usage level. The comment should be deleted as it violates the rule about not commenting on pure frontend UI and styling changes.

3. nextjs/src/features/passkey/AddPasskey.tsx:285

• Draft comment:
  Enhanced Add Passkey header now includes a 'Learn more' link. Consider extracting the inline SVG in the add button to a reusable icon component for consistency.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% The first part about the "Learn more" link is purely descriptive and not actionable. The second part about extracting the SVG is a reasonable code quality suggestion since the SVG is part of the changed code. However, this is a relatively minor improvement and may not be worth the effort given that the SVG is only used once in this component. The suggestion to extract the SVG might be premature optimization if this icon is only used here. Also, the codebase might have existing patterns for handling icons that I'm not aware of. While the critique is valid, extracting SVGs to reusable components is generally good practice for maintainability and consistency, even if used only once initially. The comment should be deleted because the first part is purely descriptive and the second part, while technically valid, is a minor optimization that may not be worth the overhead.

4. nextjs/src/features/passkey/AddPasskey.tsx:356

• Draft comment:
  Device list has been refactored to use a semantic table. Ensure that DeviceDetails consistently returns a proper to maintain valid table structure.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 30% vs. threshold = 50% This is a structural change that could cause layout issues if not handled correctly. The comment is specific about what needs to be checked (tr element in DeviceDetails) and why (table structure). However, we can't see the DeviceDetails component implementation, so we can't verify if this is already handled correctly or not. The comment is speculative without seeing the other file. Without seeing the DeviceDetails component implementation, we can't be certain if this is an actual issue or if it's already properly implemented. The comment could be raising a non-existent issue. However, this is a significant structural change that could break the layout if not handled correctly, and the comment provides clear, actionable guidance about what needs to be checked. Since we can't verify the implementation of DeviceDetails and the comment is somewhat speculative, we should err on the side of removing it per our guidelines about speculative comments.

5. nextjs/src/features/passkey/DeviceDetails.tsx:87

• Draft comment:
  DeviceDetails component is refactored to render table rows (/). Verify that its parent always provides a valid table context.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify that the parent component provides a valid table context for the refactored DeviceDetails component. This is asking the author to double-check something, which violates the rules.

6. nextjs/src/features/passkey/EditModal.tsx:52

• Draft comment:
  Using enableReinitialize with the initialName prop in Formik ensures the form updates on prop changes. This is a good use of Formik's features.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative and does not provide any actionable feedback or suggestions for improvement. It simply states that the use of a feature is good, which does not align with the rules for useful comments.

7. nextjs/src/features/profile/components/DevelopersSetting.tsx:89

• Draft comment:
  A new useEffect for auto-dismissing success messages and an Application Version card using envConfig.PLATFORM_DATA.version have been added. Ensure that the version value is reliably available in production.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

8. nextjs/src/features/wallet/LedgerConfig.tsx:512

• Draft comment:
  Added a 'border' class to the LedgerConfig container. This improves the visual consistency of the card components.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative and does not provide any actionable feedback or suggestions for improvement. It simply states what was done and why, which violates the rule against making purely informative comments.

9. nextjs/src/features/wallet/WalletSpinupComponent.tsx:564

• Draft comment:
  Step indicator text updated from 'Step 3 of 4' to 'Step 2 of 4'. Verify that this change accurately reflects the current stage of the wallet spinup process.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify the change, which violates the rule against asking for confirmation or verification. It does not provide a specific suggestion or point out a clear issue with the code.

10. nextjs/src/features/passkey/AddPasskey.tsx:290

• Draft comment:
  Typo: The text says "complex password" but it should be "complex passwords" to match the intended meaning.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While the comment is technically correct - "complex password" should be "complex passwords" - this is a very minor text change that doesn't affect functionality. The meaning is still clear either way. The rules say not to make purely informative comments and to avoid obvious or unimportant changes. This seems to fall into that category. The text is customer-facing UI text, so one could argue that proper grammar is important for professionalism and user experience. While proper grammar is good, this is an extremely minor issue that doesn't meaningfully impact understanding or professionalism. The rules explicitly say to avoid unimportant comments. Delete this comment as it's too minor and falls under the rule of avoiding purely informative or unimportant comments.

11. nextjs/src/features/passkey/DeviceDetails.tsx:144

• Draft comment:
  Typo: 'onSucess' is likely intended to be 'onSuccess'.
• Reason this comment was not posted:
  Comment was on unchanged code.

12. nextjs/src/features/passkey/EditModal.tsx:22

• Draft comment:
  Typographical error: The property name 'onSucess' appears to be misspelled. Consider changing it to 'onSuccess' for clarity and consistency.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_F3WTojDGkFSjgm9O

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[sujitaw]

ok

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed 59a3fb3 in 2 minutes and 41 seconds. Click for details.

• Reviewed 279 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 6 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. nextjs/src/features/passkey/AddPasskey.tsx:356

• Draft comment:
  Ensure that deviceList objects include a 'createDateTime' field as expected by DeviceDetails. If the API returns 'lastChangedDateTime', update the mapping to rename it accordingly.
• Reason this comment was not posted:
  Comment was on unchanged code.

2. nextjs/src/features/passkey/DeviceDetails.tsx:181

• Draft comment:
  Minor typo: consider renaming the modal callback prop from 'onSucess' to 'onSuccess' for clarity and consistency.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. nextjs/src/features/passkey/DeviceDetails.tsx:99

• Draft comment:
  Ensure each row given to DataTable has a unique key if DataTable doesn’t handle key assignment internally to avoid potential rendering issues.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% 1. React lists should have keys for performance and correctness. 2. The credentialId would make a good key since it's unique. 3. However, we can't see the DataTable implementation - it might handle keys internally. 4. The comment is speculative without knowing the DataTable implementation. 5. No obvious bugs or issues are present in the current code. Without seeing the DataTable implementation, we can't be certain if keys are actually needed. The current code might be working perfectly fine. While keys are important in React, making speculative suggestions without evidence of an actual problem violates our review guidelines. Delete the comment since it's speculative without evidence of an actual issue, and we don't have visibility into the DataTable implementation.

4. nextjs/src/features/passkey/DeviceDetails.tsx:164

• Draft comment:
  Consider clearing the selectedDevice state after a successful edit or delete action to prevent stale selections, even though the modals are closed.
• Reason this comment was not posted:
  Comment was on unchanged code.

5. nextjs/src/features/passkey/AddPasskey.tsx:362

• Draft comment:
  Typographical issue: The prop name is 'openModal' but the value passed is 'openModel'. Consider renaming 'openModel' to 'openModal' (or vice versa) for consistency.
• Reason this comment was not posted:
  Comment was on unchanged code.

6. nextjs/src/features/passkey/DeviceDetails.tsx:190

• Draft comment:
  Typographical error: The prop name 'onSucess' appears to be misspelled. Consider renaming it to 'onSuccess' for clarity and consistency.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_hPFqrHykhS48PfI5

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed b68323a in 1 minute and 6 seconds. Click for details.

• Reviewed 90 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. nextjs/src/features/passkey/DeleteModal.tsx:17

• Draft comment:
  Fixed typo: the prop 'onSucess' is now correctly spelled as 'onSuccess' (also updated in button onClick).
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. nextjs/src/features/passkey/DeviceDetails.tsx:138

• Draft comment:
  Added aria-label attributes for edit and delete buttons; also updated prop names to onSuccess for modals for consistency.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. nextjs/src/features/passkey/EditModal.tsx:19

• Draft comment:
  Renamed the callback prop to 'onSuccess' for consistency. Consider typing formikRef more explicitly instead of using any for improved type safety.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

4. nextjs/src/features/passkey/DeviceDetails.tsx:192

• Draft comment:
  Typo corrected: The prop name was previously 'onSucess' and is now correctly changed to 'onSuccess'.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, as it only states that a typo was corrected. It doesn't provide any actionable feedback or suggestions for improvement.

5. nextjs/src/features/passkey/EditModal.tsx:32

• Draft comment:
  Typo correction: 'onSucess' has been corrected to 'onSuccess'.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative as it only points out a typo correction without suggesting any action or asking for confirmation. It doesn't provide any actionable feedback or suggestion for improvement.

Workflow ID: wflow_Y7tmjF36pqxsiRkF

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}