Component

Fee Estimate

Displays provider-calculated transaction fees with an itemized total, network and source context, observed timestamp, refresh, loading, and error states.

Preview

Compiles a real 1-lamport devnet self-transfer message. No transaction is signed or submitted, so no fee is spent.

Fee estimate

Estimated charges for the current transaction message.

Fee not calculated yet

Build the transaction message, then request a fee from your provider.

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/fee-estimate.json

Usage

fee-estimate.tsx

import {
  FeeEstimate,
  type FeeEstimateData,
} from "@/components/uxdotsol/components/fee-estimate";
 
export function TransferFee({
  estimate,
}: {
  estimate: FeeEstimateData | null;
}) {
  return (
    <FeeEstimate
      estimate={estimate}
      onRefresh={() => calculateFeeForCurrentMessage()}
    />
  );
}

Props / Arguments

Name	Type	Default	Description
estimate	FeeEstimateData \| null	undefined	Normalized provider result with total, itemized fees, source, network, and observation time.
status / error	FeeEstimateStatus / Error \| string \| null	inferred / undefined	Controlled request state. A failed refresh can retain the previous estimate without presenting it as fresh.
title / description / emptyTitle / emptyDescription	string	fee guidance	Accessible headings and honest pre-calculation guidance.
refreshLabel / onRefresh	string / () => void	'Refresh estimate' / undefined	Optional provider refresh action, disabled while a real request is pending.
disclaimer / className	string / string	change warning / ''	Custom estimate caveat and outer classes.

Types

Name	Type	Default	Description
FeeEstimateData	{ total; items; network?; source?; updatedAt? }	-	Provider-neutral fee evidence for one transaction message.
FeeEstimateLine	{ id; label; amount; description? }	-	One network, priority, rent, service, or provider fee line.
FeeEstimateStatus	'idle' \| 'loading' \| 'success' \| 'error'	-	Controlled provider request state.