From f2dd31bfa415706ba927fd43dc84640420bfd2fc Mon Sep 17 00:00:00 2001 From: faithorji Date: Fri, 24 Apr 2026 03:47:26 +0100 Subject: [PATCH] frontend: implement framer-motion animations, optimistic updates, refactor onboarding state, add dark mode tests - Implement framer-motion animations for Real-time Balance Sync (#655) - Enable optimistic updates in Real-time Balance Sync (#658) - Refactor state logic for Onboarding Progress Tracker to use useReducer (#659) - Add unit tests for Dark Mode Theme Engine (#651) --- frontend/package-lock.json | 3 +- frontend/src/app/pay/[id]/page.tsx | 16 +- .../components/OnboardingProgressTracker.tsx | 65 +++- frontend/src/components/ThemeToggle.test.tsx | 341 +----------------- .../src/lib/checkout-balance-sync.test.ts | 36 ++ frontend/src/lib/theme-context.test.tsx | 278 ++++++++++++-- frontend/src/lib/theme-performance.test.ts | 81 +++++ frontend/tsconfig.tsbuildinfo | 2 +- 8 files changed, 437 insertions(+), 385 deletions(-) create mode 100644 frontend/src/lib/theme-performance.test.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8a9a01c1..71bf9c92 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10425,8 +10425,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz", "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/es-object-atoms": { "version": "1.1.1", diff --git a/frontend/src/app/pay/[id]/page.tsx b/frontend/src/app/pay/[id]/page.tsx index 964bf6b0..43f3a117 100644 --- a/frontend/src/app/pay/[id]/page.tsx +++ b/frontend/src/app/pay/[id]/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useRef, useState } from "react"; +import { motion } from "framer-motion"; import Image from "next/image"; import { useParams, useRouter } from "next/navigation"; import { useLocale, useTranslations } from "next-intl"; @@ -262,7 +263,10 @@ export default function PaymentPage() { useEffect(() => { if (!walletPublicKey) return; if (didWalletAccountSwitch(previousWalletPublicKey.current, walletPublicKey)) { - toast.info("Wallet account switched. Checkout balances updated."); + // Optimistic update: clear balances immediately when wallet switches + setWalletBalances([]); + setSortedSourceAssets([]); + toast.info("Wallet account switched. Updating balances..."); } previousWalletPublicKey.current = walletPublicKey; }, [walletPublicKey]); @@ -501,7 +505,13 @@ export default function PaymentPage() { {sortedSourceAssets.length > 0 && (
-
+