chore: enable selecting alternative quote

ui/ducks/bridge/actions.ts

@@ -55,6 +55,7 @@ const {
   setFromTokenInputValue,
   resetInputFields,
   setSortOrder,
+  setSelectedQuote,
 } = bridgeSlice.actions;
 
 export {
@@ -66,6 +67,7 @@ export {
   setDestTokenExchangeRates,
   setSrcTokenExchangeRates,
   setSortOrder,
+  setSelectedQuote,
 };
 
 const callBridgeControllerMethod = <T>(

ui/ducks/bridge/bridge.ts

@@ -6,7 +6,11 @@ import { swapsSlice } from '../swaps/swaps';
 import { SwapsTokenObject } from '../../../shared/constants/swaps';
 import { SwapsEthToken } from '../../selectors';
 import { fetchTokenExchangeRates } from '../../helpers/utils/util';
-import { SortOrder } from '../../pages/bridge/types';
+import {
+  QuoteMetadata,
+  QuoteResponse,
+  SortOrder,
+} from '../../pages/bridge/types';
 
 export type BridgeState = {
   toChainId: Hex | null;
@@ -18,6 +22,7 @@ export type BridgeState = {
   toTokenExchangeRate: number | null;
   toNativeExchangeRate: number | null;
   sortOrder: SortOrder;
+  selectedQuote: (QuoteResponse & QuoteMetadata) | null;
 };
 
 const initialState: BridgeState = {
@@ -30,6 +35,7 @@ const initialState: BridgeState = {
   toNativeExchangeRate: null,
   toTokenExchangeRate: null,
   sortOrder: SortOrder.ADJUSTED_RETURN_DESC,
+  selectedQuote: null,
 };
 
 export const setSrcTokenExchangeRates = createAsyncThunk(
@@ -93,6 +99,9 @@ const bridgeSlice = createSlice({
     setSortOrder: (state, action) => {
       state.sortOrder = action.payload;
     },
+    setSelectedQuote: (state, action) => {
+      state.selectedQuote = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(setDestTokenExchangeRates.fulfilled, (state, action) => {

ui/ducks/bridge/selectors.ts

@@ -178,22 +178,26 @@ export const getBridgeFeesPerGas = createSelector(
 export const getBridgeSortOrder = (state: BridgeAppState) =>
   state.bridge.sortOrder;
 
+const _getSelectedQuote = (state: BridgeAppState) => state.bridge.selectedQuote;
+
 const _getQuotesWithMetadata = createDeepEqualSelector(
   (state) => state.metamask.bridgeState.quotes,
+  _getSelectedQuote,
   (state: BridgeAppState) => state.bridge.toTokenExchangeRate,
   (state: BridgeAppState) => state.bridge.toNativeExchangeRate,
   (state: BridgeAppState) => state.bridge.fromTokenExchangeRate,
   (state: BridgeAppState) => state.bridge.fromNativeExchangeRate,
   getBridgeFeesPerGas,
   (
     quotes,
+    selectedQuote,
     toTokenExchangeRate,
     toNativeExchangeRate,
     fromTokenExchangeRate,
     fromNativeExchangeRate,
     { maxFeePerGas, maxPriorityFeePerGas },
   ): (QuoteResponse & QuoteMetadata)[] => {
-    return quotes.map((quote: QuoteResponse) => {
+    const newQuotes = quotes.map((quote: QuoteResponse) => {
       const toTokenAmount = calcToAmount(
         quote.quote,
         toTokenExchangeRate,
@@ -225,6 +229,10 @@ const _getQuotesWithMetadata = createDeepEqualSelector(
         cost: calcCost(adjustedReturn.fiat, sentAmount.fiat),
       };
     });
+    // TODO if quote is exactly the same excluding requestId, dedupe it as well and replace with new one
+    return selectedQuote
+      ? uniqBy(newQuotes.concat(selectedQuote), 'quote.requestId')
+      : newQuotes;
   },
 );
 
@@ -292,6 +300,7 @@ const _getRecommendedQuote = createDeepEqualSelector(
 export const getBridgeQuotes = createSelector(
   _getSortedQuotesWithMetadata,
   _getRecommendedQuote,
+  _getSelectedQuote,
   (state) => state.metamask.bridgeState.quotesLastFetched,
   (state) =>
     state.metamask.bridgeState.quotesLoadingStatus === RequestStatus.LOADING,
@@ -301,6 +310,7 @@ export const getBridgeQuotes = createSelector(
   (
     sortedQuotesWithMetadata,
     recommendedQuote,
+    selectedQuote,
     quotesLastFetchedMs,
     isLoading,
     quotesRefreshCount,
@@ -309,7 +319,7 @@ export const getBridgeQuotes = createSelector(
   ) => ({
     sortedQuotes: sortedQuotesWithMetadata,
     recommendedQuote,
-    activeQuote: recommendedQuote,
+    activeQuote: selectedQuote ?? recommendedQuote,
     quotesLastFetchedMs,
     isLoading,
     quotesRefreshCount,

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

@@ -11,6 +11,7 @@ import {
   setFromToken,
   setFromTokenInputValue,
   setSrcTokenExchangeRates,
+  setSelectedQuote,
   setToChain,
   setToChainId,
   setToToken,
@@ -122,10 +123,10 @@ const PrepareBridgePage = () => {
   );
 
   const debouncedUpdateQuoteRequestInController = useCallback(
-    debounce(
-      (p: Partial<QuoteRequest>) => dispatch(updateQuoteRequestParams(p)),
-      300,
-    ),
+    debounce((p: Partial<QuoteRequest>) => {
+      dispatch(updateQuoteRequestParams(p));
+      dispatch(setSelectedQuote(null));
+    }, 300),
     [],
   );
 

ui/pages/bridge/quotes/bridge-quotes-modal.tsx

@@ -23,7 +23,7 @@ import {
 } from '../utils/quote';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getCurrentCurrency } from '../../../selectors';
-import { setSortOrder } from '../../../ducks/bridge/actions';
+import { setSelectedQuote, setSortOrder } from '../../../ducks/bridge/actions';
 import { SortOrder, QuoteMetadata, QuoteResponse } from '../types';
 import { Footer } from '../../../components/multichain/pages/page';
 import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
@@ -69,7 +69,8 @@ export const BridgeQuotesModal = ({
             <Button
               data-testid="quotes-modal-use-quote-button"
               onClick={() => {
-                // TODO select quote
+                dispatch(setSelectedQuote(expandedQuote));
+                setExpandedQuote(undefined);
                 onClose();
               }}
               disabled={false}