+
{renderContent(false)}
diff --git a/frontend/src/hooks/useTransactionFilters.ts b/frontend/src/hooks/useTransactionFilters.ts
index 88faf39e..9c496d4f 100644
--- a/frontend/src/hooks/useTransactionFilters.ts
+++ b/frontend/src/hooks/useTransactionFilters.ts
@@ -1,296 +1,118 @@
-/** @vitest-environment jsdom */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { renderHook, act, waitFor } from "@testing-library/react";
-import { useTransactionFilters } from "./useTransactionFilters";
-import { DEFAULT_PAYMENT_HISTORY_FILTERS } from "@/lib/payment-history-filters";
-
-// Mock useTransition so we can control pending state
-vi.mock("react", async (importOriginal) => {
- const actual = await importOriginal
();
- return {
- ...actual,
- useTransition: () => {
- const [isPending, setIsPending] = actual.useState(false);
- const startTransition = (fn: () => void) => {
- setIsPending(true);
- fn();
- setIsPending(false);
- };
- return [isPending, startTransition];
+"use client";
+
+import { useReducer, useState, useCallback, useRef, useEffect, useTransition } from "react";
+import {
+ paymentHistoryFiltersReducer,
+ DEFAULT_PAYMENT_HISTORY_FILTERS,
+ filtersFromSearchParams,
+ buildPaymentHistorySearchParams,
+ hasActivePaymentHistoryFilters,
+ type PaymentHistoryFilterKey,
+ type PaymentHistoryFilterState,
+} from "@/lib/payment-history-filters";
+
+const SEARCH_DEBOUNCE_MS = 350;
+
+/**
+ * Manages TransactionFilterSidebar state with optimistic UI updates.
+ *
+ * Draft state (the `filters` return value) updates synchronously on every
+ * interaction so the sidebar feels instant. URL sync is deferred:
+ * - Search: debounced 350 ms after the last keystroke.
+ * - All other filters: pushed inside a React transition (non-blocking).
+ *
+ * `searchSyncPending` stays true while a debounced search is in flight so
+ * callers can show a subtle syncing indicator without blocking input.
+ * `isFilterPending` reflects the React transition for non-search filters.
+ */
+export function useTransactionFilters(
+ pushSearchParams: (params: URLSearchParams) => void,
+ initialSearchParams?: URLSearchParams,
+) {
+ const [filters, dispatch] = useReducer(
+ paymentHistoryFiltersReducer,
+ undefined,
+ () =>
+ initialSearchParams
+ ? filtersFromSearchParams(initialSearchParams)
+ : DEFAULT_PAYMENT_HISTORY_FILTERS,
+ );
+
+ const [searchSyncPending, setSearchSyncPending] = useState(false);
+ const [isFilterPending, startTransition] = useTransition();
+
+ // Always-current snapshot of filter state for use inside async callbacks.
+ const filtersRef = useRef(filters);
+ filtersRef.current = filters;
+
+ const debounceRef = useRef | null>(null);
+
+ const cancelDebounce = useCallback(() => {
+ if (debounceRef.current !== null) {
+ clearTimeout(debounceRef.current);
+ debounceRef.current = null;
+ }
+ }, []);
+
+ // Cancel any in-flight debounce when the hook unmounts.
+ useEffect(() => () => cancelDebounce(), [cancelDebounce]);
+
+ const onFilterChange = useCallback(
+ (key: PaymentHistoryFilterKey, value: string) => {
+ // Optimistic update: draft state reflects the change immediately.
+ dispatch({ type: "set", key, value });
+
+ if (key === "search") {
+ // Debounce URL sync so rapid keystrokes don't flood navigation.
+ setSearchSyncPending(true);
+ cancelDebounce();
+ debounceRef.current = setTimeout(() => {
+ debounceRef.current = null;
+ // filtersRef.current holds the latest reducer state at fire time.
+ pushSearchParams(buildPaymentHistorySearchParams(filtersRef.current));
+ setSearchSyncPending(false);
+ }, SEARCH_DEBOUNCE_MS);
+ } else {
+ // Non-search filters: push to URL inside a transition (keeps UI responsive).
+ startTransition(() => {
+ pushSearchParams(
+ buildPaymentHistorySearchParams({ ...filtersRef.current, [key]: value }),
+ );
+ });
+ }
},
- };
-});
-
-describe("useTransactionFilters", () => {
- let pushSearchParams: ReturnType;
-
- beforeEach(() => {
- pushSearchParams = vi.fn();
- vi.useFakeTimers();
- });
-
- afterEach(() => {
- vi.useRealTimers();
- vi.clearAllMocks();
- });
-
- it("initialises with default filters when no searchParams provided", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- expect(result.current.filters).toEqual(DEFAULT_PAYMENT_HISTORY_FILTERS);
- expect(result.current.hasActiveFilters).toBe(false);
- expect(result.current.searchSyncPending).toBe(false);
- });
-
- it("initialises from provided URLSearchParams", () => {
- const params = new URLSearchParams("search=foo&status=confirmed&asset=USDC");
- const { result } = renderHook(() =>
- useTransactionFilters(pushSearchParams, params),
- );
-
- expect(result.current.filters.search).toBe("foo");
- expect(result.current.filters.status).toBe("confirmed");
- expect(result.current.filters.asset).toBe("USDC");
- });
-
- // ── onFilterChange (search) ─────────────────────────────────────────────
-
- describe("onFilterChange — search (debounced)", () => {
- it("updates draft state immediately", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- expect(result.current.filters.search).toBe("hello");
- });
-
- it("sets searchSyncPending to true immediately", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- expect(result.current.searchSyncPending).toBe(true);
- });
-
- it("does NOT call pushSearchParams immediately", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- expect(pushSearchParams).not.toHaveBeenCalled();
- });
-
- it("calls pushSearchParams after 350 ms debounce", async () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- act(() => {
- vi.advanceTimersByTime(350);
- });
-
- await waitFor(() => expect(pushSearchParams).toHaveBeenCalledTimes(1));
-
- const called = pushSearchParams.mock.calls[0][0] as URLSearchParams;
- expect(called.get("search")).toBe("hello");
- });
-
- it("clears searchSyncPending after debounce resolves", async () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- act(() => {
- vi.advanceTimersByTime(350);
- });
-
- await waitFor(() => expect(result.current.searchSyncPending).toBe(false));
- });
-
- it("debounces rapid keystrokes — only one push after silence", async () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "h");
- });
- act(() => {
- vi.advanceTimersByTime(100);
- result.current.onFilterChange("search", "he");
- });
- act(() => {
- vi.advanceTimersByTime(100);
- result.current.onFilterChange("search", "hel");
- });
- act(() => {
- vi.advanceTimersByTime(350);
- });
-
- await waitFor(() => expect(pushSearchParams).toHaveBeenCalledTimes(1));
-
- const called = pushSearchParams.mock.calls[0][0] as URLSearchParams;
- expect(called.get("search")).toBe("hel");
- });
- });
-
- // ── onFilterChange (non-search) ─────────────────────────────────────────
-
- describe("onFilterChange — non-search (immediate)", () => {
- it("updates draft state immediately for status", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("status", "confirmed");
- });
-
- expect(result.current.filters.status).toBe("confirmed");
- });
-
- it("calls pushSearchParams synchronously for non-search filters", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("asset", "USDC");
- });
-
- expect(pushSearchParams).toHaveBeenCalledTimes(1);
- const params = pushSearchParams.mock.calls[0][0] as URLSearchParams;
- expect(params.get("asset")).toBe("USDC");
- });
-
- it("does NOT set searchSyncPending for non-search changes", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("asset", "XLM");
- });
-
- expect(result.current.searchSyncPending).toBe(false);
- });
- });
-
- // ── onClearFilter ───────────────────────────────────────────────────────
-
- describe("onClearFilter", () => {
- it("clears search immediately and cancels pending debounce", async () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- // Cancel the pending debounce by clearing before timer fires
- act(() => {
- result.current.onClearFilter("search");
- });
-
- act(() => {
- vi.advanceTimersByTime(350);
- });
-
- expect(result.current.filters.search).toBe("");
- expect(result.current.searchSyncPending).toBe(false);
- // pushSearchParams should be called once for the clear, not for the debounce
- expect(pushSearchParams).toHaveBeenCalledTimes(1);
- });
-
- it("clears non-search filters and pushes immediately", () => {
- const { result } = renderHook(() =>
- useTransactionFilters(
- pushSearchParams,
- new URLSearchParams("status=confirmed"),
- ),
- );
-
- act(() => {
- result.current.onClearFilter("status");
- });
-
- expect(result.current.filters.status).toBe("all");
- expect(pushSearchParams).toHaveBeenCalledTimes(1);
- });
- });
-
- // ── onClearAll ──────────────────────────────────────────────────────────
-
- describe("onClearAll", () => {
- it("resets all filters to defaults", () => {
- const { result } = renderHook(() =>
- useTransactionFilters(
- pushSearchParams,
- new URLSearchParams("search=foo&status=confirmed&asset=USDC"),
- ),
- );
-
- act(() => {
- result.current.onClearAll();
- });
-
- expect(result.current.filters).toEqual(DEFAULT_PAYMENT_HISTORY_FILTERS);
- });
-
- it("pushes empty URLSearchParams", () => {
- const { result } = renderHook(() =>
- useTransactionFilters(
- pushSearchParams,
- new URLSearchParams("status=confirmed"),
- ),
+ [pushSearchParams, cancelDebounce, startTransition],
+ );
+
+ const onClearFilter = useCallback(
+ (key: PaymentHistoryFilterKey) => {
+ if (key === "search") {
+ cancelDebounce();
+ setSearchSyncPending(false);
+ }
+ dispatch({ type: "clear", key });
+ const defaultValue = key === "status" || key === "asset" ? "all" : "";
+ pushSearchParams(
+ buildPaymentHistorySearchParams({ ...filtersRef.current, [key]: defaultValue }),
);
+ },
+ [pushSearchParams, cancelDebounce],
+ );
- act(() => {
- result.current.onClearAll();
- });
-
- const params = pushSearchParams.mock.calls[0][0] as URLSearchParams;
- expect(params.toString()).toBe("");
- });
-
- it("cancels any pending search debounce", async () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "hello");
- });
-
- act(() => {
- result.current.onClearAll();
- });
-
- act(() => {
- vi.advanceTimersByTime(350);
- });
-
- // Only one push (the clear), not two
- await waitFor(() => expect(pushSearchParams).toHaveBeenCalledTimes(1));
- expect(result.current.searchSyncPending).toBe(false);
- });
- });
-
- // ── hasActiveFilters ────────────────────────────────────────────────────
-
- describe("hasActiveFilters", () => {
- it("is false with default filters", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
- expect(result.current.hasActiveFilters).toBe(false);
- });
-
- it("is true immediately after a filter change (optimistic)", () => {
- const { result } = renderHook(() => useTransactionFilters(pushSearchParams));
-
- act(() => {
- result.current.onFilterChange("search", "q");
- });
+ const onClearAll = useCallback(() => {
+ cancelDebounce();
+ setSearchSyncPending(false);
+ dispatch({ type: "reset" });
+ pushSearchParams(new URLSearchParams());
+ }, [pushSearchParams, cancelDebounce]);
- expect(result.current.hasActiveFilters).toBe(true);
- });
- });
-});
\ No newline at end of file
+ return {
+ filters,
+ onFilterChange,
+ onClearFilter,
+ onClearAll,
+ hasActiveFilters: hasActivePaymentHistoryFilters(filters),
+ searchSyncPending,
+ isFilterPending,
+ };
+}
diff --git a/frontend/src/lib/multisig-context.tsx b/frontend/src/lib/multisig-context.tsx
index b79d67bb..b9641609 100644
--- a/frontend/src/lib/multisig-context.tsx
+++ b/frontend/src/lib/multisig-context.tsx
@@ -1,6 +1,14 @@
"use client";
-import { createContext, useContext, useEffect, useState, useCallback, useMemo, ReactNode } from "react";
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useCallback,
+ useMemo,
+ useRef,
+ ReactNode,
+} from "react";
export type MultisigApprovalStatus = "pending" | "approved" | "rejected" | "expired" | "processing";
export type MultisigStep = "review" | "sign" | "submit" | "confirm" | "error";
@@ -40,7 +48,7 @@ export interface MultisigContextType {
error: string | null;
isMounted: boolean;
isVisible: boolean;
-
+
// Actions
setTransaction: (transaction: MultisigTransaction | null) => void;
setCurrentStep: (step: MultisigStep) => void;
@@ -49,7 +57,7 @@ export interface MultisigContextType {
resetModal: () => void;
clearError: () => void;
retryAction: () => void;
-
+
// Computed values
canSign: boolean;
canSubmit: boolean;
@@ -60,6 +68,104 @@ export interface MultisigContextType {
timeRemaining: string | null;
}
+// ─── Reducer ─────────────────────────────────────────────────────────────────
+
+type MultisigState = {
+ transaction: MultisigTransaction | null;
+ currentStep: MultisigStep;
+ isLoading: boolean;
+ error: string | null;
+ isMounted: boolean;
+ isVisible: boolean;
+};
+
+type MultisigAction =
+ | { type: "SET_TRANSACTION"; payload: MultisigTransaction | null }
+ | { type: "SET_STEP"; payload: MultisigStep }
+ | { type: "SET_LOADING"; payload: boolean }
+ | { type: "SET_ERROR"; payload: string }
+ | { type: "CLEAR_ERROR" }
+ | { type: "RESET" }
+ | { type: "SET_VISIBLE"; payload: boolean }
+ | { type: "OPTIMISTIC_SIGN"; signerId: string }
+ | { type: "CONFIRM_SIGN"; signerId: string; signature: string; signedAt: string }
+ | { type: "REVERT_SIGN"; previousTransaction: MultisigTransaction }
+ | { type: "SUBMIT_SUCCESS"; txHash: string };
+
+const INITIAL_STATE: MultisigState = {
+ transaction: null,
+ currentStep: "review",
+ isLoading: false,
+ error: null,
+ isMounted: false,
+ isVisible: false,
+};
+
+function multisigReducer(state: MultisigState, action: MultisigAction): MultisigState {
+ switch (action.type) {
+ case "SET_TRANSACTION":
+ return { ...state, transaction: action.payload, error: null };
+ case "SET_STEP":
+ return { ...state, currentStep: action.payload };
+ case "SET_LOADING":
+ return { ...state, isLoading: action.payload };
+ case "SET_ERROR":
+ return { ...state, error: action.payload, isLoading: false };
+ case "CLEAR_ERROR":
+ return { ...state, error: null };
+ case "RESET":
+ return INITIAL_STATE;
+ case "SET_VISIBLE":
+ return { ...state, isVisible: action.payload };
+ case "OPTIMISTIC_SIGN": {
+ if (!state.transaction) return state;
+ return {
+ ...state,
+ transaction: {
+ ...state.transaction,
+ signers: state.transaction.signers.map((s) =>
+ s.id === action.signerId ? { ...s, hasSigned: true } : s,
+ ),
+ },
+ };
+ }
+ case "CONFIRM_SIGN": {
+ if (!state.transaction) return state;
+ const updatedSigners = state.transaction.signers.map((s) =>
+ s.id === action.signerId
+ ? { ...s, hasSigned: true, signature: action.signature, signedAt: action.signedAt }
+ : s,
+ );
+ const signedWeight = updatedSigners
+ .filter((s) => s.hasSigned)
+ .reduce((sum, s) => sum + s.weight, 0);
+ const nextStep: MultisigStep =
+ signedWeight >= state.transaction.minSignatures ? "submit" : state.currentStep;
+ return {
+ ...state,
+ transaction: { ...state.transaction, signers: updatedSigners },
+ currentStep: nextStep,
+ isLoading: false,
+ };
+ }
+ case "REVERT_SIGN":
+ return { ...state, transaction: action.previousTransaction, isLoading: false };
+ case "SUBMIT_SUCCESS":
+ return {
+ ...state,
+ transaction: state.transaction
+ ? { ...state.transaction, status: "approved", submittedTxHash: action.txHash }
+ : state.transaction,
+ currentStep: "confirm",
+ isLoading: false,
+ };
+ default:
+ return state;
+ }
+}
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
const MultisigContext = createContext(undefined);
interface MultisigProviderProps {
@@ -67,172 +173,122 @@ interface MultisigProviderProps {
readonly networkPassphrase: string;
}
-export function MultisigProvider({ children, networkPassphrase }: MultisigProviderProps) {
- const [transaction, setTransaction] = useState(null);
- const [currentStep, setCurrentStep] = useState("review");
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(null);
- const [isMounted, setIsMounted] = useState(false);
- const [isVisible, setIsVisible] = useState(false);
+export function MultisigProvider({ children, networkPassphrase: _networkPassphrase }: MultisigProviderProps) {
+ const [state, dispatch] = useReducer(multisigReducer, INITIAL_STATE);
+
+ // Always-current snapshot for use inside async callbacks without stale-closure issues.
+ const stateRef = useRef(state);
+ stateRef.current = state;
const clearError = useCallback(() => {
- setError(null);
+ dispatch({ type: "CLEAR_ERROR" });
}, []);
const resetModal = useCallback(() => {
- setTransaction(null);
- setCurrentStep("review");
- setIsLoading(false);
- setError(null);
- setIsVisible(false);
+ dispatch({ type: "RESET" });
}, []);
const setTransactionSafe = useCallback((newTransaction: MultisigTransaction | null) => {
try {
if (newTransaction) {
- // Validate transaction structure
if (!newTransaction.id || !newTransaction.sourceAccount || !newTransaction.destination) {
throw new Error("Invalid transaction structure");
}
-
- // Validate signers
if (!Array.isArray(newTransaction.signers) || newTransaction.signers.length === 0) {
throw new Error("Transaction must have at least one signer");
}
-
- // Validate signature requirements
- const totalWeight = newTransaction.signers.reduce((sum, signer) => sum + signer.weight, 0);
+ const totalWeight = newTransaction.signers.reduce((sum, s) => sum + s.weight, 0);
if (newTransaction.minSignatures > totalWeight) {
throw new Error("Required signatures exceed total signer weight");
}
}
-
- setTransaction(newTransaction);
- clearError();
+ dispatch({ type: "SET_TRANSACTION", payload: newTransaction });
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Invalid transaction";
- setError(errorMessage);
+ dispatch({ type: "SET_ERROR", payload: errorMessage });
console.error("Transaction validation error:", err);
}
- }, [clearError]);
+ }, []);
const signTransaction = useCallback(async (signerId: string) => {
+ const { transaction } = stateRef.current;
if (!transaction) {
- setError("No transaction to sign");
+ dispatch({ type: "SET_ERROR", payload: "No transaction to sign" });
return;
}
- const previousTransaction = { ...transaction, signers: [...transaction.signers] };
-
- try {
- setIsLoading(true);
- clearError();
-
- // Find the signer
- const signer = transaction.signers.find(s => s.id === signerId);
- if (!signer) {
- throw new Error("Signer not found");
- }
-
- if (signer.hasSigned) {
- throw new Error("Signer has already signed");
- }
-
- // Optimistic update
- const optimisticSigners = transaction.signers.map(s =>
- s.id === signerId ? { ...s, hasSigned: true } : s
- );
- setTransactionSafe({ ...transaction, signers: optimisticSigners });
-
- // Simulate signing process (in real implementation, this would interact with wallet)
- await new Promise(resolve => setTimeout(resolve, 1000));
-
- // Update signer with signature
- const mockSignature = `mock_signature_${Date.now()}_${signerId}`;
- const updatedSigners = transaction.signers.map(s =>
- s.id === signerId
- ? { ...s, hasSigned: true, signature: mockSignature, signedAt: new Date().toISOString() }
- : s
- );
+ const signer = transaction.signers.find((s) => s.id === signerId);
+ if (!signer) {
+ dispatch({ type: "SET_ERROR", payload: "Signer not found" });
+ return;
+ }
+ if (signer.hasSigned) {
+ dispatch({ type: "SET_ERROR", payload: "Signer has already signed" });
+ return;
+ }
- const updatedTransaction = {
- ...transaction,
- signers: updatedSigners,
- status: 'pending' as MultisigApprovalStatus
- };
+ // Snapshot for rollback if signing fails.
+ const previousTransaction = { ...transaction, signers: [...transaction.signers] };
- setTransactionSafe(updatedTransaction);
-
- // Auto-advance to submit step if enough signatures
- const signedWeight = updatedSigners.filter(s => s.hasSigned)
- .reduce((sum, s) => sum + s.weight, 0);
-
- if (signedWeight >= transaction.minSignatures) {
- setCurrentStep("submit");
- }
+ dispatch({ type: "SET_LOADING", payload: true });
+ dispatch({ type: "CLEAR_ERROR" });
+ // Optimistic update: flip hasSigned immediately so the UI responds before the async op.
+ dispatch({ type: "OPTIMISTIC_SIGN", signerId });
+ try {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ const signature = `mock_signature_${Date.now()}_${signerId}`;
+ const signedAt = new Date().toISOString();
+ // Settle: attach the real signature and auto-advance step if threshold met.
+ dispatch({ type: "CONFIRM_SIGN", signerId, signature, signedAt });
} catch (err) {
- // Revert optimistic update
- setTransactionSafe(previousTransaction);
+ dispatch({ type: "REVERT_SIGN", previousTransaction });
const errorMessage = err instanceof Error ? err.message : "Failed to sign transaction";
- setError(errorMessage);
+ dispatch({ type: "SET_ERROR", payload: errorMessage });
console.error("Signing error:", err);
- } finally {
- setIsLoading(false);
}
- }, [transaction, clearError, setTransactionSafe]);
+ }, []);
const submitTransaction = useCallback(async () => {
+ const { transaction } = stateRef.current;
if (!transaction) {
- setError("No transaction to submit");
+ dispatch({ type: "SET_ERROR", payload: "No transaction to submit" });
return;
}
- try {
- setIsLoading(true);
- clearError();
- setCurrentStep("processing");
-
- // Verify enough signatures
- const signedWeight = transaction.signers.filter(s => s.hasSigned)
- .reduce((sum, s) => sum + s.weight, 0);
-
- if (signedWeight < transaction.minSignatures) {
- throw new Error("Not enough signatures to submit transaction");
- }
-
- // Simulate submission process
- await new Promise(resolve => setTimeout(resolve, 2000));
-
- // Update transaction with submitted hash
- const mockTxHash = `tx_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
- const updatedTransaction = {
- ...transaction,
- status: 'approved' as MultisigApprovalStatus,
- submittedTxHash: mockTxHash
- };
+ const signedWeight = transaction.signers
+ .filter((s) => s.hasSigned)
+ .reduce((sum, s) => sum + s.weight, 0);
+ if (signedWeight < transaction.minSignatures) {
+ dispatch({ type: "SET_ERROR", payload: "Not enough signatures to submit transaction" });
+ return;
+ }
- setTransactionSafe(updatedTransaction);
- setCurrentStep("confirm");
+ dispatch({ type: "SET_LOADING", payload: true });
+ dispatch({ type: "CLEAR_ERROR" });
+ dispatch({ type: "SET_STEP", payload: "processing" });
+ try {
+ await new Promise((resolve) => setTimeout(resolve, 2000));
+ const txHash = `tx_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ dispatch({ type: "SUBMIT_SUCCESS", txHash });
} catch (err) {
const errorMessage = err instanceof Error ? err.message : "Failed to submit transaction";
- setError(errorMessage);
- setCurrentStep("error");
+ dispatch({ type: "SET_ERROR", payload: errorMessage });
+ dispatch({ type: "SET_STEP", payload: "error" });
console.error("Submission error:", err);
- } finally {
- setIsLoading(false);
}
- }, [transaction, clearError, setTransactionSafe]);
+ }, []);
const retryAction = useCallback(() => {
- clearError();
- if (currentStep === "error") {
- setCurrentStep("review");
+ dispatch({ type: "CLEAR_ERROR" });
+ if (stateRef.current.currentStep === "error") {
+ dispatch({ type: "SET_STEP", payload: "review" });
}
- }, [currentStep, clearError]);
+ }, []);
+
+ const { transaction, currentStep, isLoading, error, isMounted, isVisible } = state;
- // Computed values
const computedValues = useMemo(() => {
if (!transaction) {
return {
@@ -242,87 +298,79 @@ export function MultisigProvider({ children, networkPassphrase }: MultisigProvid
requiredSignatures: 0,
progress: 0,
isExpired: false,
- timeRemaining: null
+ timeRemaining: null,
};
}
- const signedWeight = transaction.signers.filter(s => s.hasSigned)
+ const signedWeight = transaction.signers
+ .filter((s) => s.hasSigned)
.reduce((sum, s) => sum + s.weight, 0);
-
- const totalWeight = transaction.signers.reduce((sum, s) => sum + s.weight, 0);
- const progress = totalWeight > 0 ? (signedWeight / transaction.minSignatures) * 100 : 0;
-
+ const progress = (signedWeight / transaction.minSignatures) * 100;
+
let isExpired = false;
let timeRemaining: string | null = null;
-
if (transaction.expiresAt) {
const now = new Date();
const expiry = new Date(transaction.expiresAt);
isExpired = now >= expiry;
-
if (!isExpired) {
const diff = expiry.getTime() - now.getTime();
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-
- if (hours > 0) {
- timeRemaining = `${hours}h ${minutes}m`;
- } else {
- timeRemaining = `${minutes}m`;
- }
+ timeRemaining = hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
}
}
return {
canSign: !isExpired && currentStep === "review",
canSubmit: signedWeight >= transaction.minSignatures && currentStep !== "confirm",
- signedCount: transaction.signers.filter(s => s.hasSigned).length,
+ signedCount: transaction.signers.filter((s) => s.hasSigned).length,
requiredSignatures: transaction.minSignatures,
progress: Math.min(progress, 100),
isExpired,
- timeRemaining
+ timeRemaining,
};
}, [transaction, currentStep]);
- const value: MultisigContextType = useMemo(() => ({
- transaction,
- currentStep,
- isLoading,
- error,
- isMounted,
- isVisible,
- setTransaction: setTransactionSafe,
- setCurrentStep,
- signTransaction,
- submitTransaction,
- resetModal,
- clearError,
- retryAction,
- ...computedValues
- }), [
- transaction,
- currentStep,
- isLoading,
- error,
- isMounted,
- isVisible,
- setTransactionSafe,
- setCurrentStep,
- signTransaction,
- submitTransaction,
- resetModal,
- clearError,
- retryAction,
- computedValues
- ]);
-
- return (
-
- {children}
-
+ const value: MultisigContextType = useMemo(
+ () => ({
+ transaction,
+ currentStep,
+ isLoading,
+ error,
+ isMounted,
+ isVisible,
+ setTransaction: setTransactionSafe,
+ setCurrentStep: (step: MultisigStep) => dispatch({ type: "SET_STEP", payload: step }),
+ signTransaction,
+ submitTransaction,
+ resetModal,
+ clearError,
+ retryAction,
+ ...computedValues,
+ }),
+ [
+ transaction,
+ currentStep,
+ isLoading,
+ error,
+ isMounted,
+ isVisible,
+ setTransactionSafe,
+ signTransaction,
+ submitTransaction,
+ resetModal,
+ clearError,
+ retryAction,
+ computedValues,
+ ],
);
+
+ return {children};
}
+// ─── Hooks ───────────────────────────────────────────────────────────────────
+
export function useMultisig() {
const context = useContext(MultisigContext);
if (context === undefined) {
@@ -332,12 +380,12 @@ export function useMultisig() {
}
export function useMultisigState() {
- const {
- transaction,
- currentStep,
- isLoading,
- error,
- isMounted,
+ const {
+ transaction,
+ currentStep,
+ isLoading,
+ error,
+ isMounted,
isVisible,
canSign,
canSubmit,
@@ -345,9 +393,9 @@ export function useMultisigState() {
requiredSignatures,
progress,
isExpired,
- timeRemaining
+ timeRemaining,
} = useMultisig();
-
+
return {
transaction,
currentStep,
@@ -361,21 +409,21 @@ export function useMultisigState() {
requiredSignatures,
progress,
isExpired,
- timeRemaining
+ timeRemaining,
};
}
export function useMultisigActions() {
- const {
- setTransaction,
- setCurrentStep,
- signTransaction,
- submitTransaction,
- resetModal,
- clearError,
- retryAction
+ const {
+ setTransaction,
+ setCurrentStep,
+ signTransaction,
+ submitTransaction,
+ resetModal,
+ clearError,
+ retryAction,
} = useMultisig();
-
+
return {
setTransaction,
setCurrentStep,
@@ -383,6 +431,6 @@ export function useMultisigActions() {
submitTransaction,
resetModal,
clearError,
- retryAction
+ retryAction,
};
}