0 ? "loading-skeleton-errors" : undefined}
aria-disabled={disabled ? "true" : undefined}
tabIndex={interactive ? (disabled ? -1 : tabIndex ?? 0) : undefined}
onClick={!disabled ? onClick : undefined}
@@ -56,9 +102,31 @@ export default function LoadingSkeleton({
data-testid="loading-skeleton"
>
Loading job data…
+ {renderedErrors.length > 0 && (
+
+ {renderedErrors.map((validationError, index) => (
+
+ {validationError.field && (
+ {validationError.field}:
+ )}
+ {validationError.message}
+
+ ))}
+
+ )}
{/* Caps the skeleton on small viewports so it scrolls internally
- instead of pushing the surrounding controls off-screen, and
- keeps overscroll inside the wrapper rather than the page. */}
+ instead of pushing the surrounding controls off-screen, and
+ keeps overscroll inside the wrapper rather than the page. */}
void>();
+
+function subscribe(cb: () => void) {
+ listeners.add(cb);
+ return () => listeners.delete(cb);
+}
+
+function notifyListeners() {
+ listeners.forEach((cb) => cb());
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface ThemeContextValue {
+ theme: Theme;
+ toggleTheme: () => void;
+}
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+ // useSyncExternalStore avoids the react-hooks/set-state-in-effect lint rule.
+ // getServerSnapshot returns "dark" so SSR output is deterministic.
+ const theme = useSyncExternalStore(subscribe, readTheme, () => "dark" as Theme);
+
+ const toggleTheme = useCallback(() => {
+ const next: Theme = readTheme() === "dark" ? "light" : "dark";
+ applyTheme(next);
+ notifyListeners();
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme(): ThemeContextValue {
+ const ctx = useContext(ThemeContext);
+ if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+ return ctx;
+}
diff --git a/app/lib/rabe_connector.ts b/app/lib/rabe_connector.ts
index 4010f13..3615fdd 100644
--- a/app/lib/rabe_connector.ts
+++ b/app/lib/rabe_connector.ts
@@ -401,3 +401,160 @@ export async function runRabeSign(
throw err;
}
}
+
+
+// ---------------------------------------------------------------------------
+// Secure persistent caching for active Rabe wallet addresses
+// ---------------------------------------------------------------------------
+
+/** localStorage key under which the serialized address cache is stored. */
+export const RABE_CACHE_KEY = "rabe_active_address_cache";
+
+/**
+ * Shape of the cache entry persisted to localStorage.
+ * Using a versioned envelope makes future migrations explicit.
+ */
+export interface RabeActiveAddressCache {
+ /** Schema version — increment when the shape changes. */
+ version: 1;
+ /** The Stellar public key of the connected wallet (G… address). */
+ address: string;
+ /** Unix-ms timestamp of when the entry was last written. */
+ savedAt: number;
+ /** Network the wallet was connected to when the address was cached. */
+ network: RabeNetwork;
+}
+
+// ---- Validation helpers ---------------------------------------------------
+
+/**
+ * Returns true when `value` looks like a valid Stellar public key.
+ * Public keys are 56 characters, start with "G", and are Base32 (A-Z 2-7).
+ */
+function isValidStellarAddress(value: string): boolean {
+ return /^G[A-Z2-7]{55}$/.test(value);
+}
+
+/**
+ * Returns true when `value` is one of the known {@link RabeNetwork} literals.
+ */
+function isValidNetwork(value: unknown): value is RabeNetwork {
+ return value === "mainnet" || value === "testnet";
+}
+
+// ---- Public cache API -----------------------------------------------------
+
+/**
+ * Validates that `raw` conforms to the {@link RabeActiveAddressCache} shape.
+ * Returns `true` when every required field passes its type and value check.
+ */
+export function validateRabeAddressCache(
+ raw: unknown
+): raw is RabeActiveAddressCache {
+ if (!raw || typeof raw !== "object") return false;
+
+ const candidate = raw as Record;
+
+ if (candidate.version !== 1) return false;
+ if (typeof candidate.address !== "string") return false;
+ if (!isValidStellarAddress(candidate.address)) return false;
+ if (typeof candidate.savedAt !== "number") return false;
+ if (!Number.isFinite(candidate.savedAt) || candidate.savedAt <= 0)
+ return false;
+ if (!isValidNetwork(candidate.network)) return false;
+
+ return true;
+}
+
+/**
+ * Serializes an {@link RabeActiveAddressCache} entry to a JSON string.
+ * Exposed for testing; normal callers should use {@link saveRabeAddressCache}.
+ */
+export function serializeRabeAddressCache(
+ cache: RabeActiveAddressCache
+): string {
+ return JSON.stringify(cache);
+}
+
+/**
+ * Parses a JSON string and validates it as an {@link RabeActiveAddressCache}.
+ * Returns `null` when parsing fails or the data does not pass validation.
+ */
+export function deserializeRabeAddressCache(
+ raw: string
+): RabeActiveAddressCache | null {
+ try {
+ const parsed: unknown = JSON.parse(raw);
+ return validateRabeAddressCache(parsed) ? parsed : null;
+ } catch {
+ return null;
+ }
+}
+
+/**
+ * Writes the active-address cache to localStorage.
+ *
+ * Safe to call in SSR contexts — the write is skipped when `window` is
+ * unavailable so Next.js server renders do not throw.
+ */
+export function saveRabeAddressCache(
+ address: string,
+ network: RabeNetwork
+): void {
+ if (typeof window === "undefined") return;
+
+ const cache: RabeActiveAddressCache = {
+ version: 1,
+ address,
+ savedAt: Date.now(),
+ network,
+ };
+
+ try {
+ localStorage.setItem(RABE_CACHE_KEY, serializeRabeAddressCache(cache));
+ } catch (err) {
+ // localStorage may be unavailable (private mode quota exceeded, etc.)
+ logRabeWarning(
+ "CACHE WRITE FAILED",
+ "Could not persist active address cache to localStorage.",
+ { err }
+ );
+ }
+}
+
+/**
+ * Reads and validates the active-address cache from localStorage.
+ *
+ * Returns `null` when:
+ * - the code is running server-side,
+ * - the key is absent,
+ * - the stored value is corrupt or fails validation.
+ */
+export function loadRabeAddressCache(): RabeActiveAddressCache | null {
+ if (typeof window === "undefined") return null;
+
+ try {
+ const raw = localStorage.getItem(RABE_CACHE_KEY);
+ if (raw === null) return null;
+ return deserializeRabeAddressCache(raw);
+ } catch {
+ // Gracefully handle any unexpected storage errors.
+ return null;
+ }
+}
+
+/**
+ * Removes the active-address cache entry from localStorage.
+ *
+ * Call this on wallet disconnect or when the cached address can no longer
+ * be verified as active.
+ */
+export function clearRabeAddressCache(): void {
+ if (typeof window === "undefined") return;
+
+ try {
+ localStorage.removeItem(RABE_CACHE_KEY);
+ } catch {
+ // Ignore — if we can't remove it, there is nothing more to do.
+ }
+}
diff --git a/app/lib/wallet_disconnect_handler.ts b/app/lib/wallet_disconnect_handler.ts
index dcf5d5d..55766e2 100644
--- a/app/lib/wallet_disconnect_handler.ts
+++ b/app/lib/wallet_disconnect_handler.ts
@@ -469,10 +469,15 @@ export interface PendingTxSnapshot {
* via `pendingTx` so it is logged as a console.warn for post-mortem
* debugging — the handler does not change control flow based on it.
*
+ * User signature rejections are caught gracefully: a warning toast is shown
+ * and the function returns success (since the user intentionally cancelled).
+ *
* @param walletId - The wallet provider ID.
* @param disconnectFn - The actual disconnect function (e.g. StellarWalletsKit.disconnect()).
* @param detector - Optional availability-detector override for tests.
+ * @param options - Optional timeout and cleanup options.
* @param pendingTx - Optional snapshot of an in-flight transaction at disconnect time.
+ * @param showToast - Optional toast handler for user rejection warnings.
*/
export async function disconnectWalletWithCheck(
walletId: string,
@@ -480,6 +485,7 @@ export async function disconnectWalletWithCheck(
detector?: () => boolean,
options?: WalletDisconnectTimeoutOptions,
pendingTx?: PendingTxSnapshot,
+ showToast?: (message: string, type: "warning" | "error" | "info" | "success") => void,
): Promise {
// Warn immediately if a transaction was in flight when disconnect was called.
if (pendingTx && (pendingTx.txId ?? pendingTx.status ?? pendingTx.context)) {
@@ -527,6 +533,28 @@ export async function disconnectWalletWithCheck(
installUrl: null,
};
} catch (err) {
+ // Handle user rejection gracefully - show warning toast and return success
+ if (isWalletDisconnectUserRejected(err)) {
+ console.warn(
+ `${LOG_PREFIX} DISCONNECT REJECTED by user for "${walletId}":`,
+ err,
+ );
+ // Remove from active keys store even on user rejection
+ walletActiveKeysStore.removeActiveKey(walletId);
+ if (showToast) {
+ showToast(
+ "Disconnect cancelled — you rejected the request in your wallet.",
+ "warning",
+ );
+ }
+ return {
+ success: true,
+ error: null,
+ fallbackInstructions: null,
+ installUrl: null,
+ };
+ }
+
const message =
err instanceof Error
? err.message
@@ -748,6 +776,37 @@ export function warnOnDisconnectNetworkMismatch(
return state;
}
+// =============================================================
+// User signature rejection handling (#235)
+// =============================================================
+
+export class WalletDisconnectUserRejectedError extends Error {
+ constructor(message = "user rejected transaction") {
+ super(message);
+ this.name = "WalletDisconnectUserRejectedError";
+ }
+}
+
+/**
+ * Detects "user rejected the signature request" style errors from wallet
+ * disconnect operations. Mirrors the pattern used in albedo_connector and
+ * freighter_connector for consistency across the codebase.
+ */
+export function isWalletDisconnectUserRejected(err: unknown): boolean {
+ if (err instanceof WalletDisconnectUserRejectedError) return true;
+ if (!(err instanceof Error)) return false;
+ const message = err.message.toLowerCase();
+ return (
+ message.includes("user rejected") ||
+ message.includes("user declined") ||
+ message.includes("request rejected") ||
+ message.includes("denied by the user") ||
+ message.includes("rejected by user") ||
+ message.includes("canceled by user") ||
+ message.includes("cancelled by user")
+ );
+}
+
// =============================================================
// Gas estimation / simulation fee warnings (#240)
// =============================================================
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 179b84a..46e17df 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,5 +1,25 @@
import "@testing-library/jest-dom/vitest";
+// jsdom doesn't implement matchMedia. Provide a minimal stub so any code
+// that calls window.matchMedia("...").matches doesn't throw.
+if (typeof window !== "undefined" && typeof window.matchMedia === "undefined") {
+ Object.defineProperty(window, "matchMedia", {
+ writable: true,
+ configurable: true,
+ value: (query: string): MediaQueryList =>
+ ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: () => {},
+ removeListener: () => {},
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ dispatchEvent: () => false,
+ }) as MediaQueryList,
+ });
+}
+
// jsdom environment: normalise the web-storage globals across Node versions.
//
// Newer Node releases ship an experimental `localStorage` global that reads as