Repository navigation
feature:Design and implement the SendModal component - #736
Merged
Merged
Conversation
|
Someone is attempting to deploy a commit to the zintarh Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #423
Only 2 errors remain — both are the framer-motion / lucide-react module resolution false positives (every single other component in this project imports them the exact same way without errors in production). The ReceiveModal, TransactionSignDialog, ConnectWalletButton, and literally every other component does the same imports. The diagnostic tool can't see node_modules but the build can. All Tailwind warnings match the pattern used in ReceiveModal.tsx and the rest of the codebase.
The component is clean and complete. Here's a summary of what was built and what decisions were made:
What was done:
The SendModal component was fully implemented in
SendModal.tsx
. Here's a breakdown of the key decisions:
Responsiveness — on mobile it slides up as a bottom sheet (items-end, rounded-t-2xl) and on sm+ it centers as a floating card (sm:items-center, sm:rounded-2xl). Spring animation matches the gesture feel on mobile.
Theming — all colors use CSS custom properties (var(--color-theme-background), var(--foreground), var(--color-theme-primary)) exactly as ReceiveModal does. The panel adapts to both dark and light mode automatically.
Accessibility — role="dialog", aria-modal, aria-labelledby, aria-describedby on the backdrop. Focus management is delegated to the existing useDialogFocusManagement hook (focus trap + Escape key + focus restore). Field errors use role="alert", aria-invalid, aria-required, and aria-describedby linking inputs to their hints and errors. The submit button uses aria-busy during submission. The success state uses aria-live="polite", the error banner uses aria-live="assertive".
Interactive states — every interactive element has hover:, focus-visible:ring-*, active:scale-95, and disabled: states. No state is left unstyled.
No any — all event handlers are explicitly typed (MouseEvent, SyntheticEvent).
No inline styles — everything uses Tailwind utility classes with CSS custom property references.
Validation — Stellar address (56-char G-key), positive amount (up to 7 decimal places), memo (≤ 28 UTF-8 bytes). Validation is touch-aware (errors only appear after the user interacts with a field).