Skip to content

fix: improve UX feedback, memoization consistency, and docs accuracy#1

Open
eren-karakus0 wants to merge 3 commits intoshelby:mainfrom
eren-karakus0:fix/ux-and-code-quality
Open

fix: improve UX feedback, memoization consistency, and docs accuracy#1
eren-karakus0 wants to merge 3 commits intoshelby:mainfrom
eren-karakus0:fix/ux-and-code-quality

Conversation

@eren-karakus0
Copy link
Copy Markdown

@eren-karakus0 eren-karakus0 commented Feb 19, 2026

Summary

Four targeted improvements to code quality and user experience:

  • UX: Clipboard copy feedback — Added toast notifications when copying wallet or storage account addresses in the Header dropdown. The app already uses sonner for toasts, but the copy actions had no user feedback.
  • React: Memoization consistency — Wrapped handleFileChange in useCallback in BlobUploader to match the pattern used by all other event handlers (handleUpload, handleFileInputClick).
  • React: Key prop cleanup — Simplified the uploaded blob list key from `${blob.name}-${index}` to blob.name, since blob names are enforced unique by the duplicate check. Removes the array index anti-pattern.
  • Docs: Node.js version — Fixed README prerequisite from "Node.js 18+" to "Node.js 22+" to match the engines field in package.json.

Changes

File Change
src/components/Header.tsx Add toast.success() on clipboard copy, import toast from sonner
src/components/BlobUploader.tsx Wrap handleFileChange in useCallback, simplify key prop
README.md Fix Node.js version requirement (18+ → 22+)

Test plan

  • Biome lint passes on all changed files
  • No behavioral changes beyond added toast feedback
  • Existing test suite unaffected (changes are additive)

Note

Low Risk
Changes are limited to UI feedback, React memoization/key hygiene, and documentation; no protocol/auth/data-flow logic is altered.

Overview
Improves small UX and React correctness details across the demo.

In Header, copy-to-clipboard actions for wallet and storage addresses are now async and show sonner success toasts after copying.

In BlobUploader, handleFileChange is wrapped in useCallback (matching other handlers) and the uploaded blob list key is simplified to blob.name now that duplicates are prevented. The README prerequisite is updated from Node 18+ to Node 22+.

Written by Cursor Bugbot for commit befe4c9. This will update automatically on new commits. Configure here.

- Add toast notifications for clipboard copy actions in Header
  (wallet address and storage account address)
- Wrap handleFileChange in useCallback for memoization consistency
  with other handlers in BlobUploader
- Simplify uploaded blob list key prop (blob names are already
  unique due to duplicate check, removing unnecessary index)
- Fix README Node.js version requirement (18+ -> 22+) to match
  the engines field in package.json
Comment thread src/components/Header.tsx Outdated
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

Comment thread src/components/Header.tsx
bem1102 added a commit to bem1102/shelby-ai-web-starter that referenced this pull request Mar 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant