diff --git a/app/app/stream/[id]/page.tsx b/app/app/stream/[id]/page.tsx index 306110c..f0dd421 100644 --- a/app/app/stream/[id]/page.tsx +++ b/app/app/stream/[id]/page.tsx @@ -60,6 +60,7 @@ import { import { explorerUrl } from "@/lib/stellar"; import { useNetwork } from "@/components/providers/network-provider"; import { useAutoWithdraw } from "@/hooks/use-auto-withdraw"; +import { useTokenPrice } from "@/hooks/use-token-price"; import { UnlockChart } from "@/components/streams/unlock-chart"; import { StreamTimeline } from "@/components/streams/stream-timeline"; import { DownloadReceiptButton } from "@/components/streams/download-receipt-button"; @@ -144,6 +145,7 @@ function WithdrawDialog({ }) { const { withdraw, pending, error } = useContract(); const { network } = useNetwork(); + const { usdPrice: xlmPrice } = useTokenPrice("XLM"); const [inputAmount, setInputAmount] = useState(""); const [showFeeEstimate, setShowFeeEstimate] = useState(false); @@ -155,7 +157,7 @@ function WithdrawDialog({ // Calculate estimated fees const estimatedFee = TYPICAL_FEES.withdraw.typical; - const feeBreakdown = calculateFeeBreakdown(estimatedFee); + const feeBreakdown = calculateFeeBreakdown(estimatedFee, xlmPrice ?? undefined); const withdrawFeeHigh = isHighFee( estimatedFee, TYPICAL_FEES.withdraw.typical, @@ -284,10 +286,11 @@ function CancelDialog({ const { cancel, pending, error } = useContract(); const { network } = useNetwork(); const router = useRouter(); + const { usdPrice: xlmPrice } = useTokenPrice("XLM"); const [showFeeEstimate, setShowFeeEstimate] = useState(false); const estimatedFee = TYPICAL_FEES.cancel.typical; - const feeBreakdown = calculateFeeBreakdown(estimatedFee); + const feeBreakdown = calculateFeeBreakdown(estimatedFee, xlmPrice ?? undefined); const cancelFeeHigh = isHighFee(estimatedFee, TYPICAL_FEES.cancel.typical); async function handleCancel() { diff --git a/components/streams/create-confirmation.tsx b/components/streams/create-confirmation.tsx index e32aafd..a1d09ed 100644 --- a/components/streams/create-confirmation.tsx +++ b/components/streams/create-confirmation.tsx @@ -16,6 +16,7 @@ import { shortenAddress, } from "@/lib/stream-utils"; import { calculateFeeBreakdown, TYPICAL_FEES } from "@/lib/fee-utils"; +import { useTokenPrice } from "@/hooks/use-token-price"; import type { TokenInfo } from "@/types/stream"; interface ConfirmationProps { @@ -60,11 +61,17 @@ export function CreateConfirmation({ }: ConfirmationProps) { const rate = formatRate(amountPerSecond, token.decimals, token.symbol); + // Fetch live XLM/USD price for fee USD estimate + const { usdPrice: xlmPrice } = useTokenPrice("XLM"); + // Calculate fee breakdown if estimate is available const estimatedFeeStroops = feeEstimate ? Math.ceil(parseFloat(feeEstimate) * 1e7) : TYPICAL_FEES.createStream.typical; - const feeBreakdown = calculateFeeBreakdown(estimatedFeeStroops); + const feeBreakdown = calculateFeeBreakdown( + estimatedFeeStroops, + xlmPrice ?? undefined, + ); return ( !o && !pending && onCancel()}> diff --git a/lib/fee-utils.ts b/lib/fee-utils.ts index f778815..2fa5b32 100644 --- a/lib/fee-utils.ts +++ b/lib/fee-utils.ts @@ -5,17 +5,17 @@ export interface FeeBreakdown { estimatedUsd?: number; } -const XLM_PRICE = 0.12; // Average XLM price in USD for estimation - /** * Calculate fee breakdown from transaction simulation * @param minResourceFee Minimum resource fee from simulation in stroops - * @param xlmPrice Current XLM price in USD (optional) + * @param xlmPrice Current XLM/USD price. Pass the live value from useTokenPrice; + * omit (or pass undefined) when no price is available and USD + * estimate should be suppressed. * @returns Fee breakdown: base estimate, safety buffer, and total */ export function calculateFeeBreakdown( minResourceFee: number, - xlmPrice: number = XLM_PRICE, + xlmPrice?: number, ): FeeBreakdown { // Apply 15% buffer to ensure inclusion const bufferMultiplier = 1.15; @@ -23,7 +23,8 @@ export function calculateFeeBreakdown( const bufferFee = totalFee - minResourceFee; const totalXlm = totalFee / 1e7; - const estimatedUsd = totalXlm * xlmPrice; + const estimatedUsd = + xlmPrice !== undefined ? totalXlm * xlmPrice : undefined; return { minFee: minResourceFee,