bitsnark · njaume · Jun 9, 2025 · Jun 9, 2025
diff --git a/src/components/transaction-tracker/btc-completion-card.tsx b/src/components/transaction-tracker/btc-completion-card.tsx
@@ -3,6 +3,7 @@ import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { getExplorerUrl, truncateAddress } from '@/lib/utils';
 import bitcoinLogo from '@/assets/bitcoin-logo.png';
 import ethLogo from '@/assets/eth-logo.png';
+import { formatConfirmations } from '@/utils/format';
 
 export interface BtcCompletionCardProps {
   amount: string;
@@ -62,7 +63,7 @@ export function BtcCompletionCard({
         <span className="text-[#888888] text-[13px]">Confirmations</span>
         <div className="flex items-center gap-2">
           <span className="text-white text-[13px] font-medium">
-            {confirmations}
+            {formatConfirmations(confirmations || 0)}
           </span>
           <CheckCircledIcon className="w-4 h-4 text-green-500" />
         </div>

diff --git a/src/components/transaction-tracker/btc-transaction-card.tsx b/src/components/transaction-tracker/btc-transaction-card.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { Card } from '@/components/ui/card';
 import { RefreshCw } from 'lucide-react';
 import EthLogo from '@/assets/eth-logo.png';
 import BtcLogo from '@/assets/bitcoin-logo.png';
 import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { getExplorerUrl, truncateAddress } from '@/lib/utils';
 import { InfoField } from './info-field';
+import { formatConfirmations } from '@/utils/format';
 
 export interface BtcTransactionCardProps {
   data: {
@@ -14,7 +14,7 @@ export interface BtcTransactionCardProps {
     recipientAddress?: string;
     reservationTx?: string;
     txid?: string;
-    confirmations?: number | React.ReactNode;
+    confirmations?: number;
     maxConfirmations?: number;
   };
   isStepThree?: boolean;
@@ -28,7 +28,7 @@ export function BtcTransactionCard({
       return (
         <div className="flex items-center justify-center gap-1">
           <span className="text-white text-[12px] font-medium">
-            {data.confirmations}
+            {formatConfirmations(data.confirmations || 0)}
           </span>
           {Number(data?.confirmations) >= Number(data?.maxConfirmations) ? (
             <CheckCircledIcon className="text-green-600 w-4 h-4" />

diff --git a/src/components/transaction-tracker/eth-completion-card.tsx b/src/components/transaction-tracker/eth-completion-card.tsx
@@ -3,6 +3,7 @@ import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { getExplorerUrl, truncateAddress } from '@/lib/utils';
 import bitcoinLogo from '@/assets/bitcoin-logo.png';
 import ethLogo from '@/assets/eth-logo.png';
+import { formatConfirmations } from '@/utils/format';
 
 export interface EthCompletionCardProps {
   amount: string;
@@ -62,7 +63,7 @@ export function EthCompletionCard({
         <span className="text-[#888888] text-[13px]">Confirmations</span>
         <div className="flex items-center gap-2">
           <span className="text-white text-[13px] font-medium">
-            {confirmations}
+            {formatConfirmations(confirmations || 0)}
           </span>
           <CheckCircledIcon className="w-4 h-4 text-green-500" />
         </div>

diff --git a/src/components/transaction-tracker/eth-transaction-card.tsx b/src/components/transaction-tracker/eth-transaction-card.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Card } from '@/components/ui/card';
 import { RefreshCw } from 'lucide-react';
 import EthLogo from '@/assets/eth-logo.png';
 import { CheckCircledIcon } from '@radix-ui/react-icons';
 import { getExplorerUrl, truncateAddress } from '@/lib/utils';
+import { formatConfirmations } from '@/utils/format';
 import { InfoField } from './info-field';
 
 export interface EthTransactionCardProps {
@@ -13,8 +13,8 @@ export interface EthTransactionCardProps {
     recipientAddress?: string;
     reservationTx?: string;
     txid?: string;
-    confirmations?: number | React.ReactNode;
-    maxConfirmations?: number;
+    confirmations: number;
+    maxConfirmations: number;
   };
   isStepThree?: boolean;
 }
@@ -26,9 +26,9 @@ export function EthTransactionCard({
   const renderConfirmations = () => (
     <div className="flex items-center justify-center gap-1">
       <span className="text-white text-[12px] font-medium">
-        {data.confirmations}
+        {formatConfirmations(data.confirmations || 0)}
       </span>
-      {data.confirmations === data.maxConfirmations ? (
+      {data.confirmations && Number(data.confirmations) >= data.maxConfirmations ? (
         <CheckCircledIcon className="text-green-600 w-4 h-4" />
       ) : (
         <RefreshCw className="text-foreground w-4 h-4 animate-[spin_2s_linear_infinite]" />

diff --git a/src/components/transaction-tracker/position-tracker.tsx b/src/components/transaction-tracker/position-tracker.tsx
@@ -45,13 +45,10 @@
    if (!evmPosition?.originalAmount || !bitcoinPrice?.bitcoin?.usd) return '0';
    const usdValue = Number(amount) * bitcoinPrice.bitcoin.usd;
     return usdValue.toFixed(2);
   }, [evmPosition?.originalAmount, bitcoinPrice?.bitcoin?.usd]);
 
-  const maxConfirmations = Number(env.VITE_EVM_CONFIRMATIONS);
-
   const confirmations = useTxConfirmations({
     isActive: open,
-    maxConfirmations: maxConfirmations,
     transactionHash: txHash,
   });
 
@@ -63,18 +60,13 @@
     setShouldPoll(should);
   }, [isPositionCompleted, open]);
 
-  const displayConfirmations = isPositionCompleted
-    ? maxConfirmations
-    : confirmations;
-
+
   const targetConfirmations = useBtcBlockConfirmations({
     isActive: isPositionCompleted,
     blockNumber: position?.targetBlockNumber,
   });
 
-  const displayTargetConfirmations = isPositionCompleted
-    ? env.VITE_BTC_CONFIRMATIONS
-    : targetConfirmations;
+  const displayTargetConfirmations = targetConfirmations;
 
   return (
     <BaseTransactionTracker
@@ -98,9 +90,9 @@
                 amount: amount,
                 recipientAddress: evmPosition.ownerAddress,
                 reservationTx: position?.registrationTxhash || '',
-                confirmations: displayConfirmations,
+                confirmations: confirmations,
                 fiatAmount: fiatAmount,
-                maxConfirmations: maxConfirmations,
+                maxConfirmations: Number(env.VITE_EVM_CONFIRMATIONS),
               }}
             />
           </TransactionStep>

diff --git a/src/components/transaction-tracker/reservation-tracker.tsx b/src/components/transaction-tracker/reservation-tracker.tsx
@@ -55,7 +55,6 @@ export function ReservationTracker({
 
   const confirmations = useTxConfirmations({
     isActive: open,
-    maxConfirmations: maxConfirmations,
     transactionHash: txHash,
   });
 
@@ -72,7 +71,6 @@ export function ReservationTracker({
 
   const targetConfirmations = useTxConfirmations({
     isActive: open && bridgingCompleted,
-    maxConfirmations: maxConfirmations,
     transactionHash: reservation?.targetTxhash,
   });
 

diff --git a/src/hooks/useTxConfirmations.ts b/src/hooks/useTxConfirmations.ts
@@ -1,16 +1,14 @@
-import { env } from "@/config/env";
-import { ContractManager } from "@/services/ContractManager";
-import { useEffect, useRef, useState } from "react";
+
+import { ContractManager } from '@/services/ContractManager';
+import { useEffect, useRef, useState } from 'react';
 
 interface UseTxConfirmationsProps {
   isActive: boolean;
-  maxConfirmations?: number;
   transactionHash?: string;
 }
 
 export function useTxConfirmations({
   isActive,
-  maxConfirmations = env.VITE_EVM_CONFIRMATIONS,
   transactionHash,
 }: UseTxConfirmationsProps) {
   const [confirmations, setConfirmations] = useState(0);
@@ -29,20 +27,15 @@ export function useTxConfirmations({
     const checkConfirmations = async () => {
       try {
         const contractManager = await ContractManager.getInstance();
-        const receipt = await contractManager.publicClient.getTransactionReceipt({
-          hash: transactionHash as `0x${string}`,
-        });
+        const receipt =
+          await contractManager.publicClient.getTransactionReceipt({
+            hash: transactionHash as `0x${string}`,
+          });
         if (receipt) {
-          const currentBlock = await contractManager.publicClient.getBlockNumber();
+          const currentBlock =
+            await contractManager.publicClient.getBlockNumber();
           const confirmations = Number(currentBlock - receipt.blockNumber);
-          setConfirmations(Math.min(confirmations, maxConfirmations));
-
-          if (confirmations >= maxConfirmations) {
-            if (intervalRef.current) {
-              clearInterval(intervalRef.current);
-              intervalRef.current = null;
-            }
-          }
+          setConfirmations(confirmations);
         }
       } catch (error) {
         console.error('Error checking confirmations:', error);
@@ -59,7 +52,7 @@ export function useTxConfirmations({
         intervalRef.current = null;
       }
     };
-  }, [isActive, transactionHash, maxConfirmations]);
+  }, [isActive, transactionHash]);
 
   return confirmations;
-}
+}
diff --git a/src/utils/format.ts b/src/utils/format.ts
@@ -0,0 +1,3 @@
+export function formatConfirmations(confirmations: number): string {
+  return confirmations >= 1000 ? '+1000' : confirmations.toString();
+}