feat: add quote details card component to Bridge UI #14264
Merged
+3,287
−70
Conversation
This file contains 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
This commit introduces the QuoteInfoModal component, which includes its styles and test cases. The modal displays quote information and allows users to navigate back when the footer or header close button is pressed.
This commit introduces slippage management functionality in the Bridge component. The SlippageModal now utilizes Redux for state management, allowing users to set and apply slippage values. The implementation includes updates to the BridgeView and SlippageModal components, ensuring a seamless user experience. Additionally, tests have been added to verify the new functionality.
This commit introduces the QuoteDetailsCard component to the Bridge UI, enhancing the user experience by displaying detailed quote information. The component includes features such as expandable content for price impact and slippage settings. Additionally, mock data and tests have been added to ensure functionality and maintainability.
|
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. |
amitabh94
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new QuoteDetailsCard component to enhance the Bridge UI by displaying detailed quote information along with features such as expandable content for price impact and slippage settings, as well as adding relevant tests and updating redux state management.
- Added QuoteDetailsCard and its related styles, types, and tests.
- Updated existing Bridge UI components and redux slices to integrate slippage functionality.
- Provided new mocks and updated routes for the quote info modal and slippage modal.
Reviewed Changes
Copilot reviewed 18 out of 21 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| app/components/UI/Bridge/components/QuoteInfoModal/*.tsx | Added modal and corresponding tests for displaying quote info. |
| app/components/UI/Bridge/components/QuoteDetailsCard/*.ts?(x) | Introduced QuoteDetailsCard with expandable sections and tests. |
| app/core/redux/slices/bridge/*.ts | Updated redux slice and tests to support slippage state. |
| app/components/UI/Bridge/index.tsx | Integrated QuoteDetailsCard and removed redundant state code. |
| app/components/UI/Bridge/components/SlippageModal/*.tsx | Revised SlippageModal to use redux for updating slippage state. |
| Other supporting files (mocks, routes) | Minor updates and exports to support new modal and component. |
Files not reviewed (3)
- app/components/UI/Bridge/mocks/mock-quotes-native-erc20.json: Language not supported
- app/components/UI/Bridge/components/QuoteInfoModal/snapshots/QuoteInfoModal.test.tsx.snap: Language not supported
- locales/languages/en.json: Language not supported
app/components/UI/Bridge/components/QuoteDetailsCard/QuoteDetailsCard.tsx
Outdated
Show resolved
Hide resolved
The navigation has been updated to ensure seamless access to the modal from the QuoteDetailsCard component.
amitabh94
added
team-swaps-and-bridge
Run Smoke E2E
|
This update improves the QuoteDetailsCard component by integrating network information display, allowing users to see the source and destination networks for quotes. The component now utilizes Redux selectors for source and destination tokens, ensuring accurate chain ID representation. Additionally, the layout has been adjusted for better responsiveness, and tests have been updated to reflect these changes.
amitabh94
force-pushed
the
MMS-1985--fe-build-the-quote-card-component-with-mock-data
branch
from
d7aa8a1 to
19955c1
Compare
amitabh94
moved this from Needs dev review
to Has approvals, needs CODEOWNER
in PR review queue
georgewrmarshall
previously approved these changes
Mar 27, 2025
amitabh94
dismissed stale reviews from georgewrmarshall and infiniteflower
via
373a599
georgewrmarshall
previously approved these changes
Mar 31, 2025
amitabh94
added
Run Smoke E2E
|
infiniteflower
previously approved these changes
Mar 31, 2025
amitabh94
added
Run Smoke E2E
|
amitabh94
dismissed stale reviews from infiniteflower and georgewrmarshall
via
29839a6
|
georgewrmarshall
approved these changes
Mar 31, 2025
infiniteflower
approved these changes
Mar 31, 2025
amitabh94
deleted the
MMS-1985--fe-build-the-quote-card-component-with-mock-data
branch
metamaskbot
added
the
release-7.45.0
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 introduces a new QuoteDetailsCard component to enhance the Bridge UI by displaying detailed quote information along with features such as expandable content for price impact and slippage settings, as well as adding relevant tests and updating redux state management.
Key Components Added
1. QuoteDetailsCard
2. SlippageModal (Updated)
Related issues
Fixes: MMS-1985
Manual testing steps
Screenshots/Recordings
Bridge_quoteDetails_Card_component.mp4
Pre-merge author checklist
Pre-merge reviewer checklist