Merge pull request #700 from devonahi/feat/approval-model

emdevelopa · web-flow · commit 3f1ca3223e2f · 2026-04-23T22:39:34.000+01:00
fix: implement optimistic theme updates with rollback functionality o…
diff --git a/frontend/src/components/MultisigApprovalModal.test.tsx b/frontend/src/components/MultisigApprovalModal.test.tsx
@@ -340,6 +340,20 @@ describe("MultisigApprovalModal Component", () => {
       expect(modal).toHaveAttribute("aria-labelledby", "multisig-modal-title");
     });
 
+    it("has proper roles and live regions for screen readers", () => {
+      renderWithProvider();
+
+      // Content area has polite aria-live
+      const contentArea = screen.getByText("Multi-Signature Approval").parentElement?.nextElementSibling;
+      expect(contentArea).toHaveAttribute("aria-live", "polite");
+
+      // Progress bar role
+      const progressBar = screen.getByRole("progressbar");
+      expect(progressBar).toHaveAttribute("aria-valuenow", "0");
+      expect(progressBar).toHaveAttribute("aria-valuemin", "0");
+      expect(progressBar).toHaveAttribute("aria-valuemax", "100");
+    });
+
     it("has proper heading structure", () => {
       renderWithProvider();
 
diff --git a/frontend/src/components/MultisigApprovalModal.tsx b/frontend/src/components/MultisigApprovalModal.tsx
@@ -167,7 +167,14 @@ export default function MultisigApprovalModal({
               </span>
               <span className="text-xs text-slate-400">{Math.round(progress)}%</span>
             </div>
-            <div className="w-full bg-white/10 rounded-full h-2">
+            <div 
+              className="w-full bg-white/10 rounded-full h-2"
+              role="progressbar"
+              aria-valuenow={Math.round(progress)}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-label="Signature progress"
+            >
               <div 
                 className="bg-mint h-2 rounded-full transition-all duration-300"
                 style={{ width: `${progress}%` }}
@@ -243,8 +250,8 @@ export default function MultisigApprovalModal({
   );
 
   const ProcessingStep = () => (
-    <div className="flex flex-col items-center justify-center py-12 text-center">
-      <div className="relative mb-6">
+    <div className="flex flex-col items-center justify-center py-12 text-center" role="status">
+      <div className="relative mb-6" aria-hidden="true">
         <div className="w-16 h-16 border-4 border-mint border-t-transparent rounded-full animate-spin" />
         <div className="absolute inset-0 w-16 h-16 border-4 border-mint/20 rounded-full animate-ping" />
       </div>
@@ -289,7 +296,7 @@ export default function MultisigApprovalModal({
   );
 
   const ErrorStep = () => (
-    <div className="text-center space-y-6">
+    <div className="text-center space-y-6" role="alert">
       <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto">
         <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@@ -385,7 +392,7 @@ export default function MultisigApprovalModal({
             </div>
 
             {/* Content */}
-            <div className="p-6 max-h-[70vh] overflow-y-auto">
+            <div className="p-6 max-h-[70vh] overflow-y-auto" aria-live="polite">
               {isExpired ? (
                 <div className="text-center space-y-6">
                   <div className="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto">
@@ -413,7 +420,7 @@ export default function MultisigApprovalModal({
 
             {/* Error Display */}
             {error && currentStep !== "error" && (
-              <div className="mx-6 mb-6 rounded-xl border border-red-500/30 bg-red-500/10 p-4">
+              <div className="mx-6 mb-6 rounded-xl border border-red-500/30 bg-red-500/10 p-4" role="alert">
                 <div className="flex items-start gap-3">
                   <svg className="w-5 h-5 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
@@ -2,6 +2,7 @@
 
 import { useThemeState, useThemeActions } from "@/lib/theme-context";
 import { useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 export default function ThemeToggle() {
   const { theme, resolvedTheme, isMounted, isLoading, error } = useThemeState();
@@ -49,74 +50,98 @@ export default function ThemeToggle() {
       title={getTitle()}
       disabled={isLoading}
     >
-      {error ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="h-5 w-5 text-red-500"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-          />
-        </svg>
-      ) : theme === "light" ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="h-5 w-5 text-amber-500 transition-colors"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
-          />
-        </svg>
-      ) : theme === "dark" ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="h-5 w-5 text-accent transition-colors"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
-          />
-        </svg>
-      ) : (
-        <div className="relative flex items-center justify-center">
-          <svg
+      <AnimatePresence mode="wait" initial={false}>
+        {error ? (
+          <motion.svg
+            key="error"
+            initial={{ scale: 0.5, opacity: 0, rotate: -45 }}
+            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+            exit={{ scale: 0.5, opacity: 0, rotate: 45 }}
+            transition={{ duration: 0.2 }}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="h-5 w-5 text-slate-400 transition-colors"
+            className="h-5 w-5 text-red-500"
           >
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
-              d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
+              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
             />
-          </svg>
-          <div className="absolute -bottom-0.5 -right-0.5 flex h-2 w-2 items-center justify-center">
-            <div className={`h-1.5 w-1.5 rounded-full transition-colors ${
-              resolvedTheme === 'dark' ? 'bg-accent' : 'bg-amber-500'
-            }`} />
-          </div>
-        </div>
-      )}
+          </motion.svg>
+        ) : theme === "light" ? (
+          <motion.svg
+            key="light"
+            initial={{ scale: 0.5, opacity: 0, rotate: -45 }}
+            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+            exit={{ scale: 0.5, opacity: 0, rotate: 45 }}
+            transition={{ duration: 0.2 }}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="h-5 w-5 text-amber-500 transition-colors"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+            />
+          </motion.svg>
+        ) : theme === "dark" ? (
+          <motion.svg
+            key="dark"
+            initial={{ scale: 0.5, opacity: 0, rotate: -45 }}
+            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+            exit={{ scale: 0.5, opacity: 0, rotate: 45 }}
+            transition={{ duration: 0.2 }}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="h-5 w-5 text-accent transition-colors"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+            />
+          </motion.svg>
+        ) : (
+          <motion.div
+            key="system"
+            initial={{ scale: 0.5, opacity: 0, rotate: -45 }}
+            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+            exit={{ scale: 0.5, opacity: 0, rotate: 45 }}
+            transition={{ duration: 0.2 }}
+            className="relative flex items-center justify-center"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="h-5 w-5 text-slate-400 transition-colors"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
+              />
+            </svg>
+            <div className="absolute -bottom-0.5 -right-0.5 flex h-2 w-2 items-center justify-center">
+              <div className={`h-1.5 w-1.5 rounded-full transition-colors ${
+                resolvedTheme === 'dark' ? 'bg-accent' : 'bg-amber-500'
+              }`} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </button>
   );
 }
diff --git a/frontend/src/lib/multisig-context.tsx b/frontend/src/lib/multisig-context.tsx
@@ -122,6 +122,8 @@ export function MultisigProvider({ children, networkPassphrase }: MultisigProvid
       return;
     }
 
+    const previousTransaction = { ...transaction, signers: [...transaction.signers] };
+
     try {
       setIsLoading(true);
       clearError();
@@ -136,6 +138,12 @@ export function MultisigProvider({ children, networkPassphrase }: MultisigProvid
         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));
       
@@ -164,6 +172,8 @@ export function MultisigProvider({ children, networkPassphrase }: MultisigProvid
       }
 
     } catch (err) {
+      // Revert optimistic update
+      setTransactionSafe(previousTransaction);
       const errorMessage = err instanceof Error ? err.message : "Failed to sign transaction";
       setError(errorMessage);
       console.error("Signing error:", err);
diff --git a/frontend/src/lib/theme-context.test.tsx b/frontend/src/lib/theme-context.test.tsx
@@ -193,13 +193,13 @@ describe("Theme Context", () => {
   });
 
   describe("Error Handling", () => {
-    it("handles localStorage errors gracefully", async () => {
+    it("handles localStorage errors gracefully and reverts optimistic updates", async () => {
       const mockSetItem = globalThis.localStorage.setItem as jest.Mock;
       mockSetItem.mockImplementation(() => {
         throw new Error("Storage error");
       });
 
-      renderWithThemeProvider();
+      renderWithThemeProvider({ defaultTheme: "system" });
 
       await waitFor(() => {
         expect(screen.getByTestId("is-mounted")).toHaveTextContent("true");
@@ -209,6 +209,8 @@ describe("Theme Context", () => {
 
       await waitFor(() => {
         expect(screen.getByTestId("error")).toHaveTextContent("Storage error");
+        // Theme should be reverted to the previous state (system)
+        expect(screen.getByTestId("theme")).toHaveTextContent("system");
       });
     });
 
diff --git a/frontend/src/lib/theme-context.tsx b/frontend/src/lib/theme-context.tsx
@@ -45,8 +45,10 @@ export function ThemeProvider({
   }, []);
 
   const setTheme = useCallback((newTheme: ThemeMode) => {
+    const previousTheme = theme;
+    const previousResolved = resolvedTheme;
+
     try {
-      setIsLoading(true);
       setThemeState(newTheme);
       
       if (typeof globalThis !== "undefined" && globalThis.window) {
@@ -69,13 +71,21 @@ export function ThemeProvider({
       
       setError(null);
     } catch (err) {
+      // Revert optimistic update
+      setThemeState(previousTheme !== undefined ? previousTheme : defaultTheme);
+      if (previousResolved) {
+        setResolvedTheme(previousResolved);
+        if (typeof globalThis !== "undefined" && globalThis.window) {
+          globalThis.document.documentElement.classList.remove("light", "dark");
+          globalThis.document.documentElement.classList.add(previousResolved);
+        }
+      }
+      
       const errorMessage = err instanceof Error ? err.message : "Failed to set theme";
       setError(errorMessage);
       console.error("Theme setting error:", err);
-    } finally {
-      setIsLoading(false);
     }
-  }, [storageKey]);
+  }, [storageKey, theme, resolvedTheme, defaultTheme]);
 
   const toggleTheme = useCallback(() => {
     const themes: ThemeMode[] = ["light", "dark", "system"];
diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo
