feat: add waiting-for-tick screen for pending transactions on tx page (#424)

alexmf91 · sallymoc · web-flow · commit 28b8b31ec46d · 2026-02-20T14:47:53.000+01:00
* feat: implement waiting for tick on tx page

* refactor: update tick watcher to use last processed tick query and adjust polling logic

* fix(tx): stop polling after tick reached, refine UI and clean up

- Stop polling once target tick is reached
- Refine waiting screen UI and time formatting
- Distinguish invalid format from not-found errors
- Remove unused locale keys and type export

* fix(tx): reset refetch state on navigation and limit error retries

- Reset hasRefetched when targetTick changes
- Stop polling after 5 consecutive errors and show error message

---------

Co-authored-by: sallymoc &lt;sallymoc.qubic@gmail.com&gt;
diff --git a/public/locales/ar/network-page.json b/public/locales/ar/network-page.json
@@ -57,6 +57,7 @@
   "hide": "إخفاء",
   "show": "عرض",
   "transactionNotFound": "المعاملة غير موجودة",
+  "invalidTransactionId": "معرّف المعاملة غير صالح. يرجى التحقق من المعرّف والمحاولة مرة أخرى.",
   "invalidAddressError": "تنسيق العنوان غير صحيح. يرجى التحقق من العنوان والمحاولة مرة أخرى.",
   "addressNotFoundError": "خطأ: لم نتمكن من العثور على العنوان الذي تبحث عنه. يرجى التحقق من العنوان والمحاولة مرة أخرى.",
   "loadingTransactionsError": "خطأ: حدث خطأ أثناء تحميل المعاملات. يرجى المحاولة مرة أخرى لاحقًا.",
@@ -177,5 +178,10 @@
   "matchingEntities": "النتائج المطابقة",
   "transactionsFound": "{{count}} معاملة",
   "showingMaxTransactions": "عرض آخر {{count}} معاملة",
-  "maxResultsHint": "النتائج محدودة بـ {{count}}. استخدم الفلاتر لتضييق نطاق القائمة."
+  "maxResultsHint": "النتائج محدودة بـ {{count}}. استخدم الفلاتر لتضييق نطاق القائمة.",
+  "waitingForTickTitle": "في انتظار معالجة التيك",
+  "waitingForTickDesc": "هذه المعاملة مجدولة للتيك {{targetTick}}. ستكون متاحة بمجرد وصول الشبكة إلى ذلك التيك.",
+  "targetTick": "التيك المستهدف",
+  "estimatedWait": "الوقت المقدر للانتظار",
+  "tickCheckFailed": "تعذر التحقق من حالة التك. يرجى المحاولة مرة أخرى لاحقًا."
 }
diff --git a/public/locales/de/network-page.json b/public/locales/de/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Ausblenden",
   "show": "Anzeigen",
   "transactionNotFound": "Transaktion nicht gefunden",
+  "invalidTransactionId": "Ungültige Transaktions-ID. Bitte überprüfen Sie die ID und versuchen Sie es erneut.",
   "invalidAddressError": "Das Adressformat ist ungültig. Bitte überprüfen Sie die Adresse und versuchen Sie es erneut.",
   "addressNotFoundError": "Fehler: Wir konnten die gesuchte Adresse nicht finden. Bitte überprüfen Sie die Adresse und versuchen Sie es erneut.",
   "loadingTransactionsError": "Fehler: Beim Laden der Transaktionen ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Übereinstimmende Ergebnisse",
   "transactionsFound": "{{count}} Transaktionen",
   "showingMaxTransactions": "Zeige die letzten {{count}} Transaktionen",
-  "maxResultsHint": "Ergebnisse sind auf {{count}} begrenzt. Verwenden Sie Filter, um die Liste einzugrenzen."
+  "maxResultsHint": "Ergebnisse sind auf {{count}} begrenzt. Verwenden Sie Filter, um die Liste einzugrenzen.",
+  "waitingForTickTitle": "Warten auf Verarbeitung des Ticks",
+  "waitingForTickDesc": "Diese Transaktion ist für Tick {{targetTick}} geplant. Sie wird verfügbar sein, sobald das Netzwerk diesen Tick erreicht.",
+  "targetTick": "Ziel-Tick",
+  "estimatedWait": "Geschätzte Wartezeit",
+  "tickCheckFailed": "Tick-Status konnte nicht überprüft werden. Bitte versuchen Sie es später erneut."
 }
diff --git a/public/locales/en/network-page.json b/public/locales/en/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Hide",
   "show": "Show",
   "transactionNotFound": "Transaction not found",
+  "invalidTransactionId": "Invalid ID format. Please check the transaction ID and try again.",
   "invalidAddressError": "The address format is invalid. Please check the address and try again.",
   "addressNotFoundError": "Error: We could not find the address you are looking for. Please check the address and try again.",
   "loadingTransactionsError": "Error: Something went wrong while loading transactions. Please try again later.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Matching Results",
   "transactionsFound": "{{count}} transactions",
   "showingMaxTransactions": "Showing the last {{count}} transactions",
-  "maxResultsHint": "Results are limited to {{count}}. Use filters to narrow down the list."
+  "maxResultsHint": "Results are limited to {{count}}. Use filters to narrow down the list.",
+  "waitingForTickTitle": "Waiting for tick to be processed",
+  "waitingForTickDesc": "This transaction is scheduled for tick {{targetTick}}. It will be available once the network reaches that tick.",
+  "targetTick": "Target Tick",
+  "estimatedWait": "Estimated wait",
+  "tickCheckFailed": "Unable to check tick status. Please try again later."
 }
diff --git a/public/locales/es/network-page.json b/public/locales/es/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Ocultar",
   "show": "Mostrar",
   "transactionNotFound": "Transacción no encontrada",
+  "invalidTransactionId": "ID de transacción inválido. Verifica la ID y vuelve a intentarlo.",
   "invalidAddressError": "El formato de la dirección no es válido. Verifica la dirección y vuelve a intentarlo.",
   "addressNotFoundError": "Error: No pudimos encontrar la dirección que estás buscando. Verifica la dirección y vuelve a intentarlo.",
   "loadingTransactionsError": "Error: Algo ha ido mal al cargar las transacciones. Por favor, inténtalo de nuevo más tarde.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Resultados coincidentes",
   "transactionsFound": "{{count}} transacciones",
   "showingMaxTransactions": "Mostrando las últimas {{count}} transacciones",
-  "maxResultsHint": "Los resultados están limitados a {{count}}. Use filtros para refinar la lista."
+  "maxResultsHint": "Los resultados están limitados a {{count}}. Use filtros para refinar la lista.",
+  "waitingForTickTitle": "Esperando a que el tick sea procesado",
+  "waitingForTickDesc": "Esta transacción está programada para el tick {{targetTick}}. Estará disponible una vez que la red alcance ese tick.",
+  "targetTick": "Tick objetivo",
+  "estimatedWait": "Tiempo estimado de espera",
+  "tickCheckFailed": "No se pudo verificar el estado del tick. Por favor, inténtelo de nuevo más tarde."
 }
diff --git a/public/locales/fr/network-page.json b/public/locales/fr/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Masquer",
   "show": "Afficher",
   "transactionNotFound": "Transaction non trouvée",
+  "invalidTransactionId": "ID de transaction invalide. Veuillez vérifier l'ID et réessayer.",
   "invalidAddressError": "Le format de l'adresse n'est pas valide. Veuillez vérifier l'adresse et réessayer.",
   "addressNotFoundError": "Erreur : Nous n'avons pas pu trouver l'adresse que vous recherchez. Veuillez vérifier l'adresse et réessayer.",
   "loadingTransactionsError": "Erreur : Quelque chose a mal tourné lors du chargement des transactions. Veuillez réessayer plus tard.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Résultats correspondants",
   "transactionsFound": "{{count}} transactions",
   "showingMaxTransactions": "Affichage des {{count}} dernières transactions",
-  "maxResultsHint": "Les résultats sont limités à {{count}}. Utilisez des filtres pour affiner la liste."
+  "maxResultsHint": "Les résultats sont limités à {{count}}. Utilisez des filtres pour affiner la liste.",
+  "waitingForTickTitle": "En attente du traitement du tick",
+  "waitingForTickDesc": "Cette transaction est prévue pour le tick {{targetTick}}. Elle sera disponible une fois que le réseau aura atteint ce tick.",
+  "targetTick": "Tick cible",
+  "estimatedWait": "Temps d'attente estimé",
+  "tickCheckFailed": "Impossible de vérifier le statut du tick. Veuillez réessayer plus tard."
 }
diff --git a/public/locales/ja/network-page.json b/public/locales/ja/network-page.json
@@ -57,6 +57,7 @@
   "hide": "隠す",
   "show": "表示する",
   "transactionNotFound": "トランザクションが見つかりません",
+  "invalidTransactionId": "トランザクションIDが無効です。IDを確認して、再度お試しください。",
   "invalidAddressError": "アドレス形式が無効です。アドレスを確認して、再度お試しください。",
   "addressNotFoundError": "エラー：探しているアドレスが見つかりませんでした。アドレスを確認して、再度お試しください。",
   "loadingTransactionsError": "エラー：トランザクションの読み込み中に問題が発生しました。後でもう一度試してください。",
@@ -177,5 +178,10 @@
   "matchingEntities": "一致する結果",
   "transactionsFound": "{{count}}件のトランザクション",
   "showingMaxTransactions": "最新{{count}}件のトランザクションを表示",
-  "maxResultsHint": "結果は{{count}}件に制限されています。フィルターを使用してリストを絞り込んでください。"
+  "maxResultsHint": "結果は{{count}}件に制限されています。フィルターを使用してリストを絞り込んでください。",
+  "waitingForTickTitle": "ティックの処理を待機中",
+  "waitingForTickDesc": "このトランザクションはティック{{targetTick}}に予定されています。ネットワークがそのティックに到達すると利用可能になります。",
+  "targetTick": "目標ティック",
+  "estimatedWait": "推定待ち時間",
+  "tickCheckFailed": "ティックの状態を確認できませんでした。後でもう一度お試しください。"
 }
diff --git a/public/locales/nl/network-page.json b/public/locales/nl/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Verbergen",
   "show": "Tonen",
   "transactionNotFound": "Transactie niet gevonden",
+  "invalidTransactionId": "Ongeldig transactie-ID. Controleer de ID en probeer het opnieuw.",
   "invalidAddressError": "Het adresformaat is ongeldig. Controleer het adres en probeer het opnieuw.",
   "addressNotFoundError": "Fout: We konden het adres dat je zoekt niet vinden. Controleer het adres en probeer het opnieuw.",
   "loadingTransactionsError": "Fout: Er is iets misgegaan bij het laden van de transacties. Probeer het later opnieuw.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Overeenkomende resultaten",
   "transactionsFound": "{{count}} transacties",
   "showingMaxTransactions": "Toont de laatste {{count}} transacties",
-  "maxResultsHint": "Resultaten zijn beperkt tot {{count}}. Gebruik filters om de lijst te verfijnen."
+  "maxResultsHint": "Resultaten zijn beperkt tot {{count}}. Gebruik filters om de lijst te verfijnen.",
+  "waitingForTickTitle": "Wachten op verwerking van de tick",
+  "waitingForTickDesc": "Deze transactie is gepland voor tick {{targetTick}}. Deze wordt beschikbaar zodra het netwerk die tick bereikt.",
+  "targetTick": "Doeltick",
+  "estimatedWait": "Geschatte wachttijd",
+  "tickCheckFailed": "Kan tickstatus niet controleren. Probeer het later opnieuw."
 }
diff --git a/public/locales/pt/network-page.json b/public/locales/pt/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Esconder",
   "show": "Mostrar",
   "transactionNotFound": "Transação não encontrada",
+  "invalidTransactionId": "ID de transação inválido. Verifique o ID e tente novamente.",
   "invalidAddressError": "O formato do endereço é inválido. Verifique o endereço e tente novamente.",
   "addressNotFoundError": "Erro: Não conseguimos encontrar o endereço que você está procurando. Verifique o endereço e tente novamente.",
   "loadingTransactionsError": "Erro: Algo deu errado ao carregar as transações. Por favor, tente novamente mais tarde.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Resultados correspondentes",
   "transactionsFound": "{{count}} transações",
   "showingMaxTransactions": "Mostrando as últimas {{count}} transações",
-  "maxResultsHint": "Os resultados estão limitados a {{count}}. Use filtros para refinar a lista."
+  "maxResultsHint": "Os resultados estão limitados a {{count}}. Use filtros para refinar a lista.",
+  "waitingForTickTitle": "Aguardando o processamento do tick",
+  "waitingForTickDesc": "Esta transação está agendada para o tick {{targetTick}}. Ficará disponível assim que a rede atingir esse tick.",
+  "targetTick": "Tick alvo",
+  "estimatedWait": "Tempo estimado de espera",
+  "tickCheckFailed": "Não foi possível verificar o estado do tick. Por favor, tente novamente mais tarde."
 }
diff --git a/public/locales/ru/network-page.json b/public/locales/ru/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Скрыть",
   "show": "Показать",
   "transactionNotFound": "Транзакция не найдена",
+  "invalidTransactionId": "Недействительный ID транзакции. Пожалуйста, проверьте ID и попробуйте снова.",
   "invalidAddressError": "Недопустимый формат адреса. Пожалуйста, проверьте адрес и попробуйте снова.",
   "addressNotFoundError": "Ошибка: Мы не смогли найти адрес, который вы ищете. Пожалуйста, проверьте адрес и попробуйте снова.",
   "loadingTransactionsError": "Ошибка: Произошла ошибка при загрузке транзакций. Пожалуйста, попробуйте позже.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Совпадающие результаты",
   "transactionsFound": "{{count}} транзакций",
   "showingMaxTransactions": "Показаны последние {{count}} транзакций",
-  "maxResultsHint": "Результаты ограничены {{count}}. Используйте фильтры для уточнения списка."
+  "maxResultsHint": "Результаты ограничены {{count}}. Используйте фильтры для уточнения списка.",
+  "waitingForTickTitle": "Ожидание обработки тика",
+  "waitingForTickDesc": "Эта транзакция запланирована на тик {{targetTick}}. Она станет доступна, когда сеть достигнет этого тика.",
+  "targetTick": "Целевой тик",
+  "estimatedWait": "Ожидаемое время ожидания",
+  "tickCheckFailed": "Не удалось проверить статус тика. Пожалуйста, попробуйте позже."
 }
diff --git a/public/locales/tr/network-page.json b/public/locales/tr/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Gizle",
   "show": "Göster",
   "transactionNotFound": "İşlem bulunamadı",
+  "invalidTransactionId": "İşlem ID'si geçersiz. Lütfen ID'yi kontrol edin ve tekrar deneyin.",
   "invalidAddressError": "Adres biçimi geçersiz. Lütfen adresi kontrol edin ve tekrar deneyin.",
   "addressNotFoundError": "Hata: Aradığınız adresi bulamadık. Lütfen adresi kontrol edin ve tekrar deneyin.",
   "loadingTransactionsError": "Hata: İşlemleri yüklerken bir sorun oluştu. Lütfen daha sonra tekrar deneyin.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Eşleşen Sonuçlar",
   "transactionsFound": "{{count}} işlem",
   "showingMaxTransactions": "Son {{count}} işlem gösteriliyor",
-  "maxResultsHint": "Sonuçlar {{count}} ile sınırlıdır. Listeyi daraltmak için filtreler kullanın."
+  "maxResultsHint": "Sonuçlar {{count}} ile sınırlıdır. Listeyi daraltmak için filtreler kullanın.",
+  "waitingForTickTitle": "Tick'in işlenmesi bekleniyor",
+  "waitingForTickDesc": "Bu işlem {{targetTick}} tick'i için planlanmıştır. Ağ o tick'e ulaştığında kullanılabilir olacaktır.",
+  "targetTick": "Hedef Tick",
+  "estimatedWait": "Tahmini bekleme süresi",
+  "tickCheckFailed": "Tick durumu kontrol edilemedi. Lütfen daha sonra tekrar deneyin."
 }
diff --git a/public/locales/vi/network-page.json b/public/locales/vi/network-page.json
@@ -57,6 +57,7 @@
   "hide": "Ẩn",
   "show": "Hiện",
   "transactionNotFound": "Không tìm thấy giao dịch",
+  "invalidTransactionId": "ID giao dịch không hợp lệ. Vui lòng kiểm tra ID và thử lại.",
   "invalidAddressError": "Định dạng địa chỉ không hợp lệ. Vui lòng kiểm tra và thử lại.",
   "addressNotFoundError": "Lỗi: Không tìm thấy địa chỉ bạn đang tìm. Vui lòng kiểm tra và thử lại.",
   "loadingTransactionsError": "Lỗi: Đã xảy ra sự cố khi tải giao dịch. Vui lòng thử lại sau.",
@@ -177,5 +178,10 @@
   "matchingEntities": "Kết quả phù hợp",
   "transactionsFound": "{{count}} giao dịch",
   "showingMaxTransactions": "Hiển thị {{count}} giao dịch gần nhất",
-  "maxResultsHint": "Kết quả bị giới hạn ở {{count}}. Sử dụng bộ lọc để thu hẹp danh sách."
+  "maxResultsHint": "Kết quả bị giới hạn ở {{count}}. Sử dụng bộ lọc để thu hẹp danh sách.",
+  "waitingForTickTitle": "Đang chờ tick được xử lý",
+  "waitingForTickDesc": "Giao dịch này được lên lịch cho tick {{targetTick}}. Nó sẽ khả dụng khi mạng đạt đến tick đó.",
+  "targetTick": "Tick mục tiêu",
+  "estimatedWait": "Thời gian chờ ước tính",
+  "tickCheckFailed": "Không thể kiểm tra trạng thái tick. Vui lòng thử lại sau."
 }
diff --git a/public/locales/zh/network-page.json b/public/locales/zh/network-page.json
@@ -57,6 +57,7 @@
   "hide": "隐藏",
   "show": "显示",
   "transactionNotFound": "未找到交易",
+  "invalidTransactionId": "交易ID无效。请检查ID并重试。",
   "invalidAddressError": "地址格式无效。请检查地址并重试。",
   "addressNotFoundError": "错误：我们找不到您要查找的地址。请检查地址并重试。",
   "loadingTransactionsError": "错误：加载交易时出现问题。请稍后再试。",
@@ -177,5 +178,10 @@
   "matchingEntities": "匹配结果",
   "transactionsFound": "{{count}} 笔交易",
   "showingMaxTransactions": "显示最近 {{count}} 笔交易",
-  "maxResultsHint": "结果限制为 {{count}} 条。请使用筛选器缩小列表范围。"
+  "maxResultsHint": "结果限制为 {{count}} 条。请使用筛选器缩小列表范围。",
+  "waitingForTickTitle": "等待刻度处理完成",
+  "waitingForTickDesc": "此交易已安排在刻度 {{targetTick}}。当网络到达该刻度时将可用。",
+  "targetTick": "目标刻度",
+  "estimatedWait": "预计等待时间",
+  "tickCheckFailed": "无法检查tick状态，请稍后再试。"
 }
diff --git a/src/pages/network/TxPage.tsx b/src/pages/network/TxPage.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 
@@ -8,20 +9,71 @@ import { PageLayout } from '@app/components/ui/layouts'
 import { LinearProgress } from '@app/components/ui/loaders'
 import { useGetTransactionByHashQuery } from '@app/store/apis/query-service'
 import { formatEllipsis } from '@app/utils'
-import { HomeLink, TickLink, TxItem } from './components'
+import { HomeLink, TickLink, TxItem, WaitingForTick } from './components'
+import { useTickWatcher } from './hooks'
 
 function TxPage() {
   const { t } = useTranslation('network-page')
   const { txId = '' } = useParams()
 
-  const { data: tx, isFetching } = useGetTransactionByHashQuery(txId, {
+  const {
+    data: tx,
+    isFetching,
+    isError,
+    error,
+    refetch
+  } = useGetTransactionByHashQuery(txId, {
     skip: !txId
   })
 
-  if (isFetching) {
+  const isLoading = isFetching
+  const isInvalidFormat =
+    isError && error && 'data' in error && (error.data as { code?: number })?.code === 3
+  const isTxNotFound = !isLoading && !isInvalidFormat && !tx
+
+  const refetchTx = useCallback(() => {
+    refetch()
+  }, [refetch])
+
+  const {
+    isWaitingForTick,
+    isTickCheckFailed,
+    targetTick,
+    currentTick,
+    estimatedWaitSeconds,
+    isLoading: isTickWatcherLoading
+  } = useTickWatcher({
+    isTxNotFound,
+    refetch: refetchTx
+  })
+
+  if (isLoading) {
+    return <LinearProgress />
+  }
+
+  if (isInvalidFormat) {
+    return <ErrorFallback message={t('invalidTransactionId')} hideErrorHeader />
+  }
+
+  if (isTickWatcherLoading) {
     return <LinearProgress />
   }
 
+  if (isTickCheckFailed) {
+    return <ErrorFallback message={t('tickCheckFailed')} hideErrorHeader />
+  }
+
+  if (isWaitingForTick && targetTick) {
+    return (
+      <WaitingForTick
+        txId={txId}
+        targetTick={targetTick}
+        currentTick={currentTick}
+        estimatedWaitSeconds={estimatedWaitSeconds}
+      />
+    )
+  }
+
   if (!tx) {
     return <ErrorFallback message={t('transactionNotFound')} hideErrorHeader />
   }
diff --git a/src/pages/network/components/WaitingForTick.tsx b/src/pages/network/components/WaitingForTick.tsx
diff --git a/src/pages/network/components/index.ts b/src/pages/network/components/index.ts
diff --git a/src/pages/network/hooks/index.ts b/src/pages/network/hooks/index.ts
diff --git a/src/pages/network/hooks/useTickWatcher.ts b/src/pages/network/hooks/useTickWatcher.ts
diff --git a/src/store/apis/query-service/query-service.api.ts b/src/store/apis/query-service/query-service.api.ts
diff --git a/src/store/apis/query-service/query-service.types.ts b/src/store/apis/query-service/query-service.types.ts
