feat(pay): manual-transfer copy-fields + confirmation button#72
Merged
codebestia merged 4 commits intoMay 30, 2026
Conversation
…Protocol#55) Adds CopyAddressAmount — two read-only fields (address and amount) each wired to a copy-to-clipboard icon button — to support the manual-transfer payment flow. - src/components/pay/copy-address-amount.tsx: prefers the async Clipboard API and falls back to an offscreen textarea + execCommand("copy") so it still works in non-secure (HTTP) contexts, embedded webviews, and older browsers. - Surfaces success / failure via the existing notify() helper and swaps the icon to a check + "Copied" label for ~1.5s after a successful copy. - A11y: associated <label>, aria-pressed on the toggle, aria-label on the icon button, and click-to-select-all on focus. Co-Authored-By: Claude <noreply@anthropic.com>
…ol#56) Adds the primary action at the bottom of the manual-transfer view. On click it enters a "Verifying on-chain…" loading state, fires the parent-provided onConfirm callback (which is where the real chain polling lands in a follow-up), and renders a clear "Payment confirmed" success state once verification resolves. - src/components/pay/confirm-payment-button.tsx: state machine idle → verifying → verified with aria-busy and aria-live="polite" so screen readers announce the verification step. - src/components/pay/manual-transfer-view.tsx (new): pulls together CopyAddressAmount (ShadeProtocol#55) and ConfirmPaymentButton (ShadeProtocol#56) into a single panel with placeholder demo address/amount; the real invoice-bound values land in a follow-up wire-up task. - src/components/pay/pay-tabs.tsx: renders ManualTransferView in the "Manual transfer" tab in place of the previous placeholder copy. Co-Authored-By: Claude <noreply@anthropic.com>
- Regenerated package-lock.json so `npm ci` resolves cross-platform optional deps (the previous lockfile was missing typescript@4.9.5 and utf-8-validate@5.0.10 entries that `@twind/*` transitively pulls in). - Ran Prettier on the four files this PR added/changed under `src/components/pay/`. Other format:check warnings in the repo are pre-existing on main and out of this PR's scope. Done with AI assistance, as previously disclosed on this PR.
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
2 participants
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.
Summary
Builds out the manual-transfer payment flow: two read-only fields with copy-to-clipboard icons for the destination address and amount, plus a primary "I have sent the payment" button that drops into a verifying state while the parent waits for on-chain confirmation. The pay-tabs "Manual transfer" panel now renders this view in place of the previous placeholder copy.
closes #55
closes #56
Changes
Create "Copy Address & Amount" Component #55 — Copy Address & Amount component:
src/components/pay/copy-address-amount.tsx(new): two read-only inputs (address + amount) each paired with aCopyicon button. After a successful copy, the icon swaps to aCheckwith "Copied" for ~1.5s and fires anotify.success(...)toast via the existinglib/toastwrapper. Clipboard write prefersnavigator.clipboard.writeTextand falls back to an offscreen textarea +execCommand("copy")so the component still works in non-secure (HTTP) contexts, embedded webviews, and older browsers. A11y: associated<label>,aria-labelon the icon button,aria-pressedto convey the copied state, and click-to-select-all on focus.Create "Confirm Payment Sent" Button #56 — Confirm Payment Sent button:
src/components/pay/confirm-payment-button.tsx(new): primary<Button size="lg">with anidle → verifying → verifiedstate machine. On click it setsverifying, invokes the parent-providedonConfirmcallback (where the real chain polling lands), and on resolution switches toverified. Markedaria-busyduring verification andaria-live="polite"so screen readers announce the transition.src/components/pay/manual-transfer-view.tsx(new): pullsCopyAddressAmount(Create "Copy Address & Amount" Component #55) andConfirmPaymentButton(Create "Confirm Payment Sent" Button #56) together into a single panel, with placeholder demo address/amount so the flow renders cleanly today; the real invoice-bound values + Horizon polling land in a follow-up wire-up task.src/components/pay/pay-tabs.tsx: renders<ManualTransferView />inside the "Manual transfer"tabpanelin place of the previous "Manual transfer instructions will appear here." placeholder.Test plan
npx tsc --noEmit— passes cleanly.npm run lint— passes for the new files. Pre-existing errors elsewhere (src/app/sign-in/sign-in-client.tsxunused import;src/components/avatar/avatar-upload.tsx<img>warning) are untouched by this PR and visible onmaintoo.Risk notes
ManualTransferView's existing props in a follow-up.Note: this contribution was authored with AI assistance (Claude Code).