diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx index 18b10a32f5d9..b9cdb727cb04 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx @@ -39,7 +39,10 @@ const TransactionStatusSuccess: React.FC = ({ transac isFullWidth onClick={() => { // should navigate to transactions page with "Pending transactions" toggle on and filter set to `transactionType` - history.push('/wallets/cashier/transactions?showPending'); + history.push('/wallets/cashier/transactions', { + showPending: true, + transactionType: 'withdrawal', + }); }} size='sm' variant='outlined' diff --git a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/__tests__/TransactionStatusSuccess.spec.tsx b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/__tests__/TransactionStatusSuccess.spec.tsx index 45f852527cc3..2fd4e21433e3 100644 --- a/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/__tests__/TransactionStatusSuccess.spec.tsx +++ b/packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/__tests__/TransactionStatusSuccess.spec.tsx @@ -224,6 +224,9 @@ describe('TransactionStatusSuccess', () => { expect(screen.getByText('View more')).toBeInTheDocument(); fireEvent.click(screen.getByText('View more')); - expect(pushMock).toHaveBeenCalledWith('/wallets/cashier/transactions?showPending'); + expect(pushMock).toHaveBeenCalledWith('/wallets/cashier/transactions', { + showPending: true, + transactionType: 'withdrawal', + }); }); }); diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx index 28dc2f89b512..08ca11086546 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; +import { useHistory } from 'react-router-dom'; import { useActiveWalletAccount, useCurrencyConfig } from '@deriv/api'; import { ToggleSwitch, WalletDropdown, WalletText } from '../../../../components'; import useDevice from '../../../../hooks/useDevice'; @@ -10,6 +11,10 @@ import './Transactions.scss'; type TTransactionsPendingFilter = React.ComponentProps['filter']; type TTransactionCompletedFilter = React.ComponentProps['filter']; type TFilterValue = TTransactionCompletedFilter | TTransactionsPendingFilter; +type THistoryState = { + showPending?: boolean; + transactionType?: string; +}; const filtersMapper: Record> = { completed: { @@ -32,11 +37,11 @@ const Transactions = () => { const { isLoading } = useCurrencyConfig(); const { isMobile } = useDevice(); - const queryParams = new URLSearchParams(location.search); - const showPending = queryParams.get('showPending'); + const { location } = useHistory(); + const state: THistoryState = location.state; - const [isPendingActive, setIsPendingActive] = useState(showPending === 'true'); - const [filterValue, setFilterValue] = useState('all'); + const [isPendingActive, setIsPendingActive] = useState(Boolean(state?.showPending)); + const [filterValue, setFilterValue] = useState(state?.transactionType ?? 'all'); const filterOptionsList = useMemo( () => diff --git a/packages/wallets/src/routes/Router.tsx b/packages/wallets/src/routes/Router.tsx index 01171c7f1c2f..a842596d6f22 100644 --- a/packages/wallets/src/routes/Router.tsx +++ b/packages/wallets/src/routes/Router.tsx @@ -13,13 +13,21 @@ type TRoutes = `${typeof prefix}${ | '/cashier' | '/cashier/deposit' | '/cashier/reset-balance' - | '/cashier/transaction' + | '/cashier/transactions' | '/cashier/transfer' | '/cashier/withdraw' | '/compare-account'}`; declare module 'react-router-dom' { - export function useHistory(): { push: (path: TRoutes | string) => void }; + export function useHistory(): { + location: { + hash: string; + pathname: string; + search: string; + state: Record; + }; + push: (path: TRoutes | string, state?: Record) => void; + }; export function useRouteMatch(path: TRoutes): boolean; }