feat(coinmarket): create independent offer page on quote sected

packages/suite-desktop-ui/src/support/Router.tsx

@@ -18,9 +18,11 @@ import WalletAnonymize from 'src/views/wallet/anonymize';
 import WalletCoinmarketBuy from 'src/views/wallet/coinmarket/buy';
 import WalletCoinmarketBuyDetail from 'src/views/wallet/coinmarket/buy/detail';
 import WalletCoinmarketBuyOffers from 'src/views/wallet/coinmarket/buy/offers';
+import { CoinmarketBuyConfirm } from 'src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm';
 import { CoinmarketSellForm } from 'src/views/wallet/coinmarket/sell_new/CoinmarketSellForm';
 import WalletCoinmarketSellDetail from 'src/views/wallet/coinmarket/sell_new/detail';
 import { CoinmarketSellOffers } from 'src/views/wallet/coinmarket/sell_new/CoinmarketSellOffers';
+import { CoinmarketSellConfirm } from 'src/views/wallet/coinmarket/sell_new/CoinmarketSellConfirm';
 import WalletCoinmarketExchange from 'src/views/wallet/coinmarket/exchange';
 import WalletCoinmarketExchangeDetail from 'src/views/wallet/coinmarket/exchange/detail';
 import WalletCoinmarketExchangeOffers from 'src/views/wallet/coinmarket/exchange/offers';
@@ -49,9 +51,11 @@ const components: { [key: string]: ComponentType<any> } = {
     'wallet-coinmarket-buy': WalletCoinmarketBuy,
     'wallet-coinmarket-buy-detail': WalletCoinmarketBuyDetail,
     'wallet-coinmarket-buy-offers': WalletCoinmarketBuyOffers,
+    'wallet-coinmarket-buy-confirm': CoinmarketBuyConfirm,
     'wallet-coinmarket-sell': CoinmarketSellForm,
     'wallet-coinmarket-sell-detail': WalletCoinmarketSellDetail,
     'wallet-coinmarket-sell-offers': CoinmarketSellOffers,
+    'wallet-coinmarket-sell-confirm': CoinmarketSellConfirm,
     'wallet-coinmarket-exchange': WalletCoinmarketExchange,
     'wallet-coinmarket-exchange-detail': WalletCoinmarketExchangeDetail,
     'wallet-coinmarket-exchange-offers': WalletCoinmarketExchangeOffers,

packages/suite-web/e2e/tests/coinmarket/buy.test.ts

@@ -14,7 +14,7 @@ describe('Coinmarket buy', () => {
                     let { href } = win.location;
                     // simulate redirect from partner back to Suite, prefix independent
                     href = href.replace(
-                        '/accounts/coinmarket/buy/offers#/btc/0',
+                        '/accounts/coinmarket/buy/confirm#/btc/0',
                         '/coinmarket-redirect#detail/btc/normal/0/mockedPaymentId3',
                     );
                     win.location.href = href;

packages/suite-web/src/support/Router.tsx

@@ -58,6 +58,11 @@ const components: Record<PageName, LazyExoticComponent<ComponentType<any>>> = {
     'wallet-coinmarket-buy-offers': lazy(
         () => import(/* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/buy/offers'),
     ),
+    'wallet-coinmarket-buy-confirm': lazy(() =>
+        import(
+            /* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm'
+        ).then(({ CoinmarketBuyConfirm }) => ({ default: CoinmarketBuyConfirm })),
+    ),
     'wallet-coinmarket-sell': lazy(() =>
         import(
             /* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/sell_new/CoinmarketSellForm'
@@ -74,6 +79,11 @@ const components: Record<PageName, LazyExoticComponent<ComponentType<any>>> = {
             /* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/sell_new/CoinmarketSellOffers'
         ).then(({ CoinmarketSellOffers }) => ({ default: CoinmarketSellOffers })),
     ),
+    'wallet-coinmarket-sell-confirm': lazy(() =>
+        import(
+            /* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/sell_new/CoinmarketSellConfirm'
+        ).then(({ CoinmarketSellConfirm }) => ({ default: CoinmarketSellConfirm })),
+    ),
     'wallet-coinmarket-exchange': lazy(
         () => import(/* webpackChunkName: "coinmarket" */ 'src/views/wallet/coinmarket/exchange'),
     ),

packages/suite/src/actions/wallet/coinmarketBuyActions.ts

@@ -42,6 +42,7 @@ export type CoinmarketBuyAction =
           type: typeof COINMARKET_BUY.SAVE_QUOTES;
           quotes: BuyTrade[];
       }
+    | { type: typeof COINMARKET_BUY.SAVE_QUOTE; quote: BuyTrade | undefined }
     | { type: typeof COINMARKET_BUY.CLEAR_QUOTES }
     | {
           type: typeof COINMARKET_COMMON.SAVE_TRADE;
@@ -176,6 +177,11 @@ export const saveQuotes = (quotes: BuyTrade[]): CoinmarketBuyAction => ({
     quotes,
 });
 
+export const saveSelectedQuote = (quote: BuyTrade | undefined): CoinmarketBuyAction => ({
+    type: COINMARKET_BUY.SAVE_QUOTE,
+    quote,
+});
+
 export const clearQuotes = (): CoinmarketBuyAction => ({
     type: COINMARKET_BUY.CLEAR_QUOTES,
 });

packages/suite/src/actions/wallet/coinmarketSellActions.ts

@@ -28,6 +28,10 @@ export type CoinmarketSellAction =
           type: typeof COINMARKET_SELL.SAVE_QUOTES;
           quotes: SellFiatTrade[];
       }
+    | {
+          type: typeof COINMARKET_SELL.SAVE_QUOTE;
+          quote: SellFiatTrade | undefined;
+      }
     | { type: typeof COINMARKET_SELL.CLEAR_QUOTES }
     | {
           type: typeof COINMARKET_COMMON.SAVE_TRADE;
@@ -108,6 +112,11 @@ export const saveQuotes = (quotes: SellFiatTrade[]): CoinmarketSellAction => ({
     quotes,
 });
 
+export const saveSelectedQuote = (quote: SellFiatTrade | undefined): CoinmarketSellAction => ({
+    type: COINMARKET_SELL.SAVE_QUOTE,
+    quote,
+});
+
 export const clearQuotes = (): CoinmarketSellAction => ({
     type: COINMARKET_SELL.CLEAR_QUOTES,
 });

packages/suite/src/actions/wallet/constants/coinmarketBuyConstants.ts

@@ -3,6 +3,7 @@ export const SAVE_QUOTE_REQUEST = '@coinmarket-buy/save_buy_quote_request';
 export const SAVE_TRANSACTION_DETAIL_ID = '@coinmarket-buy/save_transaction_detail_id';
 export const SET_IS_FROM_REDIRECT = '@coinmarket-buy/set_is_from_redirect';
 export const SAVE_QUOTES = '@coinmarket-buy/save_buy_quotes';
+export const SAVE_QUOTE = '@coinmarket-buy/save_buy_quote';
 export const CLEAR_QUOTES = '@coinmarket-buy/clear_buy_quotes';
 export const VERIFY_ADDRESS = '@coinmarket-buy/verify_address';
 export const SAVE_TRANSACTION_ID = '@coinmarket-buy/save_transaction_id';

packages/suite/src/actions/wallet/constants/coinmarketSellConstants.ts

@@ -1,6 +1,7 @@
 export const SAVE_SELL_INFO = '@coinmarket-sell/save_sell_info';
 export const SAVE_QUOTE_REQUEST = '@coinmarket-sell/save_quote_request';
 export const SAVE_QUOTES = '@coinmarket-sell/save_quotes';
+export const SAVE_QUOTE = '@coinmarket-sell/save_quote';
 export const CLEAR_QUOTES = '@coinmarket-sell/clear_quotes';
 export const SAVE_TRANSACTION_ID = '@coinmarket-sell/save_transaction_id';
 export const SET_IS_FROM_REDIRECT = '@coinmarket-sell/set_is_from_redirect';

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketBuyForm.tsx

@@ -48,26 +48,18 @@ const useCoinmarketBuyForm = ({
     pageType = 'form',
 }: UseCoinmarketFormProps): CoinmarketBuyFormContextProps => {
     const type = 'buy';
-    const isPageOffers = pageType === 'offers';
+    const isNotFormPage = pageType !== 'form';
     const dispatch = useDispatch();
-    const { addressVerified, buyInfo, isFromRedirect, quotes, quotesRequest } = useSelector(
-        state => state.wallet.coinmarket.buy,
-    );
-    const {
-        callInProgress,
-        account,
-        selectedQuote,
-        timer,
-        device,
-        setCallInProgress,
-        setSelectedQuote,
-        checkQuotesTimer,
-    } = useCoinmarketCommonOffers<CoinmarketTradeBuyType>({ selectedAccount, type });
+    const { addressVerified, buyInfo, isFromRedirect, quotes, quotesRequest, selectedQuote } =
+        useSelector(state => state.wallet.coinmarket.buy);
+    const { callInProgress, account, timer, device, setCallInProgress, checkQuotesTimer } =
+        useCoinmarketCommonOffers<CoinmarketTradeBuyType>({ selectedAccount, type });
     const { paymentMethods, getPaymentMethods, getQuotesByPaymentMethod } =
         useCoinmarketPaymentMethod<CoinmarketTradeBuyType>();
     const {
         saveTrade,
         saveQuotes,
+        saveSelectedQuote,
         setIsFromRedirect,
         openCoinmarketBuyConfirmModal,
         addNotification,
@@ -81,6 +73,7 @@ const useCoinmarketBuyForm = ({
     } = useActions({
         saveTrade: coinmarketBuyActions.saveTrade,
         saveQuotes: coinmarketBuyActions.saveQuotes,
+        saveSelectedQuote: coinmarketBuyActions.saveSelectedQuote,
         setIsFromRedirect: coinmarketBuyActions.setIsFromRedirect,
         openCoinmarketBuyConfirmModal: coinmarketBuyActions.openCoinmarketBuyConfirmModal,
         addNotification: notificationsActions.addToast,
@@ -92,12 +85,13 @@ const useCoinmarketBuyForm = ({
         saveQuoteRequest: coinmarketBuyActions.saveQuoteRequest,
         saveCachedAccountInfo: coinmarketBuyActions.saveCachedAccountInfo,
     });
-    const { navigateToBuyForm, navigateToBuyOffers } = useCoinmarketNavigation(account);
+    const { navigateToBuyForm, navigateToBuyOffers, navigateToBuyOffer } =
+        useCoinmarketNavigation(account);
 
     // states
     const [amountLimits, setAmountLimits] = useState<AmountLimits | undefined>(undefined);
     const [innerQuotes, setInnerQuotes] = useState<BuyTrade[] | undefined>(
-        isPageOffers ? quotes : undefined,
+        isNotFormPage ? quotes : undefined,
     );
     const [isSubmittingHelper, setIsSubmittingHelper] = useState(false);
     const abortControllerRef = useRef<AbortController | null>(null);
@@ -131,14 +125,14 @@ const useCoinmarketBuyForm = ({
           }
         : null;
 
-    const isDraft = !!draftUpdated || !!isPageOffers;
+    const isDraft = !!draftUpdated || !!isNotFormPage;
     const methods = useForm<CoinmarketBuyFormProps>({
         mode: 'onChange',
         defaultValues: isDraft && draftUpdated ? draftUpdated : defaultValues,
     });
     const { register, control, formState, reset, setValue, handleSubmit } = methods;
     const values = useWatch<CoinmarketBuyFormProps>({ control });
-    const previousValues = useRef<typeof values | null>(isPageOffers ? draftUpdated : null);
+    const previousValues = useRef<typeof values | null>(isNotFormPage ? draftUpdated : null);
 
     // form states
     const formIsValid = Object.keys(formState.errors).length === 0;
@@ -327,12 +321,14 @@ const useCoinmarketBuyForm = ({
                         });
                     }
                 } else {
-                    setSelectedQuote(quote);
+                    saveSelectedQuote(quote);
                     dispatch({
                         type: SET_MODAL_CRYPTO_CURRENCY,
                         modalCryptoSymbol: quote.receiveCurrency,
                     });
                     timer.stop();
+
+                    navigateToBuyOffer();
                 }
             }
         }
@@ -405,7 +401,7 @@ const useCoinmarketBuyForm = ({
 
             previousValues.current = values;
         }
-    }, [previousValues, values, handleChange, handleSubmit, isPageOffers]);
+    }, [previousValues, values, handleChange, handleSubmit, isNotFormPage]);
 
     useEffect(() => {
         // when draft doesn't exist, we need to bind actual default values - that happens when we've got buyInfo from Invity API server