Add integration test for trade panel price preview

src/App.tsx

@@ -9,6 +9,7 @@
 const router = createBrowserRouter(routes);
 
 function App() {
+	useNavigationTiming();
 	useRouteChangeLogging();
 
 	useEffect(() => {

src/components/common/TradeDialog.tsx

@@ -111,6 +111,14 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 		return estimateSellProceeds(keyPriceStroops, currentSupply, parsedAmount);
 	}, [side, keyPriceStroops, currentSupply, parsedAmount]);
 
+	const estimatedTotalStroops = useMemo(() => {
+		if (side !== 'buy' || !Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+			return null;
+		}
+		if (keyPriceStroops == null) return null;
+		return keyPriceStroops * parsedAmount;
+	}, [side, keyPriceStroops, parsedAmount]);
+
 	useEffect(() => {
 		if (process.env.NODE_ENV === 'test') return;
 		if (!open || pricePreviewFailureLogged.current) return;
@@ -246,6 +254,14 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 							className="text-white/45"
 						/>
 					)}
+					{side === 'buy' && estimatedTotalStroops != null && (
+						<div className="text-xs text-white/45 mt-2">
+							Estimated total (approximate):{' '}
+							<span className="font-semibold text-amber-300/90 tabular-nums">
+								{formatDisplayKeyPrice(estimatedTotalStroops)}
+							</span>
+						</div>
+					)}
 					{side === 'sell' && (
 						<div className="text-xs text-white/45 mt-2">
 							{estimatedProceedsStroops != null ? (

src/components/common/__tests__/TradeDialog.buyPricePreview.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TradeDialog from '@/components/common/TradeDialog';
+
+describe('TradeDialog buy price preview', () => {
+	function renderDialog(
+		overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}
+	) {
+		return render(
+			<TradeDialog
+				open={true}
+				side="buy"
+				creatorName="Alice"
+				availableHoldings={10}
+				keyPriceStroops={100_000}
+				onOpenChange={vi.fn()}
+				onConfirm={vi.fn()}
+				{...overrides}
+			/>
+		);
+	}
+
+	it('shows the price preview for quantity 1', () => {
+		renderDialog();
+
+		expect(screen.getByTestId('trade-dialog-amount')).toHaveValue('1');
+		expect(screen.getByText('Estimated total (approximate):')).toBeInTheDocument();
+	});
+
+	it('updates the price preview when quantity changes to 2', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '2' } });
+
+		expect(screen.getByText('Estimated total (approximate):')).toBeInTheDocument();
+		expect(screen.getByText('0.02 XLM')).toBeInTheDocument();
+	});
+
+	it('does not show the price preview when quantity input is empty', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '' } });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+
+	it('does not show the price preview when quantity is zero', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '0' } });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+
+	it('does not show the price preview when keyPriceStroops is not provided', () => {
+		renderDialog({ keyPriceStroops: null });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+});