feat: account picker and quote card integrations

ui/pages/bridge/prepare/bridge-cta-button.tsx

@@ -40,8 +40,10 @@ import { isQuoteExpired as isQuoteExpiredUtil } from '../utils/quote';
 
 export const BridgeCTAButton = ({
   onFetchNewQuotes,
+  needsDestinationAddress = false,
 }: {
   onFetchNewQuotes: () => void;
+  needsDestinationAddress?: boolean;
 }) => {
   const t = useI18nContext();
 
@@ -121,9 +123,17 @@ export const BridgeCTAButton = ({
 
     if (!fromAmount) {
       if (!toToken) {
-        return t('bridgeSelectTokenAndAmount');
+        return needsDestinationAddress
+          ? t('bridgeSelectTokenAmountAndAccount')
+          : t('bridgeSelectTokenAndAmount');
       }
-      return t('bridgeEnterAmount');
+      return needsDestinationAddress
+        ? t('bridgeEnterAmountAndSelectAccount')
+        : t('bridgeEnterAmount');
+    }
+
+    if (needsDestinationAddress) {
+      return t('bridgeSelectDestinationAccount');
     }
 
     if (isTxSubmittable) {
@@ -144,6 +154,7 @@ export const BridgeCTAButton = ({
     isInsufficientGasForQuote,
     wasTxDeclined,
     isQuoteExpired,
+    needsDestinationAddress,
   ]);
 
   // Label for the secondary button that re-starts quote fetching
@@ -186,7 +197,12 @@ export const BridgeCTAButton = ({
         }
       }}
       loading={isSubmitting}
-      disabled={!isTxSubmittable || isQuoteExpired || isSubmitting}
+      disabled={
+        !isTxSubmittable ||
+        isQuoteExpired ||
+        isSubmitting ||
+        needsDestinationAddress
+      }
     >
       {label}
     </ButtonPrimary>

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

@@ -69,9 +69,7 @@ export const DestinationAccountPicker = ({
         style={{
           height: '70px',
           borderRadius: '8px',
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          boxShadow: 'var(--shadow-bridge-picker)',
+          boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
         }}
       >
         <Box
@@ -116,9 +114,6 @@ export const DestinationAccountPicker = ({
       style={{
         borderRadius: '8px',
         position: 'relative',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        boxShadow: 'var(--shadow-bridge-picker)',
       }}
     >
       <Box
@@ -134,6 +129,7 @@ export const DestinationAccountPicker = ({
           borderBottomStyle: 'solid',
           borderBottomColor: '#B7BBC866',
           borderRadius: '8px 8px 0 0',
+          boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
         }}
       >
         <TextField
@@ -151,20 +147,21 @@ export const DestinationAccountPicker = ({
           }}
         />
       </Box>
+      {/* Invisible buffer to match selected account height */}
+      <Box style={{ height: '20px' }} />
       <Box
         className="destination-account-picker__list"
         backgroundColor={BackgroundColor.backgroundDefault}
         style={{
           position: 'absolute',
-          top: '45px',
+          top: '50px',
           left: 0,
           right: 0,
-          minHeight: '79px',
           maxHeight: '240px',
           overflowY: 'auto',
           borderRadius: '0 0 8px 8px',
           zIndex: 1000,
-          boxShadow: 'var(--shadow-bridge-picker)',
+          boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
         }}
       >
         {filteredAccounts.map((account) => (

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -11,8 +11,10 @@ import { debounce } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import { BigNumber } from 'bignumber.js';
 import { type TokenListMap } from '@metamask/assets-controllers';
+import { InternalAccount } from '@metamask/keyring-internal-api';
 import { toChecksumAddress, zeroAddress } from 'ethereumjs-util';
 import type { Hex, CaipChainId } from '@metamask/utils';
+import { SolAccountType } from '@metamask/keyring-api';
 import {
   setFromToken,
   setFromTokenInputValue,
@@ -64,7 +66,6 @@ import { useTokensWithFiltering } from '../../../hooks/bridge/useTokensWithFilte
 import { setActiveNetwork } from '../../../store/actions';
 import type { QuoteRequest } from '../../../../shared/types/bridge';
 import { calcTokenValue } from '../../../../shared/lib/swaps-utils';
-import { BridgeQuoteCard } from '../quotes/bridge-quote-card';
 import {
   formatTokenAmount,
   isQuoteExpired as isQuoteExpiredUtil,
@@ -88,7 +89,9 @@ import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
 import {
   getCurrentKeyring,
   getSelectedEvmInternalAccount,
+  getInternalAccounts,
   getTokenList,
+  getIsSolanaSupportEnabled,
 } from '../../../selectors';
 import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import { SECOND } from '../../../../shared/constants/time';
@@ -105,15 +108,19 @@ import {
   selectBridgeHistoryForAccount,
   selectBridgeStatusState,
 } from '../../../ducks/bridge-status/selectors';
-import { MultichainNetworks } from '../../../../shared/constants/multichain/networks';
+import { MultichainBridgeQuoteCard } from '../quotes/multichain-bridge-quote-card';
+import { BridgeQuoteCard } from '../quotes/bridge-quote-card';
 import { BridgeInputGroup } from './bridge-input-group';
 import { BridgeCTAButton } from './bridge-cta-button';
+import { DestinationAccountPicker } from './components/destination-account-picker';
 
 const PrepareBridgePage = () => {
   const dispatch = useDispatch();
 
   const t = useI18nContext();
 
+  const accounts = useSelector(getInternalAccounts);
+
   const fromToken = useSelector(getFromToken);
   const fromTokens = useSelector(getTokenList) as TokenListMap;
   const isFromTokensLoading = useMemo(
@@ -287,6 +294,35 @@ const PrepareBridgePage = () => {
     isLowReturnBannerOpen,
   ]);
 
+  const [selectedDestinationAccount, setSelectedDestinationAccount] =
+    useState<InternalAccount | null>(null);
+  const hasAutoSelectedRef = useRef(false);
+
+  const isToOrFromSolana = useMemo(() => {
+    if (!fromChain?.chainId || !toChain?.chainId) {
+      return false;
+    }
+
+    const fromChainStartsWithSolana = fromChain.chainId
+      .toString()
+      .startsWith('solana:');
+    const toChainStartsWithSolana = toChain.chainId
+      .toString()
+      .startsWith('solana:');
+
+    return (
+      (toChainStartsWithSolana && !fromChainStartsWithSolana) ||
+      (!toChainStartsWithSolana && fromChainStartsWithSolana)
+    );
+  }, [fromChain?.chainId, toChain?.chainId]);
+
+  const isDestinationSolana = useMemo(() => {
+    if (!toChain?.chainId) {
+      return false;
+    }
+    return toChain.chainId.toString().startsWith('solana:');
+  }, [toChain?.chainId]);
+
   const quoteParams = useMemo(
     () => ({
       srcTokenAddress: fromToken?.address,
@@ -310,11 +346,9 @@ const PrepareBridgePage = () => {
       insufficientBal: Boolean(providerConfig?.rpcUrl?.includes('tenderly')),
       slippage,
       walletAddress: selectedAccount?.address ?? '',
-      // TODO override with account selector's value
-      destWalletAddress:
-        toChain?.chainId === MultichainNetworks.SOLANA || isSwap
-          ? lastSelectedNonEvmAccount?.address
-          : selectedEvmAccount?.address,
+      destWalletAddress: isToOrFromSolana
+        ? selectedDestinationAccount?.address
+        : selectedEvmAccount?.address,
     }),
     [
       fromToken?.address,
@@ -328,7 +362,8 @@ const PrepareBridgePage = () => {
       slippage,
       selectedAccount?.address,
       selectedEvmAccount?.address,
-      lastSelectedNonEvmAccount?.address,
+      selectedDestinationAccount?.address,
+      isToOrFromSolana,
     ],
   );
 
@@ -342,7 +377,40 @@ const PrepareBridgePage = () => {
 
   useEffect(() => {
     debouncedUpdateQuoteRequestInController(quoteParams);
-  }, [quoteParams]);
+  }, [quoteParams, debouncedUpdateQuoteRequestInController]);
+
+  // Auto-select most recently used account only once on initial load
+  useEffect(() => {
+    if (
+      !selectedDestinationAccount &&
+      !hasAutoSelectedRef.current &&
+      isToOrFromSolana
+    ) {
+      const filteredAccounts = accounts
+        .filter((account: InternalAccount) => {
+          const isSolAccount = Boolean(
+            account && account.type === SolAccountType.DataAccount,
+          );
+          return isDestinationSolana ? isSolAccount : !isSolAccount;
+        })
+        .sort((a: InternalAccount, b: InternalAccount) => {
+          const aLastSelected = a.metadata.lastSelected || 0;
+          const bLastSelected = b.metadata.lastSelected || 0;
+          return bLastSelected - aLastSelected;
+        });
+
+      if (filteredAccounts.length > 0) {
+        const mostRecentAccount = filteredAccounts[0];
+        setSelectedDestinationAccount(mostRecentAccount);
+        hasAutoSelectedRef.current = true;
+      }
+    }
+  }, [
+    isToOrFromSolana,
+    selectedDestinationAccount,
+    isDestinationSolana,
+    accounts,
+  ]);
 
   const trackInputEvent = useCallback(
     (
@@ -408,6 +476,8 @@ const PrepareBridgePage = () => {
     }
   }, [fromChain, fromToken, fromTokens, search, isFromTokensLoading]);
 
+  const isSolanaEnabled = useSelector(getIsSolanaSupportEnabled);
+
   return (
     <Column className="prepare-bridge-page" gap={8}>
       <BridgeInputGroup
@@ -601,6 +671,17 @@ const PrepareBridgePage = () => {
           }}
           isTokenListLoading={isToTokensLoading}
         />
+
+        {isSolanaEnabled && isToOrFromSolana && (
+          <Box padding={6} paddingBottom={3} paddingTop={3}>
+            <DestinationAccountPicker
+              onAccountSelect={setSelectedDestinationAccount}
+              selectedSwapToAccount={selectedDestinationAccount}
+              isDestinationSolana={isDestinationSolana}
+            />
+          </Box>
+        )}
+
         <Column height={BlockSize.Full} justifyContent={JustifyContent.center}>
           {isLoading && !activeQuote ? (
             <>
@@ -615,7 +696,7 @@ const PrepareBridgePage = () => {
           ) : null}
         </Column>
 
-        <Row padding={6}>
+        <Row padding={6} paddingTop={activeQuote ? 0 : 6}>
           <Column
             gap={3}
             className={activeQuote ? 'highlight' : ''}
@@ -625,6 +706,14 @@ const PrepareBridgePage = () => {
               paddingInline: 16,
               position: 'relative',
               overflow: 'hidden',
+              ...(activeQuote && !wasTxDeclined && isSolanaEnabled
+                ? {
+                    boxShadow:
+                      'var(--shadow-size-sm) var(--color-shadow-default)',
+                    backgroundColor: 'var(--color-background-default)',
+                    borderRadius: 8,
+                  }
+                : {}),
             }}
           >
             {activeQuote && isQuoteGoingToRefresh && (
@@ -641,12 +730,25 @@ const PrepareBridgePage = () => {
                 backgroundColor={BackgroundColor.primaryMuted}
               />
             )}
-            {!wasTxDeclined && activeQuote && <BridgeQuoteCard />}
+            {!wasTxDeclined &&
+              activeQuote &&
+              (isSolanaEnabled ? (
+                <MultichainBridgeQuoteCard
+                  destinationAddress={selectedDestinationAccount?.address}
+                />
+              ) : (
+                <BridgeQuoteCard />
+              ))}
             <Footer padding={0} flexDirection={FlexDirection.Column} gap={2}>
               <BridgeCTAButton
                 onFetchNewQuotes={() => {
                   debouncedUpdateQuoteRequestInController(quoteParams);
                 }}
+                needsDestinationAddress={
+                  isSolanaEnabled &&
+                  isToOrFromSolana &&
+                  !selectedDestinationAccount
+                }
               />
               {activeQuote?.approval && fromAmount && fromToken ? (
                 <Row justifyContent={JustifyContent.center} gap={1}>