feat: add dedicated TopUpResult page for payment return flow

Replace toast-based payment return with animated result page showing pending/success/failed/timeout states. Extract shared Spinner, AnimatedCheckmark and AnimatedCrossmark components. Add sessionStorage persistence with validation and TTL for cross-redirect payment data. Unify ProtectedRoute with withLayout prop, add aria-live accessibility.
2026-07-28 09:33:46 +00:00 · 2026-03-09 03:58:40 +03:00
parent d7b1ff1052
commit b59122818c
14 changed files with 608 additions and 130 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ const PurchaseSuccess = lazy(() => import('./pages/PurchaseSuccess'));
 const AutoLogin = lazy(() => import('./pages/AutoLogin'));
 const TopUpMethodSelect = lazy(() => import('./pages/TopUpMethodSelect'));
 const TopUpAmount = lazy(() => import('./pages/TopUpAmount'));
+const TopUpResult = lazy(() => import('./pages/TopUpResult'));
 const ConnectedAccounts = lazy(() => import('./pages/ConnectedAccounts'));
 const LinkTelegramCallback = lazy(() => import('./pages/LinkTelegramCallback'));
 const MergeAccounts = lazy(() => import('./pages/MergeAccounts'));
@@ -112,7 +113,13 @@ const AdminLandings = lazy(() => import('./pages/AdminLandings'));
 const AdminLandingEditor = lazy(() => import('./pages/AdminLandingEditor'));
 const AdminLandingStats = lazy(() => import('./pages/AdminLandingStats'));

-function ProtectedRoute({ children }: { children: React.ReactNode }) {
+function ProtectedRoute({
+  children,
+  withLayout = true,
+}: {
+  children: React.ReactNode;
+  withLayout?: boolean;
+}) {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const isLoading = useAuthStore((state) => state.isLoading);
  const location = useLocation();
@@ -122,12 +129,11 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
  }

  if (!isAuthenticated) {
-    // Сохраняем текущий URL для возврата после авторизации
    saveReturnUrl();
    return <Navigate to="/login" replace state={{ from: location.pathname }} />;
  }

-  return <Layout>{children}</Layout>;
+  return withLayout ? <Layout>{children}</Layout> : <>{children}</>;
 }

 function AdminRoute({ children }: { children: React.ReactNode }) {
@@ -141,7 +147,6 @@ function AdminRoute({ children }: { children: React.ReactNode }) {
  }

  if (!isAuthenticated) {
-    // Сохраняем текущий URL для возврата после авторизации
    saveReturnUrl();
    return <Navigate to="/login" replace state={{ from: location.pathname }} />;
  }
@@ -283,6 +288,18 @@ function App() {
            </ProtectedRoute>
          }
        />
+        <Route
+          path="/balance/top-up/result"
+          element={
+            <ProtectedRoute withLayout={false}>
+              <ErrorBoundary level="app">
+                <LazyPage>
+                  <TopUpResult />
+                </LazyPage>
+              </ErrorBoundary>
+            </ProtectedRoute>
+          }
+        />
        <Route
          path="/balance/top-up/:methodId"
          element={
--- a/src/api/balance.ts
+++ b/src/api/balance.ts
@@ -109,7 +109,7 @@ export const balanceApi = {
  // Get specific pending payment details
  getPendingPayment: async (method: string, paymentId: number): Promise<PendingPayment> => {
    const response = await apiClient.get<PendingPayment>(
-      `/cabinet/balance/pending-payments/${method}/${paymentId}`,
+      `/cabinet/balance/pending-payments/${encodeURIComponent(method)}/${encodeURIComponent(paymentId)}`,
    );
    return response.data;
  },
@@ -117,7 +117,7 @@ export const balanceApi = {
  // Manually check payment status
  checkPaymentStatus: async (method: string, paymentId: number): Promise<ManualCheckResponse> => {
    const response = await apiClient.post<ManualCheckResponse>(
-      `/cabinet/balance/pending-payments/${method}/${paymentId}/check`,
+      `/cabinet/balance/pending-payments/${encodeURIComponent(method)}/${encodeURIComponent(paymentId)}/check`,
    );
    return response.data;
  },
--- a/src/components/ui/AnimatedCheckmark.tsx
+++ b/src/components/ui/AnimatedCheckmark.tsx
@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export function AnimatedCheckmark({ className }: { className?: string }) {
+  return (
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+      className={cn(
+        'flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10',
+        className,
+      )}
+    >
+      <motion.svg
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.3 }}
+        className="h-10 w-10 text-success-500"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2.5}
+        aria-hidden="true"
+      >
+        <motion.path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M5 13l4 4L19 7"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+        />
+      </motion.svg>
+    </motion.div>
+  );
+}
--- a/src/components/ui/AnimatedCrossmark.tsx
+++ b/src/components/ui/AnimatedCrossmark.tsx
@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export function AnimatedCrossmark({ className }: { className?: string }) {
+  return (
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+      className={cn(
+        'flex h-20 w-20 items-center justify-center rounded-full bg-error-500/10',
+        className,
+      )}
+    >
+      <motion.svg
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0.3 }}
+        className="h-10 w-10 text-error-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+        aria-hidden="true"
+      >
+        <motion.path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M6 18L18 6M6 6l12 12"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.3, delay: 0.3 }}
+        />
+      </motion.svg>
+    </motion.div>
+  );
+}
--- a/src/components/ui/Spinner.tsx
+++ b/src/components/ui/Spinner.tsx
@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+
+export function Spinner({ className }: { className?: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      role="status"
+      aria-label={t('common.loading')}
+      className={cn(
+        'h-8 w-8 animate-spin rounded-full border-2 border-dark-600 border-t-accent-500',
+        className,
+      )}
+    />
+  );
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -687,6 +687,19 @@
    "paymentSuccess": {
      "title": "Payment Successful",
      "message": "Your balance has been topped up successfully. The funds are now available."
+    },
+    "topUpResult": {
+      "awaitingPayment": "Awaiting Payment",
+      "awaitingPaymentDesc": "We are waiting for your payment confirmation. This may take a few minutes.",
+      "topUpAmount": "Top-up amount",
+      "success": "Balance Topped Up!",
+      "successDesc": "Your balance has been topped up successfully. The funds are now available.",
+      "failed": "Payment Failed",
+      "failedDesc": "Unfortunately, the payment was not completed. Please try again or choose a different payment method.",
+      "timeout": "Taking Longer Than Expected",
+      "timeoutDesc": "Payment processing is taking longer than usual. You can try checking the status again.",
+      "goToBalance": "Go to Balance",
+      "tryAgain": "Try Again"
    }
  },
  "referral": {
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -532,6 +532,19 @@
    "paymentSuccess": {
      "title": "پرداخت موفق",
      "message": "موجودی شما با موفقیت شارژ شد. وجوه اکنون در دسترس است."
+    },
+    "topUpResult": {
+      "awaitingPayment": "در انتظار پرداخت",
+      "awaitingPaymentDesc": "ما منتظر تأیید پرداخت شما هستیم. این ممکن است چند دقیقه طول بکشد.",
+      "topUpAmount": "مبلغ شارژ",
+      "success": "شارژ موفق!",
+      "successDesc": "موجودی شما با موفقیت شارژ شد. وجوه اکنون در دسترس است.",
+      "failed": "پرداخت ناموفق",
+      "failedDesc": "متأسفانه پرداخت تکمیل نشد. لطفاً دوباره تلاش کنید یا روش پرداخت دیگری انتخاب کنید.",
+      "timeout": "بیشتر از حد معمول طول کشید",
+      "timeoutDesc": "پردازش پرداخت بیشتر از حد معمول طول می‌کشد. می‌توانید دوباره وضعیت را بررسی کنید.",
+      "goToBalance": "مشاهده موجودی",
+      "tryAgain": "تلاش مجدد"
    }
  },
  "referral": {
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -715,6 +715,19 @@
    "paymentSuccess": {
      "title": "Оплата прошла успешно",
      "message": "Ваш баланс успешно пополнен. Средства уже доступны."
+    },
+    "topUpResult": {
+      "awaitingPayment": "Ожидание оплаты",
+      "awaitingPaymentDesc": "Мы ожидаем подтверждение вашего платежа. Это может занять несколько минут.",
+      "topUpAmount": "Сумма пополнения",
+      "success": "Баланс пополнен!",
+      "successDesc": "Ваш баланс успешно пополнен. Средства уже доступны.",
+      "failed": "Оплата не прошла",
+      "failedDesc": "К сожалению, платёж не был завершён. Попробуйте ещё раз или выберите другой способ оплаты.",
+      "timeout": "Дольше, чем обычно",
+      "timeoutDesc": "Обработка платежа занимает больше времени. Вы можете проверить статус ещё раз.",
+      "goToBalance": "Перейти к балансу",
+      "tryAgain": "Попробовать снова"
    }
  },
  "referral": {
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -532,6 +532,19 @@
    "paymentSuccess": {
      "title": "支付成功",
      "message": "您的余额已成功充值，资金现已可用。"
+    },
+    "topUpResult": {
+      "awaitingPayment": "等待付款",
+      "awaitingPaymentDesc": "我们正在等待您的付款确认。这可能需要几分钟。",
+      "topUpAmount": "充值金额",
+      "success": "充值成功！",
+      "successDesc": "您的余额已成功充值，资金现已可用。",
+      "failed": "付款失败",
+      "failedDesc": "很遗憾，付款未完成。请重试或选择其他付款方式。",
+      "timeout": "处理时间较长",
+      "timeoutDesc": "付款处理时间比平时长。您可以再次检查状态。",
+      "goToBalance": "查看余额",
+      "tryAgain": "重试"
    }
  },
  "referral": {
--- a/src/pages/Balance.tsx
+++ b/src/pages/Balance.tsx
@@ -8,7 +8,6 @@ import { useAuthStore } from '../store/auth';
 import { balanceApi } from '../api/balance';
 import { useCurrency } from '../hooks/useCurrency';
 import { API } from '../config/constants';
-import { useToast } from '../components/Toast';
 import type { PaginatedResponse, Transaction } from '../types';

 import { Card } from '@/components/data-display/Card';
@@ -45,7 +44,6 @@ export default function Balance() {
  const { formatAmount, currencySymbol } = useCurrency();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
-  const { showToast } = useToast();
  const paymentHandledRef = useRef(false);

  // Fetch balance from API
@@ -72,25 +70,17 @@ export default function Balance() {
      paymentStatus === 'completed' ||
      searchParams.get('success') === 'true';

+    const isFailed =
+      paymentStatus === 'failed' || paymentStatus === 'error' || paymentStatus === 'canceled';
+
    if (isSuccess) {
      paymentHandledRef.current = true;
-
-      refetchBalance();
-      refreshUser();
-      queryClient.invalidateQueries({ queryKey: ['transactions'] });
-      queryClient.invalidateQueries({ queryKey: ['subscription'] });
-      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
-
-      showToast({
-        type: 'success',
-        title: t('balance.paymentSuccess.title'),
-        message: t('balance.paymentSuccess.message'),
-        duration: 6000,
-      });
-
-      navigate('/balance', { replace: true });
+      navigate('/balance/top-up/result?status=success', { replace: true });
+    } else if (isFailed) {
+      paymentHandledRef.current = true;
+      navigate('/balance/top-up/result?status=failed', { replace: true });
    }
-  }, [searchParams, navigate, refetchBalance, refreshUser, queryClient, showToast, t]);
+  }, [searchParams, navigate]);

  const [promocode, setPromocode] = useState('');
  const [promocodeLoading, setPromocodeLoading] = useState(false);
--- a/src/pages/PurchaseSuccess.tsx
+++ b/src/pages/PurchaseSuccess.tsx
@@ -8,6 +8,9 @@ import { landingApi } from '../api/landings';
 import { authApi } from '../api/auth';
 import { useAuthStore } from '../store/auth';
 import { copyToClipboard } from '../utils/clipboard';
+import { Spinner } from '@/components/ui/Spinner';
+import { AnimatedCheckmark } from '@/components/ui/AnimatedCheckmark';
+import { AnimatedCrossmark } from '@/components/ui/AnimatedCrossmark';
 import { cn } from '../lib/utils';

 const MAX_POLL_MS = 10 * 60 * 1000; // 10 minutes
@@ -16,17 +19,6 @@ const MAX_POLL_MS = 10 * 60 * 1000; // 10 minutes
 // Sub-components
 // ============================================================

-function Spinner({ className }: { className?: string }) {
-  return (
-    <div
-      className={cn(
-        'animate-spin rounded-full border-2 border-dark-600 border-t-accent-500',
-        className,
-      )}
-    />
-  );
-}
-
 function PendingState() {
  const { t } = useTranslation();

@@ -135,33 +127,7 @@ function CabinetCredentialsState({
      animate={{ opacity: 1, scale: 1 }}
      className="flex flex-col items-center gap-6 text-center"
    >
-      {/* Animated checkmark */}
-      <motion.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
-        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
-      >
-        <motion.svg
-          initial={{ pathLength: 0, opacity: 0 }}
-          animate={{ pathLength: 1, opacity: 1 }}
-          transition={{ duration: 0.4, delay: 0.3 }}
-          className="h-10 w-10 text-success-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2.5}
-        >
-          <motion.path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-            initial={{ pathLength: 0 }}
-            animate={{ pathLength: 1 }}
-            transition={{ duration: 0.4, delay: 0.3 }}
-          />
-        </motion.svg>
-      </motion.div>
+      <AnimatedCheckmark />

      {/* Title */}
      <div>
@@ -267,33 +233,7 @@ function SuccessState({
      animate={{ opacity: 1, scale: 1 }}
      className="flex flex-col items-center gap-6 text-center"
    >
-      {/* Animated checkmark */}
-      <motion.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
-        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
-      >
-        <motion.svg
-          initial={{ pathLength: 0, opacity: 0 }}
-          animate={{ pathLength: 1, opacity: 1 }}
-          transition={{ duration: 0.4, delay: 0.3 }}
-          className="h-10 w-10 text-success-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2.5}
-        >
-          <motion.path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-            initial={{ pathLength: 0 }}
-            animate={{ pathLength: 1 }}
-            transition={{ duration: 0.4, delay: 0.3 }}
-          />
-        </motion.svg>
-      </motion.div>
+      <AnimatedCheckmark />

      {/* Title */}
      <div>
@@ -551,33 +491,7 @@ function GiftPendingActivationState({
      animate={{ opacity: 1, scale: 1 }}
      className="flex flex-col items-center gap-6 text-center"
    >
-      {/* Animated checkmark */}
-      <motion.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
-        className="flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10"
-      >
-        <motion.svg
-          initial={{ pathLength: 0, opacity: 0 }}
-          animate={{ pathLength: 1, opacity: 1 }}
-          transition={{ duration: 0.4, delay: 0.3 }}
-          className="h-10 w-10 text-success-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2.5}
-        >
-          <motion.path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-            initial={{ pathLength: 0 }}
-            animate={{ pathLength: 1 }}
-            transition={{ duration: 0.4, delay: 0.3 }}
-          />
-        </motion.svg>
-      </motion.div>
+      <AnimatedCheckmark />

      <div>
        <h1 className="text-xl font-bold text-dark-50">{t('landing.giftSentSuccess')}</h1>
@@ -631,17 +545,7 @@ function FailedState() {
      animate={{ opacity: 1, scale: 1 }}
      className="flex flex-col items-center gap-6 text-center"
    >
-      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-error-500/10">
-        <svg
-          className="h-10 w-10 text-error-400"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </div>
+      <AnimatedCrossmark />
      <div>
        <h1 className="text-xl font-bold text-dark-50">{t('landing.purchaseFailed')}</h1>
        <p className="mt-2 text-sm text-dark-400">{t('landing.purchaseFailedDesc')}</p>
@@ -785,7 +689,11 @@ export default function PurchaseSuccess() {

  return (
    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
-      <div className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8">
+      <div
+        className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8"
+        aria-live="polite"
+        aria-atomic="true"
+      >
        {isError ? (
          <FailedState />
        ) : isEmailSelfPurchase ? (
--- a/src/pages/TopUpAmount.tsx
+++ b/src/pages/TopUpAmount.tsx
@@ -12,6 +12,7 @@ import { useHaptic, usePlatform } from '@/platform';
 import { staggerContainer, staggerItem } from '@/components/motion/transitions';
 import type { PaymentMethod } from '../types';
 import BentoCard from '../components/ui/BentoCard';
+import { saveTopUpPendingInfo } from '../utils/topUpStorage';

 // Icons
 const StarIcon = () => (
@@ -202,6 +203,20 @@ export default function TopUpAmount() {
      const redirectUrl = data.payment_url || data.invoice_url;
      if (redirectUrl) {
        setPaymentUrl(redirectUrl);
+
+        // Save payment info for the result page
+        if (method && data.payment_id) {
+          const methodKey = method.id.toLowerCase().replace(/-/g, '_');
+          const displayName =
+            t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' }) || method.name;
+          saveTopUpPendingInfo({
+            amount_kopeks: data.amount_kopeks,
+            method_id: method.id,
+            method_name: displayName,
+            payment_id: data.payment_id,
+            created_at: Date.now(),
+          });
+        }
      }
    },
    onError: (err: unknown) => {
@@ -296,8 +311,8 @@ export default function TopUpAmount() {
      await navigator.clipboard.writeText(paymentUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.warn('Failed to copy:', e);
+    } catch {
+      // Clipboard write failed silently
    }
  };

--- a/src/pages/TopUpResult.tsx
+++ b/src/pages/TopUpResult.tsx
@@ -0,0 +1,342 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
+
+import { balanceApi } from '../api/balance';
+import { useAuthStore } from '../store/auth';
+import { useCurrency } from '../hooks/useCurrency';
+import { useHaptic } from '@/platform';
+import { Spinner } from '@/components/ui/Spinner';
+import { AnimatedCheckmark } from '@/components/ui/AnimatedCheckmark';
+import { AnimatedCrossmark } from '@/components/ui/AnimatedCrossmark';
+import { loadTopUpPendingInfo, clearTopUpPendingInfo } from '../utils/topUpStorage';
+
+// ── Constants ────────────────────────────────────────────────
+const MAX_POLL_MS = 10 * 60 * 1000; // 10 minutes
+const POLL_INTERVAL_MS = 3_000;
+
+// ── Sub-components ───────────────────────────────────────────
+
+function AmountDisplay({ amountKopeks, label }: { amountKopeks: number; label: string }) {
+  const { formatAmount, currencySymbol } = useCurrency();
+  const amountRubles = amountKopeks / 100;
+
+  return (
+    <div className="mt-4 rounded-xl bg-dark-800/50 px-6 py-4">
+      <p className="text-xs text-dark-400">{label}</p>
+      <p className="mt-1 text-2xl font-bold text-dark-50">
+        {formatAmount(amountRubles)} <span className="text-lg text-dark-400">{currencySymbol}</span>
+      </p>
+    </div>
+  );
+}
+
+function PendingState({ amountKopeks }: { amountKopeks: number | null }) {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <Spinner className="h-16 w-16 border-[3px]" />
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">
+          {t('balance.topUpResult.awaitingPayment')}
+        </h1>
+        <p className="mt-2 text-sm text-dark-400">{t('balance.topUpResult.awaitingPaymentDesc')}</p>
+      </div>
+      {amountKopeks != null && amountKopeks > 0 && (
+        <AmountDisplay amountKopeks={amountKopeks} label={t('balance.topUpResult.topUpAmount')} />
+      )}
+    </motion.div>
+  );
+}
+
+function SuccessState({ amountKopeks }: { amountKopeks: number | null }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleGoToBalance = useCallback(() => {
+    navigate('/balance', { replace: true });
+  }, [navigate]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <AnimatedCheckmark />
+
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('balance.topUpResult.success')}</h1>
+        <p className="mt-2 text-sm text-dark-400">{t('balance.topUpResult.successDesc')}</p>
+      </div>
+
+      {amountKopeks != null && amountKopeks > 0 && (
+        <AmountDisplay amountKopeks={amountKopeks} label={t('balance.topUpResult.topUpAmount')} />
+      )}
+
+      <button
+        type="button"
+        onClick={handleGoToBalance}
+        className="flex w-full items-center justify-center gap-2 rounded-xl bg-accent-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-400"
+      >
+        {t('balance.topUpResult.goToBalance')}
+      </button>
+    </motion.div>
+  );
+}
+
+function FailedState({ amountKopeks }: { amountKopeks: number | null }) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleTryAgain = useCallback(() => {
+    navigate('/balance', { replace: true });
+  }, [navigate]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <AnimatedCrossmark />
+
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('balance.topUpResult.failed')}</h1>
+        <p className="mt-2 text-sm text-dark-400">{t('balance.topUpResult.failedDesc')}</p>
+      </div>
+
+      {amountKopeks != null && amountKopeks > 0 && (
+        <AmountDisplay amountKopeks={amountKopeks} label={t('balance.topUpResult.topUpAmount')} />
+      )}
+
+      <button
+        type="button"
+        onClick={handleTryAgain}
+        className="flex w-full items-center justify-center gap-2 rounded-xl bg-dark-800/50 px-6 py-3 text-sm font-medium text-dark-200 transition-colors hover:bg-dark-700/50"
+      >
+        {t('balance.topUpResult.tryAgain')}
+      </button>
+    </motion.div>
+  );
+}
+
+function TimeoutState({ onRetry, onGoBack }: { onRetry: () => void; onGoBack: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-dark-800/50">
+        <svg
+          className="h-10 w-10 text-dark-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">{t('balance.topUpResult.timeout')}</h1>
+        <p className="mt-2 text-sm text-dark-400">{t('balance.topUpResult.timeoutDesc')}</p>
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <button
+          type="button"
+          onClick={onRetry}
+          className="w-full rounded-xl bg-accent-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-400"
+        >
+          {t('common.retry')}
+        </button>
+        <button
+          type="button"
+          onClick={onGoBack}
+          className="w-full rounded-xl bg-dark-800/50 px-6 py-3 text-sm font-medium text-dark-200 transition-colors hover:bg-dark-700/50"
+        >
+          {t('balance.topUpResult.goToBalance')}
+        </button>
+      </div>
+    </motion.div>
+  );
+}
+
+// ── Determine paid status from provider-specific status strings ──
+const PAID_STATUSES = new Set([
+  'succeeded',
+  'success',
+  'paid',
+  'paid_over',
+  'completed',
+  'confirmed',
+  'closed',
+]);
+
+const FAILED_STATUSES = new Set([
+  'fail',
+  'failed',
+  'error',
+  'canceled',
+  'cancelled',
+  'declined',
+  'expired',
+  'cancel',
+]);
+
+function isPaidStatus(status: string): boolean {
+  return PAID_STATUSES.has(status.toLowerCase());
+}
+
+function isFailedStatus(status: string): boolean {
+  return FAILED_STATUSES.has(status.toLowerCase());
+}
+
+// ── Main Component ───────────────────────────────────────────
+
+export default function TopUpResult() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+  const refreshUser = useAuthStore((state) => state.refreshUser);
+  const haptic = useHaptic();
+  const pollStart = useRef(Date.now());
+  const [pollTimedOut, setPollTimedOut] = useState(false);
+  const hapticFiredRef = useRef(false);
+  const cleanedUpRef = useRef(false);
+
+  // Load saved payment info from sessionStorage (once on mount)
+  const [pendingInfo] = useState(() => loadTopUpPendingInfo());
+
+  // Detect if user arrived via redirect with success param (no polling needed)
+  const redirectStatus = searchParams.get('status') || searchParams.get('payment');
+  const isRedirectSuccess = redirectStatus
+    ? isPaidStatus(redirectStatus)
+    : searchParams.get('success') === 'true';
+  const isRedirectFailed = redirectStatus ? isFailedStatus(redirectStatus) : false;
+
+  // Determine if we can poll (need method + numeric payment_id)
+  const parsedPaymentId = pendingInfo?.payment_id ? parseInt(pendingInfo.payment_id, 10) : NaN;
+  const canPoll =
+    !!(pendingInfo?.method_id && !isNaN(parsedPaymentId)) &&
+    !isRedirectSuccess &&
+    !isRedirectFailed;
+
+  // Poll payment status
+  const { data: paymentStatus, refetch } = useQuery({
+    queryKey: ['topup-status', pendingInfo?.method_id, parsedPaymentId],
+    queryFn: () => balanceApi.getPendingPayment(pendingInfo!.method_id, parsedPaymentId),
+    enabled: canPoll && !pollTimedOut,
+    refetchInterval: (query) => {
+      const payment = query.state.data;
+      if (!payment) return POLL_INTERVAL_MS;
+
+      // Stop polling if paid or failed
+      if (payment.is_paid || isPaidStatus(payment.status) || isFailedStatus(payment.status)) {
+        return false;
+      }
+
+      // Check timeout
+      if (Date.now() - pollStart.current > MAX_POLL_MS) {
+        setPollTimedOut(true);
+        return false;
+      }
+
+      return POLL_INTERVAL_MS;
+    },
+    retry: 2,
+  });
+
+  const handleRetryPoll = useCallback(() => {
+    pollStart.current = Date.now();
+    setPollTimedOut(false);
+    refetch();
+  }, [setPollTimedOut, refetch]);
+
+  const handleGoBack = useCallback(() => {
+    clearTopUpPendingInfo();
+    navigate('/balance', { replace: true });
+  }, [navigate]);
+
+  // Redirect to balance if no data at all
+  useEffect(() => {
+    if (!pendingInfo && !redirectStatus) {
+      navigate('/balance', { replace: true });
+    }
+  }, [pendingInfo, redirectStatus, navigate]);
+
+  // Determine current visual state
+  const amountKopeks = paymentStatus?.amount_kopeks ?? pendingInfo?.amount_kopeks ?? null;
+
+  const resolvedPaid =
+    isRedirectSuccess ||
+    paymentStatus?.is_paid ||
+    (paymentStatus && isPaidStatus(paymentStatus.status));
+
+  const resolvedFailed =
+    isRedirectFailed || (paymentStatus && isFailedStatus(paymentStatus.status));
+
+  // Clean up sessionStorage and invalidate queries when payment resolves
+  useEffect(() => {
+    if (cleanedUpRef.current) return;
+    if (resolvedPaid) {
+      cleanedUpRef.current = true;
+      clearTopUpPendingInfo();
+      queryClient.invalidateQueries({ queryKey: ['balance'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
+      refreshUser();
+    } else if (resolvedFailed) {
+      cleanedUpRef.current = true;
+      clearTopUpPendingInfo();
+    }
+  }, [resolvedPaid, resolvedFailed, queryClient, refreshUser]);
+
+  // Haptic feedback on status resolution (fire once)
+  useEffect(() => {
+    if (hapticFiredRef.current) return;
+    if (resolvedPaid) {
+      hapticFiredRef.current = true;
+      haptic.notification('success');
+    } else if (resolvedFailed) {
+      hapticFiredRef.current = true;
+      haptic.notification('error');
+    }
+  }, [resolvedPaid, resolvedFailed, haptic]);
+
+  return (
+    <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
+      <div
+        className="w-full max-w-md rounded-2xl border border-dark-800/50 bg-dark-900/50 p-8"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {resolvedPaid ? (
+          <SuccessState amountKopeks={amountKopeks} />
+        ) : resolvedFailed ? (
+          <FailedState amountKopeks={amountKopeks} />
+        ) : pollTimedOut ? (
+          <TimeoutState onRetry={handleRetryPoll} onGoBack={handleGoBack} />
+        ) : (
+          <PendingState amountKopeks={amountKopeks} />
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/utils/topUpStorage.ts
+++ b/src/utils/topUpStorage.ts
@@ -0,0 +1,63 @@
+const STORAGE_KEY = 'topup_pending_payment';
+const MAX_AGE_MS = 30 * 60 * 1000; // 30 minutes
+
+export interface TopUpPendingInfo {
+  amount_kopeks: number;
+  method_id: string;
+  method_name: string;
+  payment_id: string;
+  created_at: number; // Date.now()
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+export function saveTopUpPendingInfo(info: TopUpPendingInfo) {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(info));
+  } catch {
+    // sessionStorage unavailable (private mode, quota, etc.)
+  }
+}
+
+export function loadTopUpPendingInfo(): TopUpPendingInfo | null {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed: unknown = JSON.parse(raw);
+    if (
+      !isRecord(parsed) ||
+      typeof parsed.amount_kopeks !== 'number' ||
+      typeof parsed.method_id !== 'string' ||
+      typeof parsed.method_name !== 'string' ||
+      typeof parsed.payment_id !== 'string' ||
+      typeof parsed.created_at !== 'number' ||
+      parsed.amount_kopeks <= 0
+    ) {
+      return null;
+    }
+    // Discard stale entries
+    if (Date.now() - (parsed.created_at as number) > MAX_AGE_MS) {
+      clearTopUpPendingInfo();
+      return null;
+    }
+    return {
+      amount_kopeks: parsed.amount_kopeks as number,
+      method_id: parsed.method_id as string,
+      method_name: parsed.method_name as string,
+      payment_id: parsed.payment_id as string,
+      created_at: parsed.created_at as number,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function clearTopUpPendingInfo() {
+  try {
+    sessionStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // ignore
+  }
+}