feat: allows pasting external addresses for crosschain bridges (#30995)

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

• If user has no Solana account: no external account pasting option
• If user has Solana account: user can select dropdown any Solana
accounts they have, and otherwise paste in an external account for dest
account

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

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30995?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-2103

## **Manual testing steps**

1. Create an EVM <-> SOL bridge (either direction)
2. In the account picker, paste in an external account
3. Notice that you can select the external account

## **Screenshots/Recordings**

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

### **Before**

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

### **After**


https://github.com/user-attachments/assets/e2b6c6c8-fd36-4a27-ba8d-d19c58436bd0

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

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [X] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Author: ghgoodreau

app/_locales/en/messages.json

@@ -1,6 +1,5 @@
 import { useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
-import type { InternalAccount } from '@metamask/keyring-internal-api';
 import {
   getSelectedInternalAccount,
   getSelectedEvmInternalAccount,
@@ -13,10 +12,11 @@ import {
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters';
 import { MultichainNetworks } from '../../../../shared/constants/multichain/networks';
+import { DestinationAccount } from '../prepare/types';
 
 export const useDestinationAccount = (isSwap = false) => {
   const [selectedDestinationAccount, setSelectedDestinationAccount] =
-    useState<InternalAccount | null>(null);
+    useState<DestinationAccount | null>(null);
 
   const isEvm = useMultichainSelector(getMultichainIsEvm);
   const selectedEvmAccount = useSelector(getSelectedEvmInternalAccount);

app/_locales/en_GB/messages.json

@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { InternalAccount } from '@metamask/keyring-internal-api';
 import {
   TextField,
   Box,
@@ -25,12 +24,17 @@ import {
 } from '../../../../helpers/constants/design-system';
 // eslint-disable-next-line import/no-restricted-paths
 import { t } from '../../../../../app/scripts/translate';
+// eslint-disable-next-line import/no-restricted-paths
+import { isEthAddress } from '../../../../../app/scripts/lib/multichain/address';
+import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts';
+import { DestinationAccount } from '../types';
 import DestinationSelectedAccountListItem from './destination-selected-account-list-item';
 import DestinationAccountListItem from './destination-account-list-item';
+import { ExternalAccountListItem } from './external-account-list-item';
 
 type DestinationAccountPickerProps = {
-  onAccountSelect: (account: InternalAccount | null) => void;
-  selectedSwapToAccount: InternalAccount | null;
+  onAccountSelect: (account: DestinationAccount | null) => void;
+  selectedSwapToAccount: DestinationAccount | null;
   isDestinationSolana: boolean;
 };
 
@@ -43,13 +47,55 @@ export const DestinationAccountPicker = ({
   const selectedAccount = useSelector(getSelectedInternalAccount);
   const accounts = useSelector(getInternalAccounts);
 
+  // Check if search query is a valid address
+  const isValidAddress = useMemo(() => {
+    const trimmedQuery = searchQuery.trim();
+    if (!trimmedQuery) {
+      return false;
+    }
+
+    return isDestinationSolana
+      ? isSolanaAddress(trimmedQuery)
+      : isEthAddress(trimmedQuery);
+  }, [searchQuery, isDestinationSolana]);
+
+  // Create an external account object if valid address is not in internal accounts
+  const externalAccount = useMemo(() => {
+    if (!isValidAddress) {
+      return null;
+    }
+
+    const trimmedQuery = searchQuery.trim();
+    const addressExists = accounts.some(
+      (account) => account.address.toLowerCase() === trimmedQuery.toLowerCase(),
+    );
+
+    if (addressExists) {
+      return null;
+    }
+
+    return {
+      address: trimmedQuery,
+      metadata: {
+        name: `${trimmedQuery.slice(0, 6)}...${trimmedQuery.slice(-4)}`,
+      },
+      isExternal: true,
+    };
+  }, [accounts, isValidAddress, searchQuery]);
+
   const filteredAccounts = useMemo(
     () =>
       accounts.filter((account) => {
-        const matchesSearch = account.metadata.name
+        const matchesSearchByName = account.metadata.name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+
+        const matchesSearchByAddress = account.address
           .toLowerCase()
           .includes(searchQuery.toLowerCase());
 
+        const matchesSearch = matchesSearchByName || matchesSearchByAddress;
+
         const matchesChain = isDestinationSolana
           ? isSolanaAccount(account)
           : !isSolanaAccount(account);
@@ -177,8 +223,20 @@ export const DestinationAccountPicker = ({
             showOptions={false}
           />
         ))}
+        {externalAccount && (
+          <ExternalAccountListItem
+            key="external-account"
+            account={externalAccount}
+            selected={Boolean(
+              selectedSwapToAccount &&
+                (selectedSwapToAccount as DestinationAccount).address ===
+                  externalAccount.address,
+            )}
+            onClick={() => onAccountSelect(externalAccount)}
+          />
+        )}
 
-        {filteredAccounts.length === 0 && (
+        {filteredAccounts.length === 0 && !externalAccount && (
           <Box
             display={Display.Flex}
             style={{

ui/pages/bridge/hooks/useDestinationAccount.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
-import { InternalAccount } from '@metamask/keyring-internal-api';
 import { shortenAddress } from '../../../../helpers/utils/util';
 
 import {
@@ -24,9 +23,11 @@ import {
 import { getUseBlockie } from '../../../../selectors';
 // eslint-disable-next-line import/no-restricted-paths
 import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { DestinationAccount } from '../types';
 
 type DestinationSelectedAccountListItemProps = {
-  account: InternalAccount;
+  account: DestinationAccount;
   selected: boolean;
   onClick?: () => void;
 };
@@ -35,6 +36,8 @@ const DestinationSelectedAccountListItem: React.FC<
   DestinationSelectedAccountListItemProps
 > = ({ account, selected, onClick }) => {
   const useBlockie = useSelector(getUseBlockie);
+  const t = useI18nContext();
+  const isExternalAccount = 'isExternal' in account && account.isExternal;
 
   return (
     <Box
@@ -64,7 +67,7 @@ const DestinationSelectedAccountListItem: React.FC<
 
       <Box display={Display.Flex} style={{ flexDirection: 'column' }}>
         <Text variant={TextVariant.bodyMdMedium} marginBottom={1}>
-          {account.metadata.name}
+          {isExternalAccount ? t('externalAccount') : account.metadata.name}
         </Text>
 
         <Text

ui/pages/bridge/prepare/components/destination-account-picker.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import { ExternalAccount } from '../types';
+import { shortenAddress } from '../../../../helpers/utils/util';
+import {
+  AvatarAccount,
+  AvatarAccountSize,
+  AvatarAccountVariant,
+  Box,
+  Text,
+} from '../../../../components/component-library';
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  Display,
+  FlexDirection,
+  TextColor,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
+import { getUseBlockie } from '../../../../selectors';
+// eslint-disable-next-line import/no-restricted-paths
+import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+type ExternalAccountListItemProps = {
+  account: ExternalAccount;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+export const ExternalAccountListItem: React.FC<
+  ExternalAccountListItemProps
+> = ({ account, selected, onClick }) => {
+  const useBlockie = useSelector(getUseBlockie);
+  const t = useI18nContext();
+
+  return (
+    <Box
+      display={Display.Flex}
+      padding={4}
+      backgroundColor={BackgroundColor.transparent}
+      className={classnames('multichain-account-list-item', {
+        'multichain-account-list-item--selected': selected,
+      })}
+      onClick={onClick}
+      alignItems={AlignItems.center}
+    >
+      <AvatarAccount
+        borderColor={BorderColor.transparent}
+        size={AvatarAccountSize.Md}
+        address={account.address}
+        variant={
+          useBlockie
+            ? AvatarAccountVariant.Blockies
+            : AvatarAccountVariant.Jazzicon
+        }
+        marginInlineEnd={2}
+      />
+
+      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
+        <Text variant={TextVariant.bodyMdMedium} marginBottom={1}>
+          {t('externalAccount')}
+        </Text>
+        <Text
+          variant={TextVariant.bodySm}
+          color={TextColor.textAlternative}
+          data-testid="account-list-address"
+        >
+          {shortenAddress(normalizeSafeAddress(account.address))}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx

@@ -0,0 +1,11 @@
+import { InternalAccount } from '@metamask/keyring-internal-api';
+
+export type ExternalAccount = {
+  address: string;
+  metadata: {
+    name: string;
+  };
+  isExternal: boolean;
+};
+
+export type DestinationAccount = InternalAccount | ExternalAccount;