fix: disable transaction type filter when there are no transactions (#…

…818)

src/domains/transaction/components/Transactions/Transactions.test.tsx

@@ -200,6 +200,33 @@ describe("Transactions", () => {
 		);
 	});
 
+	it("should disable type filter when there are no transactions", async () => {
+		const emptyProfile = await env.profiles().create("test9");
+
+		const wallet = await emptyProfile.walletFactory().fromMnemonicWithBIP39({
+			coin: "ARK",
+			mnemonic: MNEMONICS[2],
+			network: "ark.devnet",
+		});
+
+		emptyProfile.wallets().push(wallet);
+
+		render(
+			<Route path="/profiles/:profileId/dashboard">
+				<Transactions profile={emptyProfile} wallets={[wallet]} />
+			</Route>,
+			{
+				history,
+				route: dashboardURL,
+			},
+		);
+
+		await expect(screen.findByTestId("EmptyBlock")).resolves.toBeVisible();
+
+		const button = screen.getAllByRole("button", { name: /Type/ })[0];
+		expect(button).toBeDisabled();
+	});
+
 	it("should filter by type and see empty screen", async () => {
 		render(
 			<Route path="/profiles/:profileId/dashboard">
@@ -215,7 +242,7 @@ describe("Transactions", () => {
 			expect(within(screen.getByTestId("TransactionTable")).getAllByTestId("TableRow")).toHaveLength(15),
 		);
 
-		const button = screen.getAllByRole("button", { name: /Type/ })[0];
+		let button = screen.getAllByRole("button", { name: /Type/ })[0];
 
 		expect(button).toBeInTheDocument();
 
@@ -235,6 +262,9 @@ describe("Transactions", () => {
 		await userEvent.click(options.at(-1));
 
 		await expect(screen.findByTestId("EmptyBlock")).resolves.toBeVisible();
+
+		button = screen.getAllByRole("button", { name: /Type/ })[0];
+		expect(button).not.toBeDisabled();
 	});
 
 	it("should open detail modal on transaction row click", async () => {

src/domains/transaction/components/Transactions/Transactions.tsx

@@ -55,6 +55,7 @@ export const Transactions = memo(function Transactions({
 		selectedTransactionTypes,
 		fetchMore,
 		hasEmptyResults,
+		hasFilter,
 		hasMore,
 	} = useProfileTransactions({ limit: 30, profile, wallets });
 
@@ -148,6 +149,14 @@ export const Transactions = memo(function Transactions({
 		return !hasEmptyResults || hasFilter || hasMore;
 	}, [activeMode, hasEmptyResults, activeTransactionType, isLoadingTransactions, hasMore]);
 
+	const enableFilter = useMemo(() => {
+		if (isLoadingTransactions || hasFilter) {
+			return true;
+		}
+
+		return !hasEmptyResults || hasMore;
+	}, [hasEmptyResults, hasMore, isLoadingTransactions, hasFilter]);
+
 	if (!isVisible) {
 		return <></>;
 	}
@@ -221,6 +230,7 @@ export const Transactions = memo(function Transactions({
 						wallets={wallets}
 						onSelect={filterChangeHandler}
 						selectedTransactionTypes={selectedTransactionTypes}
+						isDisabled={!enableFilter}
 					/>
 				</div>
 

src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap

@@ -20877,8 +20877,9 @@ exports[`Transactions > should update wallet filters 1`] = `
           data-testid="dropdown__toggle"
         >
           <button
-            class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed dark:bg-theme-secondary-800 dark:text-theme-secondary-200 bg-theme-primary-100 text-theme-primary-600 hover:bg-theme-primary-800 green:hover:bg-theme-primary-700 hover:text-white dark:hover:bg-theme-primary-500 w-full px-4 py-1.5 text-base sm:w-fit"
+            class="space-x-2 relative items-center inline-flex justify-center font-semibold text-center transition-colors-shadow duration-100 ease-linear outline-none rounded focus:outline-none focus:ring-2 focus:ring-theme-primary-400 disabled:cursor-not-allowed disabled:bg-theme-secondary-200 disabled:text-theme-secondary-400 dark:disabled:bg-theme-secondary-800 dark:disabled:text-theme-secondary-700 w-full px-4 py-1.5 text-base sm:w-fit"
             data-testid="CollapseToggleButton"
+            disabled=""
             type="button"
           >
             <div

src/domains/transaction/hooks/use-profile-transactions.ts

@@ -286,6 +286,7 @@ export const useProfileTransactions = ({ profile, wallets, limit = 30 }: Profile
 		fetchMore,
 		fetchTransactions,
 		hasEmptyResults,
+		hasFilter: (selectedTransactionTypes?.length ?? 0) < allTransactionTypes.length,
 		hasMore,
 		isLoadingMore,
 		isLoadingTransactions,