fix(trade): display DEX quotes

packages/suite/src/hooks/wallet/coinmarket/form/common/useCoinmarketExchangeQuotesFilter.ts

@@ -0,0 +1,61 @@
+import { useEffect, useMemo } from 'react';
+import type { UseFormSetValue } from 'react-hook-form';
+
+import { ExchangeTrade } from 'invity-api';
+
+import {
+    FORM_EXCHANGE_CEX,
+    FORM_EXCHANGE_DEX,
+    FORM_EXCHANGE_TYPE,
+} from 'src/constants/wallet/coinmarket/form';
+import type {
+    CoinmarketExchangeFormProps,
+    ExchangeType,
+    RateType,
+} from 'src/types/coinmarket/coinmarketForm';
+import { getCexQuotesByRateType } from 'src/utils/wallet/coinmarket/exchangeUtils';
+
+interface CoinmarketExchangeQuotesFilterProps {
+    quotes: ExchangeTrade[] | undefined;
+    exchangeType: ExchangeType;
+    rateType: RateType;
+    exchangeInfo: any;
+    setValue: UseFormSetValue<CoinmarketExchangeFormProps>;
+}
+
+export const useCoinmarketExchangeQuotesFilter = ({
+    exchangeType,
+    rateType,
+    quotes,
+    exchangeInfo,
+    setValue,
+}: CoinmarketExchangeQuotesFilterProps) => {
+    const dexQuotes = useMemo(() => quotes?.filter(quote => quote.isDex), [quotes]);
+    const cexQuotes = useMemo(
+        () => getCexQuotesByRateType(rateType, quotes, exchangeInfo),
+        [rateType, quotes, exchangeInfo],
+    );
+
+    // handle edge case when there are no longer quotes of selected exchange type
+    useEffect(() => {
+        const isSelectedDexButFoundOnlyCex =
+            exchangeType === FORM_EXCHANGE_DEX && !dexQuotes?.length && cexQuotes?.length;
+        const isSelectedCexButFoundOnlyDex =
+            exchangeType === FORM_EXCHANGE_CEX && dexQuotes?.length && !cexQuotes?.length;
+        const isSelectedDexButNotFoundAny =
+            exchangeType === FORM_EXCHANGE_DEX && !dexQuotes?.length && !cexQuotes?.length;
+
+        if (isSelectedDexButFoundOnlyCex) {
+            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_CEX);
+        } else if (isSelectedCexButFoundOnlyDex) {
+            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_DEX);
+        } else if (isSelectedDexButNotFoundAny) {
+            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_CEX);
+        }
+    }, [dexQuotes, exchangeType, cexQuotes, setValue]);
+
+    return {
+        dexQuotes,
+        cexQuotes,
+    };
+};

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketExchangeForm.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 
 import type {
@@ -29,7 +29,6 @@ import {
     coinmarketGetExchangeReceiveCryptoId,
     createQuoteLink,
     getAmountLimits,
-    getCexQuotesByRateType,
     getSuccessQuotesOrdered,
 } from 'src/utils/wallet/coinmarket/exchangeUtils';
 import { useFormDraft } from 'src/hooks/wallet/useFormDraft';
@@ -45,13 +44,7 @@ import {
     CoinmarketExchangeFormProps,
     CoinmarketExchangeStepType,
 } from 'src/types/coinmarket/coinmarketForm';
-import {
-    FORM_EXCHANGE_CEX,
-    FORM_EXCHANGE_DEX,
-    FORM_OUTPUT_AMOUNT,
-    FORM_OUTPUT_FIAT,
-    FORM_EXCHANGE_TYPE,
-} from 'src/constants/wallet/coinmarket/form';
+import { FORM_OUTPUT_AMOUNT, FORM_OUTPUT_FIAT } from 'src/constants/wallet/coinmarket/form';
 import { useCoinmarketExchangeFormDefaultValues } from 'src/hooks/wallet/coinmarket/form/useCoinmarketExchangeFormDefaultValues';
 import * as coinmarketExchangeActions from 'src/actions/wallet/coinmarketExchangeActions';
 import * as coinmarketCommonActions from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
@@ -65,6 +58,7 @@ import { useCoinmarketAccount } from 'src/hooks/wallet/coinmarket/form/common/us
 import { useCoinmarketInfo } from 'src/hooks/wallet/coinmarket/useCoinmarketInfo';
 import { useCoinmarketFiatValues } from 'src/hooks/wallet/coinmarket/form/common/useCoinmarketFiatValues';
 import type { CryptoAmountLimitProps } from 'src/utils/suite/validation';
+import { useCoinmarketExchangeQuotesFilter } from 'src/hooks/wallet/coinmarket/form/common/useCoinmarketExchangeQuotesFilter';
 
 import { useCoinmarketInitializer } from './common/useCoinmarketInitializer';
 
@@ -181,14 +175,16 @@ export const useCoinmarketExchangeForm = ({
 
     const isFormInvalid = !(formIsValid && hasValues);
     const isLoadingOrInvalid = noProviders || isFormLoading || isFormInvalid;
-
-    const filteredCexQuotes = useMemo(
-        () => getCexQuotesByRateType(rateType, innerQuotes, exchangeInfo),
-        [rateType, innerQuotes, exchangeInfo],
-    );
-    const dexQuotes = useMemo(() => innerQuotes?.filter(q => q.isDex), [innerQuotes]);
     const decimals = getCoinmarketNetworkDecimals({ sendCryptoSelect, network });
 
+    const { cexQuotes, dexQuotes } = useCoinmarketExchangeQuotesFilter({
+        exchangeType,
+        rateType,
+        quotes,
+        exchangeInfo,
+        setValue,
+    });
+
     const {
         isComposing,
         composedLevels,
@@ -685,25 +681,6 @@ export const useCoinmarketExchangeForm = ({
         };
     }, []);
 
-    // handle edge case when there are no longer quotes of selected exchange type
-    useEffect(() => {
-        if (exchangeType === FORM_EXCHANGE_DEX && !dexQuotes?.length && filteredCexQuotes?.length) {
-            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_CEX);
-        } else if (
-            exchangeType === FORM_EXCHANGE_CEX &&
-            !filteredCexQuotes?.length &&
-            dexQuotes?.length
-        ) {
-            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_DEX);
-        } else if (
-            exchangeType === FORM_EXCHANGE_DEX &&
-            !dexQuotes?.length &&
-            !filteredCexQuotes?.length
-        ) {
-            setValue(FORM_EXCHANGE_TYPE, FORM_EXCHANGE_CEX);
-        }
-    }, [dexQuotes, exchangeType, filteredCexQuotes, setValue]);
-
     return {
         type,
         ...methods,
@@ -724,9 +701,9 @@ export const useCoinmarketExchangeForm = ({
         timer,
         callInProgress,
         exchangeInfo,
-        allQuotes: innerQuotes,
-        quotes: filteredCexQuotes,
+        quotes: innerQuotes,
         dexQuotes,
+        cexQuotes,
         quotesRequest,
         composedLevels,
         defaultCurrency,

packages/suite/src/types/coinmarket/coinmarketForm.ts

@@ -247,8 +247,8 @@ export interface CoinmarketExchangeFormContextProps
     defaultCurrency: Option;
     amountLimits?: CryptoAmountLimitProps;
     composedLevels?: PrecomposedLevels | PrecomposedLevelsCardano;
-    allQuotes: ExchangeTrade[] | undefined;
     quotes: ExchangeTrade[] | undefined;
+    cexQuotes: ExchangeTrade[] | undefined;
     dexQuotes: ExchangeTrade[] | undefined;
     quotesRequest: ExchangeTradeQuoteRequest | undefined;
     receiveAccount?: Account;

packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffer.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { CryptoId, ExchangeTrade } from 'invity-api';
+import { CryptoId } from 'invity-api';
 
 import { Button, TextButton, Row, Column, Paragraph } from '@trezor/components';
 import { spacings } from '@trezor/theme';
@@ -38,7 +38,7 @@ const getSelectedQuote = (
     if (isCoinmarketExchangeContext(context)) {
         return context.getValues(FORM_EXCHANGE_TYPE) === FORM_EXCHANGE_DEX
             ? context.dexQuotes?.[0]
-            : context.quotes?.[0];
+            : context.cexQuotes?.[0];
     } else {
         return bestScoredQuote;
     }
@@ -133,7 +133,6 @@ export const CoinmarketFormOffer = () => {
                         isFormLoading={state.isFormLoading}
                         isFormInvalid={state.isFormInvalid}
                         providers={providers}
-                        quotes={quotes as ExchangeTrade[] | undefined}
                         bestRatedQuote={bestRatedQuote}
                     />
                 ) : (

packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffersSwitcher.tsx

@@ -1,5 +1,3 @@
-import { ExchangeTrade } from 'invity-api';
-
 import { spacings } from '@trezor/theme';
 import { Row, Card, Column, Spinner, Paragraph } from '@trezor/components';
 
@@ -23,7 +21,6 @@ interface CoinmarketFormOffersSwitcherProps {
     isFormLoading: boolean;
     isFormInvalid: boolean;
     providers: CoinmarketUtilsProvidersProps | undefined;
-    quotes: ExchangeTrade[] | undefined;
     bestRatedQuote: CoinmarketTradeDetailType | undefined;
 }
 
@@ -32,12 +29,11 @@ export const CoinmarketFormOffersSwitcher = ({
     isFormLoading,
     isFormInvalid,
     providers,
-    quotes,
     bestRatedQuote,
 }: CoinmarketFormOffersSwitcherProps) => {
-    const { setValue, getValues, dexQuotes } = context;
+    const { setValue, getValues, dexQuotes, cexQuotes } = context;
     const { exchangeType } = getValues();
-    const cexQuote = quotes?.[0];
+    const cexQuote = cexQuotes?.[0];
     const dexQuote = dexQuotes?.[0];
     const hasSingleOption = !cexQuote !== !dexQuote;
     const bestQuote = cexQuote ?? dexQuote;

packages/suite/src/views/wallet/coinmarket/common/CoinmarketOffers/CoinmarketOffersExchange.tsx

@@ -17,11 +17,8 @@ import { CoinmarketOffersExchangeQuotesByTypeSection } from 'src/views/wallet/co
 import { useCoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
 
 export const CoinmarketOffersExchange = () => {
-    const {
-        allQuotes: quotes,
-        exchangeInfo,
-        getValues,
-    } = useCoinmarketFormContext<CoinmarketTradeExchangeType>();
+    const { quotes, exchangeInfo, getValues } =
+        useCoinmarketFormContext<CoinmarketTradeExchangeType>();
     const exchangeTypeFilter = getValues(EXCHANGE_COMPARATOR_RATE_FILTER);
     const kycFilter = getValues(EXCHANGE_COMPARATOR_KYC_FILTER);
     const showAll = exchangeTypeFilter === EXCHANGE_COMPARATOR_RATE_FILTER_ALL;