feat: add jackpot animations and enhance currency handling across components

- Introduced new CSS animations for jackpot effects to improve visual engagement.
- Integrated CurrencySwitcher into PlayerPanel and HallScreen for better currency management.
- Updated various components to utilize active player currency for consistent display.
- Enhanced event handling for currency changes to ensure real-time updates across the application.

src/features/wallet/wallet-screen.tsx

@@ -14,17 +14,17 @@ import {
   TransferOutDialog,
 } from "@/features/wallet/wallet-transfer-dialogs";
 import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
+import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { formatMinorAsCurrency } from "@/lib/money";
-import { resolvePlayerCurrency } from "@/lib/player-currency";
+import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
-import { usePlayerSessionStore } from "@/stores/player-session-store";
 import type { WalletBalanceData } from "@/types/api/wallet-balance";
 import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";
 
 const WALLET_LOGS_PAGE_SIZE = 10;
 
 export function WalletScreen() {
-  const profile = usePlayerSessionStore((s) => s.profile);
+  const { activeCurrency: currency } = useActivePlayerCurrency();
   const { t } = useTranslation("player");
   const [balance, setBalance] = useState<WalletBalanceData | null>(null);
   const [logs, setLogs] = useState<WalletLogsData | null>(null);
@@ -35,11 +35,6 @@ export function WalletScreen() {
   const [error, setError] = useState<string | null>(null);
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
 
-  const currency = useMemo(
-    () => resolvePlayerCurrency(profile, balance),
-    [balance, profile],
-  );
-
   const fetchPassRef = useRef(true);
 
   const loadLogs = useCallback(async (targetPage = 1, append = false) => {
@@ -68,7 +63,7 @@ export function WalletScreen() {
         setLogsLoading(true);
       }
       try {
-        const b = await getWalletBalance();
+        const b = await getWalletBalance({ currency });
         if (cancelled) return;
         setBalance(b);
         const nextLogs = await loadLogs(1, false);
@@ -89,13 +84,13 @@ export function WalletScreen() {
     return () => {
       cancelled = true;
     };
-  }, [loadLogs, t]);
+  }, [currency, loadLogs, t]);
 
   const refreshAll = useCallback(async () => {
     setError(null);
     setLogsLoading(true);
     try {
-      const b = await getWalletBalance();
+      const b = await getWalletBalance({ currency });
       setBalance(b);
       await loadLogs(1, false);
     } catch (e) {
@@ -104,7 +99,27 @@ export function WalletScreen() {
       setLogsLoading(false);
       setLoading(false);
     }
-  }, [loadLogs, t]);
+  }, [currency, loadLogs, t]);
+
+  useEffect(() => {
+    const onCurrencyChange = () => void refreshAll();
+    window.addEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+    return () => window.removeEventListener(PLAYER_CURRENCY_CHANGE_EVENT, onCurrencyChange);
+  }, [refreshAll]);
+
+  const logsForCurrency = useMemo(() => {
+    if (!logs) return null;
+    const code = currency.toUpperCase();
+    return {
+      ...logs,
+      items: logs.items.filter(
+        (item) => (item.currency_code || code).toUpperCase() === code,
+      ),
+      pending_reconcile: logs.pending_reconcile.filter(
+        (item) => item.currency_code.toUpperCase() === code,
+      ),
+    };
+  }, [currency, logs]);
 
   const hasMore = logs ? logs.page < getWalletLogsLastPage(logs) : false;
 
@@ -207,7 +222,7 @@ export function WalletScreen() {
         </div>
 
         <WalletLogsBlock
-          logs={logs}
+          logs={logsForCurrency}
           logsLoading={loading || logsLoading}
           loadingMore={loadingMore}
           hasMore={hasMore}