From 4d68a02fcbc401b636c71378e3f433b782b8969e Mon Sep 17 00:00:00 2001 From: Nahuel Jaume Date: Mon, 9 Jun 2025 12:31:20 -0300 Subject: [PATCH] confirmations value tracker --- .../btc-completion-card.tsx | 3 +- .../btc-transaction-card.tsx | 6 ++-- .../eth-completion-card.tsx | 3 +- .../eth-transaction-card.tsx | 10 +++--- .../transaction-tracker/position-tracker.tsx | 16 +++------- .../reservation-tracker.tsx | 2 -- src/hooks/useTxConfirmations.ts | 31 +++++++------------ src/utils/format.ts | 3 ++ 8 files changed, 31 insertions(+), 43 deletions(-) create mode 100644 src/utils/format.ts diff --git a/src/components/transaction-tracker/btc-completion-card.tsx b/src/components/transaction-tracker/btc-completion-card.tsx index 746a927..2388dee 100644 --- 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({ Confirmations
- {confirmations} + {formatConfirmations(confirmations || 0)}
diff --git a/src/components/transaction-tracker/btc-transaction-card.tsx b/src/components/transaction-tracker/btc-transaction-card.tsx index 8834c6b..6649ece 100644 --- a/src/components/transaction-tracker/btc-transaction-card.tsx +++ b/src/components/transaction-tracker/btc-transaction-card.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Card } from '@/components/ui/card'; import { RefreshCw } from 'lucide-react'; import EthLogo from '@/assets/eth-logo.png'; @@ -6,6 +5,7 @@ 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 (
- {data.confirmations} + {formatConfirmations(data.confirmations || 0)} {Number(data?.confirmations) >= Number(data?.maxConfirmations) ? ( diff --git a/src/components/transaction-tracker/eth-completion-card.tsx b/src/components/transaction-tracker/eth-completion-card.tsx index b6d58ce..9e3b4bf 100644 --- 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({ Confirmations
- {confirmations} + {formatConfirmations(confirmations || 0)}
diff --git a/src/components/transaction-tracker/eth-transaction-card.tsx b/src/components/transaction-tracker/eth-transaction-card.tsx index a6b9527..4cdb995 100644 --- 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 = () => (
- {data.confirmations} + {formatConfirmations(data.confirmations || 0)} - {data.confirmations === data.maxConfirmations ? ( + {data.confirmations && Number(data.confirmations) >= data.maxConfirmations ? ( ) : ( diff --git a/src/components/transaction-tracker/position-tracker.tsx b/src/components/transaction-tracker/position-tracker.tsx index a35177f..f24b138 100644 --- a/src/components/transaction-tracker/position-tracker.tsx +++ b/src/components/transaction-tracker/position-tracker.tsx @@ -47,11 +47,8 @@ export function PositionTracker({ 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 @@ export function PositionTracker({ 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 ( diff --git a/src/components/transaction-tracker/reservation-tracker.tsx b/src/components/transaction-tracker/reservation-tracker.tsx index c47e8fa..fb7a374 100644 --- 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 index 8655da8..25de9da 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/utils/format.ts b/src/utils/format.ts new file mode 100644 index 0000000..6a052d0 --- /dev/null +++ b/src/utils/format.ts @@ -0,0 +1,3 @@ +export function formatConfirmations(confirmations: number): string { + return confirmations >= 1000 ? '+1000' : confirmations.toString(); +} \ No newline at end of file