feat: implement SEP-24 deposit and withdrawal wizard with state manag…

[muhsar27]

…ement and theme support

Close #292

Listed directory ignition-pay-frontend
Viewed README.md:1-52
Searched for "TODO"

Implementation Summary (Markdown)

Below is a concise markdown document summarizing the recent changes, the current state of the project, and next steps.

---

Ignition Pay Frontend – Recent Changes

1. Interactive Flow Enhancements

• Timeout Logic – Added INTERACTIVE_TIMEOUT_MS (2 min) handling in Sep24Wizard.tsx.
• Error UI – Displays a user‑friendly error message with a Retry button when the interactive step stalls or the URL is unavailable.
• Iframe Rendering – Properly embeds the interactive URL, clears the timeout on load, and handles load errors.

2. Utilities

• Created utils/errorUtils.ts with:

  export function createUserError(message: string): string {
    return `Error: ${message}`;
  }
  export function isTimeoutError(error: unknown): boolean { … }

3. Theme Toggle Component

• Removed duplicate simple ThemeToggle export that caused “Multiple exports with the same name” errors.
• The remaining toggle implementation (the full-featured version) remains unchanged and compiles correctly.

4. useTheme Hook

• Re‑implemented hooks/use-theme.ts from scratch:
  • Correct imports and generic types.
  • Proper initialization from stored theme & contrast.
  • System‑theme matchMedia handling with cleanup.
  • Exported helpers: setMode, setContrast, toggle, and derived booleans (isDark, isLight, etc.).

5. Test Suite Execution

• Ran npm install (with PowerShell execution‑policy bypass) and executed npm test.
• Fixed the duplicate export and corrupted useTheme implementation, eliminating the previous build errors.

---

Current Project State

Area	Status
Interactive Flow (Sep24Wizard)	Implemented timeout & error UI – ready for manual testing.
Theme Toggle Component	Duplicate removed – only one export remains.
useTheme Hook	Clean, functional implementation; no syntax errors reported.
Test Suite	All version‑utility tests pass. Accessibility test still reports 0 tests (no test cases defined) but no transformation errors now.
Build Tools	npm test runs with PowerShell bypass; jest not required (project uses vitest).

---

Next Steps / Suggested Actions

1. Manual UI Verification – Open the app (npm run dev) and walk through the SEP‑24 interactive flow to confirm the timeout/error handling works as intended.
2. Add Accessibility Test Cases – tests/accessibility.test.tsx currently contains no test definitions. Adding at least one test will make the suite fully useful.
3. Run Full Test Suite – Execute npm run test:a11y (or vitest run) to ensure all future tests pass.
4. Commit & Push – Once verified, commit the changes and push to the repository.

---

Feel free to let me know if you need any additional documentation, further code tweaks, or assistance with running the UI tests.

[drips-wave]

@muhsar27 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits