feat: allows pasting external addresses for crosschain bridges

shared/types/bridge.ts

@@ -1,3 +1,4 @@
+import { InternalAccount } from '@metamask/keyring-internal-api';
 import type {
   CaipAccountId,
   CaipAssetId,
@@ -234,3 +235,13 @@ export type TokenV3Asset = {
   name: string;
   decimals: number;
 };
+
+export type ExternalAccount = {
+  address: string;
+  metadata: {
+    name: string;
+  };
+  isExternal: true;
+};
+
+export type DestinationAccount = InternalAccount | ExternalAccount;

ui/pages/bridge/hooks/useDestinationAccount.ts

@@ -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 '../../../../shared/types/bridge';
 
 export const useDestinationAccount = (isSwap = false) => {
   const [selectedDestinationAccount, setSelectedDestinationAccount] =
-    useState<InternalAccount | null>(null);
+    useState<DestinationAccount | null>(null);
 
   const isEvm = useMultichainSelector(getMultichainIsEvm);
   const selectedEvmAccount = useSelector(getSelectedEvmInternalAccount);

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

@@ -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,20 @@ 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 {
+  ExternalAccount,
+  DestinationAccount,
+} from '../../../../../shared/types/bridge';
 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 +50,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,
+    } as ExternalAccount;
+  }, [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 +226,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/prepare/components/destination-selected-account-list-item.tsx

@@ -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,12 @@ import {
 import { getUseBlockie } from '../../../../selectors';
 // eslint-disable-next-line import/no-restricted-paths
 import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address';
+// eslint-disable-next-line import/no-restricted-paths
+import { t } from '../../../../../app/scripts/translate';
+import { DestinationAccount } from '../../../../../shared/types/bridge';
 
 type DestinationSelectedAccountListItemProps = {
-  account: InternalAccount;
+  account: DestinationAccount;
   selected: boolean;
   onClick?: () => void;
 };
@@ -35,6 +37,7 @@ const DestinationSelectedAccountListItem: React.FC<
   DestinationSelectedAccountListItemProps
 > = ({ account, selected, onClick }) => {
   const useBlockie = useSelector(getUseBlockie);
+  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/external-account-list-item.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import { ExternalAccount } from '../../../../../shared/types/bridge';
+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';
+// eslint-disable-next-line import/no-restricted-paths
+import { t } from '../../../../../app/scripts/translate';
+
+type ExternalAccountListItemProps = {
+  account: ExternalAccount;
+  selected: boolean;
+  onClick?: () => void;
+};
+
+export const ExternalAccountListItem: React.FC<
+  ExternalAccountListItemProps
+> = ({ account, selected, onClick }) => {
+  const useBlockie = useSelector(getUseBlockie);
+
+  return (
+    <Box
+      display={Display.Flex}
+      padding={4}
+      backgroundColor={
+        selected ? BackgroundColor.primaryMuted : 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>
+  );
+};