fix(trade): improve routing

trezor · Oct 25, 2024 · e59e09e · e59e09e
1 parent 510c137
commit e59e09e
Show file tree

Hide file tree

Showing 25 changed files with 74 additions and 318 deletions.
diff --git a/packages/suite/src/actions/wallet/coinmarket/coinmarketCommonActions.ts b/packages/suite/src/actions/wallet/coinmarket/coinmarketCommonActions.ts
@@ -18,11 +18,7 @@ import { GetState, Dispatch } from 'src/types/suite';
 import * as modalActions from 'src/actions/suite/modalActions';
 import { getUnusedAddressFromAccount } from 'src/utils/wallet/coinmarket/coinmarketUtils';
 import { Account } from 'src/types/wallet';
-import {
-    CoinmarketBackRouteNameType,
-    CoinmarketSuiteBackRouteNameType,
-    ComposedTransactionInfo,
-} from 'src/reducers/wallet/coinmarketReducer';
+import { ComposedTransactionInfo } from 'src/reducers/wallet/coinmarketReducer';
 import { submitRequestForm as envSubmitRequestForm } from 'src/utils/suite/env';
 import * as formDraftActions from 'src/actions/wallet/formDraftActions';
 import { AddressDisplayOptions } from '@suite-common/wallet-types';
@@ -33,6 +29,7 @@ import {
     COINMARKET_COMMON,
     COINMARKET_EXCHANGE,
 } from 'src/actions/wallet/constants';
+import { CoinmarketTradeType } from 'src/types/coinmarket/coinmarket';
 
 export type CoinmarketCommonAction =
     | {
@@ -56,12 +53,8 @@ export type CoinmarketCommonAction =
           modalAccount: Account | undefined;
       }
     | {
-          type: typeof COINMARKET_COMMON.SET_SUITE_BACK_ROUTE_NAME;
-          suiteBackRouteName: CoinmarketSuiteBackRouteNameType;
-      }
-    | {
-          type: typeof COINMARKET_COMMON.SET_COINMARKET_BACK_ROUTE_NAME;
-          coinmarketBackRouteName: CoinmarketBackRouteNameType;
+          type: typeof COINMARKET_COMMON.SET_COINMARKET_ACTIVE_SECTION;
+          activeSection: CoinmarketTradeType;
       };
 
 type FormState = {
@@ -81,18 +74,9 @@ export const setCoinmarketModalAccount = (
     modalAccount,
 });
 
-export const setSuiteBackRouteName = (
-    suiteBackRouteName: CoinmarketSuiteBackRouteNameType,
-): CoinmarketCommonAction => ({
-    type: COINMARKET_COMMON.SET_SUITE_BACK_ROUTE_NAME,
-    suiteBackRouteName,
-});
-
-export const setCoinmarketBackRouteName = (
-    coinmarketBackRouteName: CoinmarketBackRouteNameType,
-): CoinmarketCommonAction => ({
-    type: COINMARKET_COMMON.SET_COINMARKET_BACK_ROUTE_NAME,
-    coinmarketBackRouteName,
+export const setActiveSection = (activeSection: CoinmarketTradeType): CoinmarketCommonAction => ({
+    type: COINMARKET_COMMON.SET_COINMARKET_ACTIVE_SECTION,
+    activeSection,
 });
 
 export const verifyAddress =

diff --git a/packages/suite/src/actions/wallet/constants/coinmarketCommonConstants.ts b/packages/suite/src/actions/wallet/constants/coinmarketCommonConstants.ts
@@ -4,5 +4,4 @@ export const LOAD_DATA = '@coinmarket-common/load_data';
 export const SET_LOADING = '@coinmarket-common/set_loading';
 export const SET_MODAL_CRYPTO_CURRENCY = '@coinmarket-common/set_modal_crypto_currency';
 export const SET_MODAL_ACCOUNT = '@coinmarket-common/set_modal_account';
-export const SET_SUITE_BACK_ROUTE_NAME = '@coinmarket-common/set_suite_back_route_name';
-export const SET_COINMARKET_BACK_ROUTE_NAME = '@coinmarket-common/set_coinmarket_back_route_name';
+export const SET_COINMARKET_ACTIVE_SECTION = '@coinmarket-common/set_coinmarket_active_section';
diff --git a/packages/suite/src/hooks/wallet/coinmarket/useCoinmarketRouteHelper.ts b/packages/suite/src/hooks/wallet/coinmarket/useCoinmarketRouteHelper.ts
diff --git a/packages/suite/src/middlewares/wallet/__tests__/coinmarketMiddleware.test.ts b/packages/suite/src/middlewares/wallet/__tests__/coinmarketMiddleware.test.ts
@@ -42,22 +42,6 @@ const COINMARKET_EXCHANGE_ROUTE = {
     url: '/accounts/coinmarket/exchange#/btc/0/normal',
 };
 
-const COINMARKET_TRANSACTIONS_ROUTE = {
-    anchor: undefined,
-    app: 'wallet',
-    hash: undefined,
-    loaded: true,
-    params: undefined,
-    pathname: '/accounts/coinmarket/transactions',
-    route: {
-        name: 'wallet-coinmarket-transactions',
-        pattern: '/accounts/coinmarket/transactions',
-        app: 'wallet',
-    },
-    settingsBackRoute: { name: 'wallet-coinmarket-exchange', params: undefined },
-    url: '/accounts/coinmarket/transactions',
-};
-
 type CoinmarketState = ReturnType<typeof coinmarketReducer>;
 type SelectedAccountState = ReturnType<typeof selectedAccountReducer>;
 type SuiteState = ReturnType<typeof suiteReducer>;
@@ -339,7 +323,7 @@ describe('coinmarketMiddleware', () => {
         expect(store.getState().wallet.coinmarket.exchange.coinmarketAccount).toEqual(undefined);
     });
 
-    it('Test of setting suiteBackRouteName after changing route', () => {
+    it('Test of setting activeSection after changing route', () => {
         const store = initStore(
             getInitialState({
                 coinmarket: {
@@ -353,32 +337,9 @@ describe('coinmarketMiddleware', () => {
             type: ROUTER.LOCATION_CHANGE,
             payload: {
                 ...COINMARKET_EXCHANGE_ROUTE,
-                settingsBackRoute: {
-                    name: 'suite-index',
-                },
             },
         });
 
-        expect(store.getState().wallet.coinmarket.suiteBackRouteName).toBe('suite-index');
-    });
-
-    it('Test of setting coinmarketBackRouteName after changing route', () => {
-        const store = initStore(
-            getInitialState({
-                coinmarket: {
-                    ...initialState,
-                },
-            }),
-        );
-
-        // go to coinmarket transactions
-        store.dispatch({
-            type: ROUTER.LOCATION_CHANGE,
-            payload: COINMARKET_TRANSACTIONS_ROUTE,
-        });
-
-        expect(store.getState().wallet.coinmarket.coinmarketBackRouteName).toBe(
-            'wallet-coinmarket-exchange',
-        );
+        expect(store.getState().wallet.coinmarket.activeSection).toBe('exchange');
     });
 });
diff --git a/packages/suite/src/middlewares/wallet/coinmarketMiddleware.ts b/packages/suite/src/middlewares/wallet/coinmarketMiddleware.ts
@@ -10,10 +10,6 @@ import * as coinmarketExchangeActions from 'src/actions/wallet/coinmarketExchang
 import * as coinmarketSellActions from 'src/actions/wallet/coinmarketSellActions';
 import { UI } from '@trezor/connect';
 import { ROUTER, MODAL } from 'src/actions/suite/constants';
-import {
-    CoinmarketBackRouteNameType,
-    CoinmarketSuiteBackRouteNameType,
-} from 'src/reducers/wallet/coinmarketReducer';
 
 export const coinmarketMiddleware =
     (api: MiddlewareAPI<Dispatch, AppState>) =>
@@ -123,10 +119,10 @@ export const coinmarketMiddleware =
         const exchangeCoinmarketAccount = newState.wallet.coinmarket.exchange.coinmarketAccount;
 
         if (action.type === ROUTER.LOCATION_CHANGE) {
-            const isSell = newState.router.route?.name === 'wallet-coinmarket-sell';
-            const isExchange = newState.router.route?.name === 'wallet-coinmarket-exchange';
-            const currentBackRouteName = action.payload.settingsBackRoute?.name;
-            const { suiteBackRouteName, coinmarketBackRouteName } = newState.wallet.coinmarket;
+            const routeName = newState.router.route?.name;
+            const isBuy = routeName === 'wallet-coinmarket-buy';
+            const isSell = routeName === 'wallet-coinmarket-sell';
+            const isExchange = routeName === 'wallet-coinmarket-exchange';
 
             // clean coinmarketAccount in sell
             if (isSell && sellCoinmarketAccount) {
@@ -138,33 +134,17 @@ export const coinmarketMiddleware =
                 api.dispatch(coinmarketExchangeActions.setCoinmarketExchangeAccount(undefined));
             }
 
-            if (
-                currentBackRouteName &&
-                ['wallet-index', 'suite-index'].includes(currentBackRouteName) &&
-                suiteBackRouteName !== currentBackRouteName
-            ) {
-                api.dispatch(
-                    coinmarketCommonActions.setSuiteBackRouteName(
-                        currentBackRouteName as CoinmarketSuiteBackRouteNameType,
-                    ),
-                );
+            if (isBuy) {
+                api.dispatch(coinmarketCommonActions.setActiveSection('buy'));
             }
 
-            if (
-                currentBackRouteName &&
-                [
-                    'wallet-coinmarket-buy',
-                    'wallet-coinmarket-sell',
-                    'wallet-coinmarket-exchange',
-                    'wallet-coinmarket-dca',
-                ].includes(currentBackRouteName) &&
-                coinmarketBackRouteName !== currentBackRouteName
-            ) {
-                api.dispatch(
-                    coinmarketCommonActions.setCoinmarketBackRouteName(
-                        currentBackRouteName as CoinmarketBackRouteNameType,
-                    ),
-                );
+            if (isSell) {
+                api.dispatch(coinmarketCommonActions.setActiveSection('sell'));
+            }
+
+            if (isExchange) {
+                console.log('coinmarketMiddleware ROUTER.LOCATION_CHANGE');
+                api.dispatch(coinmarketCommonActions.setActiveSection('exchange'));
             }
         }
 

diff --git a/packages/suite/src/reducers/wallet/__tests__/coinmarketReducer.test.ts b/packages/suite/src/reducers/wallet/__tests__/coinmarketReducer.test.ts
@@ -89,27 +89,15 @@ describe('settings reducer', () => {
         });
     });
 
-    it('COINMARKET_COMMON.SET_SUITE_BACK_ROUTE_NAME', () => {
+    it('COINMARKET_COMMON.SET_COINMARKET_ACTIVE_SECTION', () => {
         expect(
             coinmarketReducer(undefined, {
-                type: COINMARKET_COMMON.SET_SUITE_BACK_ROUTE_NAME,
-                suiteBackRouteName: 'suite-index',
+                type: COINMARKET_COMMON.SET_COINMARKET_ACTIVE_SECTION,
+                activeSection: 'exchange',
             }),
         ).toEqual({
             ...initialState,
-            suiteBackRouteName: 'suite-index',
-        });
-    });
-
-    it('COINMARKET_COMMON.SET_COINMARKET_BACK_ROUTE_NAME', () => {
-        expect(
-            coinmarketReducer(undefined, {
-                type: COINMARKET_COMMON.SET_COINMARKET_BACK_ROUTE_NAME,
-                coinmarketBackRouteName: 'wallet-coinmarket-dca',
-            }),
-        ).toEqual({
-            ...initialState,
-            coinmarketBackRouteName: 'wallet-coinmarket-dca',
+            activeSection: 'exchange',
         });
     });
 

diff --git a/packages/suite/src/reducers/wallet/coinmarketReducer.ts b/packages/suite/src/reducers/wallet/coinmarketReducer.ts
@@ -23,11 +23,14 @@ import {
     COINMARKET_INFO,
 } from 'src/actions/wallet/constants';
 import { STORAGE } from 'src/actions/suite/constants';
-import type { Route, Action as SuiteAction } from 'src/types/suite';
+import type { Action as SuiteAction } from 'src/types/suite';
 import type { SellInfo } from 'src/actions/wallet/coinmarketSellActions';
 import type { FeeLevel } from '@trezor/connect';
 import type { Trade } from 'src/types/wallet/coinmarketCommonTypes';
-import { CoinmarketPaymentMethodListProps } from 'src/types/coinmarket/coinmarket';
+import {
+    CoinmarketPaymentMethodListProps,
+    CoinmarketTradeType,
+} from 'src/types/coinmarket/coinmarket';
 
 export interface ComposedTransactionInfo {
     composed?: Pick<
@@ -41,19 +44,6 @@ export interface CoinmarketTradeCommonProps {
     transactionId?: string;
 }
 
-export type CoinmarketSuiteBackRouteNameType = Extract<
-    Route['name'],
-    'wallet-index' | 'suite-index'
->;
-
-export type CoinmarketBackRouteNameType = Extract<
-    Route['name'],
-    | 'wallet-coinmarket-buy'
-    | 'wallet-coinmarket-sell'
-    | 'wallet-coinmarket-exchange'
-    | 'wallet-coinmarket-dca'
->;
-
 interface Info {
     platforms?: Platforms;
     coins?: Coins;
@@ -105,8 +95,7 @@ export interface State {
     modalAccount: Account | undefined;
     isLoading: boolean;
     lastLoadedTimestamp: number;
-    suiteBackRouteName: CoinmarketSuiteBackRouteNameType;
-    coinmarketBackRouteName: CoinmarketBackRouteNameType;
+    activeSection?: CoinmarketTradeType;
 }
 
 export const initialState: State = {
@@ -154,8 +143,7 @@ export const initialState: State = {
     modalAccount: undefined,
     modalCryptoId: undefined,
     lastLoadedTimestamp: 0,
-    suiteBackRouteName: 'wallet-index',
-    coinmarketBackRouteName: 'wallet-coinmarket-buy',
+    activeSection: 'buy',
 };
 
 export const coinmarketReducer = (
@@ -272,11 +260,8 @@ export const coinmarketReducer = (
             case COINMARKET_COMMON.SET_MODAL_CRYPTO_CURRENCY:
                 draft.modalCryptoId = action.modalCryptoId;
                 break;
-            case COINMARKET_COMMON.SET_SUITE_BACK_ROUTE_NAME:
-                draft.suiteBackRouteName = action.suiteBackRouteName;
-                break;
-            case COINMARKET_COMMON.SET_COINMARKET_BACK_ROUTE_NAME:
-                draft.coinmarketBackRouteName = action.coinmarketBackRouteName;
+            case COINMARKET_COMMON.SET_COINMARKET_ACTIVE_SECTION:
+                draft.activeSection = action.activeSection;
                 break;
             // no default
         }

diff --git a/packages/suite/src/types/coinmarket/coinmarket.ts b/packages/suite/src/types/coinmarket/coinmarket.ts
@@ -31,7 +31,7 @@ import { Account, SelectedAccountLoaded } from '@suite-common/wallet-types';
 import { AnyAction, Dispatch } from 'redux';
 import { State } from 'src/reducers/wallet/coinmarketReducer';
 import { AccountType } from '@suite-common/wallet-config';
-import { ExtendedMessageDescriptor, Route, TrezorDevice } from 'src/types/suite';
+import { ExtendedMessageDescriptor, TrezorDevice } from 'src/types/suite';
 import { Timer } from '@trezor/react-utils';
 import { AccountsState } from '@suite-common/wallet-core';
 import { TokenDefinitionsState } from '@suite-common/token-definitions';
@@ -279,16 +279,3 @@ export interface CoinmarketCryptoAmountProps {
     receiveCurrency: CryptoId | undefined;
     className?: string;
 }
-
-export type CoinmarketContainerBackRouteType =
-    | Extract<Route['name'], `wallet-coinmarket-${string}`>
-    | 'wallet-index'
-    | 'suite-index';
-
-export interface CoinmarketContainerCommonProps {
-    title?: Extract<
-        ExtendedMessageDescriptor['id'],
-        'TR_COINMARKET_BUY_AND_SELL' | 'TR_COINMARKET_SWAP' | 'TR_COINMARKET_LAST_TRANSACTIONS'
-    >;
-    backRoute?: CoinmarketContainerBackRouteType;
-}
diff --git a/packages/suite/src/views/wallet/coinmarket/DCA/CoinmarketDCALanding.tsx b/packages/suite/src/views/wallet/coinmarket/DCA/CoinmarketDCALanding.tsx
@@ -155,6 +155,4 @@ const DCALanding = () => {
     );
 };
 
-export const CoinmarketDCALanding = () => (
-    <CoinmarketContainer title="TR_COINMARKET_BUY_AND_SELL" SectionComponent={DCALanding} />
-);
+export const CoinmarketDCALanding = () => <CoinmarketContainer SectionComponent={DCALanding} />;
diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm.tsx
@@ -18,9 +18,5 @@ const CoinmarketBuyConfirmComponent = ({ selectedAccount }: UseCoinmarketProps)
 };
 
 export const CoinmarketBuyConfirm = () => (
-    <CoinmarketContainer
-        title="TR_COINMARKET_BUY_AND_SELL"
-        backRoute="wallet-coinmarket-buy"
-        SectionComponent={CoinmarketBuyConfirmComponent}
-    />
+    <CoinmarketContainer SectionComponent={CoinmarketBuyConfirmComponent} />
 );
diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyDetail.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyDetail.tsx
@@ -20,9 +20,5 @@ const CoinmarketBuyDetailComponent = ({ selectedAccount }: UseCoinmarketProps) =
 };
 
 export const CoinmarketBuyDetail = () => (
-    <CoinmarketContainer
-        title="TR_COINMARKET_BUY_AND_SELL"
-        backRoute="wallet-coinmarket-transactions"
-        SectionComponent={CoinmarketBuyDetailComponent}
-    />
+    <CoinmarketContainer SectionComponent={CoinmarketBuyDetailComponent} />
 );