chore(runway): cherry-pick feat: update recipients UI on swaps (#21634)

- feat: update recipients UI on swaps cp-7.58.0 (#21565)

<!--
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.
-->

## **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
`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?
-->

## **Changelog**

<!--
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.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3311

## **Manual testing steps**

```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
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [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"
/>


## **Pre-merge author checklist**

- [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.

## **Pre-merge reviewer checklist**

- [ ] 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]
> 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.
> 
> - **Bridge UI**:
> - **Recipient row extraction**: Move recipient display from
`QuoteDetailsCard` to
`components/QuoteDetailsRecipientKeyValueRow/QuoteDetailsRecipientKeyValueRow`
with dedicated styles.
> - **New hook**: Add `hooks/useRecipientDisplayData` to resolve
recipient display name, wallet name, and address (supports multichain
and external addresses).
>   - **QuoteDetailsCard**:
> - Remove inline recipient logic/selectors and insert
`QuoteDetailsRecipientKeyValueRow`.
>     - Minor import cleanup; no behavioral changes to other rows.
> - **Tests**:
> - Add tests for `QuoteDetailsRecipientKeyValueRow` and
`useRecipientDisplayData`.
> - Update `QuoteDetailsCard` test mocks and snapshots to reflect new
recipient row structure.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f3be9c4. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[2fcd667](2fcd667)

Co-authored-by: George Gkasdrogkas <[email protected]>

Author: runway-github[bot]

app/components/UI/Bridge/components/QuoteDetailsCard/QuoteDetailsCard.test.tsx

@@ -104,6 +104,8 @@ jest.mock(
   '../../../../../selectors/multichainAccounts/accountTreeController',
   () => ({
     selectAccountToGroupMap: () => ({}),
+    selectAccountToWalletMap: () => ({}),
+    selectWalletsMap: () => ({}),
     selectSelectedAccountGroupWithInternalAccountsAddresses: () => [],
     selectAccountTreeControllerState: () => ({}),
     selectAccountGroupWithInternalAccounts: () => [],

app/components/UI/Bridge/components/QuoteDetailsCard/QuoteDetailsCard.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { TouchableOpacity, Platform, UIManager } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import I18n, { strings } from '../../../../../../locales/i18n';
@@ -28,18 +28,13 @@ import {
   selectSourceAmount,
   selectDestToken,
   selectSourceToken,
-  selectDestAddress,
-  selectIsSwap,
 } from '../../../../../core/redux/slices/bridge';
-import { selectAccountToGroupMap } from '../../../../../selectors/multichainAccounts/accountTreeController';
-import { selectMultichainAccountsState2Enabled } from '../../../../../selectors/featureFlagController/multichainAccounts';
-import { selectInternalAccounts } from '../../../../../selectors/accountsController';
 import { getIntlNumberFormatter } from '../../../../../util/intl';
 import { useRewards } from '../../hooks/useRewards';
-import { areAddressesEqual } from '../../../../../util/address';
 import RewardsAnimations, {
   RewardAnimationState,
 } from '../../../Rewards/components/RewardPointsAnimation';
+import QuoteDetailsRecipientKeyValueRow from '../QuoteDetailsRecipientKeyValueRow/QuoteDetailsRecipientKeyValueRow';
 
 if (
   Platform.OS === 'android' &&
@@ -67,13 +62,6 @@ const QuoteDetailsCard: React.FC = () => {
   const sourceToken = useSelector(selectSourceToken);
   const destToken = useSelector(selectDestToken);
   const sourceAmount = useSelector(selectSourceAmount);
-  const destAddress = useSelector(selectDestAddress);
-  const isSwap = useSelector(selectIsSwap);
-  const internalAccounts = useSelector(selectInternalAccounts);
-  const accountToGroupMap = useSelector(selectAccountToGroupMap);
-  const isMultichainAccountsState2Enabled = useSelector(
-    selectMultichainAccountsState2Enabled,
-  );
   const {
     estimatedPoints,
     isLoading: isRewardsLoading,
@@ -84,42 +72,12 @@ const QuoteDetailsCard: React.FC = () => {
     isQuoteLoading,
   });
 
-  // Get the display name for the destination account
-  const destinationDisplayName = useMemo(() => {
-    if (!destAddress) return undefined;
-
-    const internalAccount = internalAccounts.find((account) =>
-      areAddressesEqual(account.address, destAddress),
-    );
-
-    if (!internalAccount) return undefined;
-
-    // Use account group name if available, otherwise use account name
-    if (isMultichainAccountsState2Enabled) {
-      const accountGroup = accountToGroupMap[internalAccount.id];
-      return accountGroup?.metadata.name || internalAccount.metadata.name;
-    }
-
-    return internalAccount.metadata.name;
-  }, [
-    destAddress,
-    internalAccounts,
-    accountToGroupMap,
-    isMultichainAccountsState2Enabled,
-  ]);
-
   const handleSlippagePress = () => {
     navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
       screen: Routes.BRIDGE.MODALS.SLIPPAGE_MODAL,
     });
   };
 
-  const handleRecipientPress = () => {
-    navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
-      screen: Routes.BRIDGE.MODALS.RECIPIENT_SELECTOR_MODAL,
-    });
-  };
-
   // Early return for invalid states
   if (
     !sourceToken?.chainId ||
@@ -271,44 +229,6 @@ const QuoteDetailsCard: React.FC = () => {
           }}
         />
 
-        {!isSwap && (
-          <KeyValueRow
-            field={{
-              label: {
-                text: strings('bridge.recipient'),
-                variant: TextVariant.BodyMDMedium,
-              },
-            }}
-            value={{
-              label: (
-                <TouchableOpacity
-                  onPress={handleRecipientPress}
-                  activeOpacity={0.6}
-                  testID="recipient-selector-button"
-                  style={styles.slippageButton}
-                >
-                  <Text
-                    variant={TextVariant.BodyMD}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                    style={styles.recipientText}
-                  >
-                    {destAddress
-                      ? destinationDisplayName ||
-                        strings('bridge.external_account')
-                      : strings('bridge.select_recipient')}
-                  </Text>
-                  <Icon
-                    name={IconName.Edit}
-                    size={IconSize.Sm}
-                    color={IconColor.Muted}
-                  />
-                </TouchableOpacity>
-              ),
-            }}
-          />
-        )}
-
         {activeQuote?.minToTokenAmount && (
           <KeyValueRow
             field={{
@@ -331,6 +251,8 @@ const QuoteDetailsCard: React.FC = () => {
           />
         )}
 
+        <QuoteDetailsRecipientKeyValueRow />
+
         {/* Estimated Points */}
         {shouldShowRewardsRow && (
           <KeyValueRow

app/components/UI/Bridge/components/QuoteDetailsCard/__snapshots__/QuoteDetailsCard.test.tsx.snap

@@ -922,125 +922,97 @@ exports[`QuoteDetailsCard renders initial state 1`] = `
                                 "justifyContent": "space-between",
                                 "overflow": "hidden",
                               },
-                              [
-                                undefined,
-                              ],
+                              undefined,
                             ]
                           }
                         >
                           <View
                             style={
-                              {
-                                "alignItems": "flex-start",
-                                "flex": 1,
-                              }
+                              [
+                                {
+                                  "display": "flex",
+                                },
+                                {
+                                  "flex": 1,
+                                  "minWidth": "auto",
+                                  "width": "auto",
+                                },
+                              ]
                             }
                           >
-                            <View
+                            <Text
+                              accessibilityRole="text"
                               style={
                                 {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "gap": 8,
+                                  "color": "#121314",
+                                  "fontFamily": "Geist Medium",
+                                  "fontSize": 16,
+                                  "letterSpacing": 0,
+                                  "lineHeight": 24,
                                 }
                               }
                             >
-                              <View
-                                style={
-                                  {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#121314",
-                                      "fontFamily": "Geist Medium",
-                                      "fontSize": 16,
-                                      "letterSpacing": 0,
-                                      "lineHeight": 24,
-                                    }
-                                  }
-                                  testID="label"
-                                >
-                                  Recipient
-                                </Text>
-                              </View>
-                            </View>
+                              Recipient
+                            </Text>
                           </View>
                           <View
                             style={
-                              {
-                                "alignItems": "flex-end",
-                                "flex": 1,
-                              }
+                              [
+                                {
+                                  "alignItems": "flex-end",
+                                  "display": "flex",
+                                  "justifyContent": "flex-end",
+                                },
+                                {
+                                  "flex": 1,
+                                },
+                              ]
                             }
                           >
-                            <View
+                            <TouchableOpacity
+                              activeOpacity={0.6}
+                              onPress={[Function]}
                               style={
                                 {
                                   "alignItems": "center",
+                                  "flex": 1,
                                   "flexDirection": "row",
-                                  "gap": 8,
+                                  "gap": 4,
                                 }
                               }
+                              testID="recipient-selector-button"
                             >
-                              <View
+                              <Text
+                                accessibilityRole="text"
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
                                 style={
                                   {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
+                                    "color": "#121314",
+                                    "flexShrink": 1,
+                                    "fontFamily": "Geist Regular",
+                                    "fontSize": 16,
+                                    "letterSpacing": 0,
+                                    "lineHeight": 24,
                                   }
                                 }
                               >
-                                <TouchableOpacity
-                                  activeOpacity={0.6}
-                                  onPress={[Function]}
-                                  style={
-                                    {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "gap": 4,
-                                    }
+                                Select recipient
+                              </Text>
+                              <SvgMock
+                                color="#b7bbc8"
+                                fill="currentColor"
+                                height={16}
+                                name="Edit"
+                                style={
+                                  {
+                                    "height": 16,
+                                    "width": 16,
                                   }
-                                  testID="recipient-selector-button"
-                                >
-                                  <Text
-                                    accessibilityRole="text"
-                                    ellipsizeMode="tail"
-                                    numberOfLines={1}
-                                    style={
-                                      {
-                                        "color": "#121314",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Geist Regular",
-                                        "fontSize": 16,
-                                        "letterSpacing": 0,
-                                        "lineHeight": 24,
-                                      }
-                                    }
-                                  >
-                                    Select recipient
-                                  </Text>
-                                  <SvgMock
-                                    color="#b7bbc8"
-                                    fill="currentColor"
-                                    height={16}
-                                    name="Edit"
-                                    style={
-                                      {
-                                        "height": 16,
-                                        "width": 16,
-                                      }
-                                    }
-                                    width={16}
-                                  />
-                                </TouchableOpacity>
-                              </View>
-                            </View>
+                                }
+                                width={16}
+                              />
+                            </TouchableOpacity>
                           </View>
                         </View>
                       </View>

app/components/UI/Bridge/components/QuoteDetailsRecipientKeyValueRow/QuoteDetailsRecipientKeyValueRow.styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+
+const createStyles = () =>
+  StyleSheet.create({
+    recipientFieldSection: {
+      flex: 1,
+      minWidth: 'auto',
+      width: 'auto',
+    },
+    recipientValueSection: {
+      flex: 1,
+    },
+    recipientButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1,
+      gap: 4,
+    },
+    accountNameText: {
+      flexShrink: 0,
+      minWidth: 0,
+    },
+    recipientText: {
+      flexShrink: 1,
+    },
+  });
+
+export default createStyles;