feat: async quote loading

[woodenfurniture]

Description

Upgrades swapper to display quotes as they arrive, and to show what swappers are currently still fetching. This allows users to get a response faster and know what swappers are taking longer than expected to fetch without blocking their ability to trade.

API and state management changes:

• Upgraded tradeQuoteSlice to store quotes by quote ID instead of pulling sorted quotes directly from the swapperApi. This allows us to maintain the correct selected quote as more quotes arrive async
• Moved quote sorting into redux (from the getTradeQuote swapperApi endpoint)
• Moved quote error management into redux (from the getTradeQuote swapperApi endpoint)
• Modified getTradeQuote swapperApi endpoint to only fetch a quote from a specific swapper
• Upgraded useGetTradeQuotes to get trade quotes asynchronously and propagate loading state per swapper so we can display what swappers are still fetching
• Removed the (now) unused swapper api selectors

UI changes:

• Added separate FetchingTradeQuote.tsx component to render loading state of in-flight quote requests without increasing the complexity of the existing quote components
• Lift and shift of trade quote card into separate component for re-use in FetchingTradeQuote.tsx
• Lift and shift of trade quote card content into separate component to maintainability
• Added loading styling to trade quote card similar to skeleton but to render swapper icon and header content overlaid on top

Swapper changes:

• Added error handling to lifi swapper to identify and return NetworkFeeEstimationFailed errors

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 #5832

Risk

High Risk PRs Require 2 approvals

High risk.

Risk of:

• inability to get quotes
• selected quote different to the one being executed
• inability to trade due to some kind of logical bug disabling the button
• stale quotes appearing in subsequent requests

Testing

Thoroughly test the swapper in accordance with the risks identified above

Engineering

Please pay special attention to state management changes

Operations

Screenshots (if applicable)

Screen.Recording.2024-01-23.at.9.26.36.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.

[gomesalexandre]

First pass, implementation-wise this looks sane pending extensive testing

[gomesalexandre]

Tested this diff (left) against develop (right).

While this is mostly looking good, found

• one issue WRT "Streaming Status" being shown for all swappers which is also present in develop and will need to be tackled as a separate PR
• another WRT the default selected best swapper, which is a regression against develop.
• a flash of "No quotes found" as quotes are fetching, which is also a regression against develop

Insufficient funds for trade

The insufficient funds state is looking good, however, there is a flash of "No quote found" as quotes are being fetched, which is definitely a regression against develop. Note this isn't isolated to insufficient funds but is present on all trades as can be seen on the recording below 🚫

Screen.Recording.2024-01-23.at.13.12.53.mov

Fetching quotes

Screen.Recording.2024-01-23.at.13.16.03.mov

This is looking good except for the issue stated above ✅

1Inch trade

• Best swapper isn't selected by default anymore 🚫

• Amounts are looking sane at input step

• Amounts are looking sane at confirm step

• Tx goes through and confirmed status detection is happy

Screen.Recording.2024-01-23.at.13.20.10.mov

Note this is showing "Stream Status" despite the trade not being a straming swap. As can be seen on the recording above, this is not a regression against develop but is definitely a bug

THOR L1 -> RUNE swap

• Inbound pending ✅

thor.inbound.pending.1.mov

• Swap complete and swap detection ✅

status.detection.mov

Note the same streaming status issue both at status and complete step, although once again, this is also present in develop

MM THOR Swap with custom receive address ✅

e2e.thor.custom.receive.mov

Stale quotes aren't present when routed back to trade input

Screen.Recording.2024-01-23.at.13.37.11.mov

[woodenfurniture]

The insufficient funds state is looking good, however, there is a flash of "No quote found" as quotes are being fetched, which is definitely a regression against develop.

19a51a2

[0xApotheosis]

Some initial thoughts, many of which might be more product considerations than engineering ones:

• We no longer retain the selected swapper between quote refresh
• On initial quote input we auto-select the best quote once all quotes have finished loading. When the quotes refresh we de-select whatever is selected, and do not re-select the best quote
• Once the quotes are loaded, condensing them to the small loading Component on refresh is a bit jarring, causing the "Layout Stability" UX principle to break a bit
• Changing the slippage now causes the selected swapper to change, which could be annoying if the user was happy with a selected quote and just wanted to increase the slippage before continuing.

[woodenfurniture]

Some initial thoughts, many of which might be more product considerations than engineering ones:

• We no longer retain the selected swapper between quote refresh
• On initial quote input we auto-select the best quote once all quotes have finished loading. When the quotes refresh we de-select whatever is selected, and do not re-select the best quote
• Once the quotes are loaded, condensing them to the small loading Component on refresh is a bit jarring, causing the "Layout Stability" UX principle to break a bit
• Changing the slippage now causes the selected swapper to change, which could be annoying if the user was happy with a selected quote and just wanted to increase the slippage before continuing.

gm, all points except the last are addressed in recent changes. I'll see what I can do about the final point 🫡

[0xApotheosis]

Most of my product-y concerns have already bee addressed within this PR, and the UX is intuitive and matches develop as far as I can tell.

Well done ser, monster PR and re-architecture.

[gomesalexandre]

Retested again locally, focused on the previously noted sad paths.

A few issues still found here, although they are minor so let's get this in to get things moving, to be tested meticulously by ops next release.
All other previously noted issues have been captured in issues and/or authored as PRs already.

• Refetch is a bit flaky, and the spinner doesn't reflect it after the first refetch is done

This behavior is matching @0xApotheosis comment:

Once the quotes are loaded, condensing them to the small loading Component on refresh is a bit jarring, causing the "Layout Stability" UX principle to break a bit

🚫 not going to be blocking the PR for that as quotes do refetch at interval despite the spinner not matching it, but this should be tackled as a follow-up. We should either

• have consistent , holistic refetch interval heuristics across all quotes. i.e when all finished loading, then the interval kicks in.
• have refetch interval spinners per quote instead of a holistic one, and have the current one act as a global refetch button (which it should anyway but we have never implemented) with a "Refetch quotes" tooltip

Whichever option we choose, the spinner should be working consistently and not only for the first refetch (which isn't accurate anyway given each quote has their own refetch time, as they do complete fetching at different times)

Untitled.mov

• Selected swapper is kept selected across refetches ✅

selected.refetch.mov

• Selected swapper is lost on slippage change

This is aligned with @0xApotheosis comment:

Changing the slippage now causes the selected swapper to change, which could be annoying if the user was happy with a selected quote and just wanted to increase the slippage before continuing.

slippage.refetch.mov

We now autoselect the first swapper which is wrong 🚫. Not going to block the PR for that but this should also be fixed as a follow-up.

• Stale quotes aren't kept ✅

Tested by going offline in Chrome so that refetch doesn't succeed.

refetch.offline.mov

Note, the refetch is a bit flaky when focusing back the window/tab, as you'd expect requests to be fired in 10s max. (refetch interval), or most likely anything <10s. Not going to be blocking the PR for that as well as this can be tackled alongside the flaky refetch noted above