feat: trade quote ux improvements

[woodenfurniture]

Description

Multiple fixes and improvemenets to trade input and quotes:

• animated reordering of quotes as their input/output rate changes compared to other quotes
• polling updates:
  • polling quotes will now hold their position in the list to reduce layout shifting
  • per-quote countdown circle to indicate when individual quotes will refetch
  • countdown circles now reflect reset countdown when un-focusing and then re-focusing on the window
• non-best quotes are collapsed by default, clicking will expand them - uses screen realestate more efficiently
• change the "alternative" tag to be the overall input/output difference percentage, with tooltip
• display price impact percentage on all quotes (yellow color text for moderate impact, red color text for high impact, default otherwise), with tooltip
• dont render loading skeleton during polling updates (use spinner instead) to reduce visual disruption
• disable "switch assets" button when wallet doesn't support the buy asset chain

Pull Request Type

• 🐛 Bug fix (Non-breaking Change: Fixes an issue)
• 🛠️ Chore (Non-breaking Change: Doc updates, pkg upgrades, typos, etc..)
• 💅 New Feature (Breaking/Non-breaking Change)

Issue (if applicable)

closes #6078

Risk

High Risk PRs Require 2 approvals

High risk

Testing

• Check all data on quotes is correct, including fees and amounts
• Check that stale quote data is never actionable
• Ensure a selected quote matches the detailed view below, and also matches the trade preview
• Generally try to find edge cases and broken states when getting a quote (if not related to this PR still useful to report)

Engineering

You'll need to yarn to install the bumped framer-motion package which contains a breaking change

Operations

Screenshots (if applicable)

General overview

Screen.Recording.2024-02-01.at.7.52.20.am.mov

[woodenfurniture]

Current dependencies on/for this PR:

• develop
  • PR feat: async quote loading #6051
    • PR fix: reduce preview trade button state changes during load #6077
      • PR feat: trade quote ux improvements #6080 👈
        • PR fix: dont nuke trade input state when backing out of a trade preview #6113
          • PR chore: remove dead code relating to single hop trade ui #6117
            • PR perf: lazy load all pages #6130

This stack of pull requests is managed by Graphite.

[0xApotheosis]

First pass code review looking solid, it's clear you went deep into this one to achieve strong UX 🔥

[0xApotheosis]

I like how this starts collapsed. Once it's expanded though there is no way to collapse it again - that would be cool to have (not necessary for this PR, though!).

---

The price impact jumps to insane values for a brief moment when changing the quote input value:

price-impact.mp4

[0xApotheosis]

Price impact issue fixed, looking solid.

[gomesalexandre]

Conceptual pass, nothing stands out as obviously wrong here, though the guts of the review will be the runtime pass coming after this one

[gomesalexandre]

Tested locally:

Reordering of quotes while fetching

reordering.mov

Polling is still happy

polling.mov

Background polling

background.mov

Not blocking the PR for this, as this seems to somehow align with the intent code-wise, however this looks and feels weird:

1. polling doesn't happen while in background (as in, we won't actually fire the refetch), which I get the rationale of, but when the window/tab is unfocused, we shouldn't get a visible countdown if nothing is actually being refetched after said countdown?
2. being focused again resets the countdown, which, while it supposedly matches the intent, is also weird - this means there will always be more time to refetch than if it wasn't reset. This should either be instantly refetched on refocus, or alternatively, do nothing and keep the same countdown that was happening while in background

@woodenfurniture happy to discuss how to improve this one, but IMO the best UX here would be to simply not have any logic for resetting countdown depending on background state, simply ensure requests are only fired when focused, as well as countdown being only displayed when focused, without any changes to the underlying countdown. Additionally as a nice-to-have, we could automagically refetch on focus (which would then indeed reset the countdown timeout as it does currently, but would actually make sense with a refetch)