fix(frontend): include HiddenMicroTransactionsInfoBox in AllTransactions banners logic (#12619)

# Motivation

The `hasBanners` derivation in `AllTransactions.svelte` decides whether
the banners wrapper renders, but it was not aware of
`HiddenMicroTransactionsInfoBox`'s visibility. As a result, the
hidden-micro-transactions info box was not considered a banner for
layout/derivation purposes.

# Changes

- Expose visibility from `HiddenMicroTransactionsInfoBox` via an
optional `$bindable` prop.
- Bind it in `AllTransactions` and include it in `hasBanners`.

Author: AntonioVentilii

src/frontend/src/lib/components/transactions/AllTransactions.svelte

@@ -13,6 +13,7 @@
 	import { enabledFungibleNetworkTokens } from '$lib/derived/network-tokens.derived';
 	import { isPrivacyMode } from '$lib/derived/settings.derived';
 	import {
+		hiddenMicroTransactionsBannerVisible,
 		userDismissedNotifications,
 		userProfileVersion
 	} from '$lib/derived/user-profile.derived';
@@ -120,7 +121,8 @@
 	let hasBanners = $derived(
 		undismissedNoCanister.length > 0 ||
 			tokensWithUnavailableCanister.length > 0 ||
-			!btcBannerDismissed
+			!btcBannerDismissed ||
+			$hiddenMicroTransactionsBannerVisible
 	);
 </script>
 
@@ -159,10 +161,10 @@
 					{$i18n.activity.info.btc_transactions}
 				</MessageBox>
 			{/if}
+
+			<HiddenMicroTransactionsInfoBox />
 		</div>
 	{/if}
 
-	<HiddenMicroTransactionsInfoBox />
-
 	<AllTransactionsList />
 </div>

src/frontend/src/lib/components/transactions/HiddenMicroTransactionsInfoBox.svelte

@@ -5,37 +5,34 @@
 	import { NOTIFICATION_VERSIONS } from '$lib/constants/notification.constants';
 	import { authIdentity } from '$lib/derived/auth.derived';
 	import {
-		hideMicroTransactions,
-		userDismissedNotifications,
+		hiddenMicroTransactionsBannerVisible,
 		userProfileVersion
 	} from '$lib/derived/user-profile.derived';
 	import { dismissNotifications } from '$lib/services/notification.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { hiddenMicroTransactionsResetStore } from '$lib/stores/settings.store';
-	import { isSimpleNotificationDismissed } from '$lib/utils/notification.utils';
 
-	let temporaryDismissedNotifications = $state<DismissedNotification[]>([]);
+	// Optimistic local dismissal: the backend dismiss call is an update call that takes
+	// some time to complete. Keep an instant local override so the box hides immediately
+	// when the user clicks dismiss; it is cleared once the global signal turns off.
+	let locallyDismissed = $state(false);
 
-	let allDismissedNotifications = $derived([
-		...$userDismissedNotifications,
-		...temporaryDismissedNotifications
-	]);
+	$effect(() => {
+		if (!$hiddenMicroTransactionsBannerVisible) {
+			locallyDismissed = false;
+		}
+	});
 
-	let backendDismissed = $derived(
-		isSimpleNotificationDismissed({
-			kind: 'HiddenMicroTransactions',
-			dismissedNotifications: allDismissedNotifications
-		})
-	);
+	let visible = $derived($hiddenMicroTransactionsBannerVisible && !locallyDismissed);
 
-	// When the user toggles the "hide micro transactions" feature, we re-show the
-	// info box even if the backend still has the notification stored as dismissed. The override
-	// is cleared as soon as the user dismisses the info box again.
-	let dismissed = $derived(backendDismissed && !$hiddenMicroTransactionsResetStore.enabled);
+	const dismiss = () => {
+		locallyDismissed = true;
 
-	let visible = $derived($hideMicroTransactions && !dismissed);
+		hiddenMicroTransactionsResetStore.set({
+			key: 'hidden-micro-transactions-reset',
+			value: { enabled: false }
+		});
 
-	const dismiss = () => {
 		const notifications: DismissedNotification[] = [
 			{
 				Simple: {
@@ -45,13 +42,6 @@
 			}
 		];
 
-		temporaryDismissedNotifications = [...temporaryDismissedNotifications, ...notifications];
-
-		hiddenMicroTransactionsResetStore.set({
-			key: 'hidden-micro-transactions-reset',
-			value: { enabled: false }
-		});
-
 		dismissNotifications({
 			notifications,
 			identity: $authIdentity,

src/frontend/src/lib/derived/user-profile.derived.ts

@@ -9,7 +9,9 @@ import type {
 	TransactionSettings,
 	UserProfile
 } from '$declarations/backend/backend.did';
+import { hiddenMicroTransactionsResetStore } from '$lib/stores/settings.store';
 import { userProfileStore } from '$lib/stores/user-profile.store';
+import { isSimpleNotificationDismissed } from '$lib/utils/notification.utils';
 import { fromNullishNullable, nonNullish } from '@dfinity/utils';
 import { derived, type Readable } from 'svelte/store';
 
@@ -72,3 +74,26 @@ export const hideMicroTransactions: Readable<boolean> = derived(
 	[userTransactionFilterSettings],
 	([$userTransactionFilterSettings]) => $userTransactionFilterSettings.hide_micro_transactions
 );
+
+// Whether the "hidden micro transactions" info banner should be visible. Derived from
+// global state only (no component-local optimistic dismissal), so it can be consumed both
+// by `HiddenMicroTransactionsInfoBox` (which renders it) and by parents that need to know
+// about its visibility (e.g. to include it in a "has banners" derivation).
+export const hiddenMicroTransactionsBannerVisible: Readable<boolean> = derived(
+	[hideMicroTransactions, userDismissedNotifications, hiddenMicroTransactionsResetStore],
+	([$hideMicroTransactions, $userDismissedNotifications, $hiddenMicroTransactionsResetStore]) => {
+		if (!$hideMicroTransactions) {
+			return false;
+		}
+
+		const backendDismissed = isSimpleNotificationDismissed({
+			kind: 'HiddenMicroTransactions',
+			dismissedNotifications: $userDismissedNotifications
+		});
+
+		// When the user toggles the "hide micro transactions" feature, we re-show the info
+		// box even if the backend still has the notification stored as dismissed. The override
+		// is cleared as soon as the user dismisses the info box again.
+		return !(backendDismissed && !$hiddenMicroTransactionsResetStore.enabled);
+	}
+);