refactor(frontend): improve code quality and maintainability

- Extract API error handling utility (utils/error-handling.ts)
  - Centralize error message extraction logic
  - Add type guards for API errors
  - Replace duplicated error handling across components

- Create reusable Toast component (components/Toast.tsx)
  - Extract toast notification logic from profile page
  - Support auto-dismiss functionality
  - Consistent styling with shared styles

- Extract form validation debouncing hook (hooks/useDebouncedValidation.ts)
  - Reusable debounced validation logic
  - Clean timeout management
  - Used in profile page for form validation

- Consolidate duplicate styles (styles/auth-form.ts)
  - Use shared style tokens instead of duplicating values
  - Reduce code duplication between auth-form and shared styles

- Extract loading state component (components/LoadingState.tsx)
  - Standardize loading UI across pages
  - Replace duplicated loading JSX patterns
  - Used in profile, exchange, and trades pages

- Fix useRequireAuth dependency array
  - Remove unnecessary hasPermission from dependencies
  - Add eslint-disable comment with explanation
  - Improve hook stability and performance

All frontend tests pass. Linting passes.

frontend/app/styles/auth-form.ts

@@ -1,12 +1,21 @@
 import { CSSProperties } from "react";
 
+// Import shared tokens and styles to avoid duplication
+// Note: We can't directly import tokens from shared.ts as it's not exported,
+// so we'll use the shared style objects where possible
+import {
+  layoutStyles,
+  cardStyles,
+  formStyles,
+  buttonStyles,
+  bannerStyles,
+  typographyStyles,
+} from "./shared";
+
 export const authFormStyles: Record<string, CSSProperties> = {
   main: {
+    ...layoutStyles.contentCentered,
     minHeight: "100vh",
-    background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
     padding: "1rem",
   },
   container: {
@@ -14,80 +23,41 @@ export const authFormStyles: Record<string, CSSProperties> = {
     maxWidth: "420px",
   },
   card: {
-    background: "rgba(255, 255, 255, 0.03)",
-    backdropFilter: "blur(10px)",
-    border: "1px solid rgba(255, 255, 255, 0.08)",
-    borderRadius: "24px",
+    ...cardStyles.card,
     padding: "3rem 2.5rem",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
   },
   header: {
     textAlign: "center" as const,
     marginBottom: "2.5rem",
   },
   title: {
-    fontFamily: "'Instrument Serif', Georgia, serif",
+    ...typographyStyles.pageTitle,
     fontSize: "2.5rem",
-    fontWeight: 400,
-    color: "#fff",
-    margin: 0,
-    letterSpacing: "-0.02em",
+    textAlign: "center" as const,
   },
   subtitle: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.5)",
-    marginTop: "0.5rem",
-    fontSize: "0.95rem",
+    ...typographyStyles.pageSubtitle,
+    textAlign: "center" as const,
   },
   form: {
-    display: "flex",
-    flexDirection: "column" as const,
+    ...formStyles.form,
     gap: "1.5rem",
   },
   field: {
-    display: "flex",
-    flexDirection: "column" as const,
-    gap: "0.5rem",
+    ...formStyles.field,
   },
   label: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.7)",
-    fontSize: "0.875rem",
-    fontWeight: 500,
+    ...formStyles.label,
   },
   input: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    padding: "0.875rem 1rem",
-    fontSize: "1rem",
-    background: "rgba(255, 255, 255, 0.05)",
-    border: "1px solid rgba(255, 255, 255, 0.1)",
-    borderRadius: "12px",
-    color: "#fff",
-    outline: "none",
-    transition: "border-color 0.2s, box-shadow 0.2s",
+    ...formStyles.input,
   },
   button: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
+    ...buttonStyles.primaryButton,
     marginTop: "0.5rem",
-    padding: "1rem",
-    fontSize: "1rem",
-    fontWeight: 600,
-    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
-    color: "#fff",
-    border: "none",
-    borderRadius: "12px",
-    cursor: "pointer",
-    transition: "transform 0.2s, box-shadow 0.2s",
-    boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
   },
   error: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    padding: "0.875rem 1rem",
-    background: "rgba(239, 68, 68, 0.1)",
-    border: "1px solid rgba(239, 68, 68, 0.3)",
-    borderRadius: "12px",
-    color: "#fca5a5",
-    fontSize: "0.875rem",
+    ...bannerStyles.errorBanner,
     textAlign: "center" as const,
   },
   footer: {