Couldn't load transaction history
diff --git a/components/ThemeToggle.test.tsx b/components/ThemeToggle.test.tsx
new file mode 100644
index 0000000..430b0b5
--- /dev/null
+++ b/components/ThemeToggle.test.tsx
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { getNextTheme } from './ThemeToggle';
+
+describe('ThemeToggle theme cycling', () => {
+ it('cycles explicit light mode to dark mode', () => {
+ expect(getNextTheme('light')).toBe('dark');
+ });
+
+ it('cycles explicit dark mode back to system mode', () => {
+ expect(getNextTheme('dark')).toBe('system');
+ });
+
+ it('cycles system or missing theme to light mode', () => {
+ expect(getNextTheme('system')).toBe('light');
+ expect(getNextTheme(undefined)).toBe('light');
+ });
+});
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index 7df7c0a..0988e11 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -1,9 +1,17 @@
'use client';
import { useTheme } from 'next-themes';
-import { Sun, Moon } from 'lucide-react';
+import { Sun, Moon, Monitor } from 'lucide-react';
import { useEffect, useState } from 'react';
+type ThemeChoice = 'light' | 'dark' | 'system';
+
+export function getNextTheme(theme?: string): ThemeChoice {
+ if (theme === 'light') return 'dark';
+ if (theme === 'dark') return 'system';
+ return 'light';
+}
+
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
@@ -28,14 +36,28 @@ export function ThemeToggle() {
}
const isDark = theme === 'dark' || (theme === 'system' && systemPrefersDark);
+ const nextTheme = getNextTheme(theme);
+ const label =
+ nextTheme === 'system'
+ ? 'Match system theme'
+ : nextTheme === 'dark'
+ ? 'Switch to dark mode'
+ : 'Switch to light mode';
return (
setTheme(isDark ? 'light' : 'dark')}
+ onClick={() => setTheme(nextTheme)}
className="inline-flex items-center justify-center w-9 h-9 rounded text-gray-500 hover:text-black hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800 transition-colors"
- aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+ aria-label={label}
+ title={label}
>
- {isDark ?
);
}
diff --git a/components/ui/NotificationCenter.test.tsx b/components/ui/NotificationCenter.test.tsx
deleted file mode 100644
index 00cf0e8..0000000
--- a/components/ui/NotificationCenter.test.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import React from 'react';
-import { act } from 'react';
-import { createRoot } from 'react-dom/client';
-import { NotificationCenter } from './NotificationCenter';
-
-describe('NotificationCenter', () => {
- let container: HTMLDivElement | undefined;
- let root: ReturnType | undefined;
-
- beforeEach(() => {
- vi.useFakeTimers();
- });
-
- afterEach(() => {
- if (root) act(() => root?.unmount());
- container?.remove();
- root = undefined;
- container = undefined;
- vi.useRealTimers();
- vi.restoreAllMocks();
- });
-
- function setup() {
- container = document.createElement('div');
- document.body.appendChild(container);
- root = createRoot(container);
- act(() => root?.render(([]);
- const counterRef = useRef(0);
-
- useEffect(() => {
- const timers = new Map>();
-
- const dismiss = (id: number) => {
- timers.delete(id);
- setNotifications((prev) => prev.filter((n) => n.id !== id));
- };
-
- const handleNotification = (event: Event) => {
- const detail = (event as CustomEvent).detail;
- if (typeof detail === 'string' && detail) {
- const id = ++counterRef.current;
- const item: NotificationItem = { id, message: detail, addedAt: Date.now() };
-
- setNotifications((prev) => {
- const next = [...prev, item];
- // If we're over the cap, cancel timers for the notifications being evicted
- const evicted = next.slice(0, next.length - MAX_NOTIFICATIONS);
- evicted.forEach((n) => {
- const t = timers.get(n.id);
- if (t !== undefined) clearTimeout(t);
- timers.delete(n.id);
- });
- return next.slice(-MAX_NOTIFICATIONS);
- });
-
- // Auto-dismiss after TTL so a hung RPC call never leaves a spinner on screen.
- timers.set(id, setTimeout(() => dismiss(id), NOTIFICATION_TTL_MS));
- }
- };
-
- window.addEventListener('notification', handleNotification);
-
- return () => {
- window.removeEventListener('notification', handleNotification);
- // Clear all pending auto-dismiss timers on unmount.
- timers.forEach((t) => clearTimeout(t));
- timers.clear();
- };
- }, []);
-
- if (notifications.length === 0) return null;
-
- return (
-
- {notifications.map((note) => (
-
- {note.message}
-
- ))}
-
can't kick off a duplicate registration
// (#351).
let registrationStarted = false;
+const TERMINAL_TRANSACTION_STATUSES = new Set(['success', 'failed']);
+
+export function hasInFlightTransactions(): boolean {
+ return Object.values(useTransactionStore.getState().transactions).some(
+ (tx) => !TERMINAL_TRANSACTION_STATUSES.has(tx.status),
+ );
+}
+
/**
* Register `/sw.js` once per page load and activate a new worker when one ships.
*
* Without update handling a changed `sw.js` installs but sits in `waiting`
* forever — existing users keep the old (previously "always-caching") worker
* until every tab is closed. Here, when a new worker reaches `installed` while
- * one is already controlling the page, we ask it to take over and reload once
- * it does.
+ * one is already controlling the page, we ask it to take over. If transactions
+ * are still signing/broadcasting/confirming, the reload waits until they settle
+ * so the app does not discard an in-flight operation.
*/
export function useServiceWorker() {
useEffect(() => {
@@ -26,11 +37,37 @@ export function useServiceWorker() {
registrationStarted = true;
let reloading = false;
- const onControllerChange = () => {
+ let unsubscribeFromTransactions: (() => void) | undefined;
+
+ const reloadPage = () => {
if (reloading) return;
reloading = true;
+ unsubscribeFromTransactions?.();
window.location.reload();
};
+
+ const reloadWhenSafe = () => {
+ if (!hasInFlightTransactions()) {
+ reloadPage();
+ return;
+ }
+
+ toast('Update available. The app will reload after pending transactions finish.', {
+ id: 'service-worker-update',
+ duration: 5000,
+ });
+
+ unsubscribeFromTransactions?.();
+ unsubscribeFromTransactions = useTransactionStore.subscribe(() => {
+ if (!hasInFlightTransactions()) {
+ reloadPage();
+ }
+ });
+ };
+
+ const onControllerChange = () => {
+ reloadWhenSafe();
+ };
navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
const promoteWhenReady = (worker: ServiceWorker | null) => {
@@ -63,6 +100,7 @@ export function useServiceWorker() {
});
return () => {
+ unsubscribeFromTransactions?.();
navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
};
}, []);