feat(frontend): make PaymentSuccessAnimation RSC-ready, localized, and lighter

Splits PaymentSuccessAnimation into a server-safe wrapper (PaymentSuccessAnimation.tsx)
and the interactive implementation (PaymentSuccessAnimationClient.tsx), so the
"use client" boundary sits at the animation itself rather than forcing every
importer into client-only code (#1175).

Adds PaymentSuccessSkeleton as the next/dynamic loading fallback, replacing the
bare Suspense fallback={null} with a real placeholder while the client bundle
streams in (#1176).

Adds real payment/common translations to en/es/pt messages, replacing the
hardcoded English fallback strings the component previously fell back to (#1177).

Migrates the animation from framer-motion to the lighter motion/react package and
removes the unused confetti and react-confetti dependencies, which were never
imported anywhere in the codebase (#1178).

Also fixes a real bug found while touching this component: usePrefersReducedMotion
computed its initial state via useEffect, so the confetti-trigger effect (which
runs in the same mount commit) always saw the stale default before the OS
preference loaded, meaning reduced-motion users still got a confetti burst on
first render. Switched to a lazy useState initializer that reads matchMedia
synchronously.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Nanle-code

frontend/messages/en.json

@@ -595,6 +595,7 @@
     "good": "Good",
     "fair": "Fair",
     "poor": "Poor"
+  },
   "darkModeTheme": {
     "loading": "Loading theme settings",
     "errorCleared": "Error cleared. Attempting to toggle theme.",
@@ -685,5 +686,21 @@
     "emptyAllocation": "No allocation data available yet.",
     "emptyAssets": "No portfolio assets available yet.",
     "emptyHistory": "No performance history available yet."
+  },
+  "payment": {
+    "successTitle": "Payment Successful!",
+    "successMessage": "Your payment has been processed successfully. The transaction is now confirmed on the Stellar network.",
+    "amountReceived": "Amount Received",
+    "transactionId": "Transaction ID",
+    "successAnnounce": "Payment successful! {amount} {asset} has been received.",
+    "networkConfirmed": "Payment confirmed on the Stellar network.",
+    "dismissing": "Processing…",
+    "optimisticNote": "Transaction submitted — awaiting network confirmation.",
+    "successHint": "Press Escape or the close button to dismiss this message."
+  },
+  "common": {
+    "close": "Close success animation",
+    "continue": "Continue",
+    "error": "Something went wrong. Please try again."
   }
 }

frontend/messages/es.json

@@ -664,5 +664,21 @@
     "emptyAllocation": "Todavia no hay datos de asignacion.",
     "emptyAssets": "Todavia no hay activos en el portafolio.",
     "emptyHistory": "Todavia no hay historial de rendimiento."
+  },
+  "payment": {
+    "successTitle": "¡Pago exitoso!",
+    "successMessage": "Tu pago se ha procesado correctamente. La transacción ya está confirmada en la red Stellar.",
+    "amountReceived": "Importe recibido",
+    "transactionId": "ID de transacción",
+    "successAnnounce": "¡Pago exitoso! Se han recibido {amount} {asset}.",
+    "networkConfirmed": "Pago confirmado en la red Stellar.",
+    "dismissing": "Procesando…",
+    "optimisticNote": "Transacción enviada, esperando confirmación de la red.",
+    "successHint": "Presiona Escape o el botón de cerrar para descartar este mensaje."
+  },
+  "common": {
+    "close": "Cerrar animación de éxito",
+    "continue": "Continuar",
+    "error": "Algo salió mal. Inténtalo de nuevo."
   }
 }

frontend/messages/pt.json

@@ -664,5 +664,21 @@
     "emptyAllocation": "Ainda nao ha dados de alocacao.",
     "emptyAssets": "Ainda nao ha ativos no portafolio.",
     "emptyHistory": "Ainda nao ha historico de desempenho."
+  },
+  "payment": {
+    "successTitle": "Pagamento realizado com sucesso!",
+    "successMessage": "Seu pagamento foi processado com sucesso. A transação já está confirmada na rede Stellar.",
+    "amountReceived": "Valor recebido",
+    "transactionId": "ID da transação",
+    "successAnnounce": "Pagamento realizado com sucesso! {amount} {asset} foram recebidos.",
+    "networkConfirmed": "Pagamento confirmado na rede Stellar.",
+    "dismissing": "Processando…",
+    "optimisticNote": "Transação enviada — aguardando confirmação da rede.",
+    "successHint": "Pressione Esc ou o botão fechar para dispensar esta mensagem."
+  },
+  "common": {
+    "close": "Fechar animação de sucesso",
+    "continue": "Continuar",
+    "error": "Algo deu errado. Tente novamente."
   }
 }