8000 feat(bridge): enhance SwapConfirmModal with loading state handling an… by fairlighteth · Pull Request #5902 · cowprotocol/cowswap · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat 8000 (bridge): enhance SwapConfirmModal with loading state handling an… #5902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

feat(bridge): enhance SwapConfirmModal with loading state handling an… #5902

wants to merge 1 commit into from

Conversation

fairlighteth
Copy link
Contributor
@fairlighteth fairlighteth commented Jun 28, 2025 •
edited
Loading

Summary

Fixes multiple critical UI and UX bugs that occur when opening and closing the CoWShed modal from the swap confirmation screen. This PR implements a robust, multi-part solution that:

  1. Prevents the "Confirm Swap" button from being incorrectly disabled.
  2. Eliminates a jarring UI flicker and transient data loss during context switches.
  3. Provides a clear and informative loading state for the user during background quote refreshes.

This tactical solution immediately resolves the user-facing issues while we plan a longer-term architectural improvement to the underlying data hooks.

Before

Screen.Recording.2025-06-28.at.17.23.22.mov

After

Screen.Recording.2025-06-28.at.17.24.25.mov

To Test

  1. Confirm Button Stability

    • Navigate to the swap page and input a valid trade.
    • Click "Review trade" to open the confirmation modal.
    • Open the "Account Proxy" modal (CoWShed).
    • Close the "Account Proxy" modal.
    • Verify: The "Confirm Swap" button is enabled and does NOT show an "Insufficient balance" error (assuming you have funds).

  2. UI Flicker and Data Stability

    • Repeat the steps above, preferably with a bridge trade that has more data fields.
    • When opening and closing the "Account Proxy" modal:
    • Verify: The confirmation modal's content remains completely stable and does n 8000 ot flicker or disappear.
    • Verify: All data, especially the "Receive (before fees)" amount, remains visible throughout.

  3. Loading State UX

    • On the swap confirmation modal, wait for the quote refresh countdown.
    • Verify: When the countdown finishes and a new quote is fetched, the button text does not change to a generic "Loading..." message.
    • Verify: Instead, the button displays a subtle, animated loading indicator inside the button, while the rest of the button remains the same.

Background

The investigation revealed three distinct root causes for what appeared to be a single bug:

  1. Incorrect Balance Context: The CoWShedWidget was not correctly restoring the user's wallet account to the global balance context upon being dismissed.
  2. Component Instability: During the rapid context switch, props passed to the TradeConfirmation component would momentarily become undefined, causing it to unmount and remount.
  3. Uninformative Loading State: The UI did not differentiate between an initial quote load and a background price refresh, leading to a confusing user experience.

This PR addresses all three issues with targeted fixes. The use of a "stability ref" (stableBridgeDataRef) in the SwapConfirmModal is a tactical choice to prevent component unmounting now. A follow-up technical debt ticket will be created to address the root cause of the prop instability in our lower-level data hooks, at which point this temporary patch can be removed.

@vercel Vercel
Copy link
vercel bot commented Jun 28, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
cosmos ❌ Failed (Inspect) Jun 28, 2025 4:37pm
cowfi ✅ Ready (Inspect) Visit Preview Jun 28, 2025 4:37pm
explorer-dev ✅ Ready (Inspect) Visit Preview Jun 28, 2025 4:37pm
sdk-tools ✅ Ready (Inspect) Visit Preview Jun 28, 2025 4:37pm
swap-dev ✅ Ready (Inspect) Visit Preview Jun 28, 2025 4:37pm
widget-configurator ✅ Ready (Inspect) Visit Preview Jun 28, 2025 4:37pm

@coderabbitai coderabbitai
Copy link
Contributor
coderabbitai bot commented Jun 28, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

    • Other keywords and placeholders

    • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
    • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
    • Add @coderabbitai anywhere in the PR title to generate the title automatically.

    CodeRabbit Configuration File (.coderabbit.yaml)

    • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
    • Please see the configuration documentation for more information.
    • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

    Documentation and Community

    • Visit our Documentation for detailed information on how to use CodeRabbit.
    • Join our Discord Community to get help, request features, and share feedback.
    • Follow us on X/Twitter for updates and announcements.

    @fairlighteth fairlighteth requested a review from a team June 28, 2025 16:25
    @shoom3301
    Copy link
    Collaborator

    Fixed in #5903

    @shoom3301 shoom3301 closed this Jun 30, 2025
    @github-actions github-actions bot locked and limited conversation to collaborators Jun 30, 2025
    Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
    Reviewers
    No reviews
    Assignees
    No one assigned
    Labels
    None yet
    Projects
    None yet
    Milestone
    No milestone
    Development

    Successfully merging this pull request may close these issues.
    2 participants
    @fairlighteth @shoom3301
    0