feat(bridge): implement bridge quote fetching #14413
Merged
Merged
Conversation
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
5c01f4b to
6b615bb
Compare
- Introduced hooks `useBridgeQuoteData` and `useBridgeQuoteRequest` for managing bridge quote data and requests. - Updated `BridgeView` to utilize new hooks for fetching and displaying bridge quotes. - Enhanced `QuoteDetailsCard` to render quote details based on fetched data. - Modified `TokenInputArea` to show loading state while fetching quote data. - Added Redux state management for selected quotes in the bridge slice.
- Updated `useBridgeQuoteData` and `useBridgeQuoteRequest` hooks to improve quote fetching logic and state management. - Refactored `BridgeView` to utilize the new hooks, ensuring accurate display of active quotes and loading states. - Enhanced `TokenInputArea` to show a loading skeleton while fetching quote data. - Introduced utility functions for quote refresh logic and expiration checks. - Updated Redux state management in the bridge slice to reflect changes in quote handling.
- Removed unused `selectDestAmount` from `BridgeView` to simplify state management. - Adjusted loading skeleton height in `TokenInputArea` for better UI consistency. - Updated `useBridgeQuoteData` to handle undefined values for `destTokenAmount` and `formattedDestTokenAmount`. - Enhanced quote data formatting to include calculated price impact percentage from the active quote. - Added comments for future improvements regarding network fee and price impact calculations.
- Updated `formattedDestTokenAmount` in `useBridgeQuoteData` to display two decimal places for better precision in the UI. - This change enhances the clarity of displayed amounts for users during bridge transactions.
d953d11 to
c26a43b
Compare
- Added a check for `formattedQuoteData` in the `QuoteDetailsCard` component to ensure all necessary data is present before rendering. - This improvement prevents potential rendering issues when quote data is incomplete, enhancing the user experience during bridge transactions.
Contributor
There was a problem hiding this comment.
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (2)
app/core/Engine/Engine.ts:1039
- Ensure that the renamed action 'AccountsController:getSelectedMultichainAccount' is consistently updated in all related components and documentation to reflect multichain support.
'AccountsController:getSelectedMultichainAccount',
app/components/UI/Bridge/index.tsx:175
- [nitpick] Review the inclusion of 'dispatch' in the dependency array of the updateQuoteParams useEffect; if dispatch is not used within the updateQuoteParams callback, consider removing it to prevent unnecessary effect executions.
dispatch,
Contributor
There was a problem hiding this comment.
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (2)
app/core/Engine/Engine.ts:1039
- The renamed messenger action 'AccountsController:getSelectedMultichainAccount' should be cross-verified with related configurations and documentation to ensure consistency across the codebase.
'AccountsController:getSelectedMultichainAccount',
app/components/UI/Bridge/components/QuoteDetailsCard/QuoteDetailsCard.tsx:90
- [nitpick] Resetting the expanded state only on sourceToken and destToken changes might not cover scenarios where the underlying quote data updates, potentially leading to UI inconsistencies. Consider adding dependencies such as sourceAmount or formattedQuoteData if changes in quotes should also reset the expanded state.
useEffect(() => { setIsExpanded(false); }, [sourceToken, destToken]);
- Updated the `BridgeDestTokenSelector`, `BridgeSourceNetworkSelector`, and `BridgeSourceTokenSelector` tests to utilize the new `bridgeTestInitialState` for improved state management. - Refactored `QuoteDetailsCard` to utilize `formattedQuoteData` directly, enhancing clarity and reducing redundancy in the component. - Introduced new hooks `useBridgeQuoteData` and `useBridgeQuoteRequest` for better management of bridge quote data and requests, streamlining the overall quote handling process. - Improved the formatting of displayed quote data, ensuring accurate representation of network fees and rates in the UI. - Added comprehensive tests to ensure the correct functionality of the new hooks and components.
- Updated `mockBridgeReducerState` to set a defined `sourceAmount` for better test consistency. - Introduced multiple new mock quote files for various asset types and bridging scenarios, including ERC20 to ERC20, native to ERC20, and SOL to ERC20. - Added detailed mock data for quotes, including fee structures and processing times, to facilitate comprehensive testing of bridge functionalities.
- Refactored `QuoteDetailsCard` to utilize Redux selectors for `sourceToken`, `destToken`, and `sourceAmount`, improving state management and reducing prop drilling. - Updated `useBridgeQuoteData` hook to return only `formattedQuoteData`, streamlining the data flow and enhancing component clarity. - This change enhances the maintainability of the component and aligns with best practices for state management in Redux.
- Introduced `createBridgeControllerState` and `createBridgeTestState` functions to facilitate the creation of mock states for bridge components and hooks. - These utilities allow for easy overrides of default state values, improving the flexibility and reliability of tests. - Comprehensive tests have been added to ensure the correct functionality of the new utilities, enhancing overall test coverage for bridge-related features.
… hooks - Introduced comprehensive unit tests for the `useBridgeQuoteData` hook, covering scenarios such as available quotes, expired quotes, loading states, and fetch errors. - Added tests for the `useBridgeQuoteRequest` hook to ensure it returns a debounced function. - These tests enhance the reliability and maintainability of the bridge functionality by ensuring correct behavior under various conditions.
- Modified `mockBridgeReducerState` to use specific chain IDs for improved consistency in tests. - Replaced `initialState` with `createBridgeTestState` in `QuoteDetailsCard` tests to leverage the updated mock state, enhancing test reliability. - This refactor aligns with best practices for state management and improves the clarity of test setups.
- Deleted several mock quote files that are no longer needed, including `mock-quotes-erc20-erc20.json`, `mock-quotes-erc20-native.json`, `mock-quotes-native-erc20-eth.json`, `mock-quotes-native-erc20.json`, `mock-quotes-sol-erc20.json`, and `mock-quotes-native-erc20.json`. - Updated the `QuoteDetailsCard` test to use a new mock file, `mock-quotes-sol-sol.json`, ensuring tests remain relevant and accurate. - This cleanup improves the maintainability of the codebase by removing obsolete data and aligning with current testing practices.
a7d07c6
Contributor
|
|
infiniteflower
approved these changes
Apr 14, 2025
tommasini
approved these changes
Apr 14, 2025
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
This PR enable the fetching of live quotes from the bridge controller and displays the quote information on the QuoteDetails Card when source and destination tokens are selected.
This PR covers the following:
This does not currently include:
Related issues
Related to: MMS-1886
Manual testing steps
Screenshots/Recordings
1. Bridge Quote Display
- Estimated time
- Exchange rate
- Price impact
- Slippage tolerance
2. Loading States
3. Quote Updates
Before
After
Bridge.Quote.Fetching.mov
Pre-merge author checklist
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.