diff --git a/src/domains/transaction/components/Transactions/Transactions.test.tsx b/src/domains/transaction/components/Transactions/Transactions.test.tsx index 2bfe7afe02..9e245e51d9 100644 --- a/src/domains/transaction/components/Transactions/Transactions.test.tsx +++ b/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( + + + , + { + 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( @@ -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 () => { diff --git a/src/domains/transaction/components/Transactions/Transactions.tsx b/src/domains/transaction/components/Transactions/Transactions.tsx index 12cf96ece0..220e2e989c 100644 --- a/src/domains/transaction/components/Transactions/Transactions.tsx +++ b/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} /> diff --git a/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap index 5b723e9d15..32fe84af86 100644 --- a/src/domains/transaction/components/Transactions/__snapshots__/Transactions.test.tsx.snap +++ b/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" >