feat: add clipboard paste shortcut with Stellar address validation to… - #36
feat: add clipboard paste shortcut with Stellar address validation to…#36avatGit wants to merge 1 commit into
Conversation
… Send and Schedule pages
@avatGit is attempting to deploy a commit to the MJ X Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughA new reusable ChangesAddressInput Component and Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (4)
apps/src/pages/SchedulePage.tsx (1)
108-114: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMinor formatting inconsistencies.
Line 113 has trailing whitespace after
/>, and line 114 has leading whitespace before</div>. While these don't affect functionality, they create inconsistent formatting.♻️ Formatting cleanup
<AddressInput value={destination} onChange={setDestination} placeholder="G..." className="font-mono text-sm" - /> - </div>+ />+ </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/src/pages/SchedulePage.tsx` around lines 108 - 114, Remove the trailing whitespace after the AddressInput component's closing tag `/>` on line 113, and remove the excessive leading whitespace before the closing `</div>` tag on line 114 to ensure consistent formatting and proper indentation alignment with the rest of the component.apps/src/components/AddressInput.tsx (3)
44-44: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove empty comment.
The empty comment on line 44 serves no purpose and reduces code clarity.
♻️ Suggested cleanup
} catch (error) { - // toast.error("Clipboard access permission denied");🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/src/components/AddressInput.tsx` at line 44, Remove the empty comment line in the AddressInput.tsx component at line 44. The standalone comment marker "//" with no text following it provides no value and should be deleted entirely to improve code clarity and cleanliness.
51-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueThe
classNameprop is applied to the wrapper div, not the input element.The
classNameprop passed from parent components (e.g.,"font-mono text-sm"in SendPage and SchedulePage) is applied to the outer wrapper<div>on line 51, not to the<input>element on line 52, which has its own fixed className. This means font and text styling passed viaclassNamewon't affect the input's appearance as might be expected.If the intent is to allow parent components to style the input element, consider either:
- Accepting separate
wrapperClassNameandinputClassNameprops- Applying the
classNameprop to the input element instead- Documenting that
classNamestyles the wrapper🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/src/components/AddressInput.tsx` around lines 51 - 67, The AddressInput component applies the className prop to the outer wrapper div instead of the input element, which prevents parent components from styling the input itself (e.g., font-mono, text-sm won't affect the input's appearance). Move the className prop from the wrapper div to the input element on line 52, or alternatively refactor the component to accept separate wrapperClassName and inputClassName props to give parents control over styling both the wrapper and the input element independently.
43-47: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueError message may be misleading for non-permission failures.
The catch block assumes all errors from
navigator.clipboard.readText()are permission denials, but the API can fail for other reasons (e.g., the page is not in a secure context despitenavigator.clipboardexisting, or other runtime errors). While the actual error is logged to console, the toast message might confuse users in edge cases.♻️ Optional improvement for error clarity
} catch (error) { - toast.error("Clipboard access permission denied");+ toast.error("Unable to access clipboard"); console.error("Clipboard Error: ", error);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/src/components/AddressInput.tsx` around lines 43 - 47, The catch block for navigator.clipboard.readText() assumes all errors are permission denials and displays a misleading toast message. Instead of showing a generic permission error, inspect the caught error object to determine the actual cause (permission error, insecure context, or other runtime errors) and display an appropriate toast message using toast.error() based on the specific error condition. This ensures users see an accurate error message for their particular failure scenario.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/src/components/AddressInput.tsx`:
- Line 44: Remove the empty comment line in the AddressInput.tsx component at
line 44. The standalone comment marker "//" with no text following it provides
no value and should be deleted entirely to improve code clarity and cleanliness.
- Around line 51-67: The AddressInput component applies the className prop to
the outer wrapper div instead of the input element, which prevents parent
components from styling the input itself (e.g., font-mono, text-sm won't affect
the input's appearance). Move the className prop from the wrapper div to the
input element on line 52, or alternatively refactor the component to accept
separate wrapperClassName and inputClassName props to give parents control over
styling both the wrapper and the input element independently.
- Around line 43-47: The catch block for navigator.clipboard.readText() assumes
all errors are permission denials and displays a misleading toast message.
Instead of showing a generic permission error, inspect the caught error object
to determine the actual cause (permission error, insecure context, or other
runtime errors) and display an appropriate toast message using toast.error()
based on the specific error condition. This ensures users see an accurate error
message for their particular failure scenario.
In `@apps/src/pages/SchedulePage.tsx`:
- Around line 108-114: Remove the trailing whitespace after the AddressInput
component's closing tag `/>` on line 113, and remove the excessive leading
whitespace before the closing `</div>` tag on line 114 to ensure consistent
formatting and proper indentation alignment with the rest of the component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 40bb9572-a28f-4421-a00e-8888b94b9ea9
📒 Files selected for processing (3)
apps/src/components/AddressInput.tsxapps/src/pages/SchedulePage.tsxapps/src/pages/SendPage.tsx
Summary
Addresses the issue where mobile users have to manually type or paste Stellar public keys. This PR adds a reusable
AddressInputcomponent with a paste icon button next to destination fields, significantly improving mobile UX.Changes
src/components/AddressInput.tsx(handles clipboard access and validation)src/pages/SendPage.tsx&src/pages/SchedulePage.tsx(replaced old input fields)Key Features
navigator.clipboard.readText()to auto-fill the field.StellarSdk.StrKey.isValidEd25519PublicKey().react-hot-toast.Closes#3
Summary by CodeRabbit