diff --git a/packages/suite/src/actions/wallet/coinmarket/coinmarketCommonActions.ts b/packages/suite/src/actions/wallet/coinmarket/coinmarketCommonActions.ts index f762eaf37b5..6f59d754899 100644 --- 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 index 14f5260bc1f..6fc3e8ee3e5 100644 --- 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 deleted file mode 100644 index 06377c8d429..00000000000 --- a/packages/suite/src/hooks/wallet/coinmarket/useCoinmarketRouteHelper.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useSelector } from 'src/hooks/suite'; -import { selectRouteName, selectRouter } from 'src/reducers/suite/routerReducer'; -import { CoinmarketContainerBackRouteType } from 'src/types/coinmarket/coinmarket'; - -interface CoinmarketUseRouteHelperProps { - backRoute?: CoinmarketContainerBackRouteType; -} - -export const useCoinmarketRouteHelper = ({ backRoute }: CoinmarketUseRouteHelperProps) => { - const router = useSelector(selectRouter); - const currentRouteName = useSelector(selectRouteName); - const suiteBackRouteName = useSelector(state => state.wallet.coinmarket.suiteBackRouteName); - const coinmarketBackRouteName = useSelector( - state => state.wallet.coinmarket.coinmarketBackRouteName, - ); - - const currentBackRouteName = router.settingsBackRoute.name; - - const getNewBackRoute = () => { - // if backRoute is provided, use it - almost every page - if (backRoute) return backRoute; - - // fallback when currentRouteName is undefined - if (!currentRouteName) return currentBackRouteName; - - // coinmarketBackRouteName is set in middleware when user navigates to coinmarket page - if (currentRouteName === 'wallet-coinmarket-transactions') return coinmarketBackRouteName; - - // suiteBackRouteName is set in middleware when user navigates from suite page to coinmarket page - return suiteBackRouteName; - }; - - return { - updatedBackRoute: getNewBackRoute(), - currentRouteName, - }; -}; diff --git a/packages/suite/src/middlewares/wallet/__tests__/coinmarketMiddleware.test.ts b/packages/suite/src/middlewares/wallet/__tests__/coinmarketMiddleware.test.ts index 08c22aef224..1d414720fc1 100644 --- 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; type SelectedAccountState = ReturnType; type SuiteState = ReturnType; @@ -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 index a975879aa23..567b46e65dc 100644 --- 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) => @@ -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 index 6b6b0f2cc4b..e57f0606ed9 100644 --- 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 index 984618d1a45..3c96b1fbe0d 100644 --- 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 index 4dd6637e4e4..344fd7773f7 100644 --- 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 - | '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 index 53014fd9a9d..34564f3e6bc 100644 --- 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 = () => ( - -); +export const CoinmarketDCALanding = () => ; diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyConfirm.tsx index c3e15c37564..0764e8f59b9 100644 --- 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 = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyDetail.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyDetail.tsx index 33731994fca..805c2c44276 100644 --- 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 = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx index b84146a89f8..13863ccfde1 100644 --- a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx +++ b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyForm.tsx @@ -18,8 +18,5 @@ const CoinmarketBuyComponent = ({ selectedAccount }: UseCoinmarketProps) => { }; export const CoinmarketBuyForm = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyOffers.tsx b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyOffers.tsx index 059ea572d7b..d1b57f64805 100644 --- a/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyOffers.tsx +++ b/packages/suite/src/views/wallet/coinmarket/buy/CoinmarketBuyOffers.tsx @@ -18,9 +18,5 @@ const CoinmarketBuyOffersComponent = ({ selectedAccount }: UseCoinmarketProps) = }; export const CoinmarketBuyOffers = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketContainer.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketContainer.tsx index 59017fc5478..3d797697938 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketContainer.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketContainer.tsx @@ -1,30 +1,21 @@ import { ElementType } from 'react'; import { useSelector } from 'src/hooks/suite'; -import { CoinmarketContainerCommonProps } from 'src/types/coinmarket/coinmarket'; import { CoinmarketFooter } from 'src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketFooter'; import { CoinmarketLayoutHeader } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader'; -export interface CoinmarketContainerProps extends CoinmarketContainerCommonProps { +export interface CoinmarketContainerProps { SectionComponent: ElementType; } -/** - * @backRoute when is not provided, it will be used route from global coinmarket state - * check `useCoinmarketRouteHelper` for more details - */ -export const CoinmarketContainer = ({ - backRoute, - title, - SectionComponent, -}: CoinmarketContainerProps) => { +export const CoinmarketContainer = ({ SectionComponent }: CoinmarketContainerProps) => { const selectedAccount = useSelector(state => state.wallet.selectedAccount); if (selectedAccount.status !== 'loaded') { - return ; + return ; } return ( - + diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader.tsx index 7572dbcf7c3..77f86575b1b 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader.tsx @@ -1,62 +1,37 @@ import { IconButton, Row } from '@trezor/components'; import { spacings } from '@trezor/theme'; import { PropsWithChildren, useCallback, useMemo } from 'react'; -import { goto } from 'src/actions/suite/routerActions'; +import { useHistory } from 'react-router-dom'; import { PageHeader } from 'src/components/suite/layouts/SuiteLayout'; import { BasicName } from 'src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/BasicName'; -import { useDispatch, useLayout, useSelector, useTranslation } from 'src/hooks/suite'; -import { useCoinmarketRouteHelper } from 'src/hooks/wallet/coinmarket/useCoinmarketRouteHelper'; -import type { CoinmarketContainerCommonProps } from 'src/types/coinmarket/coinmarket'; +import { useLayout, useSelector, useTranslation } from 'src/hooks/suite'; +import { selectRouteName } from 'src/reducers/suite/routerReducer'; import { CoinmarketLayoutNavigationItem } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation/CoinmarketLayoutNavigationItem'; -interface CoinmarketLayoutHeaderProps extends PropsWithChildren, CoinmarketContainerCommonProps {} +interface CoinmarketLayoutHeaderProps extends PropsWithChildren {} -/** - * @backRoute when is not provided, it will be used route from global coinmarket state - * check `useCoinmarketRouteHelper` for more details - */ -export const CoinmarketLayoutHeader = ({ - title, - backRoute, - children, -}: CoinmarketLayoutHeaderProps) => { - const selectedAccount = useSelector(state => state.wallet.selectedAccount); +export const CoinmarketLayoutHeader = ({ children }: CoinmarketLayoutHeaderProps) => { + const currentRouteName = useSelector(selectRouteName); + const { activeSection } = useSelector(state => state.wallet.coinmarket); + const { goBack } = useHistory(); const { translationString } = useTranslation(); - const dispatch = useDispatch(); - const fallbackTitle = useMemo(() => title || 'TR_NAV_TRADE', [title]); + const fallbackTitle = useMemo( + () => (activeSection === 'exchange' ? 'TR_COINMARKET_SWAP' : 'TR_COINMARKET_BUY_AND_SELL'), + [activeSection], + ); const translatedTitle = translationString(fallbackTitle); const pageTitle = `Trezor Suite | ${translatedTitle}`; - const { updatedBackRoute, currentRouteName } = useCoinmarketRouteHelper({ backRoute }); - - const handleBackClick = useCallback(() => { - if (selectedAccount.status === 'loaded') { - dispatch( - goto(updatedBackRoute, { - params: { - symbol: selectedAccount.account.symbol, - accountIndex: selectedAccount.account.index, - accountType: selectedAccount.account.accountType, - }, - }), - ); - - return; - } - - dispatch(goto(updatedBackRoute)); - }, [updatedBackRoute, selectedAccount, dispatch]); - const CoinmarketPageHeader = useCallback( () => ( - + @@ -71,7 +46,7 @@ export const CoinmarketLayoutHeader = ({ ), - [updatedBackRoute, fallbackTitle, currentRouteName, handleBackClick], + [fallbackTitle, currentRouteName, goBack], ); useLayout(pageTitle, CoinmarketPageHeader); diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransactionsList.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransactionsList.tsx index 6e20e89a46a..5a95ad82ee2 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransactionsList.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransactionsList.tsx @@ -30,9 +30,7 @@ export const CoinmarketTransactionsList = () => { const theme = useTheme(); const selectedAccount = useSelector(state => state.wallet.selectedAccount); const allTransactions = useSelector(state => state.wallet.coinmarket.trades); - const coinmarketBackRouteName = useSelector( - state => state.wallet.coinmarket.coinmarketBackRouteName, - ); + const activeSection = useSelector(state => state.wallet.coinmarket.activeSection); const buyProviders = useSelector(state => state.wallet.coinmarket.buy.buyInfo?.providerInfos); const exchangeProviders = useSelector( state => state.wallet.coinmarket.exchange.exchangeInfo?.providerInfos, @@ -40,7 +38,7 @@ export const CoinmarketTransactionsList = () => { const sellProviders = useSelector( state => state.wallet.coinmarket.sell.sellInfo?.providerInfos, ); - const isBuyAndSell = coinmarketBackRouteName !== 'wallet-coinmarket-exchange'; + const isBuyAndSell = activeSection !== 'exchange'; useCoinmarketLoadData(); diff --git a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeConfirm.tsx b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeConfirm.tsx index ce8247dcaab..43a4fb49d45 100644 --- a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeConfirm.tsx +++ b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeConfirm.tsx @@ -18,9 +18,5 @@ const CoinmarketExchangeConfirmComponent = ({ selectedAccount }: UseCoinmarketPr }; export const CoinmarketExchangeConfirm = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeDetail.tsx b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeDetail.tsx index ea1215f07b5..23117430c4d 100644 --- a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeDetail.tsx +++ b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeDetail.tsx @@ -20,9 +20,5 @@ const CoinmarketExchangeDetailComponent = ({ selectedAccount }: UseCoinmarketPro }; export const CoinmarketExchangeDetail = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeForm.tsx b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeForm.tsx index 54c5e71fe43..b2ed2832e94 100644 --- a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeForm.tsx +++ b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeForm.tsx @@ -18,8 +18,5 @@ const CoinmarketExchangeFormComponent = ({ selectedAccount }: UseCoinmarketProps }; export const CoinmarketExchangeForm = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeOffers.tsx b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeOffers.tsx index eefc3d700dc..7b5f4760330 100644 --- a/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeOffers.tsx +++ b/packages/suite/src/views/wallet/coinmarket/exchange/CoinmarketExchangeOffers.tsx @@ -18,9 +18,5 @@ const CoinmarketExchangeOffersComponent = ({ selectedAccount }: UseCoinmarketPro }; export const CoinmarketExchangeOffers = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellConfirm.tsx b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellConfirm.tsx index 3bfab6263f8..5a4e37e3d6e 100644 --- a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellConfirm.tsx +++ b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellConfirm.tsx @@ -18,9 +18,5 @@ const CoinmarketSellConfirmComponent = ({ selectedAccount }: UseCoinmarketProps) }; export const CoinmarketSellConfirm = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellDetail.tsx b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellDetail.tsx index 5ab36df7637..e9e63522e93 100644 --- a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellDetail.tsx +++ b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellDetail.tsx @@ -20,9 +20,5 @@ const CoinmarketSellDetailComponent = ({ selectedAccount }: UseCoinmarketProps) }; export const CoinmarketSellDetail = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellForm.tsx b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellForm.tsx index 678739f04a8..bd9ed6d6f5d 100644 --- a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellForm.tsx +++ b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellForm.tsx @@ -18,8 +18,5 @@ const CoinmarketSellFormComponent = ({ selectedAccount }: UseCoinmarketProps) => }; export const CoinmarketSellForm = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellOffers.tsx b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellOffers.tsx index b8ee68459b6..8632620e9b0 100644 --- a/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellOffers.tsx +++ b/packages/suite/src/views/wallet/coinmarket/sell/CoinmarketSellOffers.tsx @@ -17,9 +17,5 @@ const CoinmarketSellOffersComponent = ({ selectedAccount }: UseCoinmarketProps) ); }; export const CoinmarketSellOffers = () => ( - + ); diff --git a/packages/suite/src/views/wallet/coinmarket/transactions/CoinmarketTransactions.tsx b/packages/suite/src/views/wallet/coinmarket/transactions/CoinmarketTransactions.tsx index 66c2fc2579e..36ac61bc4e7 100644 --- a/packages/suite/src/views/wallet/coinmarket/transactions/CoinmarketTransactions.tsx +++ b/packages/suite/src/views/wallet/coinmarket/transactions/CoinmarketTransactions.tsx @@ -1,14 +1,6 @@ import { CoinmarketContainer } from 'src/views/wallet/coinmarket/common/CoinmarketContainer'; -import { useSelector } from 'src/hooks/suite'; import { CoinmarketTransactionsList } from 'src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransactionsList'; -export const CoinmarketTransactions = () => { - const coinmarketBackRouteName = useSelector( - state => state.wallet.coinmarket.coinmarketBackRouteName, - ); - const title = coinmarketBackRouteName.includes('wallet-coinmarket-exchange') - ? 'TR_COINMARKET_SWAP' - : 'TR_COINMARKET_BUY_AND_SELL'; - - return ; -}; +export const CoinmarketTransactions = () => ( + +);