feat(swap-widget): overhaul receive address UI - #12407
Merged
Merged
Conversation
Reduce asset data regeneration from daily to once per week (Monday 9AM UTC), as daily regen is excessive given current web release cadence. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the receive-address modal with a dedicated, always-visible row after the Buy card that is directly editable inline. A custom address can be entered even when one is derived from the connected wallet, with inline accept/reset controls, adaptive resolved/input/skeleton states, and a soft attention glow only when an address is genuinely needed. The row is scoped to the buy chain, so an in-progress draft resets across namespaces (e.g. EVM -> UTXO). Taking the issue as a starting point, this also overhauls the surrounding widget internals: - Input/step/modal components read machine and wallet state from context instead of prop-drilling (InputStep ~35 props -> a handful). - Action-button label and disabled state are unified into a single source of truth (Connect Wallet -> receive address -> amount), removing drift and dead "Executing..." branches. - Connect flow opens AppKit per-namespace for every chain (not just EVM), and the EVM connect guard keys off isConnected. - Display-values and EVM signing hooks are memoized for stable references. Closes SS-5661 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR refactors the swap widget's address input flow and component architecture, replacing a modal-based address input with an inline editable component and migrating multiple step components to context-driven patterns using ChangesSwap Widget Address Input and Context Refactor
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
.github/workflows/generate.yml (2)
72-76: ⚡ Quick winRemove duplicate branch checkout.
Line 76 repeats the
git checkout -B feat_regenerate_asset_datacommand that was already executed on line 72. The second checkout is redundant.♻️ Proposed fix
- name: Commit changes run: | - git checkout -B feat_regenerate_asset_data git config --local user.email "action@github.com" git config --local user.name "asset-generation-bot"🤖 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 @.github/workflows/generate.yml around lines 72 - 76, The workflow contains a duplicated git checkout command ("git checkout -B feat_regenerate_asset_data") — remove the redundant second occurrence inside the "Commit changes" step so the branch is only created/checked out once; keep the first checkout (the one before the "Commit changes" step) and ensure the "Commit changes" step only runs the commit/add/push commands, not another git checkout.
44-44: ⚡ Quick winUpdate pnpm pin for CI maintenance (security risk looks unlikely for 10.30.3)
.github/workflows/generate.ymlpinspnpm@10.30.3, but the latest published pnpm is11.5.1. Current GitHub advisory data shows pnpm vulnerabilities patched at/affecting versions like< 10.28.1/< 10.28.2and other ranges below10.27.0, with nothing in the returned advisories indicating impact for10.30.3. Consider bumping the pin to a newer 10.x/11.x release to stay current.🤖 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 @.github/workflows/generate.yml at line 44, Update the pnpm version pin in the workflow's run command (the line containing "corepack enable && corepack prepare pnpm@10.30.3 --activate") to a newer, maintained release (for example pnpm@11.5.1 or the latest 11.x) to keep CI current; modify that command to reference the chosen newer version and ensure CI runs successfully after the change.
🤖 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.
Inline comments:
In @.github/workflows/generate.yml:
- Line 7: The change to the scheduled cron entry ("cron: '0 9 * * 1' # 9AM UTC
every Monday") is unrelated to the swap widget UI work and should not be bundled
here; either revert this cron line back to its previous value in this branch or
remove the change and open a separate PR that only updates the workflow schedule
(file containing the cron entry) so asset data generation scheduling is tracked
independently from the swap widget refactor.
In `@packages/swap-widget/src/components/ApprovalStep.tsx`:
- Line 6: The destructuring of send from SwapMachineCtx.useActorRef() in
ApprovalStep is safe—keep using const { send } = SwapMachineCtx.useActorRef() as
is (same pattern used in StatusStep), or if you want explicitness/consistency
change to const actorRef = SwapMachineCtx.useActorRef() and call
actorRef.send(...) in your click handlers; update ApprovalStep's handlers to use
the chosen form (send or actorRef.send) so calls reference the correct symbol.
In `@packages/swap-widget/src/components/ReceiveAddressRow.tsx`:
- Around line 121-139: The input in ReceiveAddressRow currently uses a span for
"Receive address" so screen readers rely on the placeholder; update the
component to give the input an accessible name by either converting the
span.ssw-receive-label into a <label> and linking it to the input via an
id/htmlFor pair, or by adding an explicit aria-label (e.g. aria-label="Receive
address") on the input element (ssw-receive-input) while keeping existing
refs/handlers (inputRef, handleChange, draft, formatHint) unchanged.
---
Nitpick comments:
In @.github/workflows/generate.yml:
- Around line 72-76: The workflow contains a duplicated git checkout command
("git checkout -B feat_regenerate_asset_data") — remove the redundant second
occurrence inside the "Commit changes" step so the branch is only
created/checked out once; keep the first checkout (the one before the "Commit
changes" step) and ensure the "Commit changes" step only runs the
commit/add/push commands, not another git checkout.
- Line 44: Update the pnpm version pin in the workflow's run command (the line
containing "corepack enable && corepack prepare pnpm@10.30.3 --activate") to a
newer, maintained release (for example pnpm@11.5.1 or the latest 11.x) to keep
CI current; modify that command to reference the chosen newer version and ensure
CI runs successfully after the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dbfdaf8a-ddd9-4ac1-9f54-59eef37dce7a
📒 Files selected for processing (16)
.github/workflows/generate.ymlpackages/swap-widget/src/components/AddressInputModal.csspackages/swap-widget/src/components/AddressInputModal.tsxpackages/swap-widget/src/components/ApprovalStep.tsxpackages/swap-widget/src/components/ExecutionStep.tsxpackages/swap-widget/src/components/InputStep.tsxpackages/swap-widget/src/components/ReceiveAddressRow.tsxpackages/swap-widget/src/components/SettingsModal.tsxpackages/swap-widget/src/components/StatusStep.tsxpackages/swap-widget/src/components/SwapWidget.csspackages/swap-widget/src/components/SwapWidget.tsxpackages/swap-widget/src/components/TokenSelectModal.tsxpackages/swap-widget/src/contexts/SwapWalletContext.tsxpackages/swap-widget/src/hooks/useEvmSigning.tspackages/swap-widget/src/hooks/useSwapDisplayValues.tspackages/swap-widget/src/hooks/useSwapHandlers.ts
💤 Files with no reviewable changes (2)
- packages/swap-widget/src/components/AddressInputModal.tsx
- packages/swap-widget/src/components/AddressInputModal.css
The "Receive address" caption is a span, not a label tied to the input, so the field's only accessible name was the placeholder format hint. Add an explicit aria-label so screen readers announce the field purpose. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Description
Started from SS-5661 ("manual address only editable in one spot") and ran with it into a full overhaul of the swap-widget receive-address UX, plus the surrounding internals.
Receive address UX
Internals refactor (taking the issue as a jumping-off point)
InputStepwent from ~35 props to a handful); theAddressInputModalis deleted.Connect Wallet → receive address → amount), eliminating a label/disabled drift bug and removing unreachable "Executing…" branches (execution is shown byExecutionStep). Connect labels are now uniformly "Connect Wallet" (chain is irrelevant to the user).isConnected.useSwapDisplayValuesanduseEvmSigningnow return memoized objects for stable references.Issue (if applicable)
closes #12322
Linear: SS-5661 — Manual address only editable in one spot
Risk
Testing
Engineering
Run the widget demo (
pnpm --filter @shapeshiftoss/swap-widget dev) and verify:Connect Wallet(enabled) →Enter receive address→Enter an amount→Finding rates…→Swap; label always matches enabled/disabled state.Connect Walletopens AppKit for each sell chain type (EVM / Bitcoin / Solana).pnpm exec tsc --noEmitandeslintpass (verified locally).Operations
@shapeshiftoss/swap-widgetSDK package; not a user-facing feature in the main app and not gated by an app feature flag — no operations testing required.Screenshots (if applicable)
Summary by CodeRabbit
New Features
Refactor
Style