fix: 🐛 fix query parameter (#13141)

Author: heorhi-deriv

packages/wallets/src/features/cashier/modules/TransactionStatus/components/TransactionStatusSuccess/TransactionStatusSuccess.tsx

@@ -39,7 +39,10 @@ const TransactionStatusSuccess: React.FC<TTransactionStatusSuccess> = ({ 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'

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',
+        });
     });
 });

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<typeof TransactionsPending>['filter'];
 type TTransactionCompletedFilter = React.ComponentProps<typeof TransactionsCompleted>['filter'];
 type TFilterValue = TTransactionCompletedFilter | TTransactionsPendingFilter;
+type THistoryState = {
+    showPending?: boolean;
+    transactionType?: string;
+};
 
 const filtersMapper: Record<string, Record<string, TFilterValue>> = {
     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(
         () =>

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<string, unknown>;
+        };
+        push: (path: TRoutes | string, state?: Record<string, unknown>) => void;
+    };
 
     export function useRouteMatch(path: TRoutes): boolean;
 }