Add sell proceeds estimate helper

src/components/common/TradeDialog.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 import { formatNumber } from '@/utils/numberFormat.utils';
-import { formatDisplayKeyPrice } from '@/utils/keyPriceDisplay.utils';
+import { formatDisplayKeyPrice, estimateSellProceeds } from '@/utils/keyPriceDisplay.utils';
 import PercentageBadge from '@/components/common/PercentageBadge';
 import NetworkFeeHint from '@/components/common/NetworkFeeHint';
 import { TRADE_FEE_ESTIMATE } from '@/constants/fees';
@@ -26,6 +26,8 @@ export interface TradeDialogProps {
 	availableHoldings: number;
 	/** Per-key price in stroops, shown on the buy confirmation step. */
 	keyPriceStroops?: number | null;
+	/** Current key supply for estimating sell proceeds. */
+	currentSupply?: number | null;
 	onOpenChange: (open: boolean) => void;
 	onConfirm: (amount: number) => Promise<void> | void;
 	isSubmitting?: boolean;
@@ -37,6 +39,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 	creatorName,
 	availableHoldings,
 	keyPriceStroops,
+	currentSupply,
 	onOpenChange,
 	onConfirm,
 	isSubmitting = false,
@@ -78,6 +81,13 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 		{ unit: TRADE_FEE_ESTIMATE.UNIT }
 	);
 
+	const estimatedProceedsStroops = useMemo(() => {
+		if (side !== 'sell' || !Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+			return null;
+		}
+		return estimateSellProceeds(keyPriceStroops, currentSupply, parsedAmount);
+	}, [side, keyPriceStroops, currentSupply, parsedAmount]);
+
 	return (
 		<Dialog
 			open={open}
@@ -177,6 +187,20 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 							className="text-white/45"
 						/>
 					)}
+					{side === 'sell' && (
+						<div className="text-xs text-white/45 mt-2">
+							{estimatedProceedsStroops != null ? (
+								<>
+									Estimated proceeds (approximate):{' '}
+									<span className="font-semibold text-amber-300/90 tabular-nums">
+										{formatDisplayKeyPrice(estimatedProceedsStroops)}
+									</span>
+								</>
+							) : (
+								<>Estimated proceeds unavailable</>
+							)}
+						</div>
+					)}
 				</div>
 
 				{/*

src/pages/LandingPage.tsx

@@ -1414,6 +1414,7 @@ function LandingPage() {
 				creatorName="Alex Rivers"
 				availableHoldings={featuredHoldings}
 				keyPriceStroops={resolveCreatorKeyPriceStroops(featuredCreator)}
+				currentSupply={featuredCreator.creatorShareSupply}
 				isSubmitting={tradeSubmitting}
 				onOpenChange={setTradeDialogOpen}
 				onConfirm={handleConfirmTrade}

src/utils/keyPriceDisplay.utils.ts

@@ -22,6 +22,31 @@ export function resolveCreatorKeyPriceStroops(
 	return null;
 }
 
+/**
+ * Estimates sell proceeds from current key price, supply, and sell quantity.
+ * Returns null if estimate cannot be computed.
+ */
+export function estimateSellProceeds(
+	keyPriceStroops: number | null | undefined,
+	currentSupply: number | null | undefined,
+	sellQuantity: number
+): number | null {
+	if (
+		keyPriceStroops == null ||
+		!Number.isFinite(keyPriceStroops) ||
+		currentSupply == null ||
+		!Number.isFinite(currentSupply) ||
+		sellQuantity <= 0 ||
+		!Number.isFinite(sellQuantity)
+	) {
+		return null;
+	}
+
+	// For estimate purposes, calculate proceeds as key price multiplied by quantity
+	const estimatedProceeds = keyPriceStroops * sellQuantity;
+	return estimatedProceeds;
+}
+
 /**
  * Formats a stroop amount for display as XLM, falling back to stroops when the
  * XLM value would round to zero at the default display precision.