chore(runway): cherry-pick feat: update recipients UI on swaps #21634
+753
−171
Conversation
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
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> Render wallet and account name if the recipient is an imported account, else render the truncated wallet address if the recipient is an external account. We also introduced some refactoring to make us scale the `QuestDetailsCard` by extracting UI and business logic to separate components. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Render wallet and account name if the recipient is an imported account, else render the truncated wallet address if the recipient is an external account. Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3311 ```gherkin Scenario: user views bridge quote with wallet and account name Given user is on bridge quote details screen And recipient is set to "Account 1" in "Wallet 1" When bridge quote details are displayed Then recipient row shows "Wallet 1 / Account 1" Scenario: user views bridge quote with external address as recipient Given user is on bridge quote details screen And recipient is set to external address "0x1234567890123456789012345678901234567890" When bridge quote details are displayed Then recipient row shows shortened address "0x12345...67890" Scenario: user opens recipient selector Given user is on bridge quote details screen And recipient is set to "Account 1" When user taps recipient selector button Then recipient selector modal opens Scenario: user views swap quote details Given user is performing a swap (not a bridge) And swap quote details are displayed When bridge recipient row renders Then recipient row is not displayed Scenario: user views bridge quote with no recipient address Given user is on bridge quote details screen And no recipient address is available When bridge quote details are displayed Then recipient row shows "Select recipient" placeholder And no shortened address is displayed ``` <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> <!-- [screenshots/recordings] --> <!-- [screenshots/recordings] --> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/179c99cb-1f5a-4451-9929-6519e9a60d31" /> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/20409fb5-ca18-40e6-ac0b-92bf9ac02750" /> <img width="786" height="293" alt="image" src="https://github.com/user-attachments/assets/3ac89b42-a9c9-454e-9a60-e89018319fb2" /> - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Extracts the recipient row from QuoteDetailsCard into a dedicated component powered by a new hook to display wallet/account names or a shortened external address, and updates tests/snapshots. > > - **Bridge UI**: > - **Recipient Row**: Replaces inline recipient logic in `QuoteDetailsCard` with `QuoteDetailsRecipientKeyValueRow`, which navigates to the recipient selector and hides on swaps. > - Displays `walletName / accountName` for internal accounts or a shortened address for external recipients. > - **Hooks**: > - Adds `useRecipientDisplayData` (`hooks/useRecipientDisplayData`) to derive `destinationDisplayName`, `destinationWalletName`, and `destinationAccountAddress` using multichain selectors and feature flag. > - **Styles**: > - Adds `QuoteDetailsRecipientKeyValueRow.styles.ts` for layout and text truncation. > - **Tests**: > - Adds unit tests for `QuoteDetailsRecipientKeyValueRow` and `useRecipientDisplayData`. > - Updates `QuoteDetailsCard.test.tsx` mocks (multichain selectors) and snapshots to reflect new recipient row structure. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7db0035. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
|
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. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| accountNameText: { | ||
| flexShrink: 0, | ||
| minWidth: 0, | ||
| }, |
There was a problem hiding this comment.
Bug: Text Overflow in Single-Line Component
The accountNameText style uses flexShrink: 0, which prevents long wallet and account names from truncating. This can cause text overflow and layout issues, especially when the component expects a single line.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Render wallet and account name if the recipient is an imported account,
else render the truncated wallet address if the recipient is an external
account. We also introduced some refactoring to make us scale the
QuestDetailsCardby extracting UI and business logic to separatecomponents.
Changelog
CHANGELOG entry: Render wallet and account name if the recipient is an
imported account, else render the truncated wallet address if the
recipient is an external account.
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3311
Manual testing steps
Screenshots/Recordings
Before
After
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.
Note
Introduces a dedicated recipient row component powered by a new hook to display wallet/account names or a shortened external address, and wires it into QuoteDetailsCard with updated tests and snapshots.
QuoteDetailsCardtocomponents/QuoteDetailsRecipientKeyValueRow/QuoteDetailsRecipientKeyValueRowwith dedicated styles.hooks/useRecipientDisplayDatato resolve recipient display name, wallet name, and address (supports multichain and external addresses).QuoteDetailsRecipientKeyValueRow.QuoteDetailsRecipientKeyValueRowanduseRecipientDisplayData.QuoteDetailsCardtest mocks and snapshots to reflect new recipient row structure.Written by Cursor Bugbot for commit f3be9c4. This will update automatically on new commits. Configure here.
2fcd667